Mobile Navigation
The screen size limitation on mobile devices requires designers to be flexible and creative with the way they craft navigational experiences.
Navigation
Navigation is a big piece of the user experience and should be a key consideration when designing for mobile. Designers understand the different navigational controls and transitions available for mobile (and their desktop counterparts) to help create familiar cross-platform navigational experiences, including:
- The different page transitions available depending on the interaction as well as the different navigational headers (mobile and desktop equivalents) that go along with them
- The different navigation controls on mobile (ie, bottom navbar)
- How to simplify navigation for mobile
- When to use this and when to use something else
- Must haves for mobile navigation (ex: backward navigation, cancel vs. done)
- The differences between desktop and mobile navigation
- Common design features/trends (ex: sub-navigation)
How We Define Navigation
In general, navigation is the wayfinding system that helps people understand where they are, where they can go, and how to get there.
The Challenge of Mobile Navigation
When designing navigation for websites and desktop applications, designers leave plenty of space for expanding the navigation options, listing search results, and using sliders or scroll bars around the page. Designing for mobile is quite different due to the limitations of the small screen and to the need of prioritizing the content over the UI elements. Mobile navigation must be discoverable, accessible, and take little screen space. The key is to pick the type of mobile navigation where the (inevitable) downsides will affect users the least while using the app.
Mobile Navigation Elements
There are several different types of UI elements that can be used to help users navigate through mobile applications. Each of these elements perform different functions that direct users from and to another page or view.
| Navigation Elements | Description |
|---|---|
| App Bar | A simple bar that contains the main navigation options displayed across the top of the screen. |
| Bottom Navigation Bar | Similar to the App Bar, but located at the bottom of the screen. The bottom navigation bar is persistent, always visible on the screen, whether the user scrolls down the page or not. |
| Tabs | Tabs are useful for navigating between different views of distinct and related groups of information. |
| Segmented Control | A linear set of two or more segments, each of which functions as a segment used to switch view of content. |
| Hyperlinks | A button for external navigation outside of the app. Hyperlinks may appear on their own, within a sentence or paragraph, or directly following the content. |
| Dropdown Menu | A temporary piece of component that appears when users interact with a button, action, or other control. |
| Hamburger Menu | A menu that contains the main navigation option in a manner that usually hides the detailed options, which can be visible upon tapping the hamburger icon. The main advantage of this option is that it can contain a large number of navigation options in a limited space and also support submenus, if needed. The disadvantage is that all the detailed options are less discoverable since it’s not visible on the surface level. |
| Dashboard | A page that contains all the navigation options, like Apps. To navigate to a new location, users have to first go back to the hub and then use one of the options listed there. This usually incurs an extra step (back to the hub) for each use of the navigation. |
Native Mobile Navigation Patterns
Due to the uniqueness of mobile devices (smaller sizes, finger based gesture interactions, specific mobile capabilities, etc.) navigation, in general, is handled a little differently than web. In the past, the amount of clicks to get through a flow was often taken into consideration. However, it is not as straightforward on mobile.
Clicks translate to taps and many times taps transition users to a new screen. However ,this results in many more page transitions compared to web. This can quickly and easily disorient users and add to the complexity of flows. To help with a lot of these issues, native mobile experiences often use various transitions or animations during all these different navigation options. These transitions help convey the “physical” relationship between where users were and where they are going. These navigational patterns also tend to reinforce any native gestures related to navigation. Understanding the different types of transitions will help orient users and give them an expected and familiar experience.
Hierarchical Navigation
Moving down or up through a hierarchy. A back arrow is used to navigate up the hierarchy.
Navigation Elements:
- Lists Menu
- Card Menu
- Popup Menu
Native iOS Apple devices use a subtle parallax animation while navigating forward or backward. When tapping on a navigational UI element that is meant to direct users to another section or page of an app – the new page will slide entirely over the old page from the right to left side. The new page moves in at a faster pace, while the old page moves out slower. Navigating back basically reverses the same animation. The page slides to the right on top of the old page. This horizontal directionality reinforces native gestures where swiping from the edge left to right will navigate the user back, as if pulling/pushing the page back.
Native Android Android devices also use a horizontal animation similar to iOS. However, the Android horizontal animation fades the content in and out while also moving it left or right minimizing overall motion across the entire width of the screen. Navigating forward comes in from the right to left, while backwards navigation is the opposite, same as iOS.
Mobile Web Web browsers instantly load the new content while navigating forward or backward. There is no motion used to reinforce the navigation.
Lateral Navigation
Moving between screens at the same level of hierarchy. A back arrow is never used to navigate laterally.
Navigation Elements:
- Bottom Navigation Bar
- Side Panel (tablet only)
- Tabs
- Segmented Controls
- Persistent Dropdown Menus
Native iOS and Android Lateral transitions also use a horizontal transition similar to the hierarchical transitions. Except lateral transitions do not use any fading or parallax effects. These transitions keep all the content on the same plane. The new content pushes the old content off the page to the left or right. This visually supports the relationship between the different types of content while navigating. The left to right sliding also reinforces the swiping behavior often associated with this type of navigation. Where swiping left to right will change tabs, for example.
Mobile Web Again web browsers instantly load any new content without any motion to help support the type of navigation.
Chronological Navigation
Navigating through linked screens regardless of hierarchical relationships. A back arrow is used to navigate in reverse through the history of viewed screens. This is how web browser navigation generally works. Visually the transitions for chronological navigation are the same as hierarchical navigation.
Navigation Elements:
- Hyperlinks / Deep Links
Modal
A temporary page or container that covers current context and must be dismissed.
Navigation Elements:
- Full-page Modal
- Bottom Sheet
Native iOS This type of navigational transition is purposefully different to help reinforce the temporary behavior of a Modal by helping the user remain in context of the current page. These transitions move in and out of the screen vertically over the previous page. Unlike hierarchical and lateral transitions where motion is also applied to the previous page, these transitions have no effect on the underlying page, keeping it intact to help maintain that context. These transitions may apply to full page transitions as well as smaller elements. iOS tends to slide the entire content as one group into view.
Native Android Android uses the same behavior as iOS except instead of sliding content as a group, the content tends to “grow” into view.
Mobile Web Once again, web browsers instantly load any new content without any motion to help support this type of navigation.
Relevant Resources
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #canvas or #canvas-kitchannels on Slack.
FAQ Section