Do icons need labels on mobile apps?

Question

There have already been studies that prove labelling icons enhances usability on desktop applications. This is why Microsoft Outlook started labelling its icons.

Does the same logic apply to mobile apps? There is limited screen space on a mobile phone. Adding labels to every icon would harm the aesthetic design. I'm thinking of designing my application without many labels, like this popular app:

My theory is that even though users don't necessarily know what all the icons do (three lines, two people, smiley face, plus sign), they will try tapping them to learn what they do. My feeling is that mobile applications are more playful and inviting than desktop applications, so users are not afraid to explore unknown icons. The desktop is a cold hard machine for serious business, whereas your phone is always with you and you interact with it every hour.

Answer 1

Of course it applies. Limited screen real estate does not invalidate the conclusion that labeling icons improves usability of them. It merely makes it inconvenient.

A user intimidated by desktop app icons is likely just as intimidated by mysterious icons on a mobile. The platform isn't the discerning factor here. The user is. I have seen plenty of people intimidated by their phone. What may well be the case is that the mobile audience in general is a lot younger and more used to just experimenting with an app on a phone to see what happens.

All in all, while I think that labeling icons improves usability just as much on a mobile versus a desktop platform, you are more likely to "get away with" not labeling icons on a mobile platform. Because of the audience, not because of the platform.

Answer 2

There isn't any reason why the research wouldn't apply to mobile apps. If you want to put the aesthetics ahead of usability, then go ahead. However you should realize what you are doing rather than rationalizing that you are doing it for the good of the users.

Bare icons are good in the cases where the meaning is clear to very large number of users or when users use your app very much. The latter depends on your app, but I would posit that most users use most mobile apps very little.

I would argue that you could get away with bad design decisions in mobile apps because we haven't been designing them for that long. As the field matures and the usability in general improves, so must most of the designs. At this point for many apps the whole mobility concept brings certain novelty and possibilities that are so valuable that users can overlook bad usability. This should be a reason to try to design usable apps to gain market share, rather than apps that look especially pleasing to the designer.

Answer 3

Redundancy can be useful, as it reinforces visual cues and provides another channel to ensure that the user understands the effect of selecting a particular button.

The desktop is a cold hard machine for serious business, whereas your phone is always with you and you interact with it every hour.

I don't agree with you. The phone and the desktop computer are both multifunction devices that we use for a large number of different things. It's unproductive to generalise.

--

I'm increasingly tending towards the belief that the key to most UX problems is context.

Don't think about this problem in terms of 'what is right for mobile apps?'. Think about the problem in terms of 'what is right for my app?'.

• How familiar is your user likely to be with the type of interface you want to utilise?
• How often will the user be interacting with your app?
• In what type of circumstance / physical context is your user likely to use your app?
• Will it be competing for your user's attention?
• What are the consequences of miss-selected actions?

Start to answer these questions and you'll be able to understand how necessary added redundancy will be, in terms of your application's scope and intended audience.

Answer 4

While it is true that labeling icons is in general a good idea in terms of usability, the context and premises of a mobile UI is quite different.

Due to a smaller screen size, the direct manipulation of content, bigger touch targets and oftentimes a more relaxed user (a lot of devices/apps are primarily designed for media consumption and entertainment), the accessibility of the UI is higher. This lowers the barrier for exploration and experimentation by the user. Both can potentially increase the overall familiarity with an app, thus increasing the conversion rate in the long run.

Answer 5

Very interesting discussion, and right now i am having trouble with the same issue. My product manager strongly advocates labelling every icon on a mobile device, yet most of the apps we tend to point out as cool and aesthetically pleasing (mind it, very important measure to get the eyeballs in a crowded marketplace where your app may not get a second chance) tend to be cautious with the labels. I am all for reducing the redundancy of visual elements on an app if i use it everyday(Afterall, we dont read the gender label on the restroom icon everytime before we enter one). But the key is how sure are you about that. While labelling every icon might provide the necessary clues upfront for the first time, soon they will become redundant as the users play more attention to the content you are presenting. Added to the fact that most app interactions are typically of very short interval in comparison to desktop, on a much smaller screen area, it is a pain to think of those labels and the visual noise they make.

Having said that, I am thinking of a different approach. I am all for reducing the number of action elements on a mobile screen. How about progressively explaining the icons to the user during his initial activity flow inside the app, across each segments of the app. Eventually, when they do the walk through, they will get familiarised with the app and its different sections. Many apps that rely on gestural controls anyways do such interactions to introduce the actions. Can we think of including a section at the end of those help cards to explain the functions of the few icons (3 max) present on the screen?

Another approach is to make the text labels explicitly and modify the layout without the labels when we detect that the user is visiting the app and its diff. sections a min number of times.

Another approach to reduce the criticality of these label less approach is to make sure all the post/get actions which are critical to be labelled always and limit the label less icons to only navigational elements.

Would love to get your feedback on this!