Professional Documents
Culture Documents
UX Design For Mobile: Bottom Navigation: by Nick Babich
UX Design For Mobile: Bottom Navigation: by Nick Babich
Image Source:Behance
Designers know that design is more than good looks. Design also
covers how users engage with a product, whether its a website or app.
Its like a conversation. Navigation is a conversation. Because it doesnt
matter how good your site or app is if users cant nd their way
around it.
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 1/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
Representation of the comfort of a persons one-handed reach on a smartphone. Image Source: uxmatters
Tab Bar
Many apps follow this rule and use the bottom navigation (a.k.a. tab
bar) for the most important apps features. Facebook makes main
pieces of core functionality available with one tap, allows rapid
switching between features.
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 3/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
Icons
Because bottom navigation actions are presented as icons, they should
be used for content that can be suitably communicated with icons.
There are a universal icons that users know well, mostly those
representing functionality like search, email, print and so on.
Unfortunately universal icons are rare. And app designers often hide
functionality behind icons that are actually pretty hard to recognize.
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 4/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
Previous version of Bloom.fm app for Android. Its really hard to understand current location foruser.
Color
Avoid using dierent colored icons and text labels in your bottom tab
bar. Instead use the apps primary color to indicate the view in focus.
Left: Dierent colored icons makes your app look like a christmas tree. Right: Use only one primary
colorinsead.
Bottom bar menu in Twitter app for iOS. Messages view isactive.
If the bottom navigation bar is colored, make the icon and text label
of the current action black or white.
Left: Avoid pairing colored icons with a colored bottom navigation bar. Right: Use black or white iconography.
Text Labels
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 5/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
Target Size
Make targets big enough to be easily tapped or clicked. To calculate the
width of each bottom navigation action, divide the width of the view
by the number of actions. Alternatively, make all bottom navigation
actions the width of the largest action.
Fixed bottom navigation bar on mobile. Units in density-independent pixels (dp). Source: MaterialDesign.
Badge on aTab
You can display a badge on a tab bar icon to indicate that there is new
information associated with that view or mode.
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 6/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
Behavior
Each bottom navigation icon must lead to a target destination, and may
not open menus or other pop-ups. Tapping on a bottom navigation
icon should guide user directly to the associated view, or refreshes the
currently active view.
Dont use a tab bar to give users controls that act on elements in the
current screen or app mode. If you need to provide controls use a
toolbar instead.
Toolbar foriOS.
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 7/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
Dont remove a tab when its function is unavailable. If you remove a tab
in some cases but not in others, you make your apps UI unstable and
unpredictable. The best solution is to ensure that all tabs are enabled,
but explain why a tabs content is unavailable. For example, if the user
doesnt have oine les, the Oine tab in the Dropbox app displays a
screen that explains how to have them. This feature called Empty
state.
Hide It
If the screen is a scrolling feed, the tab bar can be hidden when
people scrolling for new content and revealed if they start pulling
down trying to get back to the top.
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 8/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
The bottom navigation bar can appear and disappear dynamically upon scrolling.
Visual Delight
Avoid using lateral motion to transition between views. Transition
between active and inactive views should use a cross-fade animation.
Takeaways
Bottom navigation should be
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 9/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
Simple (Make sure that each navigation icon lead to the proper
destination and use all elements, including bottom navigation,
across your application consistently).
Conclusion
Helping users navigate should be a high priority for almost every site
and app. The goal behind this moments is to create an interaction
system that naturally aligns with the users mental models.
Youre designing for your users. Always think about your user persona,
think about the goals they have when using your app, and use your
navigation to help them meet those goals. The easier your product is
for them to use, the more likely theyll be to use it.
. . .
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 10/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 11/12
07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 12/12