How to Use Icons

Summary

When done right, Icons are a great way of making an interface simple to use and visually stunning. when done wrong, they are confusing, slow to use, and lose users.

Icons should, in most cases, be accompanied by text.

The Science

Unlike on the desktop, mobile devices require a finger tap interface. A finger tap covers a round flat circle area on the device. Studies show that text buttons create a 'read-tap asymmetry' that causes the brain to stop and think before tapping on a word. Text is flat and small on mobile devices, and in our mind translates to being possibly sharp to touch.

Icon's are a great solution to this problem. Beyond their visually appealing look, icons are also incredibly tappable, round, and inviting.

Despite this, other studies show that only a very few icons are truly universally recognizable. These include the magnifying glass icon, the envelope, the printer, and the house. Most others may have a double meaning which will cause confusion.

The 'heart' icon, for example, might indicate a rating system or a place to save something for later. The 'hamburger' icon (three lines on top of each other) might mean a menu, and it might point to a list.

Confusing icons increase a user's interaction cost. After a while, it becomes mentally easier to simply tap away.

The Practice

How can we know which icons are easy to recognize and which are not? Here's a rule of thumb: If it takes you more than 5 seconds to think of the right icon to place in that spot, it won't be instantly recognizable to your users either.

We can solve this problem by simply placing text below our icons. Since the text is placed right below the symbol, there will be no 'read-tap asymmetry' to tax our user's brain.

You can draw more attention to an icon by it's size and shape relative to the elements around it. And you can make the icon easier to recognize by keeping its design simple. Focusing on its most basic graphic elements, rather than an big clunky (though pretty) design.

And, of course, test test test. Ask around to see if your icons are easy to understand, and simple to use.