SSA.gov Mobile navigation rework

Challenge

One of the most significant issues we identified was that secondary navigation was nearly undiscoverable on mobile devices. On smaller screens the entire left rail — secondary nav and all— wrapped the page content to just above the footer. This meant mobile users would have to scroll all of the content before they were even aware of related pages. And because the burger menu only showed parent and child pages, there were no indications that grandchild or great-grandchild pages even existed --unless they happened to scroll all the way through the content of a page.

My goal was to build a burger menu interaction design that allowed for ALL pages hosted on ssa.gov to be discoverable through self-guided way-finding that gave users a clear sense of not only where they were but how they could get to any other areas of the website.

Solution

USWDS' mobile navigation interaction design is essentially nested accordions. This causes a number of issues for websites with deep content IA.

One issue: pages with sub-pages give overlapping interactions: accordions must be pressed to reveal sub-pages but they must also be pressed to navigate to their page. This causes complexity for all users and is only resolved cleanly by assuring that categories don't have their own landing pages. However, this didn’t suit our pre-existing IA. So the mobile menu must separate the interaction of opening a category and navigating to landing page of that category.

Another issue: successive generations of pages (i.e. parent > child > grandchild > etc.. ) are visually indicated with increasing left indent. But on websites with deep IA, such as ssa.gov, great-grandchild pages have such limited content width even reading the page titles is difficult. Especially longer page titles at browser widths down to 320 px. And even more so for Spanish language content, which is typically longer than English.

My solution was to build a light-weight navigation experience within the burger menu. Initially, the burger menu lists all top-level pages, as well as key high-level functionality such as search, a link to our Multilingual Resources page, and buttons to sign in or create an account that change to account home and sign out when the user is signed in. Clicking on top-level pages navigates to a new page within the burger menu: the H1 changes to the name of the top-level page, the open search field is replaced with a single breadcrumb naming the previous page with an arrow pointing back, and all pages that are child pages of the top-level page are listed above the core functionality (sign in, etc). If the top-level page was both a category and a landing page then the landing page is given at the top of its child pages.

For example, clicking on the top-level page ‘Benefits’ would open the list of all pages contained under the category Benefits, including the Benefits overview landing page. In this way, the interaction of opening a category and navigating to the landing page of that category are separated and distinct. The conflict is resolved. Or: Problem solved.

This pattern repeats for all generations of pages. Clicking on any page that has sub-pages in the burger menu would open a new page in the menu with a list of all sub-pages for that directory, and a breadcrumb to step back up within the site map.

Instead of relying on a traditional expandable list structure, users can tap into any top-level navigation item and land on a new page-like view, listing all of its subpages.

Learnings

This is an extension of a mobile navigation interaction design used by sites like ikea.com and Medicare.gov. However, these sites apply the model only to top-level directories. On ssa.gov I extended the model to all pages, treating the entire site map as a set of navigable directories within the burger menu.

An interaction design like this should provide mobile users with a clear way to find and access all pages on a website like ssa.gov without having to chance upon the right rail that has found its way below all of the page content.

Good interaction design should provide mobile users with a clear way to find and navigate to ALL pages on a website. Sometimes that means you have to get creative with how a right rail behaves in width-constrained environments.

Wireframes and Prototyping

Compare the current mobile nav with the proposed mobile nav update below. The current mobile nav uses an accordion paradigm and only shows the top level categories and their child pages. The proposed update will contain all pages on the website, regardless of how deep the IA is.