Hamburger menu

The 3-line menu icon: what is a hamburger menu?

What if I told you that websites and smartphones contain burgers? You would probably think that I totally lost it after I stopped my meds. But it’s absolutely true, I’m not kidding.

When you open an app on your smartphone or on certain websites today, you might be looking at a hamburger, that is, a hamburger menu icon.



What is the hamburger menu?

The hamburger menu (which doesn’t come with a side of fries) is made up of the three horizontal lines you now see at the top of many screens, on the far left or far right.

He’s an icon, in fact.

By touching, tapping or clicking on the icon, it opens a side menu with a selection of options or additional pages.

Some developers love the 3-line hamburger menu icon because it allows them to integrate more functionality into their apps or navigation. The small icon takes up a minimal amount of screen space. This gives the app or site a minimalist and clean look.

It is quite easy 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 either absolutely hate or are just puzzled by the hamburger menu icon. Why? Because it’s not obvious to all users that the three lines are actually a menu icon, and it doesn’t tell users what’s inside.

Who “invented” the Hamburger menu icon?

The inventor of the hamburger menu icon is a man named Norm Cox. He made the hamburger icon for Xerox Star, which was the world’s first graphical user interface. That was over three decades ago.

Subsequently, the icon made an act of disappearance.

It was only relatively recently that the 3-line menu icon started to back down, with the advent of mobile devices.

For example, in 2008 he appeared in the Twitter app, Tweetie. Then, in 2009, it appeared in the Voice Memos app for the iPhone 3GS.

“I have to laugh at all the attention this little ‘hamburger’ symbol is getting lately,” Cox said in an interview with Small Business Trends.

“Until about nine months ago, I hadn’t thought about the ‘drip in my design career bucket’ for over 30 years!

“Only a few symbols were taken into account,” Cox added. “One of the symbols was an arrow pointing down in the shape of a triangle, representing the direction in which the resulting menu would appear. We decided that this symbol tends to be interpreted as a pointer too often. We thought about using an asterisk

or a plus sign (+), but they seemed too abstract.

Cox said the image of the three-line burger turned out to be right. “This symbol was visually simple, easy to explain and functionally memorable. Three lines was the perfect number, ”Cox added.

What websites or apps use this famous burger 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 adopted the 3-line menu icon as well. Chrome and Firefox browsers are an example, using the menu in the upper right corner. The hamburger menu hides all options, settings, and extensions. And the icon will light up orange when something in the browser needs to be fixed or updated.

hamburger time png

Some experts point out that the hamburger menu functions are hardly used.

First of all, a lot of people haven’t figured out yet that the 3 horizontal lines are actually a menu icon, and not just an image.

Second, the hamburger icon makes the menu information hidden “out of sight, out of mind”. Unless they actually click or touch the 3-line menu icon, they won’t see the choices there.

Indeed, in the case of Time.com, the word “menu” had to be added under the icon to make the symbol more obvious.

Depend less on the hamburger menu Various developers have expressed theirdissatisfaction with hamburger icon and its flaws

.

Some refuse to use the icon, despite its trendy side.

But the most prominent company that has made a change is Facebook. To be completely clear, Facebook has never publicly stated that it wants to get rid of it altogether. 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 screen space, but it makes some functions more obvious. We spoke with Mrinal Desai who is the CEO and co-founder ofAdd . He was also the originator of Crossloop, a crowdsourced remote technology app, which was eventually sold toAVG Antivirus

.

“The hamburger menu isn’t really for the settings,” said Desai, speaking to Small Business Trends. “It’s almost like a ‘plus’ or you can even think of it as an alternative to the ‘tab bar’. It’s rare to see both, but at Addappt we explored this with a prototype, but ultimately chose to go the ‘tab bar’ route.

“These decisions often depend on the purpose of the application. The hamburger icon tends to relegate functions while the tab bar makes them more obvious, ”Desai added.

Hamburger icon maker gets the final say

So, should you use a hamburger menu icon in your own website, mobile theme, or app?

The original developer of the icon should have the final say, we think.

“The symbol’s longevity (since the 1980s) is a testament to its simplicity, usefulness, ease of learning and memorization,” said Cox, when asked about calls to kill the burger icon.

“Seeking to ‘kill’ or ‘abolish’ a UI tool or widget based on misuse or poor implementation is both a bit short-sighted and overly responsive. “Hamburger , Red icon

Photos via Shutterstock


Source link

Leave a Reply

Your email address will not be published. Required fields are marked *