One of the biggest challenges in designing an app for a mobile device is the limited screen space. But worry not! It’s possible to meet the users’ expectations and to create a neat looking UI at the same time – with the help of different navigation patterns. We have selected 7 commonly used mobile navigation patterns for you and listed them below, including typical use cases as well as little prototype examples (linked in the images).
Overflow menu
Problem: The user wants to have quick access to additional information and options within the app.
Solution: Overflow menu. With the overflow menu, you can easily stow away extra options and functions that are not used very often, but are still relevant to the context. Often they come along as hamburger menu, three horizontal lines or dots. For instance, such menus include options for refreshing the mail inbox or creating a new contact or group in a messenger or accessing settings.
Overflow menu: Quickly access additional information via the overflow menu
Slider
Problem: The user wants to choose smoothly between various options within one view of the app.
Solution: Slider. With the slider, the user can easily switch between various options just by swiping. While dragging the slider from side to side, s/he can benefit from transitions between different selections and quickly get an overview.
Slider: Choose between different display options using the slider
Swipe views
Problem: The user wants to navigate between content of the app, but doesn’t want to go back or use an extra navigation button.
Solution: Swipe views. Using the swipe view, the user can quickly and easily swipe through the content of an app. As already known from a photo gallery, this is a handy method to go back and forth and switch from one app or content “tab” to another.
Swipe between app content without extra buttons
Sidebar
Problem: The user wants to jump between different views of the app, but doesn’t want to leave the current site.
Solution: Sidebar. The sidebar contains the secondary view of the app and e.g. additional options like a navigation list or chat or user settings. It’s a neat collapsible panel that is hidden and only slides over the main view or moves it aside when accessed. This sidebar is often combined with an icon such as a hamburger menu or settings icon (gear wheel).
Sidebar: Jump between different app sections without leaving the current view
Vertical navigation
Problem: The user wants to navigate between different areas within the app, but there’s only very limited space to display further details.
Solution: Vertical navigation. Like in a list, the user can scroll that vertical navigation which includes all the necessary information in a very compact way such as account details, settings etc. Often this navigation pattern is combined with a sidebar.
Vertical navigation: Navigate between and scroll through app sections with only limited screen space
Sticky navigation or tab bar
Problem: The user wants to access specific options or menus the whole time while using the app.
Solution: Navigation and/or tab bar. If the user scrolls the app, the navigation or tab bar will remain in place at the top or bottom or maybe also at the side. This is especially helpful when overall information or important buttons should be visible all the time, for instance, in an address book, where each alphabetical section stays at the top when scrolling, or in a photo gallery that keeps the headline sticky.
Sticky navigation: Access fixed app content the whole time
Content based navigation
Problem: The user wants to choose between different options.
Solution: Content based navigation. With a content based navigation, supported by neat page transitions, the user only has to successively swipe the screen to make one simple decision at a time. For instance, a swipe action to the left means “no”, one to the right means “yes”. The decisions can be checked later in a different view.
Content based navigation: Choose between different app options
Want to share newer, more fancy or different mobile navigation patterns? Let us know and drop us a line at support@pidoco.com.
Happy prototyping!