The Responsive Menu: A Modern Essential

The Responsive Menu: A Modern Essential

There comes a time in any designers’ life, when, after months of prodding and poking and dodging advances, you can’t avoid it any longer. You have to write a blog post. Luckily I have a topic that has become a contentious issue in these days of responsive design: menus.

To me, menus always seem to force an all-or-nothing approach. Either the full menu is there or it switches to a “burger” menu (three horizontal lines arranged like a hamburger: ≡). This seems like a waste to me. It’s OK with desktop and mobile – you have the space on desktop and on mobile there’s rarely space for anything other than a burger menu – but tablets do have more space to play with. I’ll look at three different approaches to the header menu conundrum.

Choosing a Menu: Some Examples

Menus are dependent on the amount and variety of products you sell, so we’ll look at a few examples of different types of retailers and look at the types of menus they’ve used.

Amazon

 

amazon

Amazon sells everything under the sun, which makes it hard to have a clutter-free menu, and leaves little space for anything else in the header. Also, as it decreases for smaller monitors, tablets and mobile, the menu becomes fuller and more of the content gets hidden.

Amazon have come to the conclusion that the most people coming to their site familiar with a search bar. Personally, on a large site like Amazon I rarely use the megamenu. If I want something I’ll rock up at the site and search “mobile phones” if I’m having a look around or “Sony Xperia Z3” if I know what I want but am looking for a good deal. For the menu options they’ve all the departments in one drop, but everything is still locatable within it. In the space this creates they’ve added links to deals and personalisation.

Rakuten

rakuten

Another site with a lot to offer is the former play.co.uk site Rakuten. If I am brutally honest, I’m not keen on the site but it does take a different approach. They’ve gone with the side menu. I’m seeing these more and more nowadays as they are handy with tablets. As with Amazon, the search bar is fairly prominent, and also has a drop to get to all the categories, which comes into play more at mobile level.

Guardian

guardian default menu

Guardian default menu

The third example is the sliding menu, which is proving very popular at the moment, as deployed on the Guardian website. This is one of my favourite methods to approach menus on sites that have not a few categories but hundreds. The way it works is that on desktop everything in the menu is visible, but as it responds, categories move under the “browse all sections” burger menu. Most sites prioritise having the most important categories left to right so, the least important are lost first. That’s handy when considering tablets, as some of the categories will be visible instead of everything getting hidden.

Guardian expanded menu

Guardian expanded menu

Very.co.uk

very_co_uk

Very.co.uk is a pretty standard design, although I don’t quite understand some of it. Then again, they do a lot of user testing so they must know their audience – and I ain’t it. Doing away with the drop on the menu and just having links to the categories has kept the header clean and focused. Using the strong pink colour on the search and light grey on the menu shows that they believe more people will want to search than use the menu. The main thing I don’t quite understand is why they’ve kept the site so narrow. I’m a big fan of the full width sites nowadays.

Dick’s Sporting Goods

dicks

This last example, Dick’s Sporting Goods, is a little experimental and isn’t the e-commerce part of the site, but I think with a bit of love and a few tweaks it could work. It’s more for tablets but still looks great on desktop. It is highly responsive and has menus in the side. It would rely heavily on the image quality and would possibly suit a higher end product seller. You could in theory start with every product and the menu would be just a filter system.

There’s no single solution

Responsiveness has forced web developers to come up with interesting, intuitive and appropriate ways of guiding customers to their products via menus, and there might be several options for a given site that work equally well. What developers mustn’t do, however, is ignore the ever-growing constituency of mobile and tablet users. As very.co.uk demonstrates, extensive testing and acting on the results can help shift your business to the next level and respond to changing browsing habits. Ultimately, it’s all about getting customers to the checkout with the minimum number of opportunities to change their minds.


Why not subscribe to our newsletter to receive regular updates?

SHARE IT: