5

I am trying to find information regarding using tabs when combined with a bottom nav bar. The benefit of the bottom nav bar is that it allows the user to quickly switch between different sections of an app and is within each thumb reach, so the app can be navigated one handed. The problem is that a) we still read top to bottom and b) some sceens that are accessed via the bottom nav require tabs to separate the content. What this ends up meaning is that the user still has to stretch, or reposition their hands to be able to reach items at the top of the screen (either the first item in a list, or to change the tabs).

I was wondering what people's thoughts are on this? Logically and best on OS guidelines I know that tabs at the top make the most sense, but functionally tabs at the bottom are more usable. Are we at the point where tabs themselves are a bad practice? Google still uses them in the Play Store when combined with bottom nav, so somebody is still fighting for them. I've attached an image of the two options that I have. For some context, the list of content in the list would be very long if I removed the tabs. enter image description here

Improve this question

2 Answers 2

Reset to default
1

Combined with Bottom Navigation, Tabs at the bottom suffer a bit in terms of usability: they are both easier to reach with the thumb but so close to Bottom Nav buttons that there is room for missclicks. The bottom area of the screen is also very dense with this arrangement, which IMO contributes significantly to cognitive load.

In collaboration with swipable tabs (e.g. in a ViewPager on Android), the problem regarding tabs at the top and reaching is significantly mooted.

For Screen Readers, Bottom Navigation isn't great as it is the last thing the User will hear about - in that case it would be more helpful to the User to have the Bottom Nav at the top above the Tabs.

Improve this answer
5
  • Thanks Straya. I did think about swipable tabs, but wasn't sure if the expectation there was that swiping would change the bottom nav rather than the tabs.
    – CosmicGypsy
    Jan 31, 2020 at 19:38
  • Expectation for swiping goes to tabs on Android. iOS is where it is trickier, oh well the user will learn from a visual update to the highlighted tab and if it is at the top they have a great view of that compared to if it were under the hand that is swiping.
    – straya
    Jan 31, 2020 at 23:19
  • For the screen readers argument, shouldn't better semantic design override literal placement on the page, ie you tell the screen reader (or whatever is scanning the page) what-is-what through HTML semantic elements and aria labels. So for instance, if you wrap your bottom sticky nav with an actual <nav></nav> and it's the highest <nav> in the DOM stack and/or only <nav> in the page, in theory screen readers are supposed to consider that the main menu. Perhaps also throw in aria-label="Main" onto it for good measure.
    – Kalnode
    Feb 13 at 16:48
  • @MarsAndBack while that is all valid,more websites should try to implement native feel for mobile in this way, native is a more efficient way to the solution so I talk from the native developer perspective. After all, the best a website can do is look and feel like a native app as much as possible, but it will never be one. It is also uncommon for UXers to cite OS UX guidelines for websites, so I assumed this is about native - otherwise, well I'd expect more than one OS guideline to factor in for a website.
    – straya
    Feb 14 at 2:07
  • One aspect of Accessibility is being truthful about the experience, not providing a different (typically lesser) experience for those that need assistance and so having decent information architecture that carries through to Voice Readers as well as the visual interface is ideal in that regard.
    – straya
    Feb 14 at 2:07
0

I wouldn't be against it at all. I think it is a nice idea that needs to be further investigated and tested.

My concerns would be:

  1. Tabs usually work like titles and if users have them at the end they might miss them. Suggestion: try adding the tab title in the top as well.

  2. Users don't realise that the content they are looking for is hidden other another tab and they have to review the content before finding the other tabs. Suggestion: Maybe try making the tab colour prominent and include some animation when the content is loading so that tabs appear first or are highlighted.

  3. That one is a bit nutcase suggestion. Add tabs both at the top and the bottom and test it with as many users as possible to see what are they clicking on. Please share the results, I would be very interested.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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