Make Navigation Responsive

Navigation can be in form of links in static or drop-down menus in the main header or side-bar. We have to be careful and test navigation experience on all form factors and device types.

I came to web development from the enterprise world. The data-driven applications that are built using off-the-shelf products are not quite cutting edge on adhering to the greatest of web standards.

Consider these CRM application examples -

The application has many features exposed to users at once and is geared towards productivity. Now, this is perfectly fine if you have an controlled audience, a good training budget, have a distinct mobile app, and may not require responsiveness to permeate every fabric of your application.

Tough luck if you are not that.

I faced some difficult choices building small-scale applications to a niche audience when I switched gear in my career. My initial data-driven applications tried to emulate the horizontal navigation, drop-down menus, and sub-navbars - but it was not quite well-received in applications far simpler than their off-the-shelf counterparts .

Surprisingly (or otherwise) users in the ‘non-enterprisey’ world denounced too many options in menu. They ‘sorta’ liked to click through simpler/cleaner UI, onto a contained entity that exposed functions incrementally.

Wrong developer for the right audience? May be.

Anyhow, I adapted.

Here are the standards that are not quite new to developers in the same space.

  • Include only main navigation links in/around the main toolbar
  • Fold main navigation in the hamburger/kebab menu for smaller form factors
  • No drop-downs in menu - this causes confusion to mobile users
  • Side bar on left. Fold in hamburger menu for smaller form factors. Open left nav menu by default in larger (md+) screens
  • Contextual menu (optional) to the right. Include things like contextual help, record-level operations here. This is hidden by default
  • Anchor links are limited to the home page (non user). Any navigation has quick animation to maintain context
  • Navigation within detail pages (e.g. Edit / New functionality, View details) are through pop-ups. They almost never navigate to the related record pages - maintain context for the parent record at all times
  • Also: navigation links in header is never fixed, though side bar(s) is fixed

No prizes for guessing that this is aligned to material design principles. I don’t quite have the money and muscle to develop standards on my own. I could get acceptable feedback from “most” users, and I stuck to either changing stuff minimally or convincing users about how the entire industry is built on these principles. So, I tend to follow these principles for navigation - even when not using material design for the overall application.

I am far from reaching the nirvana-level user experience, but my data-driven apps have somewhat standard structure that is reusable across applications. That is one less decision to be made when churning out the next beautiful app for the world.

comments powered by Disqus