Improving Icon Usability

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.

Global Icons

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.

New Curve blog article: Usability testing the nav burger http://t.co/7zThVHIr1i #usability #UX

— 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

• Cultural differences
  • A mailbox may look different in many countries - don't use one of these to connote an inbox
  • Using text in the icon is a no-no - what about when the site is translated?
• Design for the size it will be used at
  • Vectors don't always scale down well as icons; something that looks great at 320x320px may not look so good at 32x32px...
• Keep it simple
  • Dressing up icons too much results in poor recognition at small-sizes
• Consistency across the set
  • Approach the design holistically; these icons are part of a bigger product, they need to fit with each other and the design of the product as a whole
  • Perspective, lighting, style - keep these consistent so users know what they're for

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.