Page MenuHomePhabricator

Use more individual icon than pencil
Open, Needs TriagePublic

Description

The current icon (pencil) rECMI/resources/images/cm-on.png etc. (view) looks very similar to OOjs UI icon edit and that is confusing in GUI and menu, e. g. VisualEditor context.

Please create a distinguishing logo.

@Perhelion might help and could create a basic SVG when agreed upon heraldry.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 25 2017, 10:25 AM

Note: I at least OPPOSE any mentions of "<>" as that really conflicts with SyntaxHighlight , NO MORE Geshi or Pygments hinting here

It is agreed that one conflict shouldn’t be replaced by another one.

  • All icons in OOJS gallery are not appropriate, since they might occur as well somewhere.
  • Simple things like [[]] and {{}} have been used for decades now, with any meaning.

What about coloured lines in Tetris style?

  • Colours remind hiliting elements.
  • If inactive, greyed out with 50 shadows.
Niharika added a subscriber: Niharika.

There has a lot of debate around the icons already. See T164441: Replace CodeMirror icons with new icons

We were using [[ ]] for the test release but there were several complaints about that not being a meaningful icon and people easily happened to miss it because it was unclear what that would do.

At this point, since the extension has been rolled out across wikis and is being used by a lot of users already, it's not possible to make significant changes to the icon as it'd leave those people confused by the change.
We can attempt to improve the pencil icon though but most likely we'd have to wait for more people to complain about it.

PerfektesChaos added a comment.EditedAug 25 2017, 5:36 PM

Interesting, the same discussion three months ago. I came in two days ago.

A unique, distinguished logo/icon is needed for new functionality.

All the OOJS and [] and {} and <> things are burnt. They are associated with other effects since 2002 etc.

Today I learnt that the pencil is a marker. Not really a visible difference.

My recent suggestion has been to fill the square with coloured lines, the Tetris way, and the marker might be placed on top for a transition period. Perhaps fading out one day after community used to look at the colours. 50 shades of grey when inactive.

The pencil/marker looks exactly as the edit button at Flow etc. – not really intuitive, I would expect writing rather than highlighting. There is a box at the upper right corner of this page, and the first line is headed by – a pencil. And which functionality is triggered?

If I shall be able to distinguish between pencil and marker the pen needs to become much broader than today. However, there is a cultural problem: In some countries text markers might have been not very common, and young generation did not experience paper work with text markers, nor did they ever touch a circular dial plate on a phone device.

DannyH added a subscriber: DannyH.Sep 1 2017, 8:55 PM

@PerfektesChaos I agree that the current highlighter icon is not very distinct from the pencil, and that the connection between a highlighter pen and the syntax highlighting feature is not a perfect metaphor.

The original icon that the CodeMirror extension was using was a colored "spray" of circles, which you can see in the following screenshot. The inactive state was black-and-white.

https://upload.wikimedia.org/wikipedia/commons/2/25/Test_pride_and_p.png

The design team felt that that icon was too different from the rest of the icons in the toolbars and menus. They asked us to use OOJS style icons, and worked with us to find one that would work.

The second version was a pair of curly brackets, which, as you said, is an overused icon with no real meaning anymore.

The highlighter pen was the third version of the icon, and one that we arrived at as a compromise. You can see the discussion on T164441: Replace CodeMirror icons with new icons.

I think the design team would object to a colorful Tetris-lines icon for the same reason that they did for the original, colorful icon. I agree with you that this icon is not the perfect fit for this feature, but we spent a few months talking about this, and we don't really have any interest in starting over again.

If someone has a great idea for an icon that would describe this feature at a glance and fit in visually with the OOJS UI icon set, then I'd be very happy to take a look, but it's not a quest that our team can spend any more time on. Sorry.

Dvorapa added a comment.EditedSep 1 2017, 9:25 PM

And what if the pencil icon would be just changed a little to a highlighter icon with looong drawed line like this:


(the line even longer in order to distinguish this icon from pencil)

This is an unresolvable conflict.

  • The OOJS-UI icon set has been designed for certain purposes.
  • Hiliting is not among them.
  • Every existing icon in OOJS has a meaning in its own right, and will be interpreted by users in that way.
  • Every double-re-using of icons with a deliberate meaning necessarily leads to an inacceptable situation.
  • Design team failed and made a mess of usability, while pretending to make functionality clear and obvious.

@Dvorapa: I am afraid this is not self-explaining and obvious enough, and stll looks like a pencil or signature when at button size.

