How to design a mobile menu

Define crystal-clear structure
Whether a website user is wanting to learn more about a company, purchase an item or access resources, they’re reliant on navigation to help them find what they’re looking for. However, there’s not a one-size-fits-all solution for mobile navigation, as it relies upon your product or service, the user and the context. The bedrock of a well-designed mobile menu design is information architecture – a crystal-clear structure and a spotlight on important links based on a user’s needs.

Limited screen real estate makes it a valuable resource. There’s no room for disorder, so designers have to tread a narrow line between capturing attention, prioritising important content and cutting the fat. We need a menu that provides exactly what a user wants right off the bat and nothing too overwhelming that’ll make a user bounce off to a competitor’s site. Mobile needs are unique and on-the-go patience is limited.

Legible fonts and contrast are huge design decisions worth consideration. Many users don’t hit a touchscreen exactly where they’re aiming so we should cater for a larger target to press. Nobody wants to sloppily hit the wrong links simply because fonts and line heights haven’t been addressed in the design phase. We can integrate touch feedback, so once a user clicks a link, it could change colour, typeface or indicate another visual cue that’s subtle enough to reassure users they’ve hit the item they’re wanting to select.

Hamburger menus contain a large number of navigational options, all housed within a small space. It can typically hold primary and sometimes secondary or tertiary navigation. Some mobile menus require multi-level navigation, so drop-downs should be activated by touch. We sometimes consider tabbed navigation, or a tab bar that’s fixed to the top or bottom of the viewport and users can see these navigational items as they scroll. Ideal for up to five navigational options, they’re always discoverable and accessible with a single click. Another solution might be to keep a top menu with the fundamental navigational items but also position the hamburger icon adjacent to these, to indicate there are more “overflow” menu options available. It’s a successful way to ensure CTAs are easy to spot and immediately available to the user.

Regardless of mobile navigation we choose to utilise, we need a sharp focus on reducing the barrier between the user and what they’re trying to find, all while limiting thinking, scrolling and clicking time. That’s not to say we can’t have some playful interactions and effects added to the design along the way!

Cater for the largest of digits
Space on a mobile version of a website is always at a premium. It takes real consideration as to what should be displayed or removed for mobile.

A well-thought-out mobile menu is key to retaining user engagement. After all, it’s the main way a user navigates a website. With that in mind, the mobile menu needs to be easy to navigate and be simple to use.

Users navigate around a mobile site with either the thumb or fingers. A site needs to have clickable links that can cater for the largest of digits – otherwise you’ve got an unusable navigation. While most desktop navigation can range from 14px upwards in terms of height, were you to do that on mobile navigations, most users wouldn’t be able to click the link. A large, clear and encompassing clickable area is required for users to easily select the link they require. This is fine if a site has only a couple of top-level links. However, it becomes a problem when there’s a lot of top-level links along with drop-down links underneath. Vertical inline scrolling is an option if the links start to overflow the readily available screen space and this works quite well in most cases. The more popular option, certainly for sub-navigation, are slide-out panels that keep the menus clear and concise, along with a clear heading to inform the user of where they are in the navigation journey.

It’s also worth noting that mobile navigations need to be accessible to screen readers to let users know the website has a navigation. Embracing the HTML5 <nav> element along with adding role=navigation is key to achieving this. This helps with cross-browser support, as there are so many different browsers and screen readers to cater for.

Design for search engines as well as users
It’s now old news that Google indexes mobile websites before desktop. This is was an obvious response to the majority of users now surfing the web from a mobile device rather than a traditional laptop or desktop PC. What this means for SEO is that Google will read, index and rank a site according to the quality of the mobile version of a website before it does the desktop version. From an SEO perspective, a website’s menu requires serious consideration. It is proven that poor or difficult navigation is off putting to users. Users leaving your site will not only increase the bounce rate, but will prove to Google your site is not relevant for the term they searched for. Both of these things can harm your ranking.

The order of a menu can have an effect on which pages rank best. Google’s bots crawl a site in the same way a user reads the page: from left to right and top to bottom. Because of this, Google assumes the first pages/links it hits are the most important, and so more ranking emphasis will be placed on these pages. Along with this, the vast majority of external backlinks pointing to your site will likely go to the homepage. This authority, which is vital to your site ranking, will flow through the internal links, with more of it going into the links closer to the top of the page. You can be intelligent in how you order your menu, placing your key products or services at the top, giving them the best possible chance to rank.

Increasingly, Google tracks how a user engages with a website and uses the data gathered to update the SERPs (search engine results pages). This includes how a user engages with a mobile menu. If users are finding it hard to use the menu and navigate to pages, or move in and out of the menu smoothly, this can have a negative effect on the rankings. One notoriously difficult area is the back button on mobile phones, which can either shift back to a previously used app, or go back one stage in the browser. For ease of use, it is recommended that the mobile menu has clear and easy-to-access ‘back’ directives, and that breadcrumbs are apparent and easy to use on the page itself. By doing so, the user can navigate back and forth as easily as possible.