The Applecado Blog
I’m a big fan of conventions. No, not that kind on this occasion but design and usability conventions!
If you’re lucky, when you download a new app or visit a new website for the first time, chances are you know how to use it. Hopefully you won’t really need to think through how to complete a form or how to take an action you came here to do – and using iconography well is one of those things that helps you know what to do without having to read anything else.
Icons are one of the smallest details (literally, in pixel size), but carry a lot of importance. If you get them wrong, you introduce a hurdle that can wobble your audience off the path they wanted to take or undermine the confidence they had to start it.
In this article, we explain what icons do, where they can trip users up, and how we make sure they’re as user-friendly as possible.
Icons are small images or symbols that represent something bigger or complex – they translate a label or bit of functionality so users know what to expect next.
They are pretty much a standard or even, an essential part of user-interface (UI) design, and can help us make apps, website designs, or forms easier to use, and often save screen space (which in turn, makes things easier to use!).
Iconography works because using it allows people to quickly scan and recognise things that are familiar to them, without having to read or think. It can compress an action like ‘tap here to add this to your basket’, into a single icon.
In ours opinion, icons shouldn’t just be decorative, they should be reserved to make a job easier, such as:
Signalling an action, for example, to search, delete, share, or call,
Represent an object, such as a folder, document, or calendar,
Highlight a status, a warning triangle, or a more encouraging tick, or perhaps a loading/spinner to let the user know to expect a wait here,
Simplifying navigation, for example with a ‘home’, a gear for settings, or a person for your profile.
When we introduce iconography into our wireframes, designs or user-interfaces, we’re building a visual translation that helps your audiences understand in seconds, and make your site or system feel more familiar instantly.
Icons can give better or quicker understanding and comprehension, and that can result in lower bounce rates. Users decide whether to use your site in seconds, and clear icons that reduce the amount of mental effort they need to put in will encourage them to stay.
Visual consistency, and the effort put into user interfaces is one of those things people detect immediately, and a consistent (visually, layout, etc) and well-considered set of icons can enhance the perception of trust when someone experiences your site or app for the first time.
Accessibility is more than nice-to-have. Without some form of labelling icons, you can be excluding people relying on screen readers.
Not trusting conventions! There can be a temptation to want to stand out, or to put a brand-driven or personalised stamp on your icons, but the heavy-lifting they do is because they provide quick and easy recognition. A customised icon that may be beautiful but is less recognisable forces users to stop and think, and that is not what we want.
The best icon is probably the one that’s been seen a thousand times before…
Icons without labels – if there’s any ambiguity, best practice suggests your icon needs a label. Especially important with any ‘destructive’ actions, like deleting. For example, does delete mean this one line or item, or everything?
A bin (or trash) icon normally means delete, but so does an ‘x’ sometimes, or is that ‘close’? If it’s not immediately obvious, as in tried-and-tested-obvious, then a supporting label is advised.
Another example is the magnifying glass icon which normally means search, but it can also mean zoom in or out, so make sure to allow for some extra detail or definition.
Inconsistent visual style. We touched on consistency above, but icons are best if considered together as if they were their own font or language.
To repeat how important they can be in establishing trust with a new user, imagine a suite of icons on your eCommerce site that guide a user into filling a basket, and proceeding to checkout – and then suddenly the button or icons in the checkout stages feel different. It might put up a subtle red-flag feeling, causing them to abandon their basket and look elsewhere.
Ignoring Accessibility – icon-only buttons without labels, hidden or otherwise, are invisible to screen readers. Providing a HTML label is highly recommended in the absence of a visible text label.
Icons that don't scale. A detailed icon that looks perfect at 48 pixels might be much less clear at 16 pixels for example. Icons should be designed and tested at every size they might be used at.
Jumping on trends (for the sake of it). This one probably relates to every other element of your design, see our ‘trends’ blog for more of what we mean, but trends change – and chasing a particular look and feel at the expense of clarity is not something we’d recommend.
Relying on ‘Tutorials’. App tutorials are too easy to rush through, people are often busy or impatient, and will tap their way through – and then they can be hard to find again later. A tutorial page doesn’t make up for confusing UI.
If you want a site where small details make the difference for your team, or your customers, talk to us. We’d love to help.
Share this post on your favourite social platform
