Published on <a href="https://blog.prototypr.io/types-of-mobile-sub-navigations-how-to-choose-them-c4b5f0d3dd53?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Mj <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*K7zl9BObkjNusmwrjKgKjg.png">
I was working on a project for which the challenge was to make the navigations intuitive and useful for mobile users. And while searching the answers I got some awesome solutions and articles, So I decided to write this article.
So, there are tons of product out there in the market and they all have great websites with a lot of menus and submenus to help users meet their need. All these menus are looking great on the website like the below one:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*24_6o0MNza6fAAD31z35Aw.png"><a href="https://www.virginexperiencedays.co.uk/">Virgin Experince Days</a>: The desktop site uses a horizontal navigation bar holding the primary categories. On mouse hover, each primary category expands as a megamenu with corresponding level-2 and level-3 subcategories. The mega menu is visually divided into two columns (one is for main categories like, driving, food &amp; drink and other column is for their sub categories) and also contains two pictures for experience(Short Breaks and Spa and Beauty).
But the question is that how should we translate these expandable menus on mobile? The small screen size cannot easily accommodate many subcategories. While Virgin’s desktop site can display 20 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, not all subcategories will be visible at the same time.
Let’s see how we can deal with this 🙂
So First of all we should know the goal of sub-navigations and their types.
<h3>Sub navigation: Design Goals</h3>
Definition: Sub-navigation 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:
<ol>
<li>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.</li>
<li>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.</li>
<li>Discoverability: Users should be able to find the subnavigation UI quickly, with no chance of confusing it with the main navigation.</li>
</ol>
<h3>Types of Subnavigation on Mobile</h3>
There are four types:
<ul>
<li>Accordions (aka “submenus”) inside a main navigation menu, such as a hamburger menu</li>
<li>Sequential menus</li>
<li>Section menus</li>
<li>Category landing pages</li>
</ul>
<h3>Accordions Menus</h3>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*6JLdqm8ZDcb71AZKDIry8w.png">Adidas mobile website uses accordions inside a main navigation menu to display sub-navigation.
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.
<h3>Sequential Menus</h3>
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(image in left) once people select one of them, the list of primary categories is replaced by the subcategories of the selcted category.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*GIjX8Ruxh6QzCrsX7yUb3Q.png"><a href="https://shop.nordstrom.com/">Nordstorm</a>: When selecting a primary category (Designer) from the main menu, the corresponding subcategories are shown instead of the original content menu. The user can navigate up in the information hierarchy by tapping the button Back inside the menu.
While sequential menus have only moderate interaction cost (at least when the navigation hierarchy has only 1–2 sublevels) and allow users to see all the menu option quite easily if they learn how to use it.
<h3>Section Menus</h3>
When you have two separate navigation on your page one is the main navigation and you can call another the “section menu”. I will give an example for this, let’s assume that you have few links like Home, News, Sports, Health etc. these are your main navigation. And when you click any of them(Sport in below example) you can see the sections for that like I clicked the sports section then my section menus will show me: All sports, Football, Basketball etc. these are the sections.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*l3-IRxkTwqYzatG6t0SROw.png">BBC.com: Each main-category landing page has a section menu for that category (All Sport for Sport, Sections for News).
Section menus can accommodate a fairly large number of subcategories and are usually accessible on all pages within the corresponding section.
Occasionally, section menus may be confused with the main menu, that is why it is important to make sure that:
<ul>
<li>The main menu and the section menu look distinct enough so people won’t confuse one with the other.</li>
<li>You don’t reuse the same UI element used for main navigation as a section menu.</li>
</ul>
The BBC example above does well on both these criteria.
<h3>Category Landing Pages</h3>
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 <a href="https://www.nngroup.com/articles/mobile-navigation-patterns/">navigation hub</a> 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).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*c1lriiBqVB3dUmy-5IC2lg.png">Stanford.edu: Subnavigation is implemented through category landing pages. The Admission landing page contains more than 6 screenfuls of information and links to various subcategories.
Category landing pages are even less flexible than 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.
<h3>Conclusion</h3>
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:
<ul>
<li>If you have less than 6 subcategories for all primary categories, then a submenu or accordion in the global navigation may be appropriate.</li>
<li>If you have between 6 and 15 subcategories for at least some of your primary categories, then consider a section menu.</li>
<li>With more than 15 subcategories per primary category, consider a category landing page.</li>
</ul>
Have fun, thanks for reading and keep your eyes on medium for more great articles 🙌🏻
I am totally inspired from NNG group for this article as I took most of this from their article “<a href="https://www.nngroup.com/articles/mobile-subnavigation/">Mobile Subnavigation</a>”, please check this for detailed version :).
If you found this post interesting, then please move your cursor to the left or bottom to find the “claps” icon and next you know. That would really make my day — thanks!
For more works follow me on <a href="https://dribbble.com/M-jha">Dribbble</a> and connect with me on <a href="https://www.linkedin.com/in/murari-jha-78989b4a/">LinkedIn</a>.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c4b5f0d3dd53" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/types-of-mobile-sub-navigations-how-to-choose-them-c4b5f0d3dd53">Types of mobile sub-navigations &amp; how to choose them.</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Types of mobile sub-navigations & how to choose them.

Top Stories