In our last post in this series, we explored Peirce’s triadic sign theory. Peirce categorised signs and signals—including visual, physical, and linguistic signs—into three distinct types.
Symbols, on the one hand, refer to a specific grammar or language that must be learned in order for the correct interpretation of a sign to take place—we gave the example of road signs in the last post. Icons, on the other hand, directly resemble the object they’re signifying—such as a camera app icon. Finally, index signs don’t resemble their signified objects—they rather imply them. Think, for example, of a brush icon for a ‘memory cleaner’ app.
I argued this typology can be used to our advantage as icon designers, allowing us to categorise different types of app icons and understand how and why certain things work for certain apps. The success of any icon relies on user interpretation of a sign, however, and today that’s what we’re going to be focusing on.
When we talk about user interpretation, what we’re really talking about is usability. As an app icon is rather literally a visual representation of digital object or action, an app icon is only as useful as it is communicative. It can be as pretty or well-designed as you like, but unless users can quickly interpret its meaning in the context of a GUI, it’s not going to be a very useful app icon—and therefore not a very good one.
The very nature of an icon already makes it well suited to usability. They’re compact, quickly recognisable (if done well), and do not need to be translated (they aren’t what Peirce would categorise as symbolic). Their size means they’re well-suited to a variety of interfaces, including touchscreens and mouse UIs.
Furthermore, the majority—if not all—smartphone operating systems require text labels to accompany app icons. Even if your app icon is awful, people can still learn its function thanks to text labels (although this would make your icon symbolic rather than representative, which is not what you really want.) Realistically speaking, half the job is already done for you in terms of usability. It’s up to you to make sure that the message hits home.
In this case, you need to formulate an app icon in such a way that its meaning is quickly and effectively communicated. How can you achieve this?
There are some basic rules, such as:
- – Ensure the number of visual elements or details in an app icon are kept to a minimum—no more than two or three.
- – Use a simple, recognisable colour scheme—again, two or three colours will do the trick.
- – Ensure an icon’s design is appropriate for its size—is it going to scale well on every possible resolution?
However, this only touches the surface. Many of the best app icons are not intuitively recognisable, but app designers integrate them throughout the interface of the apps themselves in order to strengthen their design. An icon designed for the app of a particular brand, for example, could resemble the brand logo (or not). Either way, peppering the UI of the app itself with the icon (as a menu button or even just a logo in the corner) can help build recognisability with a user.
One of the biggest challenges of ensuring your app icon is quickly recognisable is making sure it stands out from the crowd. Go on the app store right now and find at least 20 apps offering a similar service to the app you’re designing an icon for. What are the common elements in all of these? What can you do to avoid reproducing those common elements while still ensuring your message is communicated? Is your icon representative or indicative of the app’s function, or is it merely symbolic, referring to a common language of functionality created by other designers? This sort of self-reference is to be avoided.
Finally, a great way of ensuring icon usability is by testing them directly on, well, users. Get some friends or colleagues to look at your icon, or set of icons, and ask them what they think the app icon represents (without telling them the function of the app). Time their responses to see how quickly they interpret an app icon—if it takes more than five seconds, a veritable lifetime in smartphone usage, then it’s no good. After all that, test them to see if they can remember its meaning after a week or a month.
App icons, like any other iconography, represent a complex relationship of signification and interpretation. They are not simply pretty pictures. In order to make sure your app icon hits the target, you need to ensure it ticks all of these boxes when it comes to communication.
Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…