Wikimedia Usability Initiative

Opinion Icons

  • To discuss the Vector skin or anything else go to Talk:Prototype.
  • To discuss the current Toolbar go to Toolbar.

For the Babaco Design we consider to create new icons for the toolbar:

  • to have more comprehensible icons (for bold and italic for example)
  • to have icons that will be in a line with the website design

So at the moment there are 3 questions where we need your opinion about, but feel free to say anything about icons on this page.

Bold and italic

1.  

  • In Acai we used the GNOME Icons.
  • This is not bound to a specific language. "a" just represents any letter.

2.  

  • These letters make more sense ("b"=bold "i"=italic)
  • This might not be comprehensible for non english speakers.
  • Or maybe it is being used so much that it is kind of universal.

What do you think? Are there any people from non english speaking countries?

Comments

(Please post your comments here)

I feel strongly that names of cities and countries should be used in their original languages (in other countries) (e.g., Deutschland, not Germany nor Allemagne nor Germania nor Alemanha; France, not Frankreich nor Francia; España, not Spain nor Espagne nor Spagna; Napoli, not Naples nor Neapel; Venezia, not Venice nor Venedig nor Veneza).

Icons instead should be "universal" : we should not use "B" (for "bold") and "I" (for "italic") in English; nor, in French, "g" (for "Gras") and "i" (for "Italique"); nor, in German, "F" (for "Fett") and "K" (for "Kursivschrift"); nor, in Italian, "g" (for "grassetto") and "c" (for "corsivo").

That leaves us with Wikipedia's "universal" icon as explained:

  • In Acai we used the GNOME Icons. * This is not bound to a specific language. "a" just represents any letter.

We need this icon to be simple and logical: as an artist, I feel that the italic "a" is pretty nice and clear, but I really do not like the design of the bold "a"... especially because it looks more like an "Inline effect" or "outline", than "bold". Improving the "a"s icon is easy enough. User: Siamodiversi 15 September 2009. 2009.09.15

Note that for the classic toolbar, we use B and I icons for bold/italic. Some months ago we introduced localized variants of them (and some others), which you can under skins/common. It's easier not to maintain more icon variants, of course... ;) --Brion VIBBER 04:22, 10 July 2009 (UTC)[reply]

I ve been talking to two chinese students today. They said that even though they know b and i from chinese-software they didn't know the meaning b="bold" and i="italic". So they said that it makes no difference if the letters are b and i or a and a, since the letter actually are bold and italic. Than I asked a french student, who didn't know b=bold and i=italic and was very confused about the icons. He said he would prefere a and a. Than I asked two german students, they knew the meaning of b and i, even though the letters f and k are used in german.

Nevertheless all of them said, that the current a and a icons are confusing, because both letters are in different typefaces. It should rather be the same typeface in bold and italic.--Juxn 07:54, 10 July 2009 (UTC)[reply]


The best thing would be to have different letter for each language. German: F and K, English: B and I and so on. People find what they are used to and don't get confused. I'm not used to the icons that are currently used and had to think about their meanings. As Brion mentioned above localized variants are alredy possible. -Eneas 11:46, 10 July 2009 (UTC)[reply]

By the way, I'm missing the signature button on discussion pages. Couldn't you add this icon because it's used quite often? -Eneas 11:46, 10 July 2009 (UTC)[reply]
I will..--Juxn 13:17, 10 July 2009 (UTC)[reply]
In Swedish software F (Fet) and k (kursiv) is commonly used. Ainali 21:00, 27 January 2010 (UTC)[reply]

In Italian-localized Office programs the bold icon is almost always a g (for "grassetto", shortcut CTRL-G), while the italic icon used to be localized as a C (for "corsivo") but is now a capital I (even the shortcut is CTRL-I). I guess any letter will be fine, as long as it is clearly recognizable as being bold or italic. I think an uppercase I (in a serif font) would be more recognizable than i. Also, in my (very humble) opinion, if the keyboard shortcuts are not localized, neither should be the icons. --Arcturus4669 15:01, 12 July 2009 (UTC)[reply]

