Skip to content

Contact us

Sydney

Phone (02) 9261 4624 Fax (03) 9684 3434 Level 1, 26-28
Wentworth Ave
Surry Hills
NSW 2010
Sydney map

Melbourne

Phone (03) 9684 3470 Fax (03) 9684 3434 Ground Floor
119 Ferrars St
South Melbourne
VIC 3205
Melbourne map

Get in touch

At U1, we love hearing from people. So whether you have a query about the work we do, who's on our team or when's the next training event, contact us via email or phone.

Mobile navigation

Jo Former UX Consultant 14th Aug, 2014
Close up image of hand using touchscreen on mobile

With the rise of mobile and tablet browsing, and the increase in devices with varying screen sizes, many sites are adopting the approach of responsive design in order to deliver an optimal viewing experience regardless of the screen size or orientation of the user’s device.

For those unfamiliar with responsive design, in a nutshell it is an approach where one website is created which can be scaled according to the size of the device using flexible grids and layouts.

One very important aspect of mobile web design is of course navigation. Just as navigation is critical for desktop browsing, so too is it on smaller devices. Let’s talk about some of the ideas out in the field at the moment and how best to approach more complex navigation structures.

Think mobile first

The golden rule is to think mobile first. A concept initiated by Luke Wroblewski. Most websites are designed for larger screens first, but what this means is that the mobile version is often clunky to navigate.

Thinking mobile first means focusing on content and functionality that is critical for your site visitors and reducing anything unnecessary to your users’ core goals. This can only be a good sign for the desktop experience, right?

Ways to present navigation

There are a number of different ways to display navigation on smaller screens. The below ideas are by no means exhaustive, and there are really no right or wrong ways; instead it is about finding the most suitable design for your particular site and audience.

  1. Display all
  2. Fly out menu
  3. Push down or overlay
  4. Skip to footer

To learn more about each of these ways of displaying navigation, Brad Frost goes into details of the pro’s and con’s of each design.

Menu icon

Many websites have started using the three bar icon, also known as the hamburger to indicate a menu on mobile. But do users really know what this is? In short, no. Evident in our labs, as well as through various studies, have found many people are not aware of this icon and what it indicates. An A/B study found 20% more visitors clicked a menu button than a hamburger button. So if you are to use this icon, ensure it is accompanied with a menu label.

Hamburger icon VS menu icon for mobile navigation

Approaching complex navigation structures

So how do you deal with a deep navigation structure when it comes to mobile? There are a number of ways to approach this:

1. Hiding the sub navigation:

This method involves presenting users with a single level menu and forcing them to view landing pages from which they can then make an appropriate selection. Example: World Wildlife Fund (WWF)

Screenshot of WWF mobile navigation

It’s big plus as it keeps the menu small and digestible. When you employ this design it is, however, important to ensure your landing pages are designed accordingly, allowing users to seamlessly move along their desired information path.

For a responsive site that uses mega menus for larger screens, it often means you can design your landing pages as more a menu style, catering for smaller devices as those on larger screens are likely to bypass these pages. The University of Newcastle is an example of where this is done well (see below).

Screenshot of mobile navigation by University of Newcastle

2. Off canvas multiple menus:

A menu icon is displayed at the top of the page, with a new screen displayed for each layer of navigation. Clear toggles allow users to move up and down the hierarchy. Example: The AIDS website.
Screenshot of AIDS website on mobile

Menus are small and digestible, and this often works well for sites with multiple layers because menus are not pushed down. This method also takes users directly to their desired content without moving them through a number of content pages.

In order for this design to work effectively, a strong IA with intuitive menu labels is required as no landing pages are available to guide users through the content.

3. Nested accordion menus:

In this design, when a user taps a parent link, all child links are revealed via an accordion style menu. You can also give users access to landing pages, by allowing two different actions per menu item, however this can be potentially problematic, or overlooked.

The main drawback of using this navigation method – allowing users access to landing pages, plus the ability to drill down through the menus – is that there are two different tap actions within a very close proximity. This leads to users either not knowing where to click, or the option to drill down is overlooked.  In addition, users do not always know what they want to do, and whether it will be more beneficial to visit the landing page or not.

If this design is implemented, ensure it looks like there are two different interactions available. There is currently no convention, and an arrow does not always imply this functionality.  In addition, landing pages must still be optimised as it is likely this will be the most common means of navigating.

Whilst a benefit of an accordion menu is that all levels of the site can be presented in the one area, if users have navigated via landing pages, will it be clear to them where to go to find access to deeper links?

Take for example the Michigan Medical School. You select a landing page from the homepage menu. However, once on the landing page, do you feel it is obvious that clicking the menu option again will bring up additional child links to each parent option?

And finally, what about page titles or breadcrumbs?

Page titles and breadcrumbs are important navigation cues of websites, so how do you deal with them on mobile?

It all comes down to finding the perfect recipe. With a smaller screen size to work with displaying navigation, page titles and breadcrumbs can be overkill.

Instead consider the following:

1. Page titles can also act of navigation. Example: CAF America

Screenshot of CAF websites across devices

2. Page titles can also act of breadcrumbs. Example: Monash University

Screenshot of Monash University website across devices

So in conclusion….

Mobile navigation is in its infancy, and no conventions have been set as yet. Take a look at some real world examples and you will see an array of different designs being created. Some work well, while others fall short of an ideal experience. The key take-out is to experiment and be sure to test with real users. If it passes the test, then you can safely say it works.

Tag


About The Author

Jo Former UX Consultant

Jo is a strong advocate of putting the user at the heart of any project. She believes design and user research plays an important role throughout the entire design process from initial concepting through to implementation as well as product optimisation. Working alongside designers and developers, she helps ensure the wealth of information gathered from the research is translated into a highly desirable product that meets both the needs of her clients and their users.

Related

Visit our website if you'd like to learn more about U1 Group     U1 Group