Focus on Iconography

Why is iconography important for eye-catching and effective in-app UX?

Icons within apps

It's been a while since our last Focus on... article (focused on colour). In this post, we’ll be exploring some thoughts around iconography and the various factors to consider when designing an icon set for an app.

We won’t be talking about an app’s launch icon. Instead, we'll solely focus on icons within an app.


An icon paints a few words

We’ve all heard the phrase ‘a picture paints a thousand words’. It's true but an icon only needs to paint a few words. It doesn’t need to tell a complicated, character developed, emotion-fuelled story.

Icons need to instantly tell the user where the interactions are in an interface. They need to reinforce the communication that the text is making and perform other functional tasks. In short, they are signposts. Just as on a road; icons in UI design tell the user “This way to the important stuff”.

Essential information only

Sticking with the signposts analogy, road signs are designed to communicate important information in a short space of time (as drivers are moving at speed). In order to achieve this, they’ve been intentionally simplified back to the most basic version of themselves, losing none of the important messages but losing all of the unnecessary flourish.

It should be no different with icon design. The French aviator and author Antoine de Saint-Exupéry commented about his engineering experiences:

“A designer knows he has achieved perfection not when there is nothing left to add, but when there’s nothing left to be taken away”.

Essential information only. Be careful not to let your icons subtly become illustrations, they’re not the same thing.

Family Resemblance

A trustworthy family

Icons within an app should all feel like they belong to the same family. This helps to build the brand of the product and creates a trustworthy reputation across all interactions in the app.

In practice, this means identifying some key characteristics early on in the design phase. Should this product look rounded and friendly? Square and corporate? Thin and elegant or bold and confident?

Once these values are agreed on, they can be applied across all the icons in the app.

The other advantage of this is that it helps future proof the design phase. If the client comes back six months later with more features to add, it will be easier to pick up where you left off (in terms of visual tone). Keep a note of the key personalities of the app’s iconography.

A barrier to creativity?

Whilst the above advice will help to form a family of icons that look suited to the individual app, it is also important that the icons we design for our own apps bear at least some resemblance to common icons found in other apps.

At first this may sound like a barrier to creativity but in fact it's an opportunity for increased usability.

Users are so used to the way things currently work on a device that shifting too much from the norm is more likely to be a hindrance than a success.

This doesn’t mean everything should look identical, remember it should have its own family personality but a totally new approach to a familiar interaction is likely to cause confusion if it isn’t handled thoughtfully.

Elegantly confident

Elegance v Clumsiness

Elegant icons are useful when the brand in question calls for that extra level of finesse, but also for those times when the icon is actually secondary to the rest of the content around it. In short, they’re beautiful yet humble.

Occasionally, you see examples of icons that are attempting to be elegant, but they’re not quite cutting the mustard.

It could be that they haven’t yet matured into their final form, but it could also be that they’re trying to be something that they’re not. Our job as designers is to identify when to keep playing with the vector til it reaches maturity, or to acknowledge its times to move on and find a new direction for it.

You can tell these icons apart because they’ll be slightly heavier in some areas than others, they don’t have the balance of a fully formed shape. Their corners will be subtly angular when they’re trying to be smooth, or vice versa.

They’re easily fixable and not overly offensive to the eye, but they do undermine the authority of the rest of the UI. Don’t forget it is likely that these icons are the elements that users are interacting with most, so these qualities matter.

Confidence v Arrogance

Confident icons know what their purpose is, they know which direction to point the user in. In an ideal world, these would be the majority of icons that we encounter. Broadly speaking, they are. Unfortunately, some icons have too high an opinion of themselves and they begin to appear arrogant.

You can tell these icons a mile off. They think they’re more important than other elements on the screen so they’re unnecessarily big in relation to other elements. Their entire shape is filled in with colour, making them look heavy and serious. They’re shouting when they should just be talking. Nobody wants to be their friend.

Details matter

In conclusion, details matter.

It matters that you remove unnecessary details to the shape. And it matters that you treat the details of each icon the same.

It matters that you consider the execution of each icon, avoiding clumsiness and arrogance. A few details missed can subconsciously undermine your apps authority in the mind of the user.

Read the previous post in our Focus on... series here.

Looking for something else?

Search over 400 blog posts from our team

Want to hear more?

Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!