icon showing phone turned sideways

Because it is laid out in columns, this site doesn't display properly on a phone held vertically.

Please turn it sideways.

94
backnext page
Design patterns

Icons and symbols

Icons or symbols often seem self explanatory to their designers, but not so much to their users.

No items found.

Icons or symbols often seem self explanatory to their designers, but not so much to their users.

Exploring information design for the first time, it’s easy to assume that scattering a good number of icons in a document will make it attractive and easy to read. But it’s not as simple as that.

In documents or websites, you can often achieve the same thing in a different way. Bold headings, abstract graphic shapes, and colour coding can give shape to pages (see imageability) without you having to find a meaningful icon for every situation.

Icons and symbols, by the way, are not technically the same thing, although in practice people tend to conflate them. Icons are pictures of things, while symbols represent an abstract concept. So a road sign showing children crossing is an icon, whereas the no entry sign (a red circle with a white bar) is a symbol. It doesn’t matter for practical purposes. I’ll just use symbol here.

Two key problems with symbols are recognition and interpretation.

  • Recognition: people need to recognise what they are seeing.
  • Interpretation: having recognised the object depicted, they need to know what it is trying to tell them.

Take the symbol on the left: assuming people can see that it’s a wine glass, does it mean ‘this way up’ or ‘fragile’? And is that a reflection or a crack. (which would indicate fragile)?

How this helps
If you use icons for critical information, be sure to test them.
Things like this
Search