By Jamie Unger
Because the depth or breadth of website content varies so drastically, there will never be a one-approach-fits-all solution to implement mobile navigation. Recently, Google changed their mobile search algorithm. It now prioritizes mobile-friendly websites when the searcher is using a mobile device. Changes like this make mobile-friendliness more important than ever.
With so many different options to choose from, Standish (a front-end developer), Eric (a designer), and I (a user experience architect) took a multi-discipline approach to thinking through solutions. We compiled a list of several patterns we’ve been seeing lately “out in the wild.”
FORCE TO LANDING
Clicking the navigation item in the menu takes you to the section landing page. Once within a section, sub-nav is then available within the menu and/or available in the footer of the page or elsewhere.
Example sites
Pro
Visitors know the landing page exists and see valuable content that may be shown on that page level.
Con
Sub-nav is hidden when the visitor first accesses the menu, so they may not know it’s in the menu in a different context or at a different page location; the sub-navigation must be “found.”
SECOND TAP TO LANDING
First tap on a nav item in the menu displays sub-navigation options, second tap on same navigation item takes the visitor to the landing page.
Example sites
American Dental Association
Sally Hansen
Spring Valley Herbs
Pro
The navigation label isn’t appended with “overview” or “all” or another word that can sometimes be misleading.
Con
There is no indication to the visitor that a second tap will function in a different manner; the interaction is hidden and must be “found.”
SPLIT TAP
Tapping the left portion of the navigation item (including the label) links to the landing page, while tapping the right portion of the navigation item displays the sub-navigation.
Example sites
Pro
The visitor has single-tap access to whatever s/he wants to do.
Con
Depending on the visual design, it can be unclear that there are two separate actions and/or it can be unclear what the outcome will be of tapping on one or the other of the two separate areas on the navigation.
ACCORDION OR PANEL WITH OVERVIEW/ALL/HOME
The first tap on a navigation item displays sub-navigation. Within the sub-nav options, the category navigation label is often repeated, and/or a word like “Overview,” “All,” or “Home” is used or appended that links to the landing page.
Example sites
Boden
Alarm.com
Craftsy
Pro
There are no “hidden” interactions.
Con
Appended labels can at times misrepresent what the content will be on the landing page, or the visitor can be left feeling like they had to make the same choice twice.
NO MENU
The page acts as a “meganav.” There is no menu — you navigate deeper into the site via links within the page content. With this setup, the breadcrumb becomes a very important indication of location and navigating out and up.
Example site
Gov.uk
Pro
The page you go to is either used as a wayfinding page to deeper content (sub-nav), content, or a mixture of both. The visitor sees whatever you want them to see.
Con
There can be a “re-orienting” moment for visitors to learn/understand that they must read the page instead of looking for a menu of navigation choices.
THE PEEK
A third of the screen displays the page content when the navigation menu opens over it. When we were looking at Target’s mobile site, the way we wanted the interaction to work was that the page content would refresh when we clicked on a navigation item, so that we’d see there was new content that might be valuable. By adding some kind of implementation like Qualcomm’s desktop navigation, which has a static nav on page refresh, this could be a cool solution.
Pro
The visitor can easily see the two choices they have when they click on a navigation item: see the sub-navigation and see that landing page content has changed.
Con
Depending on implementation and how AJAX may pull content onto the page, there could be possible SEO concerns.
These are some of the most common and interesting patterns we’re seeing and considering right now. Are there other patterns you love?
Originally posted on Clockwork’s blog.
