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.