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.
- Display all
- Fly out menu
- Push down or overlay
- 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.
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.
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)
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).
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.
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
2. Page titles can also act of breadcrumbs. Example: Monash University
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.