Designing Mobile Navigation

Best Practices for Large, Content-Rich Websites

You have a large, content-rich website with subsites and hundreds or thousands of pages. The desktop view of the site has room for visible navigation and wayfinding aids, but the mobile site doesn’t. In fact, the mobile navigation was more of an afterthought than you’d care to admit.

Sound familiar? If so, you’re not alone. Many organizations with large, content-rich websites struggle with mobile navigation, and we wanted to identify research-backed best practices that would help overcome some of these common design challenges.

To do this, the Sparkbox experience design team conducted a usability evaluation of 30 university and college websites. We chose the higher education sector because it is notorious for having countless pages of content, lots of web properties, and a myriad of competing audiences and internal stakeholders to serve. After we identified the most effective of these websites during our evaluation, we usability tested the sites with college-bound students to see what else we could learn. From this, we developed these guiding principles for mobile navigation for large websites.

  • Menus: Distinguish primary and secondary navigation with visual hierarchy.
  • Submenus: Enable users to open and close menu folders to preview second-level pages and third-level pages in more than one section at a time. Build a robust main menu rather than creating an additional section menu.
  • You Are Here Indicators: Indicate the page the user is on when they open the main menu. Include breadcrumbs for increased clarity.
  • Navigating Between Websites: Use a global header or consistent header conventions across all subdomains and microsites to link back to the main site’s homepage. If the main navigation links to other websites that don’t follow the header convention, make sure the link is clearly indicated as an external link.
  • Site Search: Optimize site search with alternate keywords that match the vernacular of your audience. Ensure that every page on your website has enough context to be the first page or the only page someone visits through search.

To verify that our guiding principles could be applied to a variety of robust websites, we evaluated 10 of the most-visited, content-rich websites from Alexa’s list of top 500 U.S. websites. These websites were from sectors like government, health care, nonprofit, financial services, and business solutions. We looked for the same trouble-spots identified by our usability testers, and we also looked for mobile navigation improvements or innovations that could benefit users. Read our methodology to find out more.

Menus

Use visual hierarchy to distinguish primary and secondary navigation in mobile menus.

Nearly all of the websites we evaluated used the menu icon (aka the “hamburger”) to open and close a navigation panel on mobile. As web professionals, we’re very familiar with this interface, and it turned out that our 16- to 19-year-old usability testers were too. We still prefer including the “Menu” label in our designs because more clarity can’t hurt when you are serving an audience with varying abilities and many cultures, but clearly the hamburger menu is well-known.

Menu icon examples More menu icon examples
Four different variations of the "hamburger" icon.

Takeaway

While the hamburger menu can stand on its own, we still prefer including a Menu label for insurance.

Usability testers found it easier to navigate the large sites when the menus were organized by types. For example, it was easier when menus were organized into primary and secondary navigation or when they were organized into different audiences or uses.

Different treatments for search and calls to action
On this website, search and calls to action have a different treatment than the primary navigation, while the secondary navigation is below the fold.

IRS.gov took this one step further. They not only visually distinguished their primary and secondary navigation, but they also added organizational headings into the menu to highlight audiences and popular content.

Showing an open section on IRS website
IRS.gov visually distinguishes its primary and secondary navigation in the menu, but when a section is opened, it also adds headings to the navigation items to direct users.

Takeaway

Use visual hierarchy to distinguish primary navigation, secondary navigation, and calls to action in mobile menus. Consider breaking up lists of links in menus with headings.

Submenus

Enable users to open and close menu folders to preview second-level pages and third-level pages in more than one section at a time. Build a robust main menu rather than creating an additional section menu.

All of the mobile navigations we selected as most usable had open/close buttons that enabled users to drill down to subpages.

Showing multiple navigation sections open
Our testers would open more than one section at a time to find a page they were looking for.

During usability testing, nearly all of the testers opened more than one section of the navigation at a time to compare the subpages underneath each top-level item. When they weren’t sure where to look first, this helped them decide in which section they would most likely find what they were looking for.

One mobile navigation design even included the third-level of navigation in the menu. When visually designed well, this proved to be a good solution for deep sections.

Good example of 3 level deep menu
This menu went three levels deep without sacrificing visual hierarchy and clarity.

We noticed that websites like aws.amazon.com and salesforce.com also enabled users to drill into a third level in their navigation. On AWS, a user would open the menu, click Products, click Featured Services, then once they clicked a service like Amazon EC2, they would finally leave the menu to visit a page. This is different from the navigation pattern used by many of the higher education sites, where a page corresponds to each navigation item in the hierarchy. However, an AWS-style menu could be designed to both open a page (by clicking directly on the label) or open a folder (by clicking the plus sign).

