All too often, poorly conceived and implemented icons solve more problems for the designer than they do for the user. It’s not that icons aren’t a valuable tool in the interface armoury, it’s just that they are too often overused and implemented poorly. While this author’s particular iconic bête noir, the hamburger menu, is a classic example of this, it is far from alone in representing the worst indulgences of iconography gone rogue.
At the heart of the issue is the fact that universally understood icons are exceptionally rare, and that visual metaphors which make sense to a designer who has spent hours and days pouring over an interface make much less sense to a user trying to work out what is going on in a matter of seconds.
One might (admittedly crudely) categorise icons in three ways:
Universal icons which are so familiar and frequent that they don’t require labelling and can be used liberally. Examples of such include home, print, search, play, pause and forward and at the risk of stating the obvious a designer should always use the standard icons to signify that functionality when designing.
Ambiguous icons are ones which are familiar, but carry too much functional ambiguity. For instance, a heart can mean favourite, bookmark or like, and a star can mean favourite, rate or feature. For ambiguous icons the designer effectively has two choices, either they can give the icon a label or they can take the gamble that users will be so frequent with that icon in that context that over time they grow used to that specific functionality.
Obscure icons are ones which are neither familiar nor universal and make sense only in the mental model of a designer browsing through an icon library. These are to be avoided. This author has in the past seen a calendar used to signify browsing history and a cookie to show – you’ve guessed it – a hidden cookie pop–up.
Like many UX principles, despite appearing almost self–evident, too many high–profile websites and apps don’t embrace them. Two experiences from my weekend’s cycling with my mates brought this into focus (cycling at weekends is what UX professionals do when they don’t have enough data already in their lives).
1. The café where we stopped for coffee and cake (another overlap between cycling and the UX lifestyle) only took cash – so one of the lads paid for me and I agreed to pay him back via PayPal. The only thing more disappointing than my PayPal balance is the obscure ambiguity of the icons. I had no idea how I started the process of paying back my dues. Call me old fashioned but a ‘transfer money’ link would have done the job.
2. We’re coming into winter and that means layering up, because let’s face it not only is LYCRA completely socially unacceptable for men of my (or any) age, it’s also not warm enough by itself to get you through the Irish winter months. A few of the guys were wearing some fine Galibier clobber so I visited their website when I got myself home, in search of arm–warmers, a gilet and overshoes. As you might see from the image below, somewhat like PayPal I really wasn’t sure what to do next in order to find what I needed to avoid cold fingers and toes in the Antrim hills in December.
Done well, icons bring meaning, richness and recognition to an interface. They make good targets, and are rightly popular on finger–operated and gesture–led interfaces. They can bring a pleasing aesthetic to a design and help reinforce a ‘house style’ within a family of products or websites. They are familiar to many users from their use in toolbars, such as Microsoft Office dating back to the 1990s, along with bookmark toolbars on most modern browsers.
Icons are designers’ best friend when it comes to functions like home, print, search, play, pause and forward but can be users’ worst enemy when you stray outside those recognisable functions.
To make the most of them, designers do well to implement some simple rules of thumb:
- There is a set of icons which are branded into the brains of users;
- The number of icons which fall into this category is small, really really small;
- The icons which don’t fall into this category need labels, always;
- Not everything benefits from an icon; if a concept has some inherent complexity often a text link will work much better.
