1

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


Edit: This is for mobile

  • Is it a desktop or mobile application? – Garik Jan 10 '18 at 0:37
  • I would suggest going with iconless as you mentioned also that some icons don't make sense which ultimately means nothing but noise or clutter. It would be a consistent pattern which is once created and then reused across. – Shabir Gilkar Jan 10 '18 at 8:27
2

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.

  • The menu items are contextual, so if they are in settings, the bottom tabs will be different than project details – gz17 Jan 17 '18 at 18:31
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.