I asked my fellows to suggest a coloured icon, might arrive next days.

  • New functionality – new icons.
  • Never re-use icon set with deliberate meaning for entirely other things.
  • Each icon needs to be quite different from all siblings; no similar icons with a few distinguishing pixels for other purpose.

@PerfektesChaos: VisualEditor/OOJS-UI doesn't support multi-colored icons. The icon has to be OOJS-UI since we want to be able to load syntax highlighting in the new Wikitext editing mode of VisualEditor as well. So in other words, the icon has to be monochrome (unless we want different icons in different editors).

matmarex added a subscriber: matmarex.EditedSep 5 2017, 11:09 PM

(drive-by comments)

  • OOUI could support colored icons, but so far the design decision was not to use them. The main problem would be with generating the blue/red/white "progressive"/"destructive"/invert variants of them. However, greyscale icons should be possible, if that helps (by using opacity/transparency in the SVG image, rather than grey color).
  • A highlighter pen icon in general doesn't sound like a great metaphor. While a "highlighter" for "syntax highlighting" works in English, it wouldn't in other languages. For example, in Polish this type of pen is called a "marker" (we stole that one from English), while "syntax highlighting" is "kolorowanie składni" (literally "syntax coloring"). [rant: I keep seeing these issues in icons. Just don't do visual puns. The silliest one I encountered was a spaceship for a 'betaLaunch' icon. Grumble.]

@matmarex Side note: The metaphor is not in its name but in its usage. Highlighter or marker colors text on paper and MediaWiki-extensions-CodeMirror colors text too, but on computer. But I agree this icon is not really so much different from pencil and not really unique at all.

Here some examples how it could look like (after suggestions by @PerfektesChaos):


The other suggestions are a overlay combination with the pencil.

looks like a virus :)

@matmarex: CodeMirror performs a very similar function to what highlighters/markers do: it visually highlights text with color. I admit it's not perfect, but I haven't heard any better suggestions yet. Maybe it could be made more visually distinct though (and closer to the OOUI icon).

PerfektesChaos added a comment.EditedOct 2 2017, 6:35 PM

Thank you, Perhelion.

Some general remarks:

  • The OOUI icon set is providing general purpose icons which current meaning depends on context. If there is a gear wheel it means some kind of preferences or options for the current environment. If there is a pencil it is some way to change the current value. If there is a trash bin I can delete the current thing.
  • The icon for the code marker package is an individual icon for an individual software product. The icon should have the same size like all other icons in a tool bar, but there is no need to be part of the global icon collection. The doumentation pages of this individual software should show the same logo, at least in WMF range.
  • The mental link between a marker pen and syntax highlighting requires people to know about marker pens. Young people may be far off from old fashioned paperwork, they should not paint their laptop screens with neon pens. In many countries marker pens may be less common than for some business people or U.S. students.
  • Still all marker pen icons do look to me like pencils, and the headline of this task is describing the problem: I cannot distinguish edit icons from syntax highlighting.

The OOUI icon set is providing general purpose icons which current meaning depends on context...

Note that we have to use an OOjs-UI icon for syntax highlighting within the 2017 Wikitext editor. That interface is constructed using OOjs-UI, so the only choices we have are the icons in https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui/images/icons. Of those icons, the highligher icon seemed like the best fit. It also seemed like a good idea to use a similar icon in the regular old Wikitext editor, so that editors migrating from one editor to the other might associate them both with the same feature. Technically, we could use a multicolor icon in the regular old Wikitext editor, but it would have to have a discernible on/off state. Perhelion's suggestions are a nice idea, but they look a bit like a bar chart to me.

DannyH added a comment.EditedOct 3 2017, 11:29 PM

I said last month: "If someone has a great idea for an icon that would describe this feature at a glance and fit in visually with the OOJS UI icon set, then I'd be very happy to take a look."

@Perhelion, I don't think that the icon you made describes the feature; I'm not sure what it's supposed to represent. It also doesn't fit in with the existing icon set.

I'm going to close this ticket. I agree that the existing icon is imperfect, but it's the best we have available, and I don't want to waste people's time creating icons that we're not going to use.

Perhelion added a comment.EditedOct 4 2017, 3:04 PM

Note: I at least OPPOSE any mentions of "<>" as that really conflicts with SyntaxHighlight , NO MORE Geshi or Pygments hinting here

