Agile Ajax » Icons are evil; so are menus - unless you do them right

Icons are evil; so are menus - unless you do them right

Brian Dillard, Tuesday, November 18, 2008 @ 5:37 pm

Menus and dropdowns seem like attractive design choices because they conserve screen real estate while providing users access to a potentially large number of commands. But if you resist the easy out of menus and dropdowns, you may find that your applications become far more usable.

Survey the software you use for yourself, both browser- and desktop-based. Think about which applications provide the most invisible, effortless interfaces. I doubt it will be the ones that hide commands in complex menus and dropdown systems.

For some negative examples, let's look at Firefox and its more social cousin, Flock. Each app offers an advanced bookmark management mechanism, but the usability of that mechanism suffers in each due to over-reliance on cryptic menus.

Here's Firefox:

Can you guess which bookmark management options are going to appear under each menu? Where, for example, would the command for adding a separator live? What about sorting your bookmarks? Can't figure it out? Welcome to the world of evil icons.

For comparison, here's Flock, the social browser derived from Firefox:

Clearly, Flock provides friendlier menus; at least they've got text labels. With enough trial-and-error training, you'll probably be able to teach yourself which command lives under which menu.

Here's another example, this time from the webapp world: Confluence, the popular enterprise wiki package. Older versions of Confluence offered the by-now-familiar star icon. Click it, and a page would be added to your favorites. More recent versions, however, hide the "add favorite" option in one of several dropdown menus. Can you guess which?

If you guessed the "Add" menu, for "add to favorites," you're wrong. It's under the "Tools" menu. Welcome to the world of evil menus.

So where does that leave us? Must every single command available in an interface exist as an always-visible text link within the browser viewport? Of course not. But there are some best practices in choosing how to build our menus:

Icons are great, but they should either be universally recognizable (such as a star or trash can) or paired with a text label.
Menu groupings should be intuitive. Use care in choosing the top-level labels and don't group disparate items under the same menu.
For frequently accessed functionality, consider leaving it as a dedicated clickable item on the page. There's nothing wrong with a mixture of icons and menus, the former for the most popular features and the latter for everything else.

Topics: Confluence, Firefox, Flock, User Experience, user interface, UXD

agile ajax

Comments: 4 so far

I think what you mean to say is that icons don’t make a bad interface better.

Comment by EP, Tuesday, November 18, 2008 @ 6:49 pm
Someone please forward this to the MS Office Devs.

Comment by T.J., Wednesday, November 19, 2008 @ 11:19 am
Great article.

Thanks for sharing.

Stu Collett

Comment by Stu Collett, Tuesday, November 25, 2008 @ 8:16 am
Michael Byrne has done some nice experimental work on icon usability. Simplicity is key — if you can’t get universal understandability, simplicity is the essential to making learning easy.

Full research trace at http://chil.rice.edu/byrne/pubs.html. Initial work at http://chil.rice.edu/byrne/Pubs/interchi93.pdf and for a more rocket science view, check out the eye-tracking + cognitive modeling of the more recent http://chil.rice.edu/research/pdf/iccm03-fleetwood.pdf

Comment by AndyEd, Monday, December 1, 2008 @ 11:08 am