The ineffectiveness of lonely icons

This morning I was asked to perform a little tech support for my mother. Here was the problem:

How do I write an Email on this tablet? It only has Gmail.

Now; you may scoff. That is an absurd question, isn't it?

No. It's a great indication of a reality at least one whole category of people experience. The gut reaction of us web designers and web developers smirking or rolling our eyes is also a great example of the hubris and lack of understanding which many designers have when they are creating applications targeted at a general audience.

After more than a year of using her tablet to read Email, my mother had no idea the Gmail application can be used to write an email.

Why? Because after more than 12 months of using an application, she still failed to recognise two vital core-feature UI components. Because they were just fucking icons.

Yes, I made a swear.

Here's what Google believed were appropriate user interfaces to expose the "write an email" and "send this email" functions to a general audience:

• A monotone shape that might resemble a pencil in a big red circle.
• A monotone shape that might resemble a paper aeroplane.

Neither icon were in a familiar looking "button" graphical interface to give them any further context, neither were accompanied by a text label.

There are a number of assumptions made just by using icons. And those assumptions are not always safe. Lets examine a few;

Rendering to screen

How do you display an icon? There are three ways I can think of off the top of my head that a web user interface might attempt to do this:

1. Use an <img ... /> tag pointing to a graphical file (SVG, PNG, whatever).
2. Use an "icon font".
3. Use an Emoji character in text.

There are likely others I'm forgetting, but lets just look at those three and examine them for suitability. If you hadn't already thought to examine how you're putting an icon into your interface, congratulations on making an assumption already...

1. The image tag.

Consequences of using this include:

• An additional http request to get the resource OR
• Added file size for the initial page payload if you're BASE64 encoding it
• Did you put an alt tag in it? Points if you did, big fat raspberry if you didn't because if it fails to load, or your site visitor is using assistive technology, you now have a UI element that is unexposed to your visitor.

2. An icon font.

Consequences of using this include:

• An additional http request to download the font.
• An excessive sized response because icon fonts are batched with many icons in one file, most of which... are not likely to be used on the page in question.
• Is likely to be inaccessible to:

  
  

  • Anyone who's system corrupts, blocks, or is incapable of rendering the font; you now have a blank character or broken character symbol instead of an icon.
  • Anyone who's using assistive technology, who will likely hear something like "UNICODE CHARACTER U+2000" instead of anything meaningful.

3. Emoji:

Consequences of using this include:

