Is it proper UX practice to mix tab menus in an application that use icons+text with just text tab items?

by gz17   Last Updated January 10, 2018 00:16 AM

Each screen has different menu items. The reason being that I decided to use text+icons for one of the screens is cuz the text would be too long if I used the same styling as another screen with only text. But to add icons to all menu items seemed too much because some don't make sense to be represented by icons.

So if I had bottom tabs on one screen on my application that uses just text menu elements, while another screen I use text+icons, is that alright? Or would I have to keep all tabs the same format for consistency sake?

enter image description here

enter image description here

Answers 3

Keep it consistent

If these tabs perform the same function, you'll need to make sure it stays as consistent as possible. Usability and learnability will improve when similar elements have a consistent look and function in similar way. This creates predictability for your users.

Icons with no clear meaning are generally not very helpful, other than being a scannable anchor point for your tabs (attention grabbing). You risk confusion about the label if you add a nonsensical icon, so in your case you should probably keep it label-only.

January 10, 2018 09:00 AM

It is important to be consistent, but you don't necessarily need to be "all or nothing" about icons vs text. Maintaining a consistent layout is much more important (e.g. don't change the order of buttons/tabs)

I would suggest the following options:

  • Have text for all functionality except for very universal functions such as "save", "refresh", "play", "edit", where the function and the associated icon are something that already have a very standard representation in UIs.
  • Have text for all menu items.

Icons and text would definitely be too cluttered on a mobile device.

January 10, 2018 12:38 PM

Thanks for all the responses. I had to give up some things to fit in the content in the end.

The tab items are contextual, so if they are in settings, the bottom tabs will be different than project details.

In this case, it is more important to keep the tabs consistently in the same spot, but behave the same way; it acts as a divider of different information in one section.

Because of UI constraints, I can't put the full word "requirements" in the tab, so I resorted to make an exception by using an icon with the text in smaller font underneath for that whole section. I didn't use icons for other sections because it did not provide value.

Essentially, the tabs still behave as dividers so users still use them the same way. My trade off was the (inconsistent) way the label is shown (some sections are text only, while another included icons+text purely out of visual constraints).

I would agree if I could, I would stick to displaying in only one way (text only, or text+icon only) to maintain consistency.

January 17, 2018 18:40 PM

Related Questions

When should I use a menu bar icon on macOS?

Updated September 06, 2016 08:06 AM

Importance of UX in B2C Vs B2B

Updated June 02, 2017 12:16 PM

What is button in table call?

Updated July 19, 2018 06:16 AM

How should a global tooltips behavior be defined?

Updated August 06, 2017 16:16 PM