Responsive Navigation: Don’t make your users think

Simple and easy to use navigation can be a challenge when building a responsive website. You’ll find the navigation system might alter at various screen sizes in an attempt to minimise its impact on the elements that surround it.

It’s in attempting to minimise the dominance of the navigation on mobile screen sizes that the hamburger icon, either with or without associated text, became popular. Though the argument over the hamburger icon itself rages on, many designers and developers have accepted that hiding the navigation at small screen sizes is, at times, necessary.

But as time has progressed we’ve begun to see more websites maintain this mobile form of navigation throughout all screen sizes, even in instances where space is available for the more traditional navigation options. Some people aren’t convinced that this is a technique we should be adopting and that, when possible, we should be displaying more traditional navigations at desktop screen sizes.

The lesser mentioned benefit

I’ve only really seen people argue against this technique. They argue that it’s an extra click, that a website’s purpose isn’t as clear without these links or that it’s just lazy. I don’t really see anyone arguing in support where they mention a benefit to the user experience. But I think there is one and this is consistency.

We’re taught to not make our users think. This means making the tasks they wish to complete as easy as possible through good usability and findability. These also has to be considered when making changes on a responsive website as it adapts to different screen sizes. Change a website too much as it responds and the chances of confusing the user becomes greater.

Users can react very badly to a changes in a design they use frequently. Take, for example, the reaction Facebook often receives when they make updates of any kind. This is because tasks that had become second nature might now need to be relearned and take people longer to complete in the short term.

It’s this lack of familiarity that also has users switching back to desktop versions of websites rather than stick with what is supposed to be an optimised mobile experience. I do this myself with the BBC Sport website as the single column layout on mobile does not communicate the same hierarchy that I’ve become accustomed to on the desktop version. I am much more familiar with the desktop version and so find it much easier to use.

With navigation a big part of any website the changes that can occur to this element from mobile to desktop versions have the ability to disorientate and confuse the user and without thinking about it we’re asking them to learn multiple variations of the navigation if they move frequently between different devices.

So in maintaining a single implementation for our navigation we provide consistency and remove the confusion that could be caused by moving and changing the navigation. Instead it remains easily identifiable no matter how a user chooses to interact with the website.

Benefit enough?

I think the benefit of consistency throughout different screen and devices sizes is important but whether this is enough to overcome the issues of hiding our navigation when we could display it really comes down to the specific situation.

Instead of declaring an implementation right or wrong for all uses we have to look to the website and it’s users for answers. We can only decide if something is right or wrong for our particular audience.

The best of both worlds

Could a hybrid solution provide the answer? In writing this article I wondered if there is a way of maintaining the same design and usability of a mobile menu whilst also allowing this to be shown by default when the screen size allows it.

We often see the design of navigation change drastically from desktop to mobile; possibly from a horizontal bar to an off-canvas solution. It’s this change that is most likely to confuse users, but if we stuck with the off-canvas solution at all screen sizes we could make this visible by default when the screen is large enough to accommodate both this and the website.

To retain the same functionality the navigation/menu toggle button would still be displayed and usable but in this case close the navigation on first click rather than opening it and in conjunction with cookies the user choice could be maintained as they browse from page to page.

This is purely me thinking out loud and I’ve not actually tried to do this so while it appears to offer a possible solution to this particular question it may pose additional questions and yet again be a solution only for a particular audience.