How to correctly use icons on your website to improve engagement

The main purpose of UX design is to make the user’s experience easier. Great UX design removes complications and distractions. We take one primary aim, for example generating leads, and everything within the design is focused to achieve it.

To make a design easier for a user, the cognitive load must be as low as possible.

Cognitive load describes how much information a person’s working memory can hold at any one time. Working memory has limited capacity, and so relies on previous experiences to more quickly make sense of what it is seeing.

The more you see certain numbers, words, images and concepts, the more familiarity grows. This familiarity is then utilised by your mind in new situations.

In other words, more cognitive load is used to understand things that the mind hasn’t seen before.

 

So, what difference do icons make to UX design?

I know what you’re thinking – “that’s great, but what does it have to do with icons?”

Well, it’s because many icons have been around for so long, and have been used so prolifically, that we recognise them instantly.

For example, when we see an envelope icon, we know it means message or email. When we see a telephone, we know it means phone call or phone number. When we see a padlock, we know it means security or login.

But that doesn’t mean that every icon is good. In fact, most icons used in design do the opposite of what we want.

 

What makes a good icon?

For an icon to be considered ‘good’, it needs to be understood by most people.

But why are some icons universal, and others aren’t?

There’s a strange trend that starts to appear when you look at universally understood icons.

Let’s take a look at these icons again:

Notice anything about them?

Well, the objects they represent aren’t very relevant today.

The save icon is my personal favourite.

 

 

It’s a floppy disk! A floppy disk!

There is a generation of people who are economically active that very likely have never even seen a real floppy disk. Yet this icon is still wildly understood to mean ‘Save’.

And why have they stood the test of time? Because these icons were originally used in a time when digital and their analogue counterparts existed at the same time.

Saving an item meant saving it on a floppy disk. Calling someone meant picking up a telephone receiver.

And as a result, they became instantly recognisable.

But as floppy disks stopped being used, as telephone receivers are replaced with mobile phones, these icons stayed with us, because they had become universally familiar. Those icons held a collectively understood meaning separate from the physical objects they represented.

Does this mean that a good icon must have a physical counterpart?

Not necessarily.

Icons fall into one of three categories; Universal, Semi-universal, Not-universal.

Very few icons are classed as being universally recognised. Those that are universal typically do have a historical physical-world counterpart.

But it won’t necessarily always be the case. Icons such as the Home icon or Map pin-point are growing in recognition due to consistent use.

And that’s the key part here – consistent use.

With consistent use, familiarity grows. And as familiarity grows, cognitive load is reduced.

For designers, it is incredibly tempting to be innovative and create new ways to quickly convey meaning. But when it comes to icons, consistency is king.

Designers need to consider what icons are being widely used to convey the same action or meaning, and use those icons too.

 

What makes a bad icon?

If we know a good icon is one that has universal understanding, does that mean a bad icon is one that doesn’t have a universal understanding?

The simple answer should be yes. But, of course, nothing is ever that simple!

The problem isn’t that an icon is bad because it isn’t universally known – it’s bad because it doesn’t convey the information it should to a user.

There are two common icon misuses:

• The icon means nothing to a user and there has been no attempt to explain its purpose, or,
• A universal or semi-universal icon is being used in a way that a user does not expect.

Fortunately, there are some very simple rules you can implement in UX design to turn a bad icon good.

 

How to make a bad icon good

Let’s look at the two common misuses separately and see how we can fix them.

Firstly, icons that the user doesn’t understand.

It’s easy for a Designer to create an icon and feel that its meaning is obvious. The problem is that the Designer might not have considered how the user will interpret it. Will the users understand it in the same way as the Designer?

There’s a simple solution. Tell users what the icon does.

Even if the Designer is confident that they know what the icon means, adding a simple label can dramatically improve recognition of the icon.

Even tech giants have got this wrong in the past.

Google trialled the application of a weird little snake icon to represent handwriting in the translation app. Realising it wasn’t clear, they adjusted how the icon looked and introduced icon labels. The results saw a 25% increase in the usage of all features.

 

 

It is such a simple technique, but labelling can have a powerful impact because it reduces cognitive load, since a label can instantly convey the meaning.

The second issue that makes an icon bad is using it incorrectly.

This problem mainly stems from some icons having a semi-universal meaning. As a result, icons can have meanings that don’t conform to what the majority of users think they should be.

You may think using labels with these icons might solve that issue. It doesn’t. This is because it creates a conflict in the users’ working memory, increasing their cognitive load.

Essentially, they assume what the icon means, but the label is telling them that it means something else.

Take this set of icons for example:

The IT Support icon uses the semi-universal icon for WiFi. The Designer actually wants us to think about IT Support, so this is a perfect example of creating a conflict within a user’s working memory.

 

Tips for choosing the right icon

In the world of UX design, even the simplest elements require thought behind them.

Fortunately, there are some guiding principles that can be used when picking the correct icons for a design:

• Use a 5-second rule. If a Designer cannot think of an icon that will clearly communicate meaning within 5 seconds, then it is unlikely an icon will be effective
• Check how recognisable the icons are. Do competitors use the same icons? Do other services, apps or websites use them?
• How memorable are the icons? Would an icon still be recognisable, two weeks after first being seen?

But the greatest guiding principle:

A label will always help convey the meaning of an icon. Even if the worse were to happen and a wrong icon used, a label can still help tell users what they are seeing.

 

Final Thoughts

To the uninitiated, UX design can feel finicky.

But great online experiences are driven by a focus on User Experience. A website built purely for aesthetics can be successful, but one that deeply focussed on how the user will get a seamless, frustration-free experience is much more likely to deliver on its aims.

We’ve seen significant improvements for clients from our UX-focussed approach, improvements that increase click-throughs, increase time on site and ultimately lead to more business.

A UX-centred approach is essential to take a website from good to great.