Navigation is a fundamental part of UX.
Mastering it will allow you to create user-friendly and easy-to-understand designs. Easy navigation can boost business metrics, such as conversion rate. That's especially important because of the small screen size of phones.
Mobile navigation is full of UI elements like “bottom app bars,” “navigation bars,” “navigation drawers,” “sidebars,” and “tab bars.”
On top of that, iOS navigation isn't the same as Android.
If you’re feeling overwhelmed, fear not!
Here’s what you’ll learn in this guide:
Navigation enables users to move through an app or device.
Three main areas of navigation exist on mobile devices:
All three are essential to know because that's how users interact to navigate apps on their mobile phones.
Unfortunately, aspiring UX designers have a hard time with navigation guidelines.
First, let’s focus on bottom navigation.
Why not start from the top, you ask? Because bottom navigation most often directly impacts top navigation.
In the screen below, the top navigation changes based on the selected tab in the bottom navigation.
That’s why in this guide, we’ll first discuss bottom, then top, and finally, side navigation.
Bottom navigation helps users navigate:
Let’s start with the Home indicator.
Before November 2017, iPhones used to have a physical button called the Home button. Pressing it enabled system-wide actions like returning home, seeing the app collection, invoking Siri, and more.
In 2017, the iPhone X replaced the physical button with a digital Home indicator. Mobile screens have evolved rapidly in the past few years.
Physical or digital, they help users navigate the system (OS). That's why the Home indicator is a system-level bottom navigation.
The Home indicator on your device helps you go back home, open multitasking, and switch between apps. See the image below.
On the other hand, the Tab bar helps users move between different screens within an app.
For example, in the Gmail app, the Tab bar enables you to switch between the “All Inboxes,” “Chat,” Spaces,” and “Meet” tabs.
Apple recommends limiting the number of tabs in a Tab bar to 5. This prevents the tabs from being too close together.
Also, the Gmail Tab bar above shows four icon-only tabs. Do you know what each icon represents? We don’t!
That’s no good, as icons alone can be confusing—adding supportive labels is important.
Finally, ensure that the selected tab stands out from unselected ones. It helps users understand which tab they have selected.
A best practice is to use filled icons for a selected tab and outlined icons for unselected ones.
Android is a thrilling but difficult platform because of its many devices. Let's start with the system navigation bar.
On Android, system navigation bars can vary by device manufacturer. Older devices used to have hardware instead of software buttons, like in the image below:
Also, depending on the Android version and device, the digital navigation bar can be different or customized by users.
Two kinds of digital navigation bars exist on Android:
On Android, button mode is common, but newer models have gesture mode. Gesture mode is a thin bar that takes up less space on the screen.
Long-time Android users may prefer sticking to button mode because they are accustomed to it.
Gesture mode on Android is somewhat similar to the iOS Home indicator.
To see the difference between button and gesture mode in action, check out this video by HardReset.info. Understanding that allows you to create better Android user experiences.
Remember that on Android, the Back button or gesture considers both system and app-level actions. The logic is complex. To learn more, read the Task and back stack article by Android Developers.
That’s it for the system-level navigation bar.
But just like iOS’ Tab bar, Android has a second navigation bar: the app-level navigation bar.
Like on iOS, the app-level navigation bar allows users to navigate between different screens within an app. Like going from Home to Subscriptions in the YouTube app. You can think of it as a table of contents.
Google recommends having 3 to 5 tabs in the app-level navigation bar with an icon and label.
Before moving on, here’s one last important note: Don’t confuse the navigation bar with the bottom app bar!
While they’re both at the bottom of the screen, they are pretty different.
Google defines the difference this way:
“Navigation bars provide access to destinations in an app, whereas bottom app bars can contain both destinations and actions.”
Let’s unpack what that means.
The image above, on the left side, shows the YouTube mobile app’s navigation bar with Home, Shorts, Subscriptions, and Library tabs. These are “destinations.” Tapping them sends you to another part of the app.
The bottom app bar on the right side of the image provides access to actions—Select, Edit, Voice command, Image, Add.
Now, onto the next navigation area, the top navigation!
The next step is the top navigation.
This is where iOS vs. Android terms get confusing.
We just saw that Android uses the name “Navigation bar” for their bottom navigation. Well, iOS uses that same name for its top navigation. It’s apples and oranges—pun 100% intended.
As a UX designer, you must understand these differences to communicate with iOS and Android developers.
When you mention “navigation bar” to an iOS developer, they think of top navigation. However, an Android developer associates it with bottom navigation.
The moral of the story: As a product designer, you must know your vocabulary.
Top navigation helps users:
To better understand this, look at how iOS and Android create their top navigation:
iOS and Android look different, but they work the same way. They let users find information, move around, and take action.
Visually, iOS distinguishes between tappable elements (navigation and actions) and informational content (title) using color. Everything that’s tappable is a color.
On the other hand, Android favors a more monochromatic look, where tappable and informational elements have the same color.
But overall, both platforms’ top navigation offers similar functionality.
Let’s dive into each category:
Navigational elements are on the left side of the top navigation:
They allow users to go back or to open a side menu.
Concerning the back navigation, there are differences between iOS and Android:
iOS uses an icon and a label. The label tells you where you'll go if you press the button. If it says “Settings,” it means that pressing it will send you back to the Settings page. Also, it often just says “Back.”
That’s why, on iOS, this component mixes navigation (back) and information (label) into one.
On the other hand, on Android, the navigation is an icon without the informational element. More on that later.
Finally, iOS and Android use a side menu icon that opens a “sidebar” or “navigation drawer.” Some people also call it “hamburger menu,” “navigation menu,” or “navigation item.”
This brings us to the next category: Information.
Again, there are differences in how iOS and Android treat informational elements in the top navigation.
iOS describes both the back and current screen information. The first tells you where you’ll land if you click the button, and the second tells you what page you’re currently on.
For instance, if you're on the Wi-Fi page and press the back button, you'll go to the Settings page.
On Android, the back arrow and the title are two distinct elements. The back arrow takes you back, but no label tells you where you'll go. The title shows your current location.
Again, if you're on the Wi-Fi page, pressing the back arrow takes you to the Settings page without needing a reminder.
Often, aspiring UX designers tend to forget to add informational content in their top navigation. But it’s critical to helping users know where they are in the app. The top navigation is for more than just navigation and actions; it’s also for information.
Onto the last category: Actions.
Remember, iOS uses color for actions (blue in this case), whereas Android doesn’t.
Both platforms handle it similarly regarding functionality and placement (right of the top navigation).
These actions are contextual and based on the screen users currently are. For example, if you see a “+” icon on the Wi-Fi page, it means you can add a Wi-Fi network.
Also, there is a menu option or menu item to the right of the action bar (three-dot icon). It displays other actions that you don't have room to display in the top navigation.
Lastly, remember that there are more top navigation variants than the ones we just discussed. For example, we didn’t cover search bars or breadcrumbs in the top navigation.
But that’ll give you a good understanding of how top navigation elements help users navigate an interface.
Now, onto the final navigation area, the side navigation!
Finally, we have side navigation.
Just like before, iOS vs. Android vocabulary gets confusing because they both have different names for similar elements. iOS calls it the “Sidebar,” and Android the “Navigation drawer.”
Again, if you aspire to become a mobile UX designer, you’ll have to know the vocabulary for each platform.
Side navigation helps users:
Both iOS and Android’s side navigation are similar, where a side menu slides in and out.
Here’s what a side menu looks like:
Typically, to open the side menu, you press a Hamburger menu icon (three-lined icon).
It’s an ideal component when you have many destinations to send users to, like in the Gmail example above. 13 destinations are on the screen above, and even more when scrolling down.
Remember how a Tab bar/Navigation bar (bottom navigation) can only have 5 or fewer tabs? Side menus are great to use when you have more than 5 destinations to send users to.
The side menu can partially open with a dark area called a “scrim” beside it, as shown in the right image. It creates a visual hierarchy between the foreground and background.
Tapping the scrim closes the side menu. To close it, you can also swipe left on the menu directly.
It can also happen that a side menu consumes 100% of the horizontal screen real estate. In this case, we recommend adding a close button because there is no scrim on the edge of the screen.
Mobile is an exciting but challenging platform.
That's because, unlike web pages, mobile has unique approaches depending on the OS.
Learning mobile navigation best practices will help you become more confident in your UX/UI skills. When building your UX portfolio, showcasing your work and design projects, great navigation will set you apart.
In our UX/UI Expert program, we go a step further by diving into lateral, forward, and back navigation.
So, if you’re ready to become an un-ignorable UI/UX designer, consider joining us! You’ll get expert mentorship just a chat away, a tight community, and the structure to succeed at your own pace.
Last note: Explore Apple's Human Interface Guidelines and Google's Material Design.