A general study:

  • About the Italic icon: The idea of using I for Italic is probably more because the letter "I" can be shown diagonally better than any other letter. Text editors use the Times new roman font for displaying this because the capital I has two horizontal lines which display the diagonal line (when in italic) better.
  • About the Bold icon: The main problem here is that the current Bold icon when compared to the italicized one doesn't look that much thicker.
  • About the relation between "B" and "I": The advantage of the two letters together is that they show each others function better. Through the "I" thinness the "B" thickness is more obvious. And through the "B" horizontal line the "I" diagonal line is more obvious.
  • Conclusion:Using the Times New Roman font with the capital letters I and B would be the best practice and the most usability advantage.---Diaa abdelmoneim 12:33, 14 July 2009 (UTC)[reply]

From the silhouettes of the original set is better and should be incorporated into the new icons. The font should also emphasis the differences between bold, italic, and oblique ("slanting", often mistaken for true italics). Consider looking through serif fonts where this difference is better established, instead of bubble letters. Dispenser 13:28, 15 July 2009 (UTC)[reply]

most Hebrew speakers know the meaning of b and i, but I prefer "a" for both. that way you can see the difference. 93.173.230.238 10:23, 23 July 2009 (UTC)[reply]
Hi, I'm from Italy and I think the icons with B and I are comprehensible. IMHO it would be better to put the letters B for the bold and I for the italic, both in capital letters. --151.64.105.230 20:07, 30 July 2009 (UTC) PS: great work, I'd love to edit wikipedia with this skin![reply]

Do we know what multilingual applications like OpenOffice do here? Mike.lifeguard 16:07, 6 August 2009 (UTC)[reply]

Microsoft Office uses Times New Roman capital letters taken from the localized names (F and D in Hungarian). --Tgr 07:09, 7 August 2009 (UTC)[reply]

If we want shortcuts (I don't think so - browsers use different modifier keys than document editors anyway, so it wouldn't be much help), then the two letters must be different and it's best to stick with I and B to avoid language-dependent conflicts with other shortcuts and with browser functions. Otherwise, localized letters would be far more preferable. --Tgr 07:09, 7 August 2009 (UTC)[reply]

How about make these icons convertible? I mean we can represent them as "B" and "I" in English Wikipedia, but also can represent them as "粗" and "斜" in Chinese Wikipedia. --PhiLiP 19:50, 8 August 2009 (UTC)[reply]

"粗" and "斜" look strange to me --Liangent 17:45, 10 August 2009 (UTC)[reply]
I'm from non-english speaking area, and I'm in favour of b and i. These 2 icons "stolen" from GNOME project are strange, old-lookng and confusing. Either b or i (or language specific - you can easily change letter in text editor - if icons are made in SVG) either use Oxygen icons from KDE project. --95.176.164.40 17:29, 14 August 2009 (UTC)[reply]

'B' and I seems standard in most word processing software, which is what users will be familiar with, and has the benefit of being immediately recognisable (although I agree with the above points re. localisation). I find the typography of the current icons somewhat confusing, however, and would suggest using the more familiar plain (i.e. non-outlined) upper case characters instead of the proposed design. -- Philoscoffee 07:45, 24 August 2009 (UTC)[reply]

In Hungarian the translations of Microsoft Office use F ("félkövér") and D ("dőlt") and A (for underlined, "aláhúzott"), so B and I is not universally understood as representing 'bold' and 'italic' (although some versions (maybe most) of Office and other applications still use the shortcuts CRTL+b and CRTL+i). --Bdamokos 17:03, 16 September 2009 (UTC)[reply]


Both versions are far from ideal. The first set uses really strange letter shapes, which unneccessarily clutter the design. The second should use a serif font for the "i", in order to better emphasize the italic stylie. -- JovanCormac 11:20, 5 October 2009 (UTC)[reply]

I don't care much whether it's going to be B and I or a and a. However I do strongly suggest NOT to make the B/I language specific as the usability somehow decided to do. Nowhere else have I ever seen that before and I doubt anyone would understand it. There's nothing wrong with the monobook-toolbar content wise. The icons were understood especially the bold/italics. Don't make new issues, there's enough to solve already. 82.74.192.60 16:56, 17 May 2010 (UTC)[reply]