• You're hoping that the users device has the emoji reference you're using (Emoji are added to operating systems over time; was yours available to your audience's 4yr old cheap laptop?)
• You're hoping the Emoji is rendered well by the OS. You have no idea. Take a look at the difference between the same Emoji on different devices; are they even interchangable when they're supposedly showing the same thing?
• In either case, assistive technology isn't likely to offer much help when encountering an Emoji character.

Icons are pictograms. They're modern day hieroglyphics. They're poor at conveying meaning and are easy to misunderstand, or are simply unrecognisable.

You know what linguists and archeologists struggled with for decades? Deciphering those simple pictures which were initially made so that the common illiterate could understand concepts without someone standing there and telling them. Why did historians and archeologists have such a protracted problem in understanding these purpose-made simplistic pictorial icons?

Because of assumed context which we no longer shared with the authors.

Guess what? This problem exists today in exactly the same way.

Icons isolated from supporting context are bad at conveying concepts.

I don't need to point out the example of my mother not recognising that Gmail's 'pencil' icon represented a concept of writing a message. I don't need to point out the same problem with mum making a connection between an icon of a 'paper aeroplane' and 'sending a message'. Both of these are, upon any level of thought, quite bizarre equivalences between concept and representation, relying on some actually niche assumptions about how you write things or how things are delivered.

There's also the larger issue of "oh, is that a pencil?" or "oh, is that an aeroplane?". Icons are widely mis-recognised everywhere. There are memes upon memes about exactly this. And it's not because any particular icon is bad; it's because they all rely on assumed context - which isn't always shared. You know this. From the teenager talking about the "save icon" and having absolutely no clue it's a representation of a floppy disk, to people trying to explain to a mechanic which light is lit on their dashboard .. "the one that looks like a person on the toilet".

Icons. Suck. At. Conveyance.

Broken concepts

There's a classic example of inappropriate assumption involving iconography that I see time after time, and which will be evergreen. Language selectors.

In countries that have single languages, the assumption by naive designers is that flag == spoken language.

It's wrong.

• There are many countries which have more than one official language.
• There are many countries that have the same official language.
• There are countries that care about your using the wrong flag (The US flag does not represent "English"... not by a long shot).
• In any country there are untold numbers of residents and visitors that speak languages other than the official ones of the country.
• In any country there are untold numbers of residents and visitors that speak none of the official languages of the country.
  

Countries are geo-political entities represented by a flag. Language bears no direct relation to country. As a result, pictures of flags are useless for language selection in any place that would actually benefit from a language selector.

If you want to make a language selector, use words that list the available languages in the language of that language. So "Cymraeg" and not "Welsh". For example.

Incorrect applicability

Here's another often incorrect assumption: My users recognise the icons I want to use.

I bet that's what Google's designers thought. They. Were. Wrong. The problem with designing anything is assumed context. Gmail is an application used by pretty much every type of person it's possible to imagine. The reliability of shared experience is likely to be close to nil. It has to cater to people who are only just getting online and who have no experience at all with "convention".

It was incorrect of Gmail's designers to believe that lone icons were an appropriate and applicable choice for the target audience.

Incorrect expectations of discoverability

A general audience is the most common audience any of us are likely to be catering for. You can't assume it'll behave in a particular way.

When I claim that using lone icons is always going to alienate whole categories of people, like my mother's generation, I always hear people bite back. "Well people will just have to use that app and then it'll become obvious".

Older people are not like children. Are not naturally inclined to touch things and see what happens. Are expecting they can break things through ignorance. Are not going to just try stuff. They haven't grown up with computers. They might not trust the computer (I hear Amazon knows what you say, I hear Facebook spies on you). They are not, therefor, going to throw caution to the wind and click about.

Missing interaction indicators

Not only did my mum not recognise the iconography Google were using, she didn't recognise these elements were interactive. Because... they're symbols devoid of labels that might have got her to try interacting, and they're also symbols without contextual indicators of interactivity, such as:

• Animating on hover or on initial load
• Appearing like a normal form button

• Instantly recognisable as something that is interactive.
• Instantly convey an accurate equivalence of the action or concept to a viewer.
• Be equally useful to people using assistive technology as those who are sighted.
• Not break the interface or experience when unable to be displayed.

Lone icons are hard to satisfy all those requirements. What stands a better chance?

Text.

In precisely two cases:

1. When accompanied by words. And/or;
2. When the user can be expected to be familiar with the specific icon in question.

That's it.

1. When accompanied by words

Words are much less open to interpretation than icons. Because words are the language and language is the concept. Without language, there is no conceptualisation.

So, the word "save" means ... save. There is no extra step. No interpreting an abstract symbol into something else. No "is that a floppy disk? Well I use those to save files so maybe clicking that icon will mean save?". No "Hmm, that's either a line or a ski-pole or a pencil. Well, you use pencils to draw. And i suppose to write too if you don't have a computer or a pen to hand. Maybe that means write?".

2. When the user can be relied on to recognise the icon's meaning

What icons offer that's better than words, however, is rapid recognisability to those already familiar with that specific representation of the concept. This is why we have... road signs.

That's also why we don't allow just anyone to drive a car based on the fact they can operate it mechanically. We require they learn the iconography. We require they study them, commit them to memory, and we test them.

If they fail to understand the icons, they are not allowed to drive cars. And plenty of people fail this. Even when they're read books that explicitly state what each icon is depicting. When the icon's meaning has been made explicit to them, and isn't just relying on its efficacy of conceptual communication.

Icons are great additions to labels or great when used by a targeted audience.

They are lousy at all other times.