What if I told you that websites and smartphones had hamburgers in them? You would probably think that I have totally lost it after coming off my meds. But it’s absolutely true, I kid you not.
When you open an app on your smartphone or some websites today, you could be looking at a hamburger — a hamburger menu icon, that is.
What Is The Hamburger Menu?
The hamburger menu (which doesn’t come with a side order of fries) is the three horizontal lines you see now at the top of many screens, either on the far left or the far right.
It’s an icon, actually.
By touching, tapping or clicking on the icon, it opens up a side menu with a selection of options or additional pages.
Some developers love the hamburger 3 line menu icon because it enables them to pack more features into their apps or navigation. The tiny icon takes up a minimal amount of screen real estate. It gives the app or site a clean minimalist look.
It is easy enough for the app user or website visitor to press the button to slide the menu in and out.
Or so you might think.
However, other developers and some users absolutely detest the hamburger menu icon or simply are puzzled by it. Why? Because it isn’t obvious to all users that the three lines actually are a menu icon, and it doesn’t tell users what is in there.
Who “Invented” The Hamburger Menu Icon?
The visionary behind the ubiquitous hamburger menu icon is a creative trailblazer named Norm Cox. He created the now omnipresent hamburger menu icon, a universal symbol he originally designed for Xerox Star, the world’s first graphical user interface, over three decades ago.
However, after its conception, the iconic image seemed to slip into a period of relative obscurity.
The icon’s resurgence can be traced back to the rise of mobile devices. It was during this era, in 2008, that the three-lined icon started creeping back, first appearing in the Twitter app, Tweetie.
The following year, the icon found a new home in the interface of the Voice Memos app for the iPhone 3GS.
In an interview with Small Business Trends, Cox shared his bemusement at the resurgence of his creation, stating, “I have to chuckle at all the attention that little ‘hamburger’ symbol is getting lately. Up until about nine months ago, I hadn’t thought of the ‘drip in my design career bucket’ for over 30 years!”
While brainstorming the symbol, a few alternatives were contemplated:
- A downward-pointing arrow in the shape of a triangle, signifying the direction the resulting menu would appear. This, however, was rejected as it was too often interpreted as a pointer.
- The asterisk (*) or the plus (+) symbol were also considered but eventually discarded due to their abstract nature.
In the end, Cox said the three-line hamburger image struck the perfect balance: “This symbol was visually simple, easily explained, and functionally memorable. Three lines were the perfect number.”
The hamburger icon, a simple yet powerful design element, thus solidified its place in the world of user interface design, standing as a testament to the timeless appeal of simplicity.
What Websites or Apps Use This Infamous Hamburger Menu Icon?
Some of the prominent names that use the hamburger icon in their apps include Gmail, Facebook, Reeder, Twitter, and Starbucks.
And now websites and browsers have also adopted the 3 line menu icon. The Chrome and Firefox browsers are an example of this, using the menu at the top right corner. The hamburger menu hides all of the options, settings, and extensions. And the icon glows orange when something in the browser needs to be fixed or updated.
Time.com is an example of a major website that uses the hamburger menu — in this case in the upper left corner. When you click on the 3 line menu icon, a slide out showing additional content links appears.
Some experts point out that the functions in the hamburger menu are barely used.
First of all, many people have yet to figure out that the 3 horizontal lines are actually a menu icon, and not simply an image.
Second, the hamburger icon makes information in the hidden menu “out of sight, out of mind.” Unless they actually click on or touch the 3 line menu icon, they don’t see the choices there.
Indeed, in Time.com’s case, the word “menu” had to be added underneath the icon to make it more obvious what the symbol is.
Depending Less On The Hamburger Menu
Various developers have voiced their displeasure at the hamburger icon and its shortcomings.
Some refuse to use the icon, despite its trendiness.
But the most high-profile company which has made a change is Facebook. To be absolutely clear, Facebook has never publicly stated that it wants to totally get rid of it. But Facebook is bringing out some of the mobile features that were previously hidden behind the hamburger icon.
They are now displayed in a horizontal bar at the bottom of the screen, called a tab bar.
The bottom tab bar takes up a bit more real estate on the screen, but it makes certain functions more obvious.
We spoke with Mrinal Desai who is the CEO and Co-Founder of Addappt. He was also behind Crossloop, a crowdsourced remote tech app, which was eventually sold to AVG Anti-Virus.
“The hamburger menu is not really for settings,” said Desai, talking to Small Business Trends. “It is almost like a ‘more’ or one can even think of it as an alternative to the ‘tab bar’. It is rare to see both but we at Addappt explored that with a prototype but eventually chose to go the ‘tab bar’ route.”
“These decisions often depend on the goal of the app. The hamburger icon tends to relegate functions whereas the tab bar makes them more obvious,” added Desai.
The Hamburger Icon Today: Adapting to Modern User Needs and Contexts
In the current digital landscape, the hamburger menu icon is no longer a ubiquitous solution but has evolved into a more contextual tool. Designers now carefully consider the specific needs and behaviors of their app’s audience and the app’s primary purpose before deciding to incorporate this icon.
Contextual Integration: The hamburger icon is now integrated based on the context of use. For apps requiring a clean interface with minimal distraction, it serves as an effective tool to hide secondary navigation options. Conversely, for applications where direct access to all features is crucial, designers might opt for alternative navigation solutions.
Coexistence with Other UI Elements: The hamburger menu often coexists with other navigational elements such as tab bars, dropdown menus, or visible menus. This hybrid approach caters to a broader range of user preferences, ensuring that the app remains user-friendly while maintaining an uncluttered interface.
Audience-Centric Design: Understanding the target audience has become a key factor in the decision-making process. For tech-savvy users who are familiar with digital symbols, the hamburger icon might suffice. However, for audiences less accustomed to such icons, additional navigational cues or more traditional menus might be more appropriate.
Balancing Aesthetics and Functionality: Designers today strike a balance between maintaining the aesthetic appeal of an app and ensuring its functionality. While the hamburger menu contributes to a sleek and modern look, its impact on user experience and accessibility is critically assessed.
Responsive Design Considerations: With the increasing use of multiple devices, the hamburger icon’s role in responsive design has gained importance. It adapts to different screen sizes and orientations, offering a consistent experience across devices.
Evolving with User Feedback: Continuous user feedback and testing shape the implementation of the hamburger menu. Designers tweak and refine its usage based on real-world interactions, ensuring that the navigation remains intuitive and effective.
The Hamburger Icon Creator Gets The Final Word
So should you use a hamburger menu icon in your own website, mobile theme or app?
The original developer of the icon should get the last word, we think.
“The symbol’s longevity (since the 1980s) is a testament to its simplicity, utility, learnability and memorability,” said Cox, when asked about the calls to kill the hamburger icon.
“To seek to ‘kill’ or ‘abolish’ a UI tool or widget based on poor usage or implementation is both a bit shortsighted and over-reactive.”
This table breaks down the icon’s history and use across different eras, from its creation to its reintroduction and current widespread usage, highlighting how its reception and application have changed over time:
| Era | Icon Introduced | Early Applications | User Reception | Modern Applications | Current Reception |
|---|---|---|---|---|---|
| 1980s | Hamburger Menu by Norm Cox for Xerox Star | Used in the world's first graphical user interface | Mostly unknown to broader public | - | - |
| 2000s | Reintroduction with the rise of mobile devices | Twitter app (Tweetie), iPhone 3GS Voice Memos app | Mixed; some found it intuitive, others confusing | - | - |
| 2010s and Beyond | Broad adoption | Gmail, Facebook, Reeder, Twitter, Starbucks apps; Chrome and Firefox browsers; websites like Time.com | Debate over its effectiveness continues | Expanded usage in various apps and websites | Some love its simplicity and compactness, others critique it for hiding important functions |
If the goal is to have people clicking around on your site then it really comes down to testing. The article links to a split test that concluded “the MENU button was clicked by 20% more unique visitors than the HAMBURGER button.” Of course, your results may vary, but I’d say either play it safe (use the word MENU) or test. A few years from now the hamburger button might be ubiquitous, but I don’t think we’re there yet.
Mark,
I am getting hungry for a hamburger now! 😉
My podcast site, EGO NetCast, is built with Squarespace, and it shows the hamburger menu icon on the mobile version. It is located (center) under the banner and has a thin square around it.