Blog

Speed up your Mobile Navigation for Web Core Vitals

There are some serious studies and A/B testing to show that click-throughs go down when you hide menu items behind a ‘hamburger menu’. A hamburger menu is that little stack of 3 bars in the top of a mobile screen and sometimes desktop too. Touching it will open navigation links.

UX Planet had some great criteria to help you decide if you should be using a hamburger menu. I’ve paraphrased a few of their questions below.

  • Which is more of a priority: screen real estate or visible navigation links(your amazing content topics!)
  • Are your main differentiating factors, call to action and content topics available on the main screen?
  • Does the current navigation showcase the links I want users to see?
  • Does the current navigation give indications as to which page the user is on?
  • How many clicks to get to the main areas of your site?

I can’t find the article I was reading now – but their click through tanked by 25% when they switched (on desktop) to a hamburger menu. And more and more designers are finding ways to keep the important items on the screen for easy navigation.

As we all know – May will bring with it a big change in the Google algorithm. And fortunately we know what that change is and even have time to prepare for it. So we have, along with everyone else, been looking at understanding Core Web Vitals and how to get the best grades for you – our clients. Ridding your sites of as much jquery as possible is a part of that. And providing a stellar user experience is probably even more important.

Here are 5 Effective Alternatives to the Hamburger Menu in 2021

Amazon uses both a scrolling menu and a hamburger menu.

Scrollable navigation: simply swipe side to side to see more options.

The hamburger menu on Amazon is a slide out with other navigation items that are present. Notice how these items are not the items for sale – not the items that actually make Amazon the big bucks?

It doesn’t make sense to hide your money-making links.

Taste of Home magazine – with a ton of content, keeps the sharing icons at the top – which is interesting. That tells me that social media is their main focus. Can you relate?

Their main menu – with the money making content – is scrollable side-to-side.

Their hamburger menu is a simple drop-down. And it is full of the same type of content that is in the scrollable menu but more specific. Getting the best content front and center is very important. But that must be balanced with helping the user find the content they are looking for in as few clicks as possible.

And then the bottom looks like the second navigation is joined – subscribe, newsletters, logins, etc.

There is one feature I really like – do you see the circle in the top right? – that is a magnifying glass that is cut off – sorry! If a user clicks on that, a search bar pops up on top of the content and beneath the navigation… (see pic below) interesting. For those of you with ads – how does that affect your ad revenue?

I think my favorite mobile navigation is a simple short menu with a ‘more’ nav link containing anything that doesn’t fit. It’s clean and simple. It’s perfect for the savvy and non-tech-savvy alike. There’s no icons to figure out. I just love it!

In this example Spotify uses a ‘tab’ menu at the bottom leaving the entire top of the screen available as precious real estate. With a tabbed menu like this – you can choose icons and titles, or icons only or titles only. You can choose to make it sticky or not. And to stick it to the top or bottom of the screen. Lots of options – and lots of ways to brand it! I’m not sure this will work with ad companies that require a disclaimer at the footer though. You’ll have to check with your specific company.

source: commpro

This is a ‘swipe’ menu. If you have several well defined sections, you can use entire screens as navigation – users can swipe from homepage to page 2 of the blogs to page 3 and so on. Or they can swipe from category 1 to category 2 to category 3 etc.

Moving around the swipe navigation needs to be easy and obvious. These are most commonly seen in apps.

TL;DR:
* use alternatives when content needs to be visible
* keep money-making links visible
* keep search function available
* alternatives include scrollable left-right, slide-in, ‘more’ link, tabs and swipe

Sources for this article:

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *