Toolbar Styles

We’ve been discussing the future of the Interface tab in the Appearance capplet, and we’d like to “fix” the default toolbar style before we consider any changes. It seems not many people are aware of what these styles actually look like, so to help I’ve done some screenshots:

Text Beside Icons (the proposed new default)
text-beside-icons

Text Below Icons (the current default)
text-below-icons

Icons Only
icons-only

Text Only
text-only

A trial switch to the text-beside-icons style is underway, so that we can test applications to make sure they work properly with this style. Discussion on any issues can be reported in bug 590143.

Personally, I think there are several advantages to the text-beside-icons mode:

* Increased hit area (fitts law) for important buttons
* Reduced vertical space usage (compared to text-below-icons)
* Reduced horizontal space usage in some applications (as compared to text-below-icons in e.g. Nautilus, Evolution)
* Aesthetically nicer than having text for every item

40 Responses to “Toolbar Styles”

  1. John Doe says:

    Can you tell me the name of the monospaced font that you are using in that screenshots?

  2. Joe Tennies says:

    I like the text beside icons look as the default particularly because most screens are now wide screen, especially on on any laptop, not just netbooks.

    Good choice.

  3. Flavio says:

    You forgot the “cons”:
    – Icons without a text label are not easy to understand
    – Apple users switching to GNOME will not feel at home (not sure if this is important, but still…)

    By your reasoning, having icons only would be better because it requires less horizontal space, or even better 16×16 icons so that both horizontal and vertical space is saved. You should see now that you reasoning is completely flawed.

  4. smurfd says:

    Sounds like dreams in my ears,
    This is namely the 1st thing i change after a fresh installation.
    :)

  5. Hylke says:

    Flavio:
    Not all icons need labels. I agree, a lot do. For example: are you confused by the icons in firefox?

  6. frustphil says:

    I vote for icons only. Today, people are way smart enough. As long as the icons clearly conveys clearly what they do, then it won’t be a problem. And besides, most of us just hover over the icons and see the tool tips if we’re not sure of what they do…

  7. emmanuel says:

    that’s the first thing and about the only thing i change just after i install ubuntu. to text besides icon. the improvement is obvious IMHO and even it highlights the more important actions.

    it’s way overdue that this becomes the default in my opinion.

  8. Hylke says:

    frustphil: the problem with that is that the most common actions get lost in all the other icons. With text besides icons we can accentuate the common actions so they stand out and give them a bigger hit target as well (which icon needs a label needs to be figured out by user testing).

  9. ryanc says:

    I agree with smurfd; one of the first changes I make after a fresh install is switch to text-beside-icons view.

  10. 3p says:

    ryanc +1

  11. jry says:

    icons only for sure. the text serves no purpose since the only icons that get text are the ones that you use all the time and hence know what they look like. you probably even use them so often that you use the keyboard shortcut..

  12. Rabe says:

    Yep – definitely go for the text-next2icons-one! I today watched my mum computing (or learning how to) and text was very important for her. But some more icons will need the text-attribute, than in the status quo.

    Would be great if one could spend some work into this view, because too much text could make it look cluttered or un-structured (?). But text is needed.

    My 2 cents =)

  13. G.A. says:

    +1, I change that too! :)

  14. Kris Thomsen says:

    I like text under icons – but text beside icons is cool to me too, but we really need to go through the applications and optimize this – look at gEdit, it looks REALLY messy and inconsistent with text beside icons.

  15. I’ve used text only ever since I saw a tip about it on p.g.o some time ago. I don’t think aesthetics should ever trump functionality as a consideration (or at least extremely rarely). Text only always provides the necessary information, and reduces to the minimum the vertical space usage (which is usually the most important consideration, as buttons tend to be placed in horizontal bars across the whole width of a window, so saving horizontal space usually isn’t too important).

  16. James says:

    @Adam Williamson: Text takes longer for people to process than icons. There have been usability tests, and there’s a reason no operating system ships with text-only toolbars.

  17. Simon says:

    As others have said, this is one of the first things I change on a new profile. Having text *under* icons just takes up too much vertical space, particularly on a laptop or worse still, a small netbook screen. Having only the important buttons show text next to the icon makes those important buttons easier to hit – takes up a bit more horizontal space, but on most applications that’s not a problem…

  18. Jones Lee says:

    I’d go for icon-only option as the icon-theme metaphor should be able to convey the function. For Windoze-migrant, they just need to relearn proper metaphor icons.

  19. DanA says:

    Looking at the junk email icons in your text-beside-icon example, I cannot tell at all what the buttons do. It’d be even more absurd to use icons only for all buttons, as the only difference between reply, reply-to-all and forward is the colour and direction of the arrow. An arrow to the left does not say “reply” to me. The reply-to-all icon is half implying replying and half implying forwarding, and hence makes little sense.

    I agree that vertical screen real estate is of significant importance. However text-under-icons has the great advantage of allowing more toolbar buttons to fit on the screen at once (especially when the window is resized down).

    Is it possible to use both techniques depending on the available screen real estate? If all the buttons will fit on the toolbar in text-next-to-icon mode, do that. If the window is resized down and buttons won’t fit in that mode, it automatically switches to text-under-icons to make all the buttons fit in the limited horizontal space?

  20. frustphil says:

    ‘icons only for sure. the text serves no purpose since the only icons that get text are the ones that you use all the time and hence know what they look like. you probably even use them so often that you use the keyboard shortcut..’

    Exactly…

  21. emacs says:

    I prefer the icon-only option, and text can be made as a tooltip, which shows when cursor point at the icon

  22. JohnM says:

    I have to agree with several other of the comments advocating an icon only approach for the benefit of both vertical and horizontal space saving. As long as mousing over an icon provides a tooltip displaying it’s function I see no need to add a text label to them at all with the exception of the case of brand new users until they have time enough to learn their purpose. This should also make it obvious that more effort needs to be put forth to make the icon’s graphical representation more obvious as to it’s intended function. That’s not to say that the option to configure the buttons to one’s preferences should be removed or limited, I’m just stating why I believe an icon only approach makes the most sense in the majority of cases, especially for those with limited screen real estate such as myself (typing this from an Eee PC 1000HA right now).

  23. Michael says:

    @jry: I thought the same but now I have tried text-beside-icons and I really like it. Sure I know what the save icon looks like. Sure I don’t have a problem clicking on a 20×20 square after ~20 years of using the mouse. But still, having those buttons I use ALL THE TIME stand out feels right!

  24. reinouts says:

    From the discussion on gnomecc-list: http://www.uie.com/brainsparks/2009/06/28/old-news-about-icons/
    It contradicts James’ assertion that text-only wouldn’t work well.

  25. John Doe says:

    Please! Tell me the name of the font! :-)

  26. Hylke says:

    John Doe: Droid Sans and Droid Mono

  27. Christoph says:

    Icons only work for applications you know. I don’t need labels for icons in nautilus or gedit. But keep in mind, that when you install a unknown application you might want to the those tiny text labels which help you to find your way. You should always keep those users in mind, who are new to Linux/GNOME.

  28. RainCT says:

    Text below icons is more consistent and makes the actions more discoverable. The amount of space saved with the other option is almost negligible, and I don’t agree with the bigger space (it gives a somewhat bigger space only for those with labels, for the others it gets smaller, and anyway you are losing horizontal space so it isn’t that much bigger).

    It’s funny, in the screenshot you posted there are items without a label which I don’t know what they mean (until I looked at the text-below-icons screenshot and noticed that they are for junk handling).

    I wouldn’t really care that much about the default (in fact I may even give it a try and who knows, I may convince myself that text-beside-icons is better – or not), but what worries me is that if I’ve understood correctly you also want to remove the configuration option (even if it still is in gconf, that’s not the point, many users don’t know about gconf).

    Anyway, just felt like writing a rant :P. Sorry.

  29. John Doe says:

    @Hylke: It isn’t Droid Mono

  30. F Wolff says:

    Please be sure to test things like these in many (human) languages. Many translations can be much longer than the original English messages, and might grow beyond the minimum screen width you might want to support. For example, “Not Junk” (9 characters) is “Nie gemors nie” in Afrikaans (14 characters). One can expect even greater variances for short strings. For reference, check this article:
    http://www.w3.org/International/articles/article-text-size

    To create fake translations of a length you feel you should support, you might be interested in podebug:
    http://translate.sourceforge.net/wiki/toolkit/podebug

  31. David says:

    Shouldn’t there be a fifth choice: icons besides text? That is, all buttons have text, which reinouts’ link showed is more useful than icons, and the buttons that are used the most have icons also. This gives the most useful and common functions a more distinct look and a larger hit area. This would also make toolbars more similar to menus, where text is always used but icons are also used sometimes.

  32. Flavio says:

    @Hylke
    “Not all icons need labels. I agree, a lot do. For example: are you confused by the icons in firefox?”
    Firefox does not even respect the GNOME settings and the browser is a very special application. For example I would be confused by Gedit icons without a text label. Noone would ever be able to distinguish between Find ad Replace.

  33. Patrys says:

    David:

    The link you refer to is about menus. Keep in mind toolbars are there to function as a shortcut to the menus, not as a replacement. Every application should be perfectly functional with toolbars turned off.

  34. Hylke says:

    Flavio: why is a browser special?

    “For example I would be confused by Gedit icons without a text label. Noone would ever be able to distinguish between Find ad Replace.”

    I agree.

  35. Jakub says:

    Why not leave it the way it is right now (choice up to the user), and only optimize applications (such as gedit) to work better with all options, since we have so many different opinions?

  36. Rodney Dawes says:

    Icons only is the only way. If you need the labels, the icons are wrong, or it shouldn’t have an icon or be in the toolbar. If the icons aren’t distinguishable, then one or more of them need new metaphors.

  37. Connor says:

    Why don’t you make Gtk+ actually make the items more like native drawing on Windows instead of making it look like someone wiped their arse with. And actually drop C :D

  38. In my opinion icons only is the best. Arguments in support of it have already been written, and I don’t have to add anything to it.

    But if no agreement can be reached, what’s the big deal? How often do you open the Appearance Preferences dialog? I don’t do it much.

  39. Charles says:

    I have to agree with DanA and RainCT here — in the screenshot of the proposed improvement, I can’t tell what icons #6 and #7 are supposed to do. I had to look at the old, unimproved screenshot to find out they were Junk and Not Junk.

    Maybe once you get to Power User level this makes sense, but it seems to me that this would make things more difficult for new users, and shouldn’t be the new default.