Navigation: A study of the good and the bad

Content parity doesn’t mean every experience is identical. It means that the content is always available: whatever settings and input modes the user uses.
— Scott Jehl

You're not in control.

No matter how leading (or misleading) you are, users will always do things the way they want to. When designing a website or an app or any digital experience that you send out into the world, you might have planned out what you want them to click on and how, but ultimately the user will do it their own way. When working with responsive design, you need to make sure that all the content is accessible always; whether the user is visiting from a desktop or a smaller mobile screen.

When dealing with responsive design, there are many great examples of how navigation is done well and how it's done not so well.

The Middlesex-London Health Unit's website, as seen above, has quite a lot of information in the navigation on the desktop. Primary navigation on the top, secondary navigation, sub-navigation and search. You'll see as we progress to tablet screens and then finally to mobile, that the design of the navigation is simply being translated to a different size without much consideration. Looking at the mobile drop-down, you see that there is too much information presented. Too much choice that you loose the user. Too much information takes the pleasure and usefulness away from the user.

Users interact with desktop and mobile very differently.

On desktop you have a lot of clicking and on mobile you have more swiping and scrolling. The solution would be to prioritise what information is more important to show to the user.

The World Wildlife Fund website is quite different. Already from the desktop view they have prioritised. The WWF has a lot of archived information. Past projects, editorials, articles and more. They also have a lot of other information: conservation, endangered species, geographical locations, work they're doing on climate change, fresh water, food, information about habitats, forests, and the list goes on. What's done very well is the categorisation. They've managed to boil everything down to three main headings, two call-to-action buttons and two more secondary nav folders. Everything else fits under these folders/drop-downs.

As we move towards the mobile design we see even more prioritisation.

The only visible elements are the two call-to-action buttons and a classic hamburger menu button. And when you click the menu button, you're greeted with the combined primary and secondary navigation links. What's great about this is that it's simple and not confusing. 

Over the past couple of years, research has been done about the interaction ratio websites get after they've introduced the hamburger icon. The engagement changed as people were not familiar with what the three lined icon meant. This gave rise to adding the word 'menu' below the icon and in some instances removing the icon and simply naming the button 'menu'. I don't believe there is a golden rule in deciding when to use the hamburger icon or not. I do believe this is what user testing is there for. Designing and redesigning sites and apps is an organic process. By keeping your toolbox up-to-date with the latest helps designers and developers make more effective decisions during the design process.