Design Series: How icons can make a difference ✅

Design Series: How icons can make a difference ✅

Icons are everywhere! That little pedestrian puppet on traffic lights, the male or female icon on toilet doors and the temperature icons on the toasting machine. Also in the digital world it's all about icons. Whether you're shopping online, filling up your 'cart', or you're liking something on Facebook with a 'thumbs-up'. Even when you're making a picture clicking on the camera icon on your smartphone to activate your camera, you're interacting by means of icons. But why do we use icons and not just words? We make things visual because 'a picture is worth more than a thousand words'. An icon tells a story. If used properly, the meaning of icons is obvious to most of us and doesn’t need extra explanation. Icons help us gain and interpret information faster. The way we absorb information today is by clicking, scanning, scrolling etc. We don’t really need to read tekst lines attentively. Who has time for that anyway ? ? Icons it is, and icons will remain.

But still, this says nothing about how they should be used. There are plenty of examples of icons that do not perse demonstrate one simple meaning or encourage an intended action. So it's important to use icons in a proper way. We outline 3 benefits of the use of icons in mobile and how they can make a difference.

#1. Icons tell a story 'in a nutshell'

With the use of icons you can summarize content. Icons can tell at a glance what your text is about. Sometimes an icon alone is already enough to convey a message.

Icons are often a reference to existing objects. You can make icons relevant by using metaphors or figures of speech that are based on an agreement between the image and what is means. This way icons are understood in any language everywhere in the world.

From a designer's point of view, the use of icons not only saves you space but also helps create a better overview. Perhaps it all looks simple and familiar, and we take these icons for granted, but that's precisely what matters. In the example below you can see the Control Center of the iPhone. With a simple swipe and an overview of different functionalities, you have instant access to your camera or you can turn on your flashlight easily, etc.

icons make an overview clear

#2. Icons draw the attention

In our line of work we have seen that sometimes it's necessary to quickly guide the user to his goal. In that case we recommend the use of large icons that draw the attention. These icons give a quick view of the context.

Just take a look at the first aid (EHBO) app we built with Red Cross Netherlands. The main goal of this app is to help users find relevant information about what they should do in case of an emergency. By displaying the six most common emergencies by means of icons (accompanied by instructions), the user will find his way through the app a lot faster. An icon with text label can often improve the experience in user interfaces. In this sense, these quick views are a 'quick win' for the app.

icons make an app

#3. Icons improve readability

Icons do not need to replace the text, but they can clarify the context. When used right, icons can improve the readability significantly.

A good example here is the list of settings in your iPhone. In the example shown below you can see what a difference an icon makes. A list without icons is less clear and a bit dull, don't you think? The icons provide a better overview, allowing users to scan fast and quickly find their target. The combination between icon and text herein enhances readability even more, and therefore, the user experience.

How icons can make a difference


With these simple examples mentioned above we hope to show that the use of icons in design really can make a difference. It tells the context of the information you want the user to comprehend in a nutshell. Icons attract the attention making essential content visible. In order to not interpret differently, an icon needs to be clear and recognizable. They may look simple and not always be noticeable (coinciding with a design), but they can be a subtle guide to provide the user with the right info in order to find his goal.

All and all, icons play an important role in enhancing the user experience. The level of detail depends on whether you design an icon for mobile or web interfaces with more space. For mobile it's good to keep things simple and small. In the next blog we will go into more detail about how we design our icons. See you next time!