Many websites have fairly complex information architectures, with many levels of categories. While lower-level categories are often shown on desktop in dropdown menus or mega menus, presenting these subcategories on mobile devices is not always straightforward.
How should these expandable menus be translated on mobile? The small screen size cannot easily accommodate many subcategories. While Cisco’s desktop site can display 30 or more subcategories in its mega menus fairly comfortably, without forcing users to scroll, those categories will not easily fit on a single mobile screen. Plus, some of the visual structure afforded by the two-dimensionality of the megamenu will not be easily apparent on mobile, simply because not all subcategories will be visible at the same time.
Subnavigation: Design Goals
Definition: Subnavigation refers to the navigation UI that helps users access lower-level categories in the site’s information architecture (IA).
When designing subnavigation, aim for the following design goals:
- Minimum interaction cost: Users should be able to access an element of interest in the navigation with as little effort as possible. That means few taps, little scrolling, and zero page loads if possible.
- Typical-path support: If, within a single session, users are likely to jump from a page in one section to another one in a completely different area of the site, subnavigation should make it easy. If, on the contrary, most visitors will “live” in a single section of the site (say, the sports section of a newspaper), then the subnavigation should focus on supporting that pattern.
- Discoverability: Users should be able to find the subnavigation UI quickly, with no chance of confusing it with the main navigation.
Types of Subnavigation on Mobile
There are four common ways to design subnavigation on mobile:
- Accordions (aka “submenus”) inside a main navigation menu, such as a hamburger menu
- Sequential menus
- Section menus
- Category landing pages
Accordions Inside a Main Menu
When the primary navigation is hidden inside a pull-down menu, a simple way to implement subnavigation is to use accordions for the primary categories, with each accordion expanding to expose its corresponding subcategories. This design feels like a “submenu” inside a larger menu.
Submenus work well when they contain just a few subcategories (typically less than 6), so that the navigation menu is not overly long at any time. When there are many subcategories inside a main category, submenus lengthen the main navigation menu too much and make the task of finding information inside it tedious.
When the navigation menu is present on all pages of the site, this subnavigation design fares the best with respect to the goals set in the previous section:
- It has a low interaction cost, because users can access subcategories in the site’s IA anywhere on the site (if the menu is present on that page), without waiting for an extra page load.
- It supports all paths through the site, not only typical ones. Thus, it is well suited for situations where there is no dominant site-navigation pattern and allow users to easily jump through different branches of the site’s information hierarchy.
- Since it is part of the main navigation, there is little danger of people getting confused by having to choose between two navigation UIs. However, it is still important to make sure that primary categories look different than lower-level ones in the main menu (using indentation and perhaps color to distinguish between them).
A sequential menu is a menu which shows only the subcategories of the last selected category. The sequential menu starts by displaying the primary categories; once people select one of them, the list of primary categories is replaced by the subcategories of the selcted category. The popularity of sequential menus has increased significantly on mobile in the past few years, as they seem an easy solution to the problem of displaying many categories and subcategories on a small screen.
Research in human–computer Interaction is split on the effectiveness of sequential menus: some studies seem to indicate that people do just fine with them, at least for tasks that are not overly complex and that do not demand navigation in different areas of the same hierarchy. Users with low spatial ability (as measured by a spatial-ability test), however, seem to be less efficient with these menus than users with high spatial abilities. And unfortunately, on mobile devices, due to the increased probability of interruption, we are more likely to become disoriented and behave like users with poor spatial abilities.
Sequential menus cause users to accidentally make mistakes, especially on Android phones (or in a browser) — often people are tempted to use the phone’s physical Back button or the browser’s Back button, and accidentally end up closing the menu and navigating to a different page instead of moving back to the higher-level menu.
Some sites purposefully use a different label instead of Back for navigating up in the information hierarchy. For example, on Macy’s site, a trail of breadcrumbs is shown in the menu to allow users to go up in the IA.
When sequential menus preserve state, people sometimes find themselves lost or do not realize that they can navigate in a different area of the hierarchy. For example, on Macy’s website, the menu will change to reflect the current page’s position in the IA. So a user who landed on the Find a store page will not see much content of interest when she opens the menu and may decide that the site is buggy or the menu is void of content.
When menus become overly deep, prompting users to make a sequence of selections, they amount to nested-doll navigation — a tedious pattern that involves repeatedly choosing categories and subcategories before reaching content. Many mobile users hate this pattern because it forces them to make multiple decisions, without seeing any useful information.
While sequential menus have only moderate interaction cost (at least when the navigation hierarchy has only 1–2 sublevels) and allow users to traverse the IA tree quite easily if they learn how to use it, they can disorient users — people may lose their understanding of where they are on the site and which categories belong to which IA level. Moreover, because the Back link in sequential menus can be confused with the browser’s Back button, we generally do not recommend them for subnavigation.
Section menus are separate menus (distinct from the main navigation menu) that appear on section homepages. For example, on BBC’s website, each of the main sections (e.g., News, Sports etc.) has a homepage with its own section menu. Essentially, it’s as if the section was a minisite with separate navigation.
Section menus can accommodate a fairly large number of subcategories and are usually accessible on all pages within the corresponding section. While navigating within a section can be done easily through the section menu, this pattern does not support jumping from one subcategory of a section to another subcategory of a different section (e.g., from Golf under Sport to Science under News). Thus, it is well suited in cases when most users will spent their session in a single site section, but less appropriate if they usually navigate through multiple sections within the same visit. For those users, the interaction cost of navigating to that section’s homepage in order to get access to the section menu may be too high.
Occasionally, section menus may be confused with the main menu, and, if so, users will not use them for section navigation, thinking “I already expanded that, and I know it wasn’t relevant, so I am not bothering again.” That is why it is important to make sure that:
- The main menu and the section menu look distinct enough so people won’t confuse one with the other.
- You don’t reuse the same UI element used for main navigation as a section menu.
The BBC does well on both these criteria.
Category Landing Pages
When all else fails and you have too many subcategories to fit even in a section menu, the solution of choice is to create a landing page that serves as a navigation hub for all the pages within that section. The landing page usually contains an enumeration of all the level-2 subcategories (and even some level 3 or 4 subcategories).
Category landing pages are even less flexible that section menus. While section menus allow users to jump across pages within the same section, category landing pages force them to pass through these pages each time the user wants to change the branch of the IA tree. That is why category landing pages are usually ok for situations where users typically visit a single area of the IA hierarchy within one session. Otherwise, the interaction cost for switching subcategories is too high, with each switch requiring a visit (and a page load) of the category landing page.
Designing mobile subnavigation is often challenging due to the limited screen real estate. Here’s a simple decision algorithm to help you figure out which subnavigation pattern is best for you:
- If you have less than 6 subcategories for all primary categories, then a submenu or accordion in the global navigation may be appropriate.
- If you have between 6 and 15 subcategories for at least some of your primary categories, then consider a section menu.
- With more than 15 subcategories per primary category, consider a category landing page.