Icons make poor menus

Using icons for navigation – or any high level concepts – gets tricky very quickly. 

Compared to a word, icons have to work much harder to communicated a concept to a user – the user has to recognise the icon and infer the meaning. Successfully used icons are well understood because they are shared across sites and apps, users learn their meaning elsewhere and bring that with them to our interfaces.

This learned-by-convention and the recognition->inference route to understanding mean that icons are best used on simple, well known interactions, and direct interactions. Save, download, edit etc. If a user has to think about the icon it’s not working.

Examples from a recent work project:

  • “Home” and “Settings” are well known basic concepts with very well established icons across virtually every digital product. Great candidates for icons
  • “Local inspections” and “Workspace selector” are product specific concepts that are high-level concepts with no established convention. These are poor candidates for icons.

I’ve been through several de-iconification UI re-designs in financial services. It’s easy enough to use icons for the basic features but once you get on to things like ‘foreign exchange transfer’ or ‘trade finance solutions’ finding differentiated icons becomes impossible and even if you do they aren’t understood. Using icons for navigation quickly becomes unsustainable as your product grows.

Not all icons are iconic. Best to just say what you mean.