With the explosion of small-screen mobile computing across the world, iconography is often the most space-efficient technique to use in your UIs.
Icons are a visual representation of an object, an action or even an idea and using them, instead of a word, button, label or hyperlink, often affords you a spacier, cleaner interface.
Icons also let you simplify your messaging to the user by using ‘visual metaphors’. Common examples include:
- The pencil icon to edit a field;
- The camera icon to take a picture;
- The floppy disk to save your work.
Icons are simple, practical, and you probably use them on a daily basis. And they make complete sense, right? What if your users felt no connection to those icons – or worse, simply didn’t understand them at all?
Icons: Metaphors and redundant context
So, let’s think a bit about the meaning of icons you use in a typical interface. Most icons have functions that are clearly identifiable to most users. But there are a few common icons that are less clear.
In fact, it turns out that there are only a handful icons that can be defined as ‘universal’ – that have the same meaning in every context that we see them.
Nielsen Norman Group (https://www.nngroup.com) tested this theory and they defined that the only icons that can be considered universal are:
I can’t overstate how important this is for each and every single implementation of a user interface. When we’re designing a UI for another culture/country with a different native language (or multi-languages even) and other cultural patterns, their iconography understanding may be very different.
Let me show you some quick examples.
The Save Icon
The save icon metaphor was born with the early days of the Graphical User Interface (GUI) with the drawing of a floppy disk. In general, it is an icon that works well for its purpose.
But let’s try switching our perspective for a moment.
There are new emerging markets – large parts of Africa, India, China, and South America – riding a recent technological boom. While the majority of their populations have no easy way to a computer, they’re almost guaranteed to have a smartphone in their pockets. These populations have never seen a floppy disk and may not have even used an object with a similar function.
So, how will these users understand and feel connected with this visual representation of “save” function?
Personally speaking, I’ve already faced this issue once on a professional level, in a very similar environment, where the “save” action was a crucial step for a task completion. The end-users were having more difficult than we expected since the floppy disk icon had no label associated with it.
The Favorite Icon
For gathering items and saving them to see later many user interfaces allow you to mark them as favorites.
This is most often represented by one of three symbols – a star, a heart or a bookmark icon. The bookmark concept dates back to the earliest versions of the Netscape Navigator browser.
Microsoft Internet Explorer instead called their bookmarking systems ‘Favorites’, and used a ‘starred folder’ icon.
Twitter employed the five-pointed star for favoriting tweets for 10 years, until last year, when they switched to the heart icon.
All of these icons naturally compete with each other. The star icon is often applied to rating systems and feature items, the heart icon for wishlists and sharing your feelings about something and the bookmark icon for labeling contexts.
Continue reading %What if Your Icon Choices Ruined Your Work?%