Mobile Navigation the Do’s and Don’ts

25 February 2017

Navigation isn't as simple as it may first seem with many designers and developers falling into the same traps and pitfalls that users hate. Mobile navigation should be simple and easy to find as well as taking up little space on the already limited screen. Of course every mobile app is different and therefore requires different solutions but here are some of the main errors that users hate along with some alternative solutions.

twitter

As interaction with mobile grows more and more designers and developers alike are having to rethink how users navigate apps. Complex and hard to find navigation options simply confuse and alienate users and with users today being less patient than ever this is not an error most apps can afford to make.

Navigation Bars

The navigation bar is the most common navigation option seen within mobile apps and websites, sitting at the top of the screen on all platforms and offering users direct navigation throughout a multitude of screens quickly and easily.

This classic method of navigation isn’t perfect though with two disadvantages that can be identified:

Firstly this method of navigation only works efficiently there are relatively few navigation options to begin with so as not to clutter the screen.

Secondly this type of navigation does take up space in the prime area or ‘real-estate’ of the screen.

These problems are hardly game changing and there are some simple changes to the navigation bar that can remedy these issues.

One solution is to create a carousel so that more options for the navigation bar can be hidden off screen saving space and requiring users to swipe left and right to reveal them. This does however assume that users will understand this action and can lead to poor UX (User Experience).

Another solution to this problem is to include the most used/ most important options on the initial navigation bar but include a ‘More’  button so that users can see an additional list of options. Although this does allow for good UX as it is clear what the user must do it doesn’t ‘save’ space as the additional options will either drop down or open a new screen altogether.

Tab Bars

Similar to navigation bars app specific tab bars offer users a direct and constant method of navigation between screens. However unlike navigation bars tab bars appear in different places on the screen depending on the platform of the app, with Android often having the tab bar at the top of the screen with iOS having the tab bar at the bottom of the screen. A further deviation that tab bars have when compared the navigation bars is that they are persistent, tab bars are always visible on screen where as navigation bars disappear when scrolled off screen.

With no real negatives tab bars are a really easy way for users to navigate an app and are always present so that the user can find what they need when they need it. The only thing to note when using this type of navigation within an app is the platform differences, as I said above most Android devices will display the tab bar at the top of the screen whilst iOS will display the tab bar at the bottom of the screen.

Both of these are completely fine and remove nothing from the over all navigation of the tab bar but with regards to UX and UI there are some slight issues. Mostly with the Android layout simply because when users are using an app their thumbs are at the sides or the bottom of the screen and therefore it is hard to press navigation options at the top of the screen e.g. the screen is covered when trying to navigate around the app.

Key Points for Navigation and Tab Bars

  • Both are best for fewer options, whilst there are solutions such as a carousel the term,“out of sight, out of mind” is commonly used because even though the options are there users may overlook them.
  • Tab bars are persistent and are always visible to the user.
  • Navigation bars disappear when scrolled off screen, although commonly reappear as soon as the user scrolls up.

 

Hamburgers & Other Off-Screen Menus

Hamburger and off-screen menus like the name suggests are not openly visible to the user upon arriving on a page, rather they are hidden behind an icon or gesture to enable the user to see them. Generally they are the same across all platforms but there are some platform specific issues that we will address later.

Hamburger menus are displayed initially by a stack of three lines, this causes some issues within itself. Firstly although I’m sure many of you know what this means a lot of users don’t and will find hidden menus such as this one hard at a glance. Furthermore menus such as this may save space initially but usually distort or overlay the current page leading to very choppy movement between screens, something that is not ideal on apps that are very consumer based.

Another way to access these off-screen menus that do not have a specific icon is via a gesture, a swipe to the left or right is normally used with swiping to the right being more favourable causing a menu to appear on the left hand side of the screen. Like hamburger menus this is hard for users to find leading to bad UX and in some cases actually clashes with already implemented platform navigation patterns. The main example of this is on iOS, from iOS 7 onwards users could go to the previous screen by swiping right and so would clash with the menu gesture by either displaying the menu on a previous screen or by jus not displaying the menu at all, however not that this only happens in ‘deep pages’ (pages that are within other pages e.g. Inboxes > Inbox > Emails x > Message.

Key Points for Hamburgers & Other Off-Screen Menus

  • These types of menus are better for content heavy apps that are primarily browse-only, as the hidden navigation options may not be obvious to most users and they will therefore restrict themselves to the visible options.
  • Gesture induced menus can clash with already integrated navigation patterns such as iOS back gesture.
  • Save space but can lead to choppy disjointed movement throughout the app if used incorrectly.

 

The Navigation Hub

The navigation hub is a page (commonly a homepage) that is dedicated to navigation. To navigate in-between different pages users must first return to the hub before being able to access another screen. Although this doe introduce an entire page worth of navigation at the expense of content the navigation hub can actually be a good navigation option within an app.

The primary use for using a navigation hub would be in apps where the users wishes to perform a specific task or function and would only be performing tasks one at a time. Examples of this are apps such as travel apps where the user would more often than not only be performing one task e.g. booking a ticket or checking in etc. Furthermore with an entire page dedicated to navigation there is no limit to what you can include and each option is a complete navigation pathway that the user can access. In addition to this with a whole page set aside for navigation users can easily find and interact with the navigation menu making the navigation hub a good option when attempting to optimise UX and UI.

However this option does have some negatives, primarily the idea that an extra screen has been added for the user to interact with, this means that tasks may take longer and can lead to more errors. As well as this by having an entire page for navigation there is less pace for content and ‘prime real estate’ has essentially been wasted with the addition of a navigation screen.

Key Points for The Navigation Hub:

  • Good when users only seek to accomplish a single specific task in one session e.g. book a ticket.
  • Easy to find and navigate from leads to good UX and UI.
  • Real estate that could include additional content is used for navigation.
  • An extra screen is introduced into user journeys.
  • Users must travel back to the hub before navigation can continue.

 

Conclusion:

Making use of the correct navigation tools is a challenge due to the limitations and restrictions of a small screen and finding the perfect balance between UI and content. All of the navigation options that I have talked about above attempt to fix this problem but all come with their own issues. The key to choosing the correct mobile navigation option is to weigh the unavoidable downsides of each navigation bar against what the app is hoping to allow the user to achieve.

Some final points to consider:

  • Navigation and Tab Bars use on page space but allow for quick direct navigation between pages.
  • Hamburger & Off-screen menus allow for a large number of options at the expense of ‘glance-ability’ or user awareness (out of site, out of mind).
  • Navigation hubs allow users to perform a single or specific task easily due to complete navigation paths.