Not all icons are universal

As I’ll discuss in this post, the main purpose of an icon is to represent an action, object or idea. Therefore, all icons should convey a clear message regarding their purpose. But is this always the case? I take a look at this question and share the results of a short survey I conducted on the subject, below.

Universal icons

When it comes to the web, there are many icons out there, representing many different purposes. Then there are a small handful of icons known as “universal icons”. These icons are easily recognisable and are arguably universally clear on their function. Examples of these would be the magnifying glass for search, the printer icon for printing, the home icon to navigate to the homepage and the envelope for mail.

Unfortunately there are very few icons considered “universal” and the majority of icons are ambiguous in their function.

Ambiguous icons

I’m sure we have all come across icons that are confusing in meaning, or the same icon that could be used to represent two different outcomes. It can be easy to confuse the functionality of an icon across different websites, an example of this would be the hamburger icon. This icon is mostly used to represent a menu, and although it strives to be universal, it can also be used to represent a list. The problem here is that a user should be able to trust that clicking a particular icon will return the expected functionality.

Another example of ambiguity in icon meaning would be the heart and the star icons. Both of these icons can be used to favourite, save or rate an item. For example, while viewing an article on the Apple news app, how does a user know whether clicking the heart at the bottom of a news story will like or save that news story? Uncertainty of a function can lead to user avoidance of an otherwise useful feature.

What are web users telling us?

To get an idea of how some icons are perceived out of context I ran a survey in which individuals took the challenge to see if they could recognise the functionality of some of the more common icons used on the web. 73 people responded, with the age range being from under 18 to over 65. The biggest age group was those between 25 and 44 years of age (54 people). Everyone who participated stated they had experience of using the internet.

Of the 73 people who completed the survey only 9 participants could correctly identify all the icons. The results are displayed below:

Interestingly (for such a commonly used icon) the icon that most participants were unable to identify was the share icon. 50.68% of participants incorrectly identified the share icon as a forwarding icon. The share icon is depicted by an arrow in a square pointing to the right; a forwarding icon generally depicts a similar arrow pointing to the right. Although their functionality can be considered similar, there is little about these two icons that describes the difference in functionality they provide.

Two other icons that were confused with each other by approximately 10% of participants was the iOS location and message icons. Both of these icons share the similar shape of a paper plane with a few minor differences. Although approximately 80% identified these correctly, the majority were individuals who considered themselves to be highly experienced using the internet. This indicates recognition by experience and again there is little about these icons to differentiate their functionality.

One could argue that had the icons been presented in context then their functionality would be clearer and therefore participant scores higher. While this is likely to be true, it begs the question that what if someone with no previous experience of using the internet is attempting to access the web? How would they know what the following icon functions are? For example, looking at the screenshot below, would they immediately know they are able to send a message without pressing the icon first or asking someone for advice?

Some recommendations

When used correctly, icons can visually enhance a website, and save valuable space on a web page.

To overcome the problem of varying expertise levels of users, consider using a text label to accompany each icon, as shown in the screenshot below. This is especially useful for those icons that aren’t immediately recognisable without prior experience of it’s function, improving usability for all users.

To sum up, a good icon should:

• Be easily recognisable to the target audience
• Be large enough to be accessed by both touch and mouse
• Consistent with commonly used icons
• Avoid abstract designs with ambiguous meanings
• Are universal or very commonly recognised
• Serve a purpose
• Be easy to use and recognise