Introduction
A UX pattern is commonly a sequence of interactions that can be reused for different solutions and tends to become a standard in the user community.
In this article we propose to analyze the pattern of the main navigation, that contains the important app’s options and represents one of the most crucial in terms of user experience, and the way it’s represented by different platforms in the mobile app’s universe.
In particular, we focus on the native Android and IOS patterns, defining the differences between them, presenting some variations and, when possible, some antipatterns, that are the bad application of this solution.
Android
The navigation drawer
WHAT IS IT
The main navigation in the Android environment is typically managed by a sliding out menu, called “navigation drawer”, located in the left of the screen, that partially overlays the contents of the screen.
WHY TO USE
The guidelines suggest to use this pattern
for the navigations that include more than 3 unique top level views ;
for the apps that include navigation between low level views.
HOW TO OPEN/CLOSE
The user can trigger the microinteraction by:
pressing on the icon/title at the corner of the screen;
swiping from the left edge of the it.
The user can come back to the previous state by:
touching the content outside the navigation drawer;
swiping to the left anywhere on the screen (including edge swipe from right);
touching the app icon/title in the action bar;
pressing the “back icon” in the Android devices.
HOW IT WORKS
Its presence is consistent for the top levels view, being a quick and immediate launch in every part of it by an icon.
Navigation drawer - icon at top level views
In the lower level views the navigation drawer icon is substituted by an up icon to indicate the return to the top levels. In this state the navigation drawer is still reachable by an edge swiping, but not from clicking on the icon/title of the app. This is possible in all the level apart from the detail/edit views, that support a swiping navigating between sibling screens.
Navigation drawer - icon at lower level views
CONTENTS
The contents of the navigation drawer include:
title not interactive, useful to split the topics
items
icon related to the items
counters related to the items
collapsible items, useful to represent complex structures.
CONTENTS - MULTIPLE LEVELS
When the structure is particularly complex, it’s possible to use one of the parent level as split item.
Android’s Guidelines suggest to make visible all the top view entries at launch, and to expand a single area when the user is opening the drawer from a lowel-level view.
EXAMPLES
Etsy, Spotify
Fixed tabs
WHAT IS IT
Fixed tabs represent a navigation way at the top of the app that shows to the user all the top level items. They are always visible and the user could navigate between them also swiping left or right.
WHY TO USE
Guidelines suggest to use them:
with limited items at the top level navigation
if the app request a frequent switching between views
to make the user aware of the alternative views.
HOW IT WORKS
They are always visible, also during the scrolling, and the user could navigate between them also swiping left or right.
EXAMPLES
Spinner
WHAT IS IT
The spinner is a way to navigate different views of the app by a simple drop down menu.
WHY TO USE
Guidelines suggest to use it:
if the user are switching between views of the same data (for instance a calendar)
it’s not necessary to have a dedicated tab bar
HOW IT WORKS
They are always visible, also during the scrolling, and the user could navigate between them also swiping left or right.
EXAMPLES
Google plus
Antipattern
Android recommends to not mix and match the patterns for the top view, on order that the navigation won’t be duplicated. It is still possible to use different pattern, but for different level of it.