Page MenuHomePhabricator

Refined WikimediaUI icons proposal

Authored By
Volker_E, Oct 10 2017
Referenced Files
F16628574: 2018-04-03_14.44.06.png
Apr 3 2018, 12:22 PM
F15980430: image.png
Mar 23 2018, 2:05 AM
F15962940: unClip.svg
Mar 22 2018, 1:06 PM
F15962939: clip.svg
Mar 22 2018, 1:06 PM
F15953484: image.png
Mar 21 2018, 11:56 PM
F12238765: Unbenannt-1.png
Jan 4 2018, 9:05 AM
"Like" token, awarded by xSavitar."Doubloon" token, awarded by sr229."Mountain of Wealth" token, awarded by Liuxinyu970226."Mountain of Wealth" token, awarded by Pachristo."Like" token, awarded by Jdforrester-WMF."Mountain of Wealth" token, awarded by Volker_E.

Mock History

Current Revision188

Mock Description

WikimediaUI icons, refined and aligned in OOUI's arrangement, see current icon demos. See T177432: Unify and refine WikimediaUI icon set for principles leading to this proposal.

Note: Pink is the before state/black the proposed overhaul.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Some RTL comments:

  • The "document with an arrow" icon (the first one from the left in the second row) may have to be mirrored. What is it exactly? Undo?
  • The "book" icon (the second in the third row) may be nice to mirror, but it's a very minor thing.
  • The "signature" icon (the first in the third row under Alerts) may have to be mirrored. (Oh, a long time ago I very naïvely thought that we won't have signatures by 2018...)
  • The three bubble icons (the third row under Alerts) should probably be mirrored. With the current way in which Echo works, and which, AFAIK, is not changing any time soon, they appear next to actual alerts' content and the bubble must point to the text correctly.
  • The question mark icons must either not be mirrored at all, or they must be mirrored only in the languages where it's appropriate. It's definitely not appropriate in Hebrew and Yiddish. It is probably appropriate in Arabic. I'm not sure about Persian, Aramaic, Divehi, Pashto, and other RTL languages.

Here is my notes RTL-wise

Inline Comments

This needs to be mirrored for RTL languages

This needs to be mirrored for some RTL languages like Persian

This and all other icons that look like an article with image on right needs to be mirrored for RTL languages (in RTL wikis, images are on the left)

Liuxinyu970226 added inline comment(s).
Inline Comments

What's differents between this and "文A" icon?

Umm I can't edit my comment above, but if no differents, why don't we merge both?

What's differents between this and "文A" icon?

The first is the signature icon and 文A is the language icon.

@Amire80 @Ladsgroup @Mooeypoo Integrating your first-hand feedback and asking some more at another round of mockups…

Inline Comments

RTL is missing!

RTL is missing!

Is RTL missing?

RTL is missing!

RTL is missing!

Any RTL objections here?

RTL should be mirrored?

Printer should be fine not to be mirrored?

RTL 'editUndo' is missing!

How is naming of alignLeft in RTL langs?

RTL Calendar special treatment should not be necessary, correct?

language RTL necessary?

searchCaseSensitive RTL necessary?

We should probably RTL mirror it, for better layout alignment

modifiers mirrored in RTL?

modifiers mirrored in RTL?

RTL necessary?

  • Megaphone: probably should be flipped.
  • Printer: OK if not flipped.
  • "How is naming of alignLeft in RTL langs?" - I don't think I understand the question... If it's about how these buttons are named on the user-visible labels, then they are the same as in LTR languages because these are actual physical sides, and the appearance of the lines in them is supposed to be the same.
  • Calendar: This icon doesn't need flipping. There are some RTL considerations with calendars, but not here.
  • Language icon (文A) doesn't need flipping.
  • Case sensitive text doesn't need flipping. It's not relevant for most RTL alphabets anyway (except Adlam, which was recently admitted into Unicode, but for now it's very rarely used. I do look forward to its appearance on icons some day in the future.)
  • Puzzle piece: yes, possibly should be mirrored, for purely esthetic reasons. It's not a major question of usability. Depends on the environment. Not high-priority.
  • Plus and Lock modifiers should probably be mirrored.
  • Folded map probably doesn't need mirroring. As with puzzle, a purely esthetic issue, not a matter of usability.
  • The check mark is better be flipped for RTL langs.

Thanks @Amire80 and @Ladsgroup! Very helpful.
@Amire80, we don't want to just provide the must-haves here, but also shine with a harmonious and pleasant as possible interface here. So your beyond usability comments are welcome!

For my understanding, I've quickly searched for checkmarks in Arabic but haven't found websites with mirrored ones, exemplified Emirates Airlines:

Unbenannt-1.png (160×421 px, 8 KB)

Where would mirrored checkmark apply?

There is a disruptive, inharmonious text-indicator size disparity with current indicator carets. I propose not to update them in the first round of patch sets connected to T177432 starting with

T184313 caret indicator after M229 - OOjs UI Demos 2018-01-05.png (86×282 px, 4 KB)
Filed T184313 for it.

I feel like the colors would need to be a little soft as the current pallette seems too sharp on the eyes. I might suggest a better color but it may end up too bland

@sr229 Thanks for your inputs!
Notice, that we're providing monochromatic icons as unifiying principle, easy base to modify from and for leaner code reasons (SVG defaults to black on paths and fillings).
Nevertheless, in none of our current products we're using black as default color, in OOUI for example the icons are aligned to the surrounding text which defaults to #222 – a dark grey. We're overwriting the default colors per opacity and other measurement on a product-specific base

@Volker_E That's nice to know, I was referring to the colored icons (not the black ones as I believe this would improve readability) since they're a bit too sharp. I suggest a softer pallete for them. #ef3228 might be a good color

@sr229 If you refer to the blue (in Accent50 also referred to as “Progressive”) or red (in Red50, also referred to as “Destructive”) please see “Colors” section of our Style Guide for further explanation on contrast necessities behind them.

@Volker_E I added a inline comment that would fit Red50 best IMHO

Inline Comments

This doesn't look like Red50 at all

@sr229 From the description above: ”Note: Pink is the before state/black the proposed overhaul.“
Pink are the icons before the overhaul.

Charlie_WMDE added inline comment(s).
Inline Comments

I welcome the addition of the light bulb very much as it could fill the need for an information icon that is language independent and not Latin based.

That being said I think there's still a discussion to be had on whether that should be universally applied on all wikis which you can find here: T178568

I'd be very interested in sparking up that conversation again and get some more opinions and insight into the topic.

@Charlie_WMDE Great, that 'lightbulb' helps you too. It's already part of our library OOUI, see 'interactions' pack.
The discussion at T178568 seemed missing information from “Stockholm workshop“. We need better evidence of which way is best useful and acceptable, happy to hear more inputs there.

Inline Comments

UX-Wise this would look confusing IMO, why not just use one common symbol?

I would like to hear about the reason having individual symbols regarding RTL

@sr229 Not sure what you are referring to? Do you mean this would be confusing in right-to-left (RTL) languages like Hebrew? If so, I can ensure, that it is the correct way. Please see OOUI's RTL tech demo for an example application of the icons before the overhaul:

Sorry if this is not constructive, but looking at these icons it really feels like the previous version had a distinctive vibe to it that made the whole icon pack ‘click’ in a way (repeated details like border radii in some places or a ‘page’ icon that looks like a page) and new version is so bland :-( I don’t mean it in a bad way, but seems like there is a lot less commonness across the new icon pack. I’ll probably accustom to it anyway, but its sad that unique details of previous OOjs UI icons had to go away.

Hi @stjn, upfront, it's hard to reply to such comment. Throughout this process we've really cared to integrate feedback and come up with solutions aimed at pleasing all of our users.
I'd like to take the chance and try to show, why the distinctive vibe wasn't so much of _one_ distinctive vibe that actually failed to scale as resource for a unique look & feel of our products, be it VisualEditor, MediaWiki core or MobileFrontend/MinervaNeue:
To begin with, the old icons have often been designed with just a single use case in mind. Let's take for example 'upload' icon which was meant to be used in SelectFileWidget with drop target. Creators of that icon haven't had convincing guidelines so it could happen that the icon works in exactly the original usage location but fails in another one (think some Special:Page with an upload icon outside SelectFileWidget). A few of the major shortcomings, that we've tried to address with the set following our new icon guidelines:

  1. The canvas size was 24px x 24px, but the icons within had complete different padding and their width ranged from 13px to 19px, making it extra hard for developers to correctly position them consistently. You can still see such varying and worrying example of two icons in Special:RecentChanges with 'trash' and 'bookmark'. There's also F14365552 making this even more explicit.
  2. The icons varied widely in detail. Giving an inharmonious impression if two of those are side-by-side. We are now reducing to the essential form.
  3. We've made large advancement in RTL language speaker support.
  4. They've varied in stroke width. Similar to point 2. resulting in weird contextual appearance.
  5. A feature – that I personally first saw as unique and valuable – the dropped rounded corner of some strokes failed strongly as useful guideline. The 'x' 'close' icon had it originally, but on two sides, the 'clear' icons couldn't have it as they were inverted and smaller. The 'search' magnifying glass had it, but mislead users. It's not generalizable as rule and if applied strictly just results in confusing icons.

Hope that brings some clarity in our ideas and conclusions resulting in above.

@RHo I'm still concerned about 'bookmark' being oversized –

image.png (235×244 px, 12 KB)

Hey @Volker_E - the bookmark icon is within the icon guidelines for tall rectangular shapes, but in context agree it is looking chunky in context. Here's some slllliiiightly smaller versions:

  • The Question mark - in Arabic-script languages (Farsi, Urdu, Modern Arabic...) it's mirrored
  • Bell 🔔 and language 文A icons, I know everyone can guess what they mean. But, the Wiktionary logo was changed from "W" to one with nine different-language characters, more like the Wikipedia logo. People react better to familiar signs. here here and here we can see examples of language icons. For notifications, a "sound" icon - like this concept - is universally more familiar. It's harmonious with other non-real objects like the speech bubbles icon for alerts.
  • The checkmark is strangely okay to this right-handed Arabic Wikipedia user and doesn't need mirroring
  • The open book icon, I share Amire80's feeling, that it looks better mirrored

I am not sure that this appearance is cool.

2018-04-03_14.44.06.png (90×184 px, 6 KB)

Inline Comments

per volker should have a RTL counterpart

Inline Comments

needs RTL?

needs RTL

RTL one please

RTL needed?

RTL needed?

Anyway, I wonder if this entire Pholio page should have a vertical-writting fork per T353 or not?

@Iniquity Thanks for your inputs, we'll follow-up here later.
@Liuxinyu970226 Thanks for the questions, answers below:

  • All history related (circled arrow) icons represent a clock and those don't need to be mirrored
  • Both key and lock are real world objects (similar to the pen), and as right-handed people are dominating, so they do in RTL languages. Meaning the key is for most people in the right hand. Sorry left-handed folks!
  • 'help' icon is already provided as patch, update here follows
  • check all doesn't need RTL similar to checkmark, see for example Zack's comment above.

To your vertical-writing question: We might revisit icons with vertical-writing languages (if there's evaluated need) when the other technicalities are moved forward.

Closing this mock after successful rollout of the icons.