Use labels/text under icons in the iOS tab bar?

Question

An example of Tab bar is shown below:

I'm designing a new iOS app with tab bar as shown above. The tab bar has five icons of which three are generic and easily understood. The other two are relevant to the screens users will see when these buttons are pressed, but since this is a brand new app, is it recommended to use labels under the icons?

I have been trying to find some UX related articles for this to no avail and for the articles I've found, it's usually up to the designer's preference. More and more apps these days are omitting labels/text under the tab bar icons for a more uniform and clean look; however, I'm not sure for a brand new app.

The UX in me is screaming use both but personally, I think once users use the app, they can easily make the relationship with the icon to get to the screen they want. I mean, it's only 5 icons after all...

For instance, take a look at Instagram, they have never used labels before and most users don't have an issue with using this app. Any thoughts, references, articles is truly appreciated!

Answer 1

I did a small User Testing with your icons. Chose 5 tech-savvy almost college aged kids who stay nearby and showed them the icons with the labels hidden.

This is what they had to say

This is the distribution for each icon

Music-3 Songs-2

Movies-1 Videos-4

Search-all 5

More-all 5

But, the TV icon was ambiguous

TV-3? Screen-1? Track pad-1?

Although 3 of them guessed it as TV, they were not sure. Yes, one person said Track pad! On further questioning, found that he had been using an app that changes your mobile screen into a track pad, and that iconography stuck to his mind!

So, I would suggest you label them until your app is widely known.

The context of the app was not set though. May be if they had known the app name or some idea on what the app was about, they might have all guessed TV right.

But, it is better to do an A/B testing using a mock-up.

Answer 2

I think this discussion is very interesting. On the ux podcast by Per Axbom and James Royal-Lawson I heard they talk about the "hamburger menus" used on mobile devices and how often this icon is pressed depending on if the button had the label "menu" next to it or not. I googled it and came across this related article. http://exisweb.net/menu-eats-hamburger tldr; typing out menu is better then a hamburger icon with no text. This is not exactly an answer to your question but my gut feeling tells me that you should have text going with your icons.

Answer 3

I don't know who your users are or how complex your icons are, but in my opinion, using only icons means potentially excluding or alienating the types of users who don't understand what the icons are and who aren't willing to tap on a button whose function they don't know. The only advantage I can really see is a cleaner visual design at the expense of stronger usability.

Using Nielsen's 10 usability heuristics, I can already see a few potential problems:

• Visibility of System Status: icons alone do not adequately reveal where the user will go when they tap on them.

• Consistency and standards: using icons alone could introduce external inconsistency, i.e. your users may expect icons to mean different things based on their experiences with other apps, and this is something you have no control over. By adding labels, you are re-grounding the icons to mean exactly what your labels mean rather than leaving them open to interpretation from people with a variety of experiences and backgrounds.

• Error prevention: without labels, it's very possible that users will tap the wrong thing, especially when they are first using the app.

• Recognition rather than recall: by not using labels, you are asking your users to recall what each icon means. If you use labels, they will be able to recognize the function because it will be explicitly stated.

An unfortunate (again, in my opinion) trend in design lately is what you described in Instagram. They go for the clean, minimal, sleek design because that's what attracts people to the app. However, the designers design for the ideal use case and the ideal user, and they end up marginalizing the users who don't fit that mold.

Hopefully that helps give you an additional perspective that you might not have considered before. :)