We will have only one icon for both internal and external link (which will open a dialogue to create and specify the link). So the icon should work as a general link icon.

1.   We could use this icon, which is being used for external links. I like the icon itself, it's clear, simple and easy to recognize. Though the current meaning (external link) could be conflicting.

2.   Or the typical chain-icon, which noone really understands, but erveryone is used to.

3.   Handcursor and link. This shows a link concretly. This way it's quite intuitive and comprehensible. I am not sure how this matches the other (more abstract) icons.

4.   Is "Link" a universal expression? Or do we need to support something like "abc"?

What do you think? Do you have other ideas?

Comments

(Please post your comments here)

I've always found the chain-link icons used in some editors rather unobvious. I might prefer a little bit of blue text with a hand cursor over it -- something which actually visible shows what a link looks like. --Brion VIBBER 04:27, 10 July 2009 (UTC)[reply]

As well as in the other sections: Please use icons where everybody is used to. I think standard icon sets can be found in MS Office and also Open Office. Please use these icons (or similar ones) because nearly everybody is used to them. -- Eneas 11:50, 10 July 2009 (UTC)[reply]

We will definitely base all icons on established icon sets. (like MS Office, Open Office, Tango,..) But certain functions in our toolbar a pretty special. (see signature for example).--Juxn 14:35, 10 July 2009 (UTC)[reply]

+1 on the "blue text" icon, I find it natural. As for the "chain" icon in Office programs, I bet most novice users have no clue about what it does. Some time ago, I made a quick one for my experimental editor. The hand cursor looks like a good idea.

A side note: how does the merged button work? What kind of link will the interface create if the user presses the button with no text selected? Autodetection is ok as long as there is some text selected. We definitely do not want to lose the hint that the "http://" prefix is required and that the link text can be specified. --Arcturus4669 14:50, 12 July 2009 (UTC)[reply]

I see what you mean and I like it too. But unfortunatly we can't do it like this my experimental editor because we don't support underlined links by default - and only blue "ab" would not be comprehensible imo. Therfor it might be a good idea to add the hand cursor (as Brion said) - though we only have 24x24px which is not enough to display blue text + a hand cursor. I am not a fan of it, but it looks like we are going for the chain. --Juxn

I've commented about the unintuitive nature of the chain and have always needed to explain the "chain link" pun. I like Brion's suggest you could crop part of the hand and it will still be recognizable, but I worry since in MS Luna theme they use it as a hover effect. And what's with the black and white icon, I though we moved from the color hover effect to a saturation effect. Dispenser 13:28, 15 July 2009 (UTC)[reply]

Blue "abc" with hand looks great; see if we can get that fitting in with the Tango icon theme style. --Brion VIBBER 14:40, 16 July 2009 (UTC)[reply]

Make the bold, italic, and link icons consistent, so that it's clear that they all do something to the same thing: text. The third icon is best, abc sounds like a dictionary, while "link" is recognizably a word, as most wiki links are, even if it's foreign. How does it look with the underline? For the bold italic, perhaps an icon with thee I and B in the foreground (like the hand cursor), with bold and itali in the background (like "link"). External links should probably add that ugly little arrow - or perhaps http should be in place of 'link'. How does link look underlined? M 22:23, 20 July 2009 (UTC)[reply]

Using the hand icon corresponding to what the user sees when interacting with the result makes a lot of sense here. Mike.lifeguard 16:08, 6 August 2009 (UTC)[reply]

I'm not sure I would recognize the hand + blue text to be a link icon, even if it is logical afterwards. Convention usually beats logic. I would go with the standard chain (or globe-and-chain) most other editors use. --Tgr 07:08, 7 August 2009 (UTC)[reply]

