The Great Hamburger Debate

Posted by Hunter Rimmer on Oct 25th, 2018

At WDC, there are some things we know without a doubt—quality web design, proven digital marketing, creative branding…. and where to find the best food in town, especially burgers! Our internal deliberation about who serves up the best burgers in Wilmington sparked a slightly different discussion between our designers and developers. To hamburger or not to hamburger when it comes to web design?

Let’s Talk Burgers

The hamburger is a navigation element represented as an icon consisting of three horizontal black bars piled upon one another, resembling an actual hamburger. It is often used to group and stack the main navigation items of a website and has recently become one of the more controversial features in modern design. Some argue the feature is self-explanatory after years of usage, but others deem it a poor user experience. We’re here to offer our two cents.

Burger Pro’s

When first introduced, the hamburger element seemed to solve a few issues in modern web design. On mobile devices, the smaller menu easily plays to its advantage where space is at a premium. Additionally, with its clean look and ability to simplify navigational clutter, the icon keeps users from becoming distracted from the sites core function.

Burger Con’s

While you may recognize the icon, there is still a large percentage of people that may not identify the three stacked lines, especially older, less savvy demographics. This user uncertainty can cause confusion when it comes to site navigation and ultimately derail the user experience.

Secondly, as digital marketers were concerned with the amount of effort the hamburger requires of the user. Simply put, what’s out of sight is out of mind. Because your navigation is hidden behind the three-bar icon, users are ultimately asked to spend more time searching your site for information that should be readily available and simple to locate. 

Our Solutions

Just like the juicy indulgence we all crave, hamburgers may look good but aren't necessarily good for us. Using this navigational feature isn't the end all be all, so don’t stress. We simply think the feature has room for improvement and warrants discussion, as such with anything in the ever-changing world of web design. Here are a few solutions we adopt when we can’t quite kick them out of our diets:

Add a Label

Adding a label to your hamburger menu can have a huge impact on user awareness. Whether you add the text below, above, or beside is up to you. Just swap your old icon out for one that includes “MENU” with it and we assure you your users will be able to navigate your site with a greater sense of confidence.

Tab Bar Menu

An even more straightforward solution is to adopt a tab bar menu. Anchored at the bottom of your phone screen, the tar bar displays can display up to five navigational items. Our designers and developers stand behind these because they’re visible, orient the user within the site, and bring the most important items to the forefront

 

Fixed CTA’s

If it’s not possible to completely implement a tab navigation, one solution we’ve turned to is placing CTAs (Call-to-Actions) at the bottom of a page. We fixate information users are likely searching for like phone numbers or directions at the bottom of the page so they can more easily convert and find the information they are looking for.


As mobile usage continues to surpass desktop, it’s even more important to be up-to-date on best practices when developing mobile-friendly websites and apps. Your site's navigation may not always be top of mind, but it’s certainly important when it comes to your overall business goals. Looking to update your hamburger menu or in need of a navigation audit? We’re happy to help! Let’s chat and get started.