Icons are a common user interface element which expresses actions or objects in a graphical way. They are tiny and are thus useful for saving space on screen, especially on mobile devices. On the other hand, icons can suffer from poor recognition and be quite unuseful if not used or designed correctly.

What can we do to enhance their recognition?

Learning and enterpreting icons

First, we have to understand the concept of icons. Icons are graphical symbols that are mimicking real objects in the digital world. They are commonly used and have to be very intuitive so they serve the purpose of quick recognition since they squeeze so much information into one tiny clue.

Let’s take the ‘save’ icon, for example. A floppy disc, which has not been psysically around for almost two decades. But after so many years of replacing the actual floppy disc with CDs and USBs or the cloud in the real world, we can still find the floppy disc icon in many software UIs because it’s been used so long that it’s still perceived as the generic prime(vial) concept.

Consider context of icon distinguishing

Think about this two different contexts for distinguishing icons:

• distinguishing icons one from another in general throughout all UIs we use every day
• distinguishing icons inside the same user interface

Surely, the context needs to be considered carefully: the context of the used OS, the context of the device from which the users access the app/software, the duration of usage per day, similar app/software usage practices, best UI design practices, age and experience of the user and so on.

Are there some other patterns that need to be considered, like other apps that the user uses within this context, f.e. for his work? How are the icons used there? What do they represent? How are they used there? There might be some patterns that users are used to so you’d also have to adjust and study those.

The aim of icon use is to make a visual shortcut for the user. Think about what the user already knows and develop your solution from that knowledge.

Enhancing recognizability

How do we even recognize icons? Surely, it’s by their visual characteristics. We can distinguish them by different types of their characteristics: shape, size, colour, position, context, and so on.

By combining differences of more of this types of characteristics, we can make them even more distinguishable (one from another). But design is about consistency; making everything the same color and line width, which conflicts that, right? So we are presented numerous fancy apps and interfaces while browsing the web within which we’re unable to navigate quickly because of too much similarity between icons.

The problem of minimalism

Icons are tiny (or at least fat-finger-friendly on mobile). So as a user interface element they fall into category of tiny little hints that user interacts with and makes actions by clicking with further expectations of the system’s response.

Like the hamburger menu on mobile, for example: three lines, when clicked, open a whole new dimension. If the user doesn’t recognize the meaning of three lines icon, they might not even click it at all or may stumble upon this main navigation feature by mistake to see that that’s actually the main navigation element of this UI.

The problem of minimalism and clean design is that icon history, context and the user can become a neglected aspect if icon recognisability is not tested up front. Icons may not be perceived ‘self-explanatory’ and lead to frustrations with the user. Cleaning the UI of clutter and only present the minimalistic presentation of content look great in designer portfolios. But to achieve that level of minimalism that also suits its purpose of user’s task achievement is a lottery. Comparing to big names out there, being able to create a half million worth 2 colour square painting or a four circle logo can only be achieved by creating hundreds of realistic oil paintings and portraits before that.

You need to have a strong background to be able to minimize something to its essentials and send the same scope of information. Don’t sorely rely on one user’s knowledge and experience. Test it and make iterations to design the best possible icon that takes minimum time for user comprehension.

Time aspect and context

There is history behind each icon and icons also evolve with time. This is where we face a conflict; a cognitive metaphore that reflects specific ideas and concepts, which very much depend on context and historical background. So it’s a juggle of the designer to know what kind of concept to adapt in a specific case if he doesn’t have thorough knowledge of user’s background, experience and context.

The solution

The solution here is simple; test your typical user’s (personas’) icon recognition in early stages of designing an UI for an app or software and make it consistent throughout the app or software. You will probably never cover all groups of users, but aim for majority and offer additional cues to others (like tooltips, hover descriptions or walkthroughs before first use).