Improving Icon Usability
Icons are ubiquitous in our modern UIs, but how usable are they?
The responsive web has changed the way projects are approached from a design perspective and means we must be smart with our use of space on smaller devices. In this post I'll try and offer some guidance on how to make the best use of this space by keeping icons usable and consistent.
History of Icons
Iconography has been used throughout history as pictorial representations to inform and instruct others. Their origins are difficult to trace to one, distinct point; their roots lie in humans' nature to mark history with art and our basic need to communicate.
a very bad man
The Egyptians used hieroglyphics to communicate; a cross represents Christianity. We remember those killed in wars using a poppy; bad guys wear black. These are all examples of the use of iconography to connote meaning, to inform and instruct.
Icons on the Web
On the web we use icons to communicate meaning and help users to navigate our products. This is essential as more and more users access digital content on a multitude of devices on UIs that are content-rich but often space-deprived. The success of this communication between system and user in terms of iconography relies on the user’s comprehension - Do they know what it means? Have they ever seen it before? Does it actually look like what it’s supposed to represent? These are the questions that we, as designers and usability professionals, need to be asking.
Globally-recognisable icons are hard to come by; an icon’s meaning varies depending on the system it’s used in. For example, a ‘clock’ icon on a supermarket website may indicate opening hours but the same icon on a video streaming site could mean ‘watch later’; use it in a web-browser and it means ‘history’ etc. I’m not arguing that this is a bad thing, rather the opposite - a user will know what system they’re operating and therefore will comprehend icons mindful of the context they’re in. What I’m trying to do is encourage consideration and discussion in their design, so we can at least maintain a consistency of approach if we can’t standardise the assets themselves.
There are very few global icons - icons which mean the same in any context, in any part of the world. Off the top of my head I can name a handful: document, print, home, search, and the navicon (and maybe Jesus Christ).
The Navicon (or Hamburger or Navburger or Menu Icon....)
The final name on that list (excluding JC, sorry) is a touchy subject round these parts. He’s an icon that is striving to make it into the dizzy-heights of global stardom as more and more sites adopt his usage. He hasn’t yet made it to the top table in some corners of the world, though, so he’s still sat with the kids despite being like, well more mature than them. If you want to learn a bit more about the navicon, try this article by Antonio Freyre on the Placeit blog.
— CURVE (@CurveAgency) June 18, 2014
So what can we do?
The use of icons on the web is not going to change any time soon, they’re the best man for the job; on our projects we just need to be mindful of the connotations they may have for different users, for different people.
The first thing we can do is to talk about them; simply ask people what they think an icon means. What about if it’s next to this other icon? Does it mean something else? What do you associate this colour with? How about if we drop the ‘database’? Can you still understand it?
Did you say something about a database?
My aim here is get people asking these questions to users, designers and any other stakeholders you can get your hands on. To help you start the discussion on your projects, we've listed some considerations that you should take into account when using iconography.
Curve's Considerations for Usable Iconography
If you follow these basic hints, it should help you on your way to making you create usable icons for your product.
Easy-to-understand iconography in a UI can help speed up user interaction by increasing the speed of recognition, meaning the overall usability of the product will increase.