Why the bottom
Hoober (2013) observed 1,333 people in public and found about half held their phone in one hand and tapped with the thumb. Bergstrom-Lehtovirta and Oulasvirta (2014) modelled the thumb's functional area and showed it centres on the lower and middle screen. Placing frequent destinations at the bottom avoids regripping, a conclusion shared by the thumb zone and Fitts's law.
What makes a good tab bar
Both Material Design and Apple's Human Interface Guidelines recommend three to five top-level destinations. Short text labels next to icons make meaning obvious to newcomers, the current tab should be clearly marked, and each tab should meet touch target size guidance. Chae and Kim (2004) found deep hierarchies make people lose their way on small screens; a bottom bar flattens key destinations to one level. As Park and Han (2010) showed, edge keys are less accurate, so give outer tabs generous padding.
Common mistakes and alternatives
Putting rarely used items such as Settings or Log out in the bar, or making a tab open a modal, are common errors: tabs are destinations, not action buttons. In testing by Pernice and Budiu (2016), visible navigation was used more often and faster than a hidden hamburger menu. For services with more than five destinations, a hybrid with a More tab is realistic.
FAQ
- How many bottom tabs are ideal?
- Major guidelines recommend three to five; more than five shrinks targets and truncates labels.
- Can websites use bottom navigation?
- Yes, on mobile web when there are a few clear top destinations, but leave space so it does not clash with the browser's own bottom toolbar.
Sources reviewed: 2026-10-27
References
- Hoober, S. (2013, February 18). How do users really hold mobile devices? UXmatters. Field observation of 1,333 people holding phones; the base case for bottom placement.
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. Models the area a thumb can actually reach on touchscreens.
- Park, Y. S., & Han, S. H. (2010). Touch key design for one-handed thumb interaction with a mobile phone: Effects of touch key size and touch key location. International Journal of Industrial Ergonomics, 40(1), 68–76. Tests how key size and location affect one-handed thumb input.
- Chae, M., & Kim, J. (2004). Do size and structure matter to mobile users? An empirical study of the effects of screen size, information structure, and task complexity on user activities with standard web phones. Behaviour & Information Technology, 23(3), 165–181. Shows deep structures hurt navigation on small screens.
- Google. (n.d.). Navigation bar. Material Design 3. Official Android guidance, including the 3–5 destination rule.
- Apple. (n.d.). Tab bars. Human Interface Guidelines. Apple's rules for iOS tab bars, including what not to put there.
- Pernice, K., & Budiu, R. (2016, July 24). Beyond the hamburger: What makes navigation discoverable on mobile. Nielsen Norman Group. Testing showing visible tabs beat hidden menus for discoverability.