Though it might be more recognizable if it would be underlined and in a deeper blue (monobook uses #002BB8, google #0000CC or #2200CC, firefox default is #0000EE). --Tgr
  • I vote for 1 - had I been only told about the choices, I would have stuck with the Office-style chain (link) icon as it is so widely used (if not always understood!) but having seen 1 I think it's most impressive and a break with tradition based on a really understandable icon might be acceptable.Bedales94 00:23, 8 August 2009 (UTC)[reply]
  • I like option 1 for external links, considering a similar icon is in use after external links. (Can we get that exact icon? Or change it?) I'm still ambivalent about internal links...keep brainstorming. HereToHelp 02:52, 10 August 2009 (UTC)[reply]

Re: #1: This one clearly says to me "undock" or "maximise". I would expect this button would either spawn a new browser window dedicated to editing that article, or would expand the editing area. Re: #2: If no one understand this icon, why would we use it? Why mimic a software suite for numbers alone? What, for that matter, is wrong with the blue wikilink [[ ]]? Won't this be immediately obvious to anyone who is editing an article with any Wikilinks? From what I see here, I can only support #4. We will have only one icon for both internal and external link (which will open a dialogue to create and specify the link). What? No! No no no no no! D: I use that to quickly Wikilink articles. Why in the world would I want to lose that ability? Double-click a word, click the Wikilink button. Why not have a disambiguating generic-link button and an intuitive blue wikilink button? - User:BalthCat 142.167.84.28 07:23, 11 August 2009 (UTC)[reply]

I think that the pointing hand icon is along the right lines, but 'abc' suggests spelling or dictionary lookup and may be confusing. Instead of trying to represent the link itself in the icon, why not symbolise what it points to; i.e. a page? This fits in better with users' thought processes when adding links and would allow the use of the same pointing hand symbol along with a page (or pages) behind it for internal links and a globe behind it for external (i.e. web) links. The chain icon is OK, but the current design is unclear and would work better if two or more links of the chain were fully visible, perhaps in a diagonal top-left to bottom-right orientation. (I'd avoid the use of words like 'link' in icons altogether as it detracts from the icon's visual immediacy and presents localisation difficulties.) -- Philoscoffee 07:45, 24 August 2009 (UTC)[reply]

Although I like the idea of a handcursor I think it is out if we want to stick with the gnome guidelines, that say: "Do not include body parts in the icon. "--Juxn 11:24, 28 August 2009 (UTC)[reply]
Whilst I think this guideline is a good general rule of thumb, here the hand cursor is not being used so much for its significance as a body part (pointing, pressing, clicking, etc.), but rather as a visual symbol of the action of navigating a link. This is consistent with the graphical cursor used by most (all?) browsers to highlight and navigate links and so will be familiar to users irrespective of culture, background etc. (which seems to be the main objection about the use of body parts in icons). -- Philoscoffee 10:45, 5 September 2009 (UTC)[reply]

Signature icon

  1.   The old icon in a new style.
  2.   Same idea, with the word "Sign".
  3.   Since the signature is used for signing discussion contributions a speechbobble might be a good icon.
  4.   Since the signature stands for a user we could use this user-symbol.
  5.   A fingerprint. Does not really work in that small size imo.
  6.   A pencil that draws a signature.

Signature Icon II

So here are some variations of the pencil with a line that looks more like a handwritten signature.

i.  
ii.  
iii.  
iv.  

What do you think? Which icon is comprehensible? Other ideas?

Comments

  • Each of the signature items II is better than the other ones.
  • I personally think 1 and 2 are intuitive. Although number 2 has a nice feel for English wiki's, it is hard to localize for over 260 languages. Shuhari 19:43, 13 July 2009 (UTC)[reply]
  • Please remember that pencil icon is planned to be used for a section edit icon in the future. So if possible, we want to reserve that image concept and not give it up for signature. (By the way, as we don't display signature icon for the article page, it is not intuitive for a user to sign for the comment.) Shuhari 17:04, 14 July 2009 (UTC)[reply]
  • I vote for 2. It's a clear signing icon that shows an actual signature. I'd also propose making the Signature itself in a different color instead of gray like dark blue or black, the colors that are used in signatures.--Diaa abdelmoneim 17:25, 14 July 2009 (UTC)[reply]
  • The idea of signing is uncommon, 2 is certainly better than one that we been using all along. Alternative suggestion? On old documents you sign where there is an X____. Others use colored labels    . You typically sign with a pen (I think outlook uses for digital signatures). Some people sign with a rubber-stamp. Painters sign in the bottom right corner of paintings. May just add a pen to number 2 or do something like this [1]. By the way should this in the talk space to actually allow people to use the sign icon? Dispenser 13:28, 15 July 2009 (UTC)[reply]
  • Yes, X___ is pretty universal, I think. Adding that (in a slightly different shade) to the first 1 or 2 would be good. The word "sign" is unrecognizable, so it doesn't quite matter. The old one, plus the X___ would probably be cleanest. M 22:27, 20 July 2009 (UTC)[reply]
  • I wouldn't immediately recognize any of these, but the first two are at least not misleading. 3 and 4 look like instant messaging icons, and the pen is a general "edit" symbol. A signature with and underline (like this) might be more recognizable. If you go with the pen, a quill or a fountain pen might be better. --Tgr 07:23, 7 August 2009 (UTC)[reply]
  • I vote for 1 (with 2 a close 2nd, although I tend to think the use of a word here takes away from it being an icon (even though this is a little contradictory of my views on the B/I debate for Bold/Italic icons))Bedales94 00:19, 8 August 2009 (UTC)[reply]
  • I think that 1 will be familiar to the veterans, although 2 may provide a subtle clue to English speakers. I never understood the need for the user icon by the account links; we might remove it entirely, certainly not enshrine it further.HereToHelp 03:04, 10 August 2009 (UTC)[reply]
    • Is is possible to make a signature look like four tildes? HereToHelp 19:18, 12 August 2009 (UTC)[reply]
      • Surely that would only help people who already know that you need to use four tildes to insert a signature - and the type of people who most need the icons are those who do not know precisely this information. We aren't considering making the icon for bold three apostrophes! ;-)Bedales94 20:38, 16 August 2009 (UTC)[reply]
  • I think we should consider a more easily distinguishable finger-print. That, or perhaps a pencil drawing tildes? I think my issue with the scribbles is that it is either hard to localise, or might look like gibberish to another language speaker anyway. Is that a signature? A poorly done graphing icon? An invitation to have fun with bezier curves? Meanwhile, if the finger-print is indeed universal, that one symbolises imprinting your "irrefutable" identity on the post. (I think in Malaysia and Korea, at least, it is customary to purchase a stamp rather than sign?) - BalthCat 07:57, 11 August 2009 (UTC)[reply]
  • How about the signature text itself, instead of or as well as an icon? That should make the button’s purpose clearer, by removing the need to understand that a ‘signature’ icon refers to author identification. — 82.36.30.34 02:22, 23 August 2009 (UTC)[reply]

HereToHelp's mockup set

 
Even if you don't like the icons, you can see the benefit of a consistent look. Try to guess which button does what.

Hi! I think that this is becoming a little more complicated than it needs to be. I agree that links and signatures are difficult, but it should be entirely possible to have different icons, and different organizations of special characters, on different wikis. Therefore, if we take a few anglo-centric shortcuts, a fairly complete system emerges. I also think that we should be as simple as possible: the globe and chain, or even plus and minus for text size, can be illustrated more simply by literally showing the result, accompanies by a few handy letters and words. But even if you don't like the icons, I think that it is important to have a consistent feel to these icons, as I have tried to do. What do you think? HereToHelp 17:32, 14 August 2009 (UTC)[reply]

A little late, but I like the consistency. It should be more consistent, however, in grouping; bold, italics, strike, small, big, sub and sup should be grouped together, as they are style commands. I don't know what the rectangle and the last one are supposed to mean, though... --86.9.119.235 19:02, 16 September 2009 (UTC)[reply]
Yes, the grouping was tentative. The rectangle is an image; the arrow is a redirect. I'll do another draft; thanks for your encouragement! HereToHelp (talk) 20:14, 16 September 2009 (UTC)[reply]
How about now? I really like them this time. HereToHelp (talk) 21:56, 16 September 2009 (UTC)[reply]

HI and thank you very much for your ideas! It is a nice approach to show the result as an icon, I totally agree, that this can be much more intuitiv. But very often this works only for experienced users. For example: your reference-icon, no-wiki-sytnax-icon, redirect-icon are not comprehensible for someone who doesn't know wiki-syntax. It is very important to us to create icons that can be understood by new users. (Actually I think, that experienced users don't use the toolbar that much anyway.) I like your link-icons, but I think we can't do it like that, since we don't use underlined links in WP. But this is very close to my layout no3 and no4 (see above). Further we decided to use the GNOME Icon set as much as we can and add new Icons in that style if we need them. So basically the icons in babaco will stay the same (like in acai). We will only implement these new, improved icons: link, signature, table, indent, b and i (for engl). --Juxn 13:56, 19 September 2009 (UTC)[reply]

Why should experienced editors be penalized when newcomers don't use the buttons anyway? I intended for the second row to be hidden, as it corresponds to advanced, rarely-used functionality. (How often do you create a table from scratch?) I think that anyone who is going to add a reference will have read enough of Wikipedia to know what it looks like in an article. I agree that the links may be a work in progress, but I think they work at least as well the globe and chain (which, if you aren't familiar with them from other programs, are not intuitive at all). And I think that the style - one color, thick lines, distinct shapes - is superior the GNOME. When did we decide, from on high, that we were doing GNOME? We are not GNOME, we are Wikimedia, and we have different needs and styles. HereToHelp (talk) 00:32, 21 September 2009 (UTC)[reply]
I agree with you on that one. Sticking to GNOME just because "we should" is nonsense. As long as the GNOME style is good enough, we might as well use it, but where it isn't, we should do better. In fact, we'd probably be well advised to stick as close to Windows and Office style-wise as possible, since that is what 95% of people use every day. It isn't free software, so what? I'm not proposing to sell Wikipedia to Microsoft, just that we emulate the Office style, which is well-designed and, what's most important, familiar. -- JovanCormac 11:27, 5 October 2009 (UTC)[reply]

