Skip to main content

Is the Hamburger Menu eating your website potential?

In 2016, it is clear that the Hamburger or Side Drawer style menu is here to stay.

The idea that you can tidily hide away all of your menu options for a clear, clean looking site is incredibly appealing. However, that minimalist design mentality doesn’t always go hand in hand with HCI principles.

What the fudge is HCI and why should you care? Human Computer Interaction principles first appeared in print in a 1983 book, The Psychology of Human-Computer Interaction. The principles prioritise and assist in improving upon how we interact with computers in the form of an interactive loop, or a dialogue if you will.

Basically, the application of these theories is the difference between effectively achieving a task and having that long winded conversation with your co-worker about how their exorbitantly expensive yet somehow unattractive dog is doing simply to get a flipping form signed.

This is especially important for mobile users. Having a mobile responsive website where the information sought is easily found has never been more essential. Like a picky speed-dater, mobile users are fickle and want satisfaction quickly. If they can’t see all your goods on display, they’re more likely to hit the buzzer and move on.

One of the previous arguments against these menus was that users didn’t realise that like an Oasis album, the icon had more to show than just Wonderwall. However, they’ve been around long enough that customers – especially those likely to access websites on their mobile – now recognise the icon fairly easily as an interactive option.

So what are your options?

Facebook Mobile Version Menu

Facebook’s Mobile version keeps the important functions in plain sight.

  1. A/B Testing
    If you’re keen to find out whether keeping all of your fun stuff in the Side Drawer is hurting your chances with the eager consumer, you could try a persistent navigation option and compare stats. Zeebox ran an A/B test for this very issue in 2014.
  2. Sell that Real Estate
    By real estate, we mean the desirable top and bottom of your mobile version website. Put your most important features in view and relegate everything else to the Side Drawer. Facebook have implemented this on their mobile version and app, after testing the usability and engagement over several updates and design tweaks. The most used features are within thumb reach, with everything else hidden.
  3. Ditch the Burger
    If you find that the Hamburger is instead causing your customer base to be a fair bit leaner than what you’d like, then change it. There are plenty of other options for menu design, but be sure you’re aware if it is indeed in need of change.

There are pros to this style, such as direct navigational access which means the vertical list placement of the menu options allows users to skip unnecessary content options to get what they need. The bottom line is to work with a designer that understands that the user experience is about more than just visual appeal.

When it comes to websites, apps and just about everything digital, brains is just as important as beauty.