Get to relevant content on mobile without a headache!

Mobile navigation should be intuitive, easily accessible, and, with real estate at a premium, shouldn’t take up too much space. Keeping it simple and to the standards set by popular websites is the optimum approach. It’s always important to think about what menu style is suitable for the intended audience. What is their usual expected experience from other websites they use day to day? While eight items of navigation may be perfectly acceptable for a desktop site, it’s likely to be too much on a mobile, and present an array of issues for landscape on smaller mobile devices.

List the key content first
Keep it simple. ‘Mega menus’ are difficult to get right with limited space.
Make the navigation intuitive. Drop downs need an obvious sign that there is more content.
Be clear with fonts and contrast.
Design and build a menu specifically for touch. Hover effects don’t work well on touch!
Save space where possible. Just because it’s on the desktop navigation, doesn’t mean it has to be there on mobile.

Navigation doesn’t have to be the typical menu and hamburger approach. Sometimes making the navigation a native part of the website itself gives users a simple and effective journey to desired content.

“A clear and easy to use navigation is crucial for guiding users through the most important content available. Iconography must be familiar and of a usable size. Make it the feature of the website, it’s the first thing most users will interact with.”

Guy, Digital Director, TJ

Hamburger menu: Here to stay?
Whilst it’s the most recognisable UI element on a mobile site there is, the hamburger menu divides designers. When a user first hit the website, they’re looking for clear actions and features that are available to them. Hiding behind a hamburger possibly adds a step too far for some, with on page content and navigation being more preferable.

Another drawback to the hamburger approach is that it’s typically located in the top corner of the mobile screen, which is actually the hardest place for a user to interact with. Users with often go towards the path of least resistance, which could mean scrolling down instead of looking up. In theory, a floating hamburger icon at the bottom right of the mobile screen would be the most optimal location, however it’s the key USP of the hamburger that defines its top screen positioning. It is the most recognised icon for mobile navigation, regardless of the websites brand and/or colour palette. It offers a very clear, top to bottom list of content when engaged with, and could be used to offer a ‘mobile mega-menu’ experience that a tabbed or on page navigation approach cannot match.

This article is part of a ‘mobile-first’ mini-series, read on below:
Building for mobile.
10 tips for a better user experience.