Controversial Design: The Professionals and Cons of the Hamburger Menu

Any web site that has a couple of web page wants a menu. It’s a normal web site aspect and one of many few issues virtually all web sites have in widespread.

Your menu is commonly one of many first issues guests search for in your web site, because it’s the best path to studying what the positioning comprises and how you can discover the components of it they care about. 

Which is all to say: your menu is necessary. 

That might have one thing to do with why a deviation from the norm in menu design is usually a controversial subject. The hamburger menu has been round now for some time, nevertheless it’s been a controversial design alternative from early on. Back in 2014, TechCrunch straight up referred to as it the satan. But as smartphone use has grown, use of the hamburger menu has develop into a typical design alternative. 

What is that this tiny icon that will get individuals so riled up? 

The hamburger menu is the widespread time period used to explain the little three-lined icon used on many web sites and apps to characterize the bigger menu. It most frequently exhibits up within the high left nook (however not completely), and clicking on it opens up the complete menu. 

Hamburger menus are particularly standard on cellular web sites and apps, the place house is at a premium and getting a menu with a number of choices to suit is difficult. But you’ll additionally usually see it on the desktop model of internet sites as nicely.  

Hamburger menus have their share of haters, however they serve a goal. They’ve had endurance within the face of critics for a couple of primary causes. 

This is the rationale hamburger menus exist to start with, and why most web sites that deploy them select to take action. When creating an internet site, it’s important to determine how you can pack all of the necessary info your guests might have in a small quantity of house. Hamburger menus are an environment friendly solution to get more navigation choices right into a smaller package deal. 

2. They permit for a cleaner webpage. 

Many guests (and designers) desire a minimalist aesthetic—web sites which are cleaner and solely embrace the design parts required for fundamental communication and performance. When an internet site has too many photos and knowledge packed right into a small display, it could look sloppy and complicated. Using a hamburger menu cuts down on how a lot guests should course of when taking in your internet web page at a look. 

If you may have a easy web site with 5 pages or much less, together with all of them in your primary menu on desktop might not be a visible problem. But for web sites which have quite a lot of completely different pages and classes, determining how you can talk all that to your guests with out overwhelming the web page is a design problem. And an excessively complicated menu can find yourself distracting guests from the principle a part of the web page you need their consideration on.

For occasion, on an eCommerce web site—you need them to focus in your merchandise and knowledge that makes them more seemingly to purchase. But in case your eCommerce retailer has merchandise that fall right into a dozen or more classes, you additionally need guests to have the ability to simply discover those they’re excited by. A hamburger menu provides you a method to ensure guests can discover the complete record of classes, whereas nonetheless designing every web page to attract consideration to the product you need them to concentrate on. 

4. By now, they’re acquainted to most individuals. 

Any design aspect that comprises performance must be intuitive to guests, or it defeats the aim. Using a hamburger menu to avoid wasting house in your internet web page would backfire in case your guests couldn’t determine to click on on it to see their menu choices. That was a legitimate concern a couple of years in the past, however by now most guests know what a hamburger menu means after they see it. You can fairly assume that they received’t go away your web site confused about how you can discover the menu.

The emphasis on most right here is intentional although. Hamburger menus are intuitive to anybody who makes use of a smartphone often, or anybody who spends sufficient time on-line for use to widespread internet design parts. If your audience contains individuals who seemingly don’t spend a lot time on a cellular machine or looking the net, there’s an opportunity they might nonetheless be baffled by your hamburger menu. As in all issues internet design, assume first about who your viewers is and what is smart for them.  

5. You can use them to take away distractions, with out shedding performance.

Hamburger menus are sometimes used to switch an internet site’s primary menu, however that’s not their solely attainable use. Some web sites use them alongside their primary menu to offer extra choices or more info that doesn’t match simply on the principle web page.

By eradicating visible distractions from the web page, you may more successfully maintain guests’ consideration on the principle piece of knowledge you most need them to note. A hamburger menu is usually a device that can assist you do this, with out eradicating the opposite choices guests might wish to take totally.

We’ve coated the explanations to love it, so why does it nonetheless have a foul rap? Critics of the hamburger menu cite a couple of primary points with it. 

1. It makes your navigation choices much less seen.

When your primary menu is seen on the web page always, each customer can shortly see what the principle class and web page choices are with out doing any further work. When you place all that info behind a hamburger icon, all of the sudden solely a subset of tourists—those who make the selection to click on—could have that info.

That could make discovering what they’re in search of a bit tougher and unintuitive for guests. And it may imply some guests don’t hunt down pages they’d be excited by in the event that they knew they have been an possibility, as a result of they by no means see a hyperlink to them.

