Are Icons Without Labels Conversion Killers?

Labels are helpful right? Without labels we are unable to categorise products, services, websites, cars, even people and many other things. I keep coming across websites and apps that use icons without labels. Are they completely mad or do they think it is cool to create uncertainty and confusion among their visitors?

Tumblr

Here are the some navigation icons from Tumblr. I used 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 icon 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 call-to-action (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.

Source: vwo.com

Avoid confusing simplicity with a minimalistic approach:

One of the reasons why we see icons 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 strain 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 popular hamburger button. They thought this would declutter 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.