Mobile Subnavigation

Great article going through the approaches and pitfalls of deep navigation from a mobile perspective. Designing mobile subnavigation is often challenging due to the limited screen real estate.

Design Goals

When designing subnavigation, aim for the following design goals:

  1. 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.
  2. 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.
  3. 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

Here are the conclusions

  1. If you have less than 6 subcategories for all primary categories, then a submenu or accordion in the global navigation may be appropriate.
  2. If you have between 6 and 15 subcategories for at least some of your primary categories, then consider a section menu.
  3. With more than 15 subcategories per primary category, consider a category landing page.

Source: Mobile Subnavigation

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s