Usability in Icons
In many apps, icons are used to illustrate a specific function — it can be used for everything from information to actions. But if the user doesn’t understand the icon, what’s the point?
When designing icons, you want to strive for creating/using isomorphic icons — that is, icons that represent their real-life companion — eg. trash can, brush, eraser, etc. As long as you can do a somewhat decent depiction, these icons will be usable. But what when there is no real-life companion?
As an example, I’m going to use the icon for a link. “A link?” you say. “Everyone knows what the icon for a link looks like!” What is the first icon that comes to mind when thinking of inserting a link in an e-mail, a blog post, or in your CMS? A chain? A globe? A …? Yeah, there are a couple of different icons for inserting links, and you might think they’re all logical. But they’re not necessarily.
How do the big guys do it?
As you can see, most CMSes and apps use a chain. The only one really separating from the rest is Facebook, using a note — and I think that makes even less sense than a chain.
Only geeks understand link icons
I’m a geek myself, so I can say it — only geeks understand link icons. In 2010, I wrote my bachelor project with Morten Keilow. The project aimed at exploring how little documentation you could leave in a CMS, and still have even the most non-savvy person use it with no issues. When we created the interface design, we used a chain icon without even giving it any thought.
We gave the test participants a list of assignments to perform, one of which was inserting a link. What really surprised us was, that almost no one could figure out how to insert a link. We decided on testing the link icon out of context together with other icons regularly used in CMSes and text editors, and the results were really surprising.
Several of our test participants understood the chain icon as “binding something together” or “linking to elements together”, which is not altogether wrong — the issue is that they do not understand what they are binding together — and thus, the icon doesn’t work as intended. The globe icon brought comments like “You can visit the Internet”, “Search”, or “Upload to the Internet”.
|Icon||Did understand||Did not understand|
|Bold||100 %||0 %|
|Italic||100 %||0 %|
|Underlined||100 %||0 %|
|Strike-through||54.55 %||45.45 %|
|Link 1 (chain)||35.29 %||64.71 %|
|Link 2 (globe)||25 %||75 %|
|Ordered list||100 %||0 %|
|Unordered list||93.94 %||6.06 %|
|Image||78.79 %||21.21 %|
|Undo||57.58 %||42.42 %|
|Redo||51.52 %||48.48 %|
All in all, only 35.29 % of the test participants understood the chain icon, and only 25 % understood the globe icon. While we didn’t set a minimum for success, clearly, 25 % is not good when it comes to usability. When being interviewed one of our participants asked:
“Why not just write WWW? Everyone understands that!”
It is possible that someone would understand WWW as “visit the internet” or similar, but we found that every single test participant understood this icon. This probably isn’t the best solution — however for now, at least based on our tests, it is the most usable icon for explaining a link.
I would love to do another test of any other icons that might be better, so if you have any ideas, please write in the comments below.