The sidebar contextual nav
A common version of this design pattern showed up in the 90s in the form of left-hand sidebar navigation. I wireframed a quick example below:
Why it happens
In my experience this trend is used to cram more content on the page. Top-level menu pages that would otherwise serve as “categorisation” can now have their own bulky content. That aside, there are some positive reasons for taking this approach. Our navigation area on a user interface is called the chrome and it serves a useful purpose:
Chrome empowers users by providing a steady set of commands and options that are always visible
– Nielsen Norman Group, Browser and GUI Chrome
What happens on mobile?
This style of navigation creates an instant problem on mobile devices. Mobile devices (or anything with a small screen) leave much less room for chrome. If we leave the contextual navigation where it is we push actual content out of the way:
Finding the balance
Truth is that chrome supports how users engage with that content and determines whether a site is useful or not. Hiding the chrome incurs a substantial cost for the users
– Nielsen Norman Group, Maximize the Content-to-Chrome Ratio
If we remove the contextual navigation entirely we reduce both the desktop and mobile experience by making it harder to find child content. Even on mobile we want users to drill deeper into content so we can’t up and hide contextual navigation.
There are a number of recommendations I have for this situation:
- If the site has a lot of content, make your global navigation a mega menu. That way if the user wants to find “sibling” pages of their current one they can refer to the mega menu. This works great on desktop, but mega menus can actually work on mobile too.
- Add a breadcrumb to easily allow users to jump up a level in content. Breadcrumbs let users navigate deep content easier on both desktop and mobile.
- List child pages inline with the content. If the content on the page is worth reading then it should lead them on a journey to sub-pages. If the content is not worth reading, why is it on the site?
Bringing it together
Excluding a mega-menu I’ve put together a quick wireframe of how the above recommendations come together. This is not the only way to do this, but it is definitely a better multi-device solution than leaving the contextual navigation where it is.
Another approach is to show the contextual navigation underneath the content on mobile. That way desktop users get the advantage of having a visible chrome while mobile users scroll to discover it. If quick navigation to deep sections is needed this is a disadvantage on mobile. If the navigation is below the content on both desktop and mobile it forces you to think about the length of content on parent pages.
