The surprising ambiguity of icons

Create with Context’s recent slideshow “How people really use the iPhone” reveals among other things how difficult it can be to intuit actions with confidence by icon alone. The slideshow notes that test subjects using Mobile Safari for the first time made some reasonable but wrong guesses about what several of the icons meant:

  • They thought the magnifying glass mobile_safari_mag_glass.png to the left of the Address Bar meant “zoom this page”.
  • They thought the Plus icon mobile_safari_plus_sign.png at the bottom of the Mobile Safari screen meant “increase the font size”.
  • They thought the Book icon mobile_safar_book_icon.png meant “read this page”.

These are perfectly reasonable interpretations of those icons. There are examples in Mac OS X as well. For instance, in Safari it’s not immediately clear that the safari_refresh.png icon means “reload the current page”. You learn that this is so, but users might also initially believe it means “rotate the window to the right” or “rewind/go back”.

Fortunately, icons with multiple possible interpretations usually make more sense one way than another, and so long as the associated action is not destructive, there’s little harm done if the user is initially surprised. Safari’s safari_refresh.png icon seems unlikely to mean “rotate the window to the right”, so it probably means “reload the page” and possibly means “rewind/go back”. But even when an icon might not represent an action as clearly as you think it does, once you click the icon the relationship between icon and action usually becomes clear.

If I had a candidate icon for a frequently-used action but that icon might be misinterpreted by first-time users, I’d use it anyway if 1) it fit the action well, 2) the other possible interpretations were reasonably unlikely, and 3) the action wasn’t destructive.

Leave a Reply