A Byte-Sized History Lesson About the Hamburger Menu

It’s a symbol that we’ve all become familiar with in recent years: three horizontal lines, representing the menu of whatever application or website is currently in use. Sometimes appearing as three dots, this little icon can be surprisingly important for both the end user and the business using it… especially now that mobile devices are so commonly used for browsing (early this year, 64% of all website traffic was observed to come from these devices).

Let’s talk about why it is so valuable to pay close attention to how your website’s hamburger menu is set up, largely due to its inherent pros and cons.

First Off, Why the Hamburger Design?

To answer this, we need to go back about 40 years, to when the first commercial PC was released. In 1981, the Xerox Star was in production, and designer Norm Cox was tasked with creating a set of icons for the graphical user interface to make the computer more approachable to the average consumer.

Many of his designs would look very familiar even now, as some of their elements have persisted. The sheet of paper with a slightly folded corner serving as the new document icon and the manila folder representing the directories where your files are saved are both the result of Cox’s work. Most recognizable today, however, is the simple three-lined icon that we now see on so many websites and apps. A great deal of thought went into the simple design. As Cox said about the process:

“Its graphic design was meant to be very ‘road sign’ simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple.”

While the hamburger menu was relatively short-lived in its initial appearance—replaced in 1987—the hamburger returned to popularity in 2009 with the advent of smartphones and the limited on-screen real estate these devices made available.

The Pros and Cons of the Hamburger Menu

This approach to web design and optimization definitely has its advantages, but there are a few drawbacks to be aware of and prepared to mitigate.

The Pros

The Hamburger Menu is More Efficient
Remember, the icon came back into fashion because of the extreme limitations of a mobile device’s display. Even now, it isn’t as if many devices can fit Home About Services Contact Blog across the top and have them remain legible. The hamburger menu offers a workaround by providing a single button to access these options and all the items categorized under them.

Visitors Have a Better Experience When the Hamburger Menu is Present
Sticking with the theme of accessing everything via a single button, the hamburger menu’s simplified structure makes it easier for users to find what they’re looking for. Without a ton of extra information around to distract them, someone can more easily and precisely scan through a well-organized hamburger menu’s different sections.

You Can Dedicate More Space to Marketing and Promotion
While it may not seem like a big deal, any distraction away from your messaging makes it harder for your website to communicate your offering. The less there is to look at (even if you’re just eliminating a line of menu categories), the more impactful your marketing has a chance to be.

The Cons

You Have to Weigh What Should Be Seen and What Can Be Tucked Away
The thing about tucking something away in the hamburger menu is that it is hidden until someone clicks into it or accesses one of the menu’s sections. Be careful not to hide your most important or lucrative services so your website visitors can find them easily.

They Add More Friction to Your User Experience
If you aren’t careful, you could frustrate your online visitors by obscuring your menu too much and making it too hard to find. Just as you need to keep your biggest headlines prominently featured, you need to make your menu very visible and straightforward to navigate. Make sure you minimize the number of clicks they have to make to get where they want to go.

If You Thought the Hamburger Menu Had a Silly Name:

When websites and software use three vertical dots, it’s called the Kabob Menu!

Impress your friends and colleagues with that tasty tidbit!