I OPPOSE this, as in real there is no conflict, in the end it is visual nearly the same thing. So it is also suggestive to have a SIMILAR icon. <> is also used as OOjs icon for the JS codeeditor.
I suggest an icon with:

  1. </> (as this is the commonest icons for code highlight) http://www.free-icons-download.net/images/code-icons-75328.png
  2. <|> this shows also very effectively the mirror (also a stylized c for code)
  3. CM (secondary) simply call the thing by the name
  4. [...]
  5. maybe a combination with the existing pencil (marker pen)

(@PerfektesChaos and I know all the OOjs icons, because we created the https://commons.wikimedia.org/wiki/OOjs_UI_icons)

! In T174145#3652265, @kaldari wrote:
Note that we have to use an OOjs-UI icon for syntax highlighting within the 2017 Wikitext editor. That interface is constructed using OOjs-UI, so the only choices we have are the icons in https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui/images/icons.

I know a little about OOjs-UI and it seems to me that there is an opportunity (maybe not documented) to use any icon (I mean that not only icons in the set).

Perhelion added a comment.EditedOct 4 2017, 4:07 PM

I agree.
Here the promised other icon suggestions:

Perhelion added a comment.EditedOct 4 2017, 4:39 PM

More suggestions only combine existing OOjs icons:

! In T174145#3652265, @kaldari wrote:
Note that we have to use an OOjs-UI icon for syntax highlighting within the 2017 Wikitext editor. That interface is constructed using OOjs-UI, so the only choices we have are the icons in https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui/images/icons.

I know a little about OOjs-UI and it seems to me that there is an opportunity (maybe not documented) to use any icon (I mean that not only icons in the set).

Yes, but the 2017 Wikitext editor enforces monochrome icons. So we can't have colored icons, for consistency.

We have almost 5000 users using this feature on enwiki alone. I don't think it's worth risking confusing all those people by changing the icon, just to satisfy a few.

DannyH closed this task as Declined.Oct 4 2017, 6:09 PM

Sorry, I said that I was closing this yesterday, and then didn't actually close it. @Perhelion, I really appreciate your willingness to help. It's really hard to indicate that something is being colored using a monochrome icon.

There is one that you posted, which I think is clever -- the highlighter icon touching the brackets, as if it's coloring them in. But shrunk down to the size it needs to be (somewhere around 25px), I don't think that comes across very well. I think we're going to keep using the icon that we're using, and I don't want to waste your time and creativity on something that I don't think is likely to change. Thanks for sharing your work with us.

Restricted Application removed a subscriber: Liuxinyu970226. · View Herald TranscriptOct 4 2017, 6:09 PM

FYI you can override the icon for yourself or on your wiki using the CSS class .oo-ui-icon-highlight, which is given the .oo-ui-image-progressive class when active.

Just a little side note: I like the last four @Perhelion ideas, but in case of 25px icons ... maybe just one bracket would do:

}/

("/") is the pencil here, I don't have a time to make svg version, so just imagine...

thiemowmde reopened this task as Open.Aug 29 2018, 5:17 PM

Instead of bothering you with another duplicate of this ticket, I'm going to reopen it, because I find the icon heavily misleading and actually stressful.

See, I just can't find the syntax highlighting feature when it is hidden behind such a generic, misleading icon. I know the feature must be there because it was announced, but I always find me searching for it. What I see instead is this:

See, I don't want to "cut" anything from the wikitext. What I want is colored wikitext, a.k.a. syntax highlighting. I assume the icon is meant to resemble a text marker, but this generic rectangle is to far away from how a text marker actually look like. I did an image search for existing "syntax highlighting" symbols, and considering the requirement for it to be black and white, this is the best I came up with (not from Google, but an original creation by me, feel free to use it):

Did the UI-Standardization team had a chance to look at this? Maybe a text button is easier than struggling to find some universally understood symbolism that can act as a stand-in for a concept as complex as "syntax highlighting"?

Perhelion added a comment.EditedSep 5 2018, 11:37 AM

Instead of bothering you with another duplicate of this ticket, I'm going to reopen it, because I find the icon heavily misleading and actually stressful.

I totally agree with that.

There is more annoying accordance with some other old usual icons, similar to any signing feature.

Also, the very similar editor switch icon could be replaced by a cut mix from Visual and Source editing.

The origin for the suggestion for this icon was clear better T164441#3280047 (from @kaldari). It has a marker line. So I suggest this icon:

Niharika moved this task from Archive to Untriaged on the Community-Tech board.Oct 1 2018, 10:08 PM