The Importance Of Labels
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
in order to see the entire content area. Toolbars, on the other hand, have the advantage of extreme density and
more predictable layout.
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.