What Is The Hamburger Menu Icon? | Fifteen

You may need heard the time period ‘hamburger’ being thrown round within the web design world. By now, we’d prefer to assume that the hamburger icon is fairly recognisable. iPhone’s OS, the Fb app and lots of of Google’s varied choices makes it a every day used piece of Person Interface (UI) for many web customers. 

So, what’s the hamburger menu all about? Briefly, the three stacked strains create an emblem for a menu, which is normally hidden till clicked. This makes the menu icon appear to be a hamburger due to its simplified design.

On this weblog, we take a look at the origins of the hamburger menu and discover whether or not it’s one thing your web site must be incorporating.

The place did the hamburger menu icon come from?

Though it has quickly turn out to be a preferred visible icon for the net and apps, the hamburger icon is definitely rather a lot older than you may assume. Again within the 80s, Norm Cox was accountable for its design as a part of the interface for Xerox Star, and never a lot has actually modified about its use in the present day.

In an interview with designer Geoff Alday, Cox informed about how the image was created as a “container for contextual menu selections”. The design needed to be easy as there have been solely 16 x 16 pixels to work with.

The earliest use of the image appears to be from Apple’s previous iOS system accessible on the iPhone 3Gs ‘Voice Memo’ app. The image introduced in a facet menu of recording and additional choices inside the app.

Some would credit score Apple for the resurgence of the hamburger icon, however its use inside Fb’s app has additionally prompted a revival of the three little strains. All in all, it hasn’t derived too removed from its preliminary creation again within the 90s.

Is the hamburger menu icon a very good design?

There may be some debate on whether or not the hamburger icon is nice or dangerous for digital design. One of many predominant advantages of the icon is that you should utilize it to carry as a lot or as little data as required, so it might probably operate to your wants. 

What’s typically seen as a disadvantage nonetheless, is that some on a regular basis customers nonetheless don’t determine it as a common image. Maybe a couple of extra years of use are what it takes to solidify this icon up there with the trash icon (normally a trash can) and the save icon (normally a floppy disk).

One explicit means of utilizing the icon and serving to customers determine its use is to have the icon sit alongside the phrase ‘menu’. In a examine by New Zealand internet developer, James Foster, utilizing the phrase ‘menu’ in tandem with the icon can enhance the clicking fee by 7.2%. Placing the icon inside a field (making it extra like a button) is claimed to extend the clicking fee by 22.4%.

Ought to I exploit a hamburger menu design on my web site?

We consider all of it relies on your goal market, nature of your web site and dimension of your menu. We’d additionally recommend implementing the hamburger menu in your web site for cell and pill customers. You may even see it in use on this very web site when not on desktop. It’s an area saving design, conserving the pages trying uncluttered and trendy.

We’ve got additionally seen some nice examples of it on desktop websites, so we wouldn’t rule out the minimalist type if it fits your web site. There’s at all times the choice of cut up testing, the place you run two variations of your web site facet by facet, with totally different variations of a menu. This fashion you’ll be able to see which menu works finest to your viewers and apply it.

Will my customers recognise the menu hamburger icon?

Enabling a simple consumer journey is important for conversion charges in your web site. It’s such a well-known design characteristic, that when customers spot the menu hamburger icon, they know that’s the place they will discover what they want. We’ve applied the hamburger menu design in a few of our latest internet initiatives. One web site the place the menu icon works extremely properly, each on desktop and cell, is on Sales Geek.

What are the options to hamburger menu?

While you’re creating an app, or when you have a quite simple web site there could possibly be different choices to favour. Let’s take a look at Instagram for instance. In the event that they had been implementing the hamburger icon design, the customers must click on on the menu, select what they needed to do earlier than having the ability to do it. As a substitute they’ve what is named a tabbed menu. Because of this the consumer can instantly click on on probably the most used options like ‘Residence’, ‘Search’, and ‘New Publish’. This direct entry to the performance retains the customers engaged, and in a position to change between options at excessive pace.

Communicate to the consultants to search out out extra

Hopefully you’re now not asking your self ‘what’s the hamburger menu?’ However, in the event you really feel you’re nonetheless undecided which menu type to implement in your web site, otherwise you really feel you have to modernise your web site, get in touch with us. We might help along with your design and development wants and offer you recommendation on what is going to work finest for your small business.