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 inventor behind the hamburger menu icon is a man named Norm Cox. He made the burger icon for Xerox Star, which was the world’s first graphical user interface. That was more than three decades ago.
Afterwards though, the icon did a disappearing act.
It’s only relatively recently that the 3 line menu icon started creeping back, with the advent of mobile devices.
For instance, in 2008 it showed up in the Twitter app, Tweetie. Then in 2009 it showed up in the Voice Memos app for the iPhone 3GS.
“I have to chuckle at all the attention that little “hamburger” symbol is getting lately,” Cox said in an interview with Small Business Trends.
“Up until about nine months ago, I hadn’t thought of the “drip in my design career bucket” for over 30 years!”
“Only a few symbols were considered,” Cox added. “One symbol was a downward pointing arrow in the shape of a triangle, representing the direction that the resulting menu would appear. We decided that this symbol tended to be interpreted too often as a pointer. We thought about using an asterisk (*) or a plus (+) symbol, but they seemed to be too abstract.”
Cox said the three line hamburger image turned out to be just right. “This symbol was visually simple, easily explained, and functionally memorable. Three lines were the perfect number,” Cox added.
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 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.”
Hamburger, Red Icon Photos via Shutterstock