Share via

The Importance Of Labels

  • Article

My first experience in Office was working as an intern program manager on
Outlook 98.  During
that summer I learned one of the key usability lessons that carried over into
the DNA of the Ribbon: the importance of labels.

Part of the user experience effort around Outlook 98 was improving the menu and
toolbar structure.  One of the problems noticed again and again among
non-expert users was that people didn't use the toolbar at all!  With the
exception of the "Delete" icon (which was perhaps familiar from the Windows 95
shell), people used the menus to reply, forward, and to create new messages.

Different fixes were tried: new icons, rearrangement of the icons, positioning
icons under the menus from which the commands came from.  In the end, one
change caused a total turnaround: labeling the important toolbar buttons. 
Almost immediately, the toolbars were a big hit and everyone at all skill levels
starting using them.

Toolbars: Outlook 97 vs. Outlook 2003. (Click to view full picture.)

It's not really any big surprise if you think about it.  It's pretty rare
in the real world that we rely on iconography alone to represent ideas. 
Bathroom doors generally have an icon of a man and the word "Men."  Stop
signs have the word "Stop" on them.  On the other hand, I can
recount dozens of experiences where the icon-only design of something has
frustrated me.  On a recent vacation, we spent probably 10 minutes trying to
figure out how to turn an oven on before just giving up because we couldn't tell
what any of the icons meant.  I have buttons in my car that I have no idea
what they do because the icon is so cryptic.  I guess I could look them up
in the manual...

It's not that icons can't work by themselves, but that most people have a fairly limited
vocabulary.  Floppy disk = save.  Printer = print.  Play,
Pause, Stop, Forward, Back all got defined by tape players from the 1980s. 
And, yes, if an icon is ideographic enough, it can be infused with meaning and
remembered--take the "Apple" menu in Mac OS, for example.  But
the richness is just not there relative to human language.  (Especially
considering that I already know how to speak English; it's a lot of work to
learn how to speak "Iconese" on top of that.)

This is one of those areas in which Windows applications should learn from web
design.  Why do people find many web sites straightforward to use?  One reason undoubtedly
is because everything is labeled.  People never need to decipher cryptic
rows of 16x16 unlabeled icons in order to be successful using a web site. 
Yet, the unlabeled toolbar remains a staple of most Windows programs today.

Web sites do often pay for their verbosity by requiring visitors to scroll the
page
in order to see the entire content area.  Toolbars, on the other hand, have the advantage of extreme density and
more predictable layout.

The
Office 12 Ribbon is designed to exploit the importance of labels
in a way that doesn't compromise the predictability of a fixed UI location at
the top of the screen.

We designed a layout and scaling system to provide as
many opportunities to label commands as possible--especially as screen
resolutions increase.  At the same time, the rich layouts of the Ribbon
allow the density afforded by skipping labels on those items which work just as
well as unlabeled icons (Bold, Italic, Center, etc.)

I hope the days in which rows of 16x16 unlabeled icons represent "standard UI" will soon be
in the past.

