Summary

In summary, this blog post will look at where to position your mobile menu, what to have and how it can work for better UX. As our phones are getting bigger, do we need to adjust our designs? Is the standard burger icon on the top right-hand corner the best option to use or are there other alternatives? How should the menu items be displayed when open?

Introduction

When I say mobile menu, what do you think of? A hamburger icon on the top right with a slide-in mobile nav menu? This is what I think of – it is the “industry standard” but is this the best way?

In many ways, I think yes as we (as humans) are creatures of habit and when we see the burger icon on the top right, we instantly know what it is. On our website, our menu, for example, we have bent the rules a bit and made the hamburger icon to be three dots, so by putting it on the top right, this still has the familiar aspect that we all know.

Is there another way, is there a way to make it easier for your viewers to use and click on the menu?

Thumb-Driven Design

Have you ever used a website on your mobile device and felt you had to stretch your thumb to use it? I have and sometimes have even dropped my phone whilst doing this. Two guys who are experts in this wrote a book about this – Steven Hoober and Eric Berkman: Designing Mobile Interfaces – in this book, they talk about the “thumb zone”. Their research shows that 49% of people hold their mobile phones using one hand, relying on thumbs to do most of the work, 36% cradle the phone whilst 15% use two hands (all using the thumb as the main finger).

The idea is to design for the thumb – put the most important information in the green, or where you want the user to go. The theory goes that if it is easier and more natural the viewer is more likely to press it. 

Optimising your mobile menu designs for better user experience

Before responsive design, mobile menu’s used to be a simple dropdown menu – it was ugly but worked. Today with the evolution of technology and design there are endless choices for mobile menu design – but which is the best for thumb movement?

Before we go further, we need to stress that it is not a “one solution for all” – there are many variables that come into play so you need to do some research and work out what best suits your design and what you want the viewer to do on your page.

To work out the best design for you, you need to ask questions such as “Is my primary goal to get them to click on my menu?” “Do I need to have multiple menus?” “What goes well with my design” “What other CTA buttons do I have on the page, are these more important?”

Hamburger Icon or no hamburger icon, that is the question?

The hamburger icon has become the standard for website design, however in mobile applications, the bottom bar has become more popular, should mobile web design follow? Take a look at the Facebook app, for example, turns out that the bottom navigation menu was creating more user engagement compared to the hamburger menu (they still have a burger icon for “more”) Most of Google apps are now replacing the hamburger menu with a bottom navigation, see Luke Wreblowski talk about this here. If apps are all going this way, should our websites be going the same way or will they?

Hamburger Icon/Mobile Menu bar

Top or bottom, right or left – there is an argument for all and each website should be looked at differently. For a right-handed person top right is easier to access and for a left-handed person the opposite is true. In many ways the hamburger icon works well as most know what it means – you could even add the words “Menu” next to it to make it even more clear. Lets checkout the pro’s and con’s

Pro’s

1. Recognisable – as mentioned above, it is widely known to open menus.
2. Clean – it is simple and hides all the clutter away
3. Secondary access – it is a great place to put stuff as the “secondary goal” that are not directly needed.

Con’s

1. Less important – makes whatever is in the menu less important
2. Low engagement – because of the thumb-driven design idea, it is harder to reach and therefore less likely to be clicked
3. Less efficient – it requires you to click through twice to get to the contact page for example

Bottom Navigation

Many applications use bottom navigation for its most important features, Facebook makes the main pieces of functionality available with one tap, allowing quick and smooth switching between features.

Pro’s and Con’s

Pro’s

1. Efficient – gets you to where you want to go – fast!
2. High Engagement – As it is easy to reach with your thumb, it is often clicked
3. Modern – It is quite new in the web design world, so will make your site stand out

Con’s

1. Space – It takes up space at the bottom, but can be compensated by hiding the top header when you scroll
2. No Text – It uses icons and in some cases small text explaining further but with a space issue you cannot have long words here.
3. Limited – You are only limited to 4-5 max icons, if you have multiple areas you want them to go you can’t add them all

As you can see there are positives and negatives of both styles – could you mix and match them together to make the perfect menu? Maybe you have the header with the hamburger icon and the bottom bar. When you scroll the hamburger/header disappears whilst the bottom bar stays there? You would need to use recognisable icons such as the cart, person (account) or home icons.

Opened Menu

When doing some research on some good examples I stumbled upon http://www.antro.ca/en/ – their mobile menu when open showcased a great example of all being inside the green.

Our menu when open too works well I think – most are in the green, however, I think it could do with some improvement. Could we add a secondary “app” style menu at the bottom of the screen for the account and cart links? Should we centre the links so they are in the middle? Is there too much information? Are the font sizes all a good size? All these are questions we should and are seriously considering when improving the customer journey on our website (stay tuned to see what we will do with our mobile menu).

We thought about changing our menu to have a bottom navigation – still thinking about it and if it indeed makes it easier for the viewer – what do you think of the following?

In a nutshell, keep it all in viewpoint, easy to read and navigate – the less the better in my opionion. Pay special attention to your font type, colour, font weight and size – this can make it really stand out

The Dreaded Sub-Menu

One other major variable in the mix is when the menu item has children, how the sub-menus are displayed. By default Divi mobile submenus are quite ugly and can extend down for ages, moving it all away down the page to not access easily. By collapsing them or making them appear when you click on the parent is a great way to declutter the menu so that the viewer is not confused or runs away in frustration. 

Divi Mobile Plugin

Divi Mobile is a plugin we created as really felt this area of Divi lacked. We made it to push boundaries and help you build better user experiences for your viewers. You don’t need to know custom css, we have given you the ability to create beautiful, meaningful mobile menus using the theme customizer.

As we go on we will add new features and ideas – for example the bottom navigation is something we are working on at the moment.

We would love to hear your thoughts on this topic, will you be brave and try something new? Do you have any cool ideas to make better mobile navigation? If you just want to say hi, we love hearing from you all!