UX Design For Mobile: Bottom Navigation: by Nick Babich

07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet
Nick Babich Follow

Im a software developer, tech enthusiast and UI/UX lover. http://babich.biz
Mar 20, 2016 7 min read
Image Source:Behance
UX Design for Mobile: Bottom Navigation

by NickBabich
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.
Why Bottom Navigation is so Important?

Steven Hoober in his research of mobile devices usage, found that
49% of people rely on a one thumb to get things done on their phones.
In gure below, the diagram that appears on the mobile phones
screens are approximate reach charts, in which the colors indicate
what areas a user can reach with the thumb to interact with the
screen. Green indicates the area a user can reach easily; yellow, an
area that requires a stretch; and red, an area that requires users to
shift the way in which theyre holding a device.
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f 1/12
Representation of the comfort of a persons one-handed reach on a smartphone. Image Source: uxmatters
Its important to place top-level and frequently-used actions at

the bottom of the screen, because they are comfortably reached
with one-thumb interactions.
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.
Facebook bottom tab bar foriOS.
3 Crucial Moments for Bottom Navigation

Design
Navigation is generally the vehicle that takes users where they want
to go. And bottom navigation should be used for the top-level
destinations of similar importance. These destinations requiring direct
access from anywhere in the app.
Good bottom navigation design follows these three rules.
1. Show Only the Most Important

1. Show Only the Most Important

Destinations
Use three to ve top-level destinations in bottom navigation. If there are
fewer than three destinations, consider using tabs instead.
Avoid using more than ve destinations in bottom navigation as tap

targets will be situated too close to one another. Putting too many
tabs in a tab bar can make it physically dicult for people to tap the
one they want. And with each additional tab you display, you increase
the complexity of your app.
If your top-level navigation has more than ve destinations, provide

access to destinations not covered in bottom navigation through
alternative locations.
Avoid Scrollable Content

Partially hidden navigation is a pretty obvious solution for small
screens you dont have to worry about the limited screen estate, just
place your navigation options into a scrollable tab. But scrollable
content is less ecient, since you have to scroll once before youre even
allowed to see the option you want.
Out of sight, out of mind problem in Rookie Cam app foriOS.
2. Communicate the CurrentLocation

Failing to indicate the current location is probably the single most
common mistake to see on apps menus. Where am I? is one of the
fundamental questions users need to answer to successfully navigate.
Users should know how to go from point A to point B based on their

rst glance and without any guidance from the outside. You should
use the proper visual cues (icons, labels and colors) so that the
navigation doesnt require any explanation.
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.
Previous version of Bloom.fm app for Android. Its really hard to understand current location foruser.
Ive highlighted this problem in article Icons as Part of an Awesome

User Experience.
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.
Follow a simple rule tint the current bottom navigation action

(including the icon and any text label present) with the apps primary
color.
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
Text labels should provide short and meaningfully denitions to

navigation icons. Avoid long text labels as these labels do not truncate
or wrap.
Avoid wrapping, truncating and shrinking textlabels.
Menu elements should be easy to scan. Users should be able to

understand what exactly happens when they tap on a element.
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.
Android guideline suggest following dimensions for the bottom

navigation bar on mobile.
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.
Consider badging a tab bar icon to communicate unobtrusively.
3. Make Navigation Self-Evident

Good navigation should feel like an invisible hand that guides the user
along their journey. After all, even the coolest feature or the most
compelling content is useless if people cant nd it.
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.
Strive for Consistency

As much as possible, display the same tabs in every orientation. Its best
when you can give users a sense of visual stability by providing the
same tabs in every orientation.
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.
Empty state screen for Dropboxapp.
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.
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.
Cross-fade animation. Source: MaterialDesign.
Takeaways
Bottom navigation should be
Visible and Well-Structured (Use three to ve top-level

destinations and avoid scrollable content in bottom navigation).
Clear (Bar elements should be easy to scan and targets should be

big enough to be easily tapped).
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.
Follow UX Planet: Twitter | Facebook
. . .
Originally published at babich.biz

UX Design For Mobile: Bottom Navigation: by Nick Babich

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

UX Design For Mobile: Bottom Navigation: by Nick Babich

Încărcat de

Drepturi de autor:

Formate disponibile

07/07/2017 UX Design for Mobile: Bottom Navigation UX Planet

Nick Babich Follow

UX Design for Mobile: Bottom Navigation

Why Bottom Navigation is so Important?

Its important to place top-level and frequently-used actions at

Facebook bottom tab bar foriOS.

3 Crucial Moments for Bottom Navigation

Good bottom navigation design follows these three rules.

1. Show Only the Most Important

1. Show Only the Most Important

Avoid using more than ve destinations in bottom navigation as tap

If your top-level navigation has more than ve destinations, provide

Avoid Scrollable Content

Out of sight, out of mind problem in Rookie Cam app foriOS.

2. Communicate the CurrentLocation

Users should know how to go from point A to point B based on their

Ive highlighted this problem in article Icons as Part of an Awesome

Follow a simple rule tint the current bottom navigation action

Text labels should provide short and meaningfully denitions to

Avoid wrapping, truncating and shrinking textlabels.

Menu elements should be easy to scan. Users should be able to

Android guideline suggest following dimensions for the bottom

Consider badging a tab bar icon to communicate unobtrusively.

3. Make Navigation Self-Evident

Strive for Consistency

Empty state screen for Dropboxapp.

Cross-fade animation. Source: MaterialDesign.

Visible and Well-Structured (Use three to ve top-level

Clear (Bar elements should be easy to scan and targets should be

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz

S-ar putea să vă placă și