When does iconography start to become useless?
Those little UX crimes.
Firstly, props to two sources here:
This is a superb article by Mary Formanek which lets you play the icon game, and explains this in much more detail:
Secondly, another incredibly good article by Shane P Williams that has some excellent advice and sources:
I hate useless iconography.
There’s a big difference between how you might see iconography used, for example, in Microsoft Word & Photoshop or on a website you’ve just launched.
In Microsoft Word (or other apps), we learn the symbols (shortcuts) to features we use. Sometimes we learn a few of them or quite a lot of them. Depends on how often we use the software and which features we commonly use. We learn these patterns — the symbols and their placement within the app viewport.
Now take a newly launched website, where we make iconography to represent ‘Free Shipping’, ’24 hour support’, “Money back guarantee” and “Saves you hours every week!”. Brilliant eh? Could waste hours on that and have a few design meetings to argue about them too. Hehe.
But wait — what icons can we make for these things? Well, an icon is a symbol for something. There isn’t really a “money-back guarantee” icon that people have learned in another piece of software or another website. So what do we do as designers? We come up with an iconic representation of what we think the text conveys. D’oh. What You Want To Say Is Not What They Get (WYWTSINWTG).
When you’re scanning and scrolling a web page, you’re taking in structure but also often looking for the ‘thing’ you are hunting for to complete your task (a structure, picture, a word, a pattern). Since understanding of an icon is based on previous experience, we have a problem. Because the icon is unlikely to be interpreted in the same way by different people.
In research, people also seem to remember icon positions, not necessarily the icon itself — as their primary means of locating a common feature in software (see http://bit.ly/2M1jdTu)
So what are icons there for? Well, we can use them as shortcuts for users, if most visitors have learned them. Some people (but not all) will recognise the symbol for a ‘burger menu’. Most people (but not all) will see a magnifying glass as a ‘search’ function. Amazon in India found that people thought it was a paddle board for table tennis!
So how can we rely upon icons, if different people interpret them in different ways or fail to ‘get’ them? That’s what labels are for!
Can you tell me what all these are? If you want to try your knowledge out, see Mary’s article at the top of this one.
They don’t have labels, so you might only know a few. This is why adding the word ‘MENU’ to a burger menu will increase usage of the menu. If someone hasn’t learned the symbol, a label is necessary. It’s actually hard to confirm if an icon alone will work unless you actually test it with people.
A good example of one that seems to be common is using a ‘gear’ icon for settings but does everyone know what this is? Probably not, especially for someone who hasn’t learned what it is, because it had no label.
So what am I saying icons should be used for? Can’t I just make “Universally recognised patterns that people have learned and can associate with an action”?
Well let’s see — you’re either inventing a new user interface paradigm or you’re just trying to make your website easy to use. What I call useless iconography are things that don’t tap into the symbols people have learned but make new things instead. The net result is that the icon doesn’t add to the informational density at all and it may confuse people.
We also have what I call the chicken problem. Why don’t we use fluffy kittens or chickens as bullet points? Because we are trying to provide structure for the text to be scanned by the eyes, not put pictures that we have to parse and wonder about. Icons can give structure and improve the visual hierarchy of content but if they aren’t learned, they are just a fancy bullet point.
The other problem is that if you use icons on the left of many text blocks, you can make it harder to scan the text itself. Imagine bullet points that are plain vs. some random farm animals I decided to use.
Does it make it easier to get the information you wanted the viewer to understand? No. Does it add any information density at all? No. It’s just chickens and eye/brain friction.
To demonstrate this to one company, we played the icon game. What we did was to give people a little test before the main usability tests we were always doing. We gave them an A4 sheet with nice big icons, shown with some context, and asked people to explain what they were. We didn’t use signage symbols — we used the icons the designers wanted to try on the site.
The replies were hilarious. We kept asking them to design more. What they figured out was that (at that time), the only icons people recognised with high consistency were Play, Stop, Pause, Padlock (sometimes), Home, Search and the bullet point icon (sometimes). Tons of stuff we tried that we recognised as designers, didn’t work.
The ‘guesses’ that people gave us were hugely varied and did not match most icons we tried. Now in 2021, we might find a share button, gear, microphone, Heart (like), share on social and others to add to the list of learned symbols. But it’s not always 100% and will depend on your audience. Just add a freaking label, and the problem is solved for the entire audience.
You should not be making people guess what your icons are. Even if you know what the icon is, you still don’t know if it will do what you think it will, when you click it. If you don’t know what it is, you’re even more confused.
If someone is trying to actually use a product, as opposed to having all the cognitive friction of working out what everything is, then it should be free of these foul demons. If a large proportion of users can’t work out an icon quickly, they’ll just “assume” what it does or not interact with it at all.
It’s also a very common and lazy pattern to use icons as structural items, much like bullet points. If it’s distracting people, causing cognitive friction, making them think (using system 2 thinking) to ‘understand’ a picture — then they aren’t reading the text or the parsing of the text will take longer.
If my system 2 thinking has to kick in to work out what a bullet point means, we’re in big trouble if what you wanted was for people to READ the content!
