In my last post I looked at how we could prioritise content based on the type of device. The first post was only part of the puzzle you need to complete to build an awesome responsive experience, it’s probably worth pointing out that each post is standalone and doesn’t assume any knowledge from a previous post.  With this in mind, the next area of responsive design we will look at is how we can optimise the site’s navigation to provide good onward journeys regardless of the type of device a user is using.

On larger devices navigating a site is often really easy. If we take the Sony site for example, it has very clear navigation covering the key areas of their business and if we can’t see what we are looking for, they provide us with an easy way to search the content by the means of a search field to the right of the page.

Screen Shot 2015-04-11 at 20.42.18-5325

Unfortunately, on the majority of smaller devices, navigation on a site becomes less obvious. Looking again at Sony’s site on mobile you will notice the navigation is completely hidden inside a hamburger menu. In addition, it’s not clear that the search box has also been moved into the hamburger menu.

Screen Shot 2015-04-11 at 20.55.36-5351

This isn’t simply a limitation of Sony’s mobile site, but this is a consistent design pattern that we see across a broad spectrum of sites including those from Microsoft, British Airways and British Telecom (BT). In making the site responsive they have potentially harmed the user experience by hiding potential onward journeys.

The design pattern of including a hamburger toggle menu which contains our menu items has been around for a while and by becoming a common design pattern whether it is actually beneficial or harmful to our users is not necessarily scrutinised. Take Beamly for example: when we originally built our navigation to be responsive, we defaulted to the standard of simply using a hamburger menu and unfortunately this wasn’t the first site that I have worked on that has done this.

Having had our menu live for a while, what we found at Beamly was that when looking in Google Analytics, users were not using the navigation menu to find onward journeys. This data was then backed up by looking at the heatmap data captured using HotJar and then again through looking at how people navigated our site in user testing sessions. In particular, in user testing sessions we noticed users were often just scrolling past the navigation without even taking a look at the options inside.

Having recognised a problem, the next step was to look at how we could improve it. In order to do this we had our designers look at a few different options as to how we could display our navigation. Rather than completely scrap the hamburger menu on the Beamly site, we instead moved key items out of the menu. The benefits we saw from this new navigation were twofold: when we user-tested the new navigation we found that not only did it provide visible onward journeys, it also helped our users to understand what Beamly is all about. The resulting menu can be found in the below screenshot.

Screen Shot 2015-06-08 at 13.34.26

So having looked at the thought process we went through with the Beamly navigation, we should now understand potential problems with the hamburger menu. The next step is to look at how you can apply what we learnt to your own site. Rather than focus on Beamly designs, I want to go back to our example of the Sony site. In the below mockup I have made a few visual changes which should help improve onward journey discovery.

sony reimagined-5366

In my mockup the first thing I did was pull out the key navigation items from the hamburger menu and place them inside a secondary navigation. This made them much more visible to the user without them having to click on the hamburger navigation. I also can see straight away that Sony is an electronics and entertainment brand, something that might not have been obvious before. Having moved the key navigation out of the hamburger navigation I then was able to remove the hamburger completely and replace it with a search icon. This means that the user can immediately see that they are able to search the site.

There are a couple of disadvantages to what I did in this mockup. Firstly we have increased the height of the navigation pushing down the site content and secondly, due to the limited space, the number of onward journeys we could potentially show is reduced. However, the benefits outweigh the disadvantages, with our users now being able to see much clearer onward journeys and the added value the context the menu items give. Should we decide we have more onward journeys than we could show outside of a hamburger menu, we could take more of a hybrid approach (like Beamly’s site) where key items are outside of the hamburger menu and the rest are inside.

Summary

This post is very much based on the learnings we obtained at Beamly through looking at the data we had in Google Analytics, Hotjar and the data we gained from running user testing sessions. What works for us might not work for your site, however what I hope you have taken away from this is don’t simply go with the crowd. The navigation of your site is extremely important and it’s worth spending the time to discover what works best for your users.

Thanks

Thanks to Kate Montgomery for reading through and checking this post before I posted it, her help was really appreciated.

Are you looking for your next role?

I work as an Engineering Manager at Beamly where we are currently looking for both Frontend and Full Stack software engineers based in our London office.

Find out more