The "image" icon is really bad IMO. I don't think anybody associates an empty rectangly with a picture. -- JovanCormac 11:27, 5 October 2009 (UTC)[reply]

Okay, but I can't think of a generic image that wouldn't be distracting, and I don't want to use more than one color. HereToHelp (talk) 01:10, 6 October 2009 (UTC)[reply]
(Bump!) HereToHelp, how about adding a tree in that image icon? A black tree, I mean. 220.137.58.80 13:35, 20 April 2010 (UTC)[reply]

Why not let icons be optional ?

I am not sure if there are some technical constraints that make impossible to keep icons optional.

Isn't each wiki's logo optional ? (Wiktionary's logo is different from Wikipedia's logo, and the English "Wikipedia" name is not the latin language's "Vicipaedia" : compare la:File:Wiki.png with en:File:Wiki.png)

If each logo can be kept optional, why not keep icons optional too ?

Should we not let the wiki communities choose (and perhaps even design) their own icons ?

It sounds strange that a matter as specific as the design of an icon should be decided at the top Wikimedia Foundation level.

Teofilo 13:34, 17 August 2009 (UTC)[reply]

I disagree. The icons should be consistent on all wikis to ensure the most minimal amount of confusion. --Mephiles602 16:10, 17 August 2009 (UTC)[reply]
I think there needs to be stylistic consistency (see my mock-up above), but individual wikis can, say, change some icons for a different language. (They should also be able to re-order them, as per right-to-left compatibility.) As for no icons at all, I'm not really sure. HereToHelp 01:44, 18 August 2009 (UTC)[reply]
Although I did not read every details, https://bugzilla.wikimedia.org/show_bug.cgi?id=20125 seems to imply that you can change the icons on your local wiki, using the local javascript there. Must be something like Mediawiki:Common.js... So I think it is a waste of time to discus this icon issue at at the global level. Any kind of standard looking set of icons will do, for default values. Detailed discussions should take place locally, on each wiki. On the other hand, a detailed instruction manual on how you can change icons on your local wiki should be provided when the new açai is no longer a beta test and becomes a standard product. Teofilo 04:17, 18 August 2009 (UTC)[reply]
Add topic
Retrieved from "https://usability.wikimedia.org/w/index.php?title=Opinion_Icons&oldid=7059"