An further click on doesn’t sound like that a lot work. But by way of how we use the web, including any further step to the method—regardless of how easy—turns into a barrier that many customers merely received’t take. Ease of use is paramount to internet design. You wish to make it so simple as attainable for guests to see and do every part in your website you need them to.

Noticing an internet site has a hamburger menu, going to click on on it, after which wanting over your navigation choices—that’s all more work to your guests. Many received’t thoughts doing it in any respect, however some received’t hassle. And for these individuals, you lose the possibility of them seeing necessary navigation info.

3. People might overlook it.

Part of the enchantment of the hamburger icon is that it’s small and out of the way in which, however that may also be a weak point. That’s what makes it really easy to miss utterly. Many of your guests—particularly those who spend quite a lot of time on cellular gadgets—will instinctively know to search for it when in search of menu choices.

But your viewers might nicely embrace individuals who don’t routinely hunt down that hamburger icon. For them, hiding your menu behind the icon may imply they by no means discover your menu choices, and don’t hassle exploring your web site as a lot as they might have in any other case. 

Many web sites not solely use classes to arrange their pages or merchandise, but in addition have quite a lot of subcategories. A pet retailer might have animal varieties as its primary stage of classes (canines, cats, rabbits, and many others.), however then subcategories beneath every for the kinds of merchandise they promote for every animal. 

When your primary menu is unfold throughout the highest of the display, it’s straightforward so as to add these subcategories within the dropdown menu. With a hamburger menu, it’s attainable so as to add subcategories beneath every primary menu merchandise in your record, however the design construction doesn’t lend itself as naturally to such a tiered menu. If your web site construction contains quite a lot of subcategories, a hamburger menu won’t make as a lot sense for you. 

5. It can scale back engagement.

A 2016 study by Nielsen Norman Group checked out how seemingly guests are to truly use hidden navigation choices, like these behind a hamburger menu. They discovered that desktop customers solely did so in 27% of circumstances, and that they used more seen menus virtually twice as a lot. On cellular, hidden navigation choices fared higher, however have been nonetheless outperformed by web sites that used a combo of hidden and visual navigation choices. 

This means that a lot of your guests merely received’t hassle taking that further step of discovering and clicking on the hyperlinks you place behind a hamburger menu, which can translate into decrease engagement charges in your web site. 

Knowing normal execs and cons is beneficial in measuring the selection for you, however finally it depends upon what is smart to your viewers. And in case you’re unsure, the most suitable choice is to check.  

While the Nielsen Norman Group discovered clear proof for avoiding hidden menus, a more recent test reported in CXL discovered that use of a hamburger menu truly elevated income for an eCommerce enterprise. In this explicit case, the web site’s guests predominantly used the web site on cellular gadgets. And they discovered that placing the icon on a pink background and including the phrase “Menu” bought even higher outcomes.

Does that imply it’s best to add a pink hamburger menu in your web site proper now? Nope! 

They determined what menu variations to check out primarily based on their present web site’s design and information on how individuals have been viewing the positioning. To determine what is smart to your web site, take these 3 steps:

1. Look at what your present analytics inform you about your guests: who they’re, what gadgets they use to go to your web site, and the way they work together with the positioning now.
2. Based in your present information, develop a speculation about what menu choices you assume might carry out higher than what you may have now (if any).
3. Set up A/B checks to see in case your speculation is true.

You by no means wish to add a design aspect to your web site since you heard it’s fashionable otherwise you really feel such as you’re speculated to. Always take into account what is smart to your explicit website and, much more importantly, your guests.

If you’ve weighed all the professionals and cons, analyzed your analytics, thought of your viewers, and have determined a hamburger menu is the proper alternative to your web site, now you could understand how. 

If you may have a WordPress website, you may have two primary strategies for including a menu:

1. Choose a theme that has a hamburger menu
2. Use a plugin

The first possibility in all probability makes probably the most sense in case you’re constructing a brand new web site, or contemplating a full redesign. In that case, when perusing your theme choices, look particularly for one which already features a hamburger menu. You can discover a record of standard choices that have already got a hamburger menu here.

If you wish to add a hamburger menu to your present web site with out having to do a full overhaul of the positioning, you may have a couple of completely different plugin choices to select from. Two of the preferred choices are the Responsive Menu plugin and Slick Menu plugin. Both will allow you to customise how your menu appears, and guarantee you may get it arrange with out having to do any coding. 

Hamburger or Not? Up to You

Every web site is completely different, and deciding what is going to work for yours is as much as you. Hamburger menus are yet one more design aspect so as to add to the probabilities to your website. They might allow you to do more with much less within the house you may have out there, or you could decide they’re more likely to be more complicated than they’re value to your guests.

Whatever alternative you make, maintain your guests high of thoughts and be sure you’re constructing an internet site that can work for them.