Are you annoying visitors by having icons without labels?
Labels are helpful right? Without labels we are unable to categorise products, services, websites, cars, even people and many other things. So WTF – I keep coming across websites and apps that use icons with no labels. Are they completely mad or do they think it is cool to create uncertainty and confusion among their visitors?
Here are the latest navigation icons from Tumblr. I use Tumblr a few times a week but I still can’t remember what all the icons stand for. Inventing new icons and not giving them clear labels just creates ambiguity, confusion and ultimately frustration from a user perspective. Many of us have tested the infamous hamburger button and found it inferior to a simple “Menu” label.
Ok, so labels can have negative associations if they are misleading or inappropriate for the situation. But if you are unsure what the best label is then A/B test them to confirm which is most effective. Labels can also work to your advantage as vivid descriptive labels can help to create images in our mind that grab out attention and encourage a positive response. Buffer has the “Awesome” plan for their more active customers. Why use a boring term when you can inspire people.
Labels are immensely powerful as they frame how we perceive a situation or event. For instance people are psychologically more driven to avoid a loss than a potential gain. We can use this to our advantage by framing an action from the perspective of a potential loss. VWO use a label on their alternative CTA that reinforces what a visitor will miss out on if they don’t click on the primary CTA. This makes it psychologically uncomfortable for the visitor to click on the alternative CTA. This in turn makes the primary CTA appear even more appealing.
Avoid confusing simplicity with a minimalistic approach:
One of the reasons why icons are used without labels appears to be that simplicity is confused with having a minimalistic approach. This often leads to over-simplicity which risks creating more friction and cognitive load because key navigation elements are either hidden or sit behind meaningless icons that new visitors cannot be expected to decode. Sure, try for a simple design, but think very carefully before you remove anything in case it assists the user journey.
Zeebox is a case in point where they thought their app would benefit from removing the top navigation buttons by introducing a side-menu activated by the now derided hamburger button. They thought this would de-clutter their app and give more prominence to their content.
However, after they implemented the new design they found that engagement time halved. They had to rush out an update to undo the damage and decided to A/B test it next time. When they did A/B test a new version of the side-menu it was again a disaster. Needless to say they did not implement a side-menu.
Navigation is crucial to an app or website’s success and so make sure you A/B test new architecture before implementing it. Just because Facebook is testing something new don’t assume it will work on your site. Even Facebook have added labels to their persistent bottom navigation. So, please stop annoying your visitors by using icons without labels.
Thank you for reading my post. If you found it useful please share it using the social media icons below.
You can view my full Digital Marketing and Optimization Toolbox here.
To browse links to all my posts on one page please click here.
- About the author: Neal provides digital optimisation consultancy services and has worked for brands such as Deezer.com, Foxybingo.com, Very.co.uk, partypoker.com and Bgo.com.
- Neal has had articles published on website optimisation on Usabilla.com and as an ex-research and insight manager on the GreenBook Blog research website. If you wish to contact Neal please send an email to firstname.lastname@example.org. You can follow Neal on Twitter @northresearch, check out the Conversion Uplift Facebook page or connect on LinkedIn.