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.
- 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.
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:
Where would mirrored checkmark apply?
@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
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.
@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: https://doc.wikimedia.org/oojs-ui/master/demos/?page=toolbars&theme=wikimediaui&direction=rtl&platform=desktop
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:
- 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.
- 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.
- We've made large advancement in RTL language speaker support.
- They've varied in stroke width. Similar to point 2. resulting in weird contextual appearance.
- 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.
- 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
- 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.