Comments

  • Anonymous
    November 01, 2005
    The comment has been removed

  • Anonymous
    November 01, 2005
    Of course toolbars with text-only buttons work, but the fastest and nicest looking is, in my opinion and experience, icon+text for the most common commands. I'm using that principle in a little application I'm designing: The commands used 90% of the time are icon+text in toolstrips, and the rarely used ones are in the menus, a couple of them accompanied by a little icon-only button in the toolstrip for "power users" (others can still easily find them in the menus, the few times they are needed).

  • Anonymous
    November 01, 2005
    "Play, Pause, Stop, Forward, Back all got defined by tape players from the 1980s."

    And yet I still know people [cough parents] who will stare blankly at these for a while :|

  • Anonymous
    November 01, 2005
    Regarding text only labels. I think you are swinging the other direction with text only labels. You look up at the toolbar and have to read a novel just to "send and recieve." Not to mention- once you see the text together with an icon, you will associate the two. next time, you will probably find the icon quicker than the text since it will stand out more.

    The office toolbar is good balance... the most used items have text next to the icons. Although I admit- I would prefer it the other way around. I already know what those icons are, show me (with text) the less known options that I'm not taking advantage of.

  • Anonymous
    November 01, 2005
    The post by Eddie has a few very good points.

    The toolbar should learn what I use most often and start to remove text labels (this should be an option of course). The toolbar all ready "learns" to hide unused icons, so why not hide heavily used text labels?

  • Anonymous
    November 01, 2005
    Nathan, how does the application know that you don't require the text-and-icon-combo in order to find the feature on the toolbar/ribbon?

    As soon as the ribbon starts adapting its behaviour you lose all predictability, which is what Microsoft are striving for in their new design.

  • Anonymous
    November 01, 2005
    I don't think the toolbar learns to hide unused icons anymore ;-)

    I also think Eddie's suggestion makes an incorrect assumption that the icons with no labels are lesser-used commands. Jensen said near the end, "skipping labels on those items which work just as well as unlabeled icons (Bold, Italic, Center, etc.)". From pictures, I'd say the buttons that don't have labels are the ones that are more like:
    cut/copy/paste/undo/redo
    text alignment
    text formatting
    font/fill/highlight color
    save/open/new/print (although I don't see these in any of the pictures of the new UI)

    These commands are mostly in the 90th percentile of what gets used the MOST, but (partly because of that) people just understand what those icons mean.

  • Anonymous
    November 01, 2005
    Kawigi-

    I agree- you're right. Icons that span across have multiple application (bold, cut, paste, etc) are both most used and icon only. If you take, for example, just Outlook (refer back to the screen shot inlcluded in this post) it appears that the most frequently used <i>mail</i> commands are text labeled. In fact, in composing a new message- my version of 2003 has all icons with exception of the "send" icon (and options). Most of the other icons in the compose window are standard stuff that would be found in other applications.

    That said- I believe your are right. I overgeneralized based on the screenshot. I never paid attention to much from my own use.

  • Anonymous
    November 01, 2005
    The comment has been removed

  • Anonymous
    November 01, 2005
    At the beginning of the Mac OS they came up with the phrase, "a picture is worth a thousand words but a word is worth a thousand icons". This was based on their research that icon vocabulary was very limited and anyone that has tried to create international symbols has no doubt run into this difficulty. Especially in such a restricted amount of space, trying to portray complex ideas like "reply" is nearly impossible.

    But symbols that "look" like the action they commit are usually successful, such as Bold and spacing. But note how "simple" these ideas are. Why include icons with text then? Well, target size for one, and for quicker identification. The word and the icon together form a "picture" that is easy to locate and hit, whether the icon itself really translates to the action or not.

  • Anonymous
    November 01, 2005
    This does not relate to labels, but please Jensen, ensure that there are some nice photo-realistic toolbar icons and make the big where necessary, esepcially in Outlook, I want them the size of the ones in Office for Mac applications. The present icons Office painted, I also think you should just steal the executables used for Office for Mac apps.

  • Anonymous
    November 01, 2005
    I read a long time ago that toolbar icons were just programmers re-inventing Chinese. Replacing a word with a picture always seemed backward to me. I guess it is because I've been reading without trouble since 1965.

  • Anonymous
    November 01, 2005
    I remember studying "Iconese" and one of the things I heard over and over was: "If an icon needs text to be understood, then the icon isn't any good." I suppose there are multiple ways to spin such a statement in light of the current conversation, but I thought I'd mention it because every time I see labeled icons I think of it.

  • Anonymous
    November 01, 2005
    What happens when you internationalize the labels & they all get 50% longer? :-)

    William, I would hate a "labels only" toolbar. IMO it is much quicker & easier to locate a known icon in a set of icons, than to locate a known text fragment in a set of text fragments.

    Perhaps including or omitting the labels could be an "expert" option? The labels are on by default, but in expert mode they are all turned off: thus, perhaps, allowing more icons to be displayed in the same space?

  • Anonymous
    November 01, 2005
    Lots of interesting stuff in here...

    Sloan, you said it better and in fewer words than I could.

  • Anonymous
    November 02, 2005
    On top of the labels, there should be a checkbox in the options, that hides all labels, no matter how large the application window is sized. I prefer to have the ribbons as uncondensed as possible, without superfluous labels stealing the necessary space to let the others unfold.

    This would be a poweruser option, obviously, and thus unchecked by default.

  • Anonymous
    November 02, 2005
    "Not to mention- once you see the text together with an icon, you will associate the two. next time, you will probably find the icon quicker than the text since it will stand out more."

    I think that is the main job of the text - to let you know what the icon does, and to allow you to learn it.

    I read a report years ago (in the Journal of HCI, iirc) where they did an experiment watching users learn and use a painting program. One set of users got the normal icons, but the other got a set of differentiated but essentially abstract icons. So, 'Save' might be a blue splat, and 'Undo' might be a pink cross, etc.

    They found that once the user had learned what the icons meant, the relevance/abstract nature of the icons made no difference to their productivity. i.e. once you've learned them, you've learned them.

    Although I think I'd still prefer it if all programs used an icon of a printer for the 'Print' button, and so on :)

  • Anonymous
    November 02, 2005
    "...once the user had learned what the icons meant, the relevance/abstract nature of the icons made no difference to their productivity."

    Perhaps not to their productivity with THAT application, but having standard icons for common tasks across applications certainly increases your productivity with every new app that comes along. That's been the main selling ticket for Office - it's an office SUITE of applications, all sharing a common look-and-feel and usabilty.

  • Anonymous
    November 03, 2005
    The comment has been removed

  • Anonymous
    November 10, 2005
    Actually, I like having only small icons. They usually take less space than labels. I always turn of label text in INternet Explorer, Outlook etc if I can. On the other hand, I see myself as a more advanced user, I don't have to spend time learning what these Icons are there for.
    Kaisa

  • Anonymous
    September 30, 2006
    PingBack from http://www.zuschlogin.com/?p=16

  • Anonymous
    February 25, 2007
    PingBack from http://www.epot.org/blog/?p=15

  • Anonymous
    June 02, 2009
    PingBack from http://portablegreenhousesite.info/story.php?id=29474

  • Anonymous
    June 08, 2009
    PingBack from http://quickdietsite.info/story.php?id=7765

  • Anonymous
    June 13, 2009
    PingBack from http://homelightingconcept.info/story.php?id=532

  • Anonymous
    June 13, 2009
    PingBack from http://fancyporchswing.info/story.php?id=2575

  • Anonymous
    June 16, 2009
    PingBack from http://topalternativedating.info/story.php?id=5107