Showing Amazon's approach using a three level deep drill down menu
Amazon AWS’s menu took a different approach to navigating three levels deep by using a drill down pattern.

Takeaway

Enable your users to drill down within the main menu to find the information they are looking for without having to dig through pages. Consider using expand/collapse sections that enable your users to have more than one section open at once for ease of comparison.

Two of the websites we tested had section navigation available in an on-page menu. This was used occasionally by the testers, although everyone gravitated toward the main menu most often. One website exposed sibling pages at the bottom of the page. Our usability testers did not engage with this style of navigation to find information, so we recommend avoiding a bottom placement.

Image of mobile view of W&L and Swarthmore interior pages
While some testers interacted with the section menu, most relied on the main menu.

It’s possible that our usability testers skipped the section navigation because of the design. In the Swarthmore example above, the section navigation is above a photo, so users may have quickly scrolled past it to get to the content. In the example of W&L, the photo element may overwhelm the more subtle menu.

A few of the top US websites we evaluated treated their section navigation differently. For example, IRS.gov put the menu close to the content and is utilitarian in design. While AWS puts the navigation above the page title and above a visual treatment, the visual treatment is a background, not an image. Lastly, the LDS Church employs a different section navigation treatment entirely—they expose the submenu items in a slider, so there’s no question about what lies inside.

Other examples of section navigation
These show other design options for section navigation that could be more noticeable or engaging to users.

Takeaway

If you use section navigation, make sure it is noticeable, high on the screen, and close to the content so that users can find it when they need it.

You Are Here Indicators

Indicate the page the user is on when they open the main menu. Include breadcrumbs for increased clarity.

While page titles mostly matched the navigation labels, it became clear during usability testing that not all of our users realized what page they were on. Several times, our testers would not find what they were looking for, return to the menu, and select the same exact page or a page they had just visited, and they became frustrated.

Why was this happening? The users were experiencing lostness because of a lack of state. When they opened the menu, they had no context for the page they were already on—there was no indication of “you are here” relative to the other pages. This makes accidentally revisiting pages an inevitability. One school’s on-page submenu nearly solved this problem by indicating the top level section in the button, the page you were on in the list, and the child and sibling pages. This solution, extended to the main menu, would improve menu usability.

Image of W&M
This section menu indicated the top-level parent category, and when open, showed where the user was and what pages were children and sibling pages. Also note the minimalist breadcrumb.

On the websites we evaluated, breadcrumbs were frequently present on the mobile view, though not always. Of course, including breadcrumb navigation is a well-known best practice for communicating where you are on a website and could be more widely used on mobile.

Takeaway

Always communicate the user’s location within the navigation with selected states and offer a fallback like breadcrumbs.

Navigating Between Websites

Use a global header or consistent header conventions across all subdomains and microsites to link back to the main site’s homepage. If the main navigation links to other websites that don’t follow the header convention, make sure the link is clearly indicated as an external link. It was all too common during both our internal evaluations and during the usability tests for the menu navigation to send users to a new website with no indication that this was about to happen. This was jarring for everyone, us included.

Some sites we evaluated would open these new sites in new tabs, which turned out to be bad form on mobile. Opening new tabs in the mobile context was both disconcerting when you noticed it happening and confusing later on to realize that you’ve inadvertently opened many windows or tabs.

While some sites used an offsite link indicator, it wasn’t entirely clear that our usability testers were familiar with the icon. And they were particularly confused when a typical-looking navigation item linked to an entirely new website.

Takeaway

If linking directly from the navigation menu to a different website, use an offsite indicator, a button treatment, or another indicator to set expectations.

Princeton’s website uses an external link indicator within the navigation, while Swarthmore’s website clearly indicates an external link with a special button treatment.

In the best cases, our usability testers didn’t notice they’d changed websites at all. This was evident when they were always able to get back to the primary website by clicking a logo in the header.

When the header logo didn’t return them to the primary website’s homepage and instead went to the subsite’s homepage, they felt lost. Our testers would also try to click a logo in the footer (if there was one) to go home. When neither of these logos took them to the primary site’s homepage, most clicked the back button until they found their place again. And if the site opened in a new tab without them realizing, the back button trick would fail.

Takeaway

For best usability, always make sure a link to the primary website is available in the header of all secondary sites. Ensure that it is consistently located or uses the same design. Essentially, employ a global header on all sites.