5

Why is horizontal scrolling in a bottom tab bar commonly discouraged? Both iOS and Android guidelines discourage it.

enter image description here

And for some reason scrolling navigation is sometimes okay at the top? (Android tabs and iOS News) And sometimes near the bottom? (iOS Camera)

enter image description here

I can think of these possible reasons of why it's not recommended.

  • Psychologically it's counter to our expectations. We expect lower things to be more static and stable. We more easily understand fluid navigation when it's at the top area of the screen, but in the bottom we are thrown off.
  • It's awkward for the human thumbs to reach down there. With the "thumb zone" that bottom right area is hard to reach.

Are there others reasons? Has anyone studied this? Thoughts?

Or is it actually okay? Is there way to do it right? Has it ever been done well?

  • Interesting question :) I would not consider the camera options as a Bottom bar. The limitation is more about the Bottom bar navigation than about bars being at the bottom, I think. – Alvaro Mar 17 '17 at 22:11
1

Aside from what you already mentioned, I'd say that if you have so many items in your bottom navigation that it needs to scroll, you're doing something wrong. Material.io mentions "3-5" for a reason. Anything beyond that is too difficult to keep straight. Plus, the bottom navigation is meant to be a direct link to main pages of the app. If you have to scroll to get to them, it defeats the purpose of having them there.

Scrolling navigation works better at the top because it's almost exclusively used for subitems of a main navigation instead of for the main navigation itself. That model works better because you're searching for something more granular and would expect to scroll through 5+ items to find what you need.

5

Bottom bar navigation is meant for the most important views of the app that the user will want/need to access easily. These are some references from Material design (emphasis mine):

Bottom navigation should be used for:

  • Three to five top-level destinations of similar importance (alternative: a persistent navigation drawer accessible from anywhere in the app)

  • Destinations requiring direct access from anywhere in the app (alternative: tabs for only one or two destinations)

.

Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.

.

Do: Use short labels

Don't: Avoid labels with wrapping text

Don't: Avoid truncating text labels as doing so may prevent comprehension.

Don't: Avoid shrinking text labels to fit on a single line.

If we apply these rules: not using more than 5 buttons, use icons, use short labels, then there shouldn't be need to overflow content. The idea is to keep the bottom bar simple with the minimum necessary links to the most important views of the App. While Tabs don't have this minimum or maximum limitations.


Material Design - Bottom navigation

Material Design - Tabs

Material Design - Navigation

  • 2
    Agreed. If you need to scroll to get to a "destination requiring direct access from anywhere in the app" you have defeated the purpose of having a direct action in the first place. – jered Mar 17 '17 at 22:11
  • @jered Exactly. – Alvaro Mar 17 '17 at 22:12
  • 1
    The idea is to keep the bottom bar simple with the minimum necessary links to the most important views of the App. Totally agree! – DPS Mar 21 '17 at 8:21

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.