The hamburger menu – responsive web design
The hamburger menu creates many arguments over how difficult it is for users to find the menu, but one thing is for sure – this trend is here to stay and people will eventually get used to them.
Web designers and developers call it ‘the hamburger’
Three stacked lines, usually in the top left- or right-hand corner of a website, which people can click to see a menu of pages on the site. Once considered an industry standard, the icon has been getting a lot of attention lately and not all positive. Here at Moto Digital there have been numerous discussions on the pros and cons of hamburger use.
Our team has a tricky relationship with the hamburger, and it’s more about the pros of using the hamburger menu. There are good reasons that so many mobile sites and apps are using the hamburger menu, the menu style is prolific for good reason – it makes the user interface and navigation much cleaner.
One of the worst things you can do when designing an app is to overload your users with choices, creating decision fatigue. The hamburger menu helps tuck everything away neatly. This stops users getting distracted from the core functions that you want your users to see. It’s only a problem if you want users to actually use the features within the hamburger menu.
The hamburger icon is generally well recognised – ‘Why kill a ubiquitous icon, which our users know and understand, and replace it with a new iteration for them to learn all over again.’ – Oliver McGough
It’s very difficult to get widespread adoption of a user interface icon. The home button, the mouse pointer, the print logo, and power buttons, how many do you know? Even seemingly innocuous icons such as the star or the heart icons can have a wide range of different interpretations.
On some websites and apps they might mean bookmarking a page or post for later reference, while in others they may just signify a like, which users may be hard pressed to find later on. As a result, these and many other icons can be difficult to interpret precisely when using new websites and apps.
What we need to keep in mind is that one design doesn’t work for every website or app. Each of the priorities and constraints will be different, we will always pick a solution that works best and satisfies your criteria.
Below are the questions we ask when considering an alternative to the hamburger menu.
- Which is more of a priority – Screen real estate or immediately viewable features?
- Are the core functions visible on the landing page or index page?
- Does this UI navigation showcase the core features we want users to see?
- Does the navigation UI give indicate what page the user is on?
- Are the navigational buttons easy to reach without changing the grip of the mobile device?
- Are the icons intuitive and easily understandable?
- Does this navigation allow for direct rather than sequential access?
Whatever option we choose, we’ll make sure it’s the right decision for your website or app. Navigation is critical for mobile, where users expect speed and efficiency. We often test these methods with both user testing and A/B testing to ensure user behaviour meets both the clients and our expectations.