The hamburger menu is a navigation element you can find on websites, apps, and programs.
Its delicious name comes from its design: it’s comprised of three horizontal lines resembling, well, a hamburger. And much like its real-life counterpart, the hamburger menu is a space-saving mechanism.
But it’s an icon that’s embroiled in controversy. For some, it’s an essential part of the designer’s toolkit. For others, it’s a confusing byproduct of bad information architecture.
Lettuce dive into the hamburger menu now and help you ketchup to the meaty history surrounding this bun-tton.
Sorry, I can’t help myself. I’m on a roll.
(Okay, I’ll stop).
What is a hamburger menu?
The hamburger menu, or the hamburger icon, is the button in websites and apps that typically opens up into a side menu or navigation drawer.
It was created by interaction designer Norm Cox for the Xerox Star personal workstation in 1981 as an easy way to communicate to users that the button contained a list of items.
While we use hamburger menus today in order to ease up the navigation experience, the purpose of the original hamburger menu was different.
“I designed that symbol many years ago as a container for contextual menu choices,” Cox said in a 2014 interview. “It’s somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.”
After the Xerox Star, though, the hamburger menu stayed quiet. It was only when UX designers had to find a way to fit a multitude of buttons onto the tiny screens of our phones that the menu started re-appearing everywhere.
Since then, the hamburger menu has become the go-to icon for apps and websites to drop in their navigation buttons.
Now, the hamburger menu has become the icon that designers love to hate. After all, do people actually click through to hamburger menus? And even if they do, if the menu items were so important shouldn’t they be shown all the time?
During a talk the Worldwide Developers Conference in 2014, designer and Apple UX Evangelist Mike Stern railed against the hamburger menu, saying:
“Remember, the [two] key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go.”
“Hamburger menus are terrible at both of those things because the menu is not on the screen. It’s not visible. Only the button to display the menu is.”
But does that mean you should get rid of the infamous three-lined icon—or is it time to stop worrying and learn to love the hamburger menu?
3 pros of the hamburger menu
Pro #1: Recognizable
The hamburger menu is ubiquitous—found everywhere from apps, to websites, to computer software and video games.
It’s even somehow found its way to print.
Hey @Tesco the menu on your leaflet seems to be broken.
You’re welcome 👍🏼👍🏼🤓 pic.twitter.com/7X7l6WRLND— Martyn Reding (@martynreding) February 16, 2019
It’s an icon that has spent decades embedding itself in the social consciousness as the button where users can access the navigation drawer. People know it and can rely on it for that purpose, like how users know a trash can icon is where you can delete files, or the home icon is where you can go to the main menu.
As designer Oliver McGaugh wrote on Usabilla, “I see no reason to hate on something which fulfills its purpose. Which is so widely known that it holds its own standard. Why kill a ubiquitous icon, which our users know and understand, and replace it with a new iteration for them to learn all over again?”
Pro #2: Clean
Is there anything worse than a messy web page? For example,
My eyes. My poor eyes.
And in places where visual real estate is at a premium, like mobile apps and websites, the hamburger menu can bring incredible valuable.
After all, you never want to overwhelm your users with too many choices. When presented with a wealth of choices, people are likely to get frustrated and not make a choice at all.
One study conducted by decision making expert Sheena Iyengar found that people are 10x more likely to make purchases when presented with fewer purchasing options.
That’s why the hamburger menu can be a great way to clear up an otherwise messy page.
It’s a simple solution. It’s unassuming. And it doesn’t get in the way of your user’s experience. So, if you’re looking for a way to include easy access to your navigational menu without bogging down your users, a hamburger menu is a good answer.
Pro #3: Secondary access
The hamburger menu can be a great place for navigational buttons that don’t directly service the goal of your web page.
Uber wields the hamburger button for this purpose. The app has one goal: Order car. So the main screen is singularly focused on booking you a vehicle.
For things like records of your past trips, receipts, and payment settings, you’ll have to click on the hamburger menu—since they’re not as important to the primary goal.
While these buttons are important for certain tasks, they don’t need to take up all that space on the main screen. That makes the hamburger menu a perfect place for them.
3 cons of the hamburger menu
And now, we dig into why exactly the hamburger menu is one of the most hated icons in the design world.
Con #1: Makes pages less important
One of the biggest gripes designers have with the hamburger menu is that it immediately makes whatever is in the menu less important.
Think of your website like a music festival. The hamburger menu is the small stage. You wouldn’t want to put your best artists and headliners there. Instead, you want them on the biggest stage where everyone can see them (i.e. the main page).
It’s the same with any digital experience you’re designing. When you relegate navigational buttons and pages to the hamburger menu, you’re communicating that these things aren’t as important — and making them far less likely to go there.
That brings us to our next con:
Con #2: Low engagement
Hamburger menus have dramatically lower click rates (and engagement) than other buttons, which can be attributed to a number of reasons.
First, they are hard to reach. With phones getting bigger with each generation, it’s becoming increasingly difficult to reach places where the hamburger button is typically found (top left or right corners).
Source: Scott Hurff
Second, when users don’t see their navigation options, they’re far less likely to engage with them. Think: to use a hamburger menu users have to:
- Realize their preferred menu item isn’t visible
- See the menu
- Know what a hamburger menu is and that its a thing they can click
- Click it
- Scan the list of additional menu items
- Find the one they are looking for
- Click it
That’s a lot of cognitive load for something so simple. For example, when the Zeebox app removed the row containing their navigation buttons in favor of a hamburger menu, they saw their engagement numbers halved.
One study by the Nielsen Norman Group found that, when using a hamburger menu, discoverability is “cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.”
Source: Nielsen Norman Group
They concluded that users have a worse experience when the navigation buttons are hidden, both in mobile and desktop interfaces.
Even big players like YouTube recognized the impact the hamburger menu was having on their engagement numbers and have moved away from it.
Con #3: Inefficient
Any good designer knows that making users go through extra steps to get to their end goal is a big no-no.
The hamburger menu does exactly that.
Imagine you were looking for to sign up for fitness coach and went to their site to learn more. Would you rather a link/button to the contact page be:
- A) Right on the home page
- B) Behind the hamburger menu
Of course you’d rather it be presented to you right away. That’s crucial information for someone looking for a fitness coach! You don’t want to have to search for what you’re looking for.
8 examples of hamburger menus
We’ve created a list of eight examples of hamburger menus in action. They’re a mix of apps, desktop websites, and mobile websites—but each uses the hamburger menu well.
🍔 1. Coachella
The producers of Coachella know that the people going to their website are looking for information on how to get tickets and join the waitlist for passes (especially before they announce the lineup), so the designers aren’t going to bog down the main page with a search bar and information on different vendors. Instead, they give the people what they want right off the bat.
🍔 2. Frame.io
Video software developers, Frame, keep their main page dedicated to one goal: collecting leads.
Plus, check out that cool hamburger icon.
🍔 3. Google Drive
Google offers the user exactly what they want right away (i.e. their documents and files) and uses the hamburger menu for less important elements (i.e. settings, help). With the navigation buttons hidden away in the hamburger menu, the user’s attention will be more focused on the primary task.
🍔 4. People Nerds
For Dscout’s People Nerds event, the design and software company decided to go the tongue-in-cheek route and put an actual hamburger emoji for the hamburger menu. Dscout knows that their target audience will be people very familiar with the world of design, so they can play around with things like making the hamburger icon an emoji.
🍔 5. Codrops
A very fun hamburger menu design from the folks at Codrops, a design blog offering tutorials and demos of different site designs for free. Notice the more subtle elements, like how the hamburger menu turns into an X=.
🍔 6. Portuguese Chimneys
A hamburger menu for a website dedicated to the architectural beauty of Portuguese chimneys. Seriously.
🍔 7. My Fitness Pal
This is a hamburger menu to track your hamburgers—and if you think we included it in this list just so we could make that joke, you’d be right.
However, it’s also a great example of how the hamburger menu can be used to store less important navigation buttons. When a user gets to the app, they likely just want to record their calories for the day and move on. This page allows for that easily in the bottom right hand corner.
🍔 8. Memrise
Did you know that hamburger menu is menú de hamburguesas in Spanish? With the Memrise app, you could have learned that and more.
Memrise’s hamburger menu works well because your main action is to take your course, whereas your secondary action might be to switch courses.
_
Ready to use a hamburger icon in your own design? Try designing with a hamburger icon with Velocity our UI kit available in InVision Studio, Photoshop, and Sketch.
FAQs
What are the advantages of the burger menu? ›
The Hamburger Allows for Direct Navigational Access
This means that users can click directly to the pages they want, instead of having a preset order that they must process before getting to the desired screen. The big advantages of this are usability and speed.
- It makes menus less discoverable. Even though hamburger icons are generally well-recognized, they still prevent users from discovering navigation items and other elements. ...
- It makes inner pages less relevant. ...
- It has lower engagement with users.
Key information is hidden
One of the biggest downsides of a hamburger menu is that it hides information. Some users don't get the chance to see how much value the app will provide before those 10 to 20 seconds are up. If the hamburger menu icon is difficult to spot, visitors will have a hard time navigating the site.
The hamburger menu is a popular design feature that can be found all across the web — from websites and apps to software programs and video games. It's a simple three-line icon that houses navigation options. And it's widely used to simplify interfaces for compact screens and information-heavy sites.
What is the advantage and disadvantage of the menu? ›Advantages | Disadvantages |
---|---|
Even if you don't know what to do, you can usually guess your way around the options | The menu can take up a large part of the screen so you have to keep flicking back and forwards between applications |
- shortens learning curve.
- reduces keystrokes.
- structures decision-making.
- permits use of dialogue-management tools.
- allows easy support of error-handling.
- Red meat can be high in saturated fats. ...
- Red meat can also be high in cholesterol. ...
- Red meat eaten in large quantities is associated with higher levels of colorectal cancer. ...
- Meat cooked at high temperatures can create chemical reactions leading to high levels of harmful compounds.
Such risks include obesity, insulin resistance, type 2 diabetes, and various cardiovascular conditions. This is because most fast food is high in sugar, salt, saturated fat, trans fats, processed ingredients, and calories. It is also generally low in antioxidants, fiber, and many other nutrients.
Should you use a hamburger menu? ›UX designers usually choose the hamburger menu navigation style to save screen space, and to keep the users from getting overwhelmed with too many choices. This solution works best when you put your most important options on your main screen and organize the secondary options in the hamburger menu.
Are burgers healthy yes or no? ›Are Burgers Healthy? Though burgers provide protein and other nutrients, they're not seen as a healthy food option. That's because they're high in saturated fat and cholesterol. They're also often bundled with sodas and french fries, which contain large amounts of sugar and saturated fats.
Why do people prefer burgers? ›
Burgers are easy to eat – and they usually come with fries. The first thing that comes to mind about burgers is that burgers are incredibly easy to eat. The ground meat (in our case, beef or lamb) is ground up and formed into a patty, making it far easier to eat than, say, a steak - even if the steak is rare.
What is a hamburger menu called? ›What is a hamburger icon (slide drawer navigation)? A hamburger icon (slide drawer navigation) is a navigational symbol in user interface (UI) design. It consists of three stacked horizontal lines that indicate the presence and location of a hidden menu.
What is advantages and disadvantages? ›A disadvantage is the opposite of an advantage, a lucky or favorable circumstance. At the root of both words is the Old French avant, "at the front." Definitions of disadvantage. the quality of having an inferior or less favorable position. Antonyms: advantage, vantage.
What are the differences and advantages and disadvantages? ›Disadvantage is an antonym of advantage. As nouns the difference between disadvantage and advantage is that disadvantage is a weakness or undesirable characteristic; a con while advantage is any condition, circumstance, opportunity or means, particularly favorable to success, or to any desired end.
What are the disadvantages of pre designed menu? ›It's a long period of initial planning. It may reduce job satisfaction for staff who have to prepare the same dishes. It may limit the chef 's creativity. It may not provide for foods that come into the market at different times of the year.
What are the benefits of menu design? ›A good restaurant menu design is key to any restaurant's marketing plan. When you design a menu it should express your eatery's personality, focuses your overall operations, promotes profitability, establishes your budget, and keeps your brand fresh in your customer's mind.
What are three advantages of menu cycle? ›Cycle menus can help control food costs. It is easier to project the right amount of product to purchase when you have previous production records for menus. Cycle menus make it easier to buy regularly used items in bulk. Cycle menus can also help you take advantage of seasonal foods.
What are the 4 types of menus? ›The five types of menus most commonly used are a la carte menus, static menus, du jour menus, cycle menus, and fixed menus.
How unhealthy are burgers and fries? ›Burger and fries: A typical double cheeseburger and large fries provides about 1,200 calories and up to 1,700 milligrams of sodium. Make it a combo with a large soda, and you'll top 1,500 calories.
Are hamburgers junk food? ›Junk food provides empty calories, supplying little or none of the protein, vitamins, or minerals required for a nutritious diet. Some foods, such as hamburgers, and tacos, can be considered either healthy or junk food, depending on their ingredients and preparation methods.
How healthy is beef burger? ›
With a 4-ounce cooked 90 percent lean beef burger, you'll take in around 225 calories, 12 grams of fat, 5 grams of saturated fat and 27 grams of protein. It's an excellent source of niacin, vitamin B12, zinc and selenium and a good source of vitamin B6, iron and phosphorus.
What is the disadvantage of single use menu? ›Single Use Menu Printing Costs
This is the most obvious disadvantage of single use menus—and one that we hear from clients over and over. If you run a relatively high-volume operation, switching to single use menus is effectively becoming a small printing press.
Disadvantages of a Cycle Menu
Lack of flavor variety: Although a cycle menu provides a wide variety of meals, some customers may feel that the repeated menu items can become monotonous over time. This can lead to dissatisfaction with the taste and flavor of the meals.
More expensive– In general, dining out is going to cost you more than cooking at home. ii. Wait times– Depending on the restaurant, you may have to wait a while for your food. This can be frustrating, especially if you're hungry.
What are the 10 harmful effects of junk food? ›Poor Dental health
Junk food, which is high in sugar, salt, and unhealthy fats, can have a negative impact on dental health. It can cause problems like tooth decay, gum bleeding, eventual tooth loss, bad breath, gingivitis, sensitive teeth, and an increased risk of cavities.
“Need to Recover After a Workout? Eat a Cheeseburger.” “Burgers and Fries Might Actually Be Healthy for Your Muscles.” They're all based on a small study in the International Journal of Sport Nutrition and Exercise Metabolism, which involved neither vitamins nor cheeseburgers.
Where should the hamburger menu be? ›Hamburger buttons are usually placed in the top corner of the user interface. When pressed, the button reveals a previously hidden menu (also called a “hamburger menu). This menu may “drop down” from the location of the button, appear as a modal, or slide in from the top, side, or bottom of the screen.
Should you eat burgers rare? ›For this reason, the safest way to eat ground meat is to wait until it's cooked all the way through and to its safe minimal internal cooking temperature. In the restaurant world, this typically corresponds to a burger that's considered well done — not a burger that's medium rare.
Is hamburger heart healthy? ›Beef is part of a satisfying heart-healthy lifestyle. All beef is a natural source of 10 essential nutrients such as protein, iron, zinc and B vitamins. Research shows that lean beef enjoyed as part of a heart-healthy diet and exercises, can help lower cholesterol, lose weight and lower blood pressure.
What type of burger is healthy? ›“Venison burgers are extra lean and truly from a free-range farm: the wild,” Cipullo says. Venison, or deer meat, has fewer calories and less fat than 90 percent lean beef, but with all the protein and iron. Make it better: Venison cooks faster than beef and can dry out, so keep a close eye.
Are burgers healthier than pizza? ›
Although low in total calories, a burger is higher in fat content than pizza slices. Regular intake of food rich in fats can lead to obesity increasing risk of lifestyle diseases such as heart conditions, diabetes and hypertension.
What is the most important thing in a burger? ›“For me the most important thing is the meat and the bun,” he says. Grill'd gourmet burger chain founder Simon Crowe agrees. “For me, a burger isn't a burger without a decent bun.” It's important to make your burger stable.
Do burgers make you happy? ›No, it's actually true! Pigging out on a delicious burger can really make you happier! That's why they've been included in that wonderful category called 'comfort foods'. Packed with plenty of carbohydrates and calories, a burger can actually improve your psychological and emotional wellbeing.
What is interesting about burgers? ›The name Hamburger was derived from Hamburg steaks that were introduced to the United States by German immigrants. 2. One of the largest hamburgers on record weighed 3,591 pounds. It was made in Rutland, North Dakota in 1982 and consumed by 8000 people!
What are the 3 dots called on a menu? ›The kebab menu, also known as the three dots menu, and the three vertical dots menu, is an icon used to open a menu with additional options. The icon is often located at the top-right or top-left of the screen or window. The picture shows an example of the kebab menu icon in Google Chrome.
What is hamburger short for? ›A sandwich made with a patty of ground meat usually in a roll or bun. [Short for Hamburger steak, after Hamburg.] Word History: The German word Hamburger, literally meaning "from the city of Hamburg," begins to appear on American menus in the late 1800s during a period of heavy German immigration.
What goes first on a hamburger? ›“First, you should start with the bun, then add the ketchup and the lettuce to catch the juices from the burger,” he suggests. “Next, add your choice of patty, then any cheese, and finally, some sort of pickle and then mayo on top.”
How do you make burgers more interesting? ›The herbs and spices that make a good complement to beef burgers are parsley, basil, thyme, oregano, marjoram, savory, garlic, and chili flakes or powder. For intensifying flavor, try using dill pickles, sweet relish, capers, anchovies or chutney, plus almost any cheese will serve a beef burger well.
What are the five steps to making a burger? ›- Prepare the workspace. Preheat your pan on medium-high and cut ground beef in to 1/4 to 1/3 lb golf ball sized chunks. ...
- Get smashing. Drop the meat in the pan, squash and hold for 5 seconds. ...
- Flip and cheese. ...
- Ready the bun. ...
- Assemble your smashed burger creation and dig in.
A changing menu offers increased flexibility; you can adapt menus to suit different themes, times of the year, and customer preferences. You are able to easily respond to changes in item prices and availability, and to design dishes which utilise seasonal ingredients that are both cost-effective and easy to source.
What are the benefits of menu planning in restaurant? ›
Having a menu plan will also reduce food waste which saves money for the restaurant. The It also helps in reducing wastage of food items and cooking fuel resources, and thus saves money. Menu planning will improve purchasing and storage efficiency.
What is the competitive advantage of Burger King? ›Burger King uses two generic strategies for competitive advantage: cost leadership and broad differentiation. The company's primary generic competitive strategy is cost leadership. According to Michael Porter's model, this generic strategy involves minimizing costs, which leads to low prices.
What are 3 benefits pros to preparing one dish meals? ›- Cut Back on Clean-Up Time. One of the main reasons that Americans avoid making their own meals at home is that cooking takes time they often do not have. ...
- Simplify the Cooking Process. ...
- Save Money While Eating Healthy.
Achieve Consistency – Customers expect consistency. After all, they want their favorite dish to be the same every time they order it. Ultimately, standardization promotes consistency between stores. No guesswork means there is less room for error.
What is important in a menu design? ›A strong menu design requires accessibility, creativity, variety, and mindful costing. Most Australians feel that restaurant menus are more confusing than is necessary, according to research by Open for Business. 40 per cent of diners have felt too embarrassed to ask a staff member for an explanation of menu items.
What is the most important element of menu design? ›Readability. Perhaps the most important aspect of your menu should be its overall readability. Use fonts that are easy to decipher – nothing overly stylized that may cause people to have difficulty reading.
What are the 5 types of menu? ›What Are The Five Types of Menus? The five types of menus most commonly used are a la carte menus, static menus, du jour menus, cycle menus, and fixed menus.
What are the 6 principles of good menu planning? ›To improve food quality, household meals should be planned based on six principles; namely adequacy, balance, calorie (energy) control, nutrient density, moderation and variety.
What is the importance of a menu? ›At its most basic, the menu will show you what types of food are available and how much you can expect to pay for each one, but every real restaurant knows that the menu offers so much more than that as long as you do it right.
What are the key success factors of Burger King? ›Burger King uses cost leadership and broad differentiation strategies to remain competitive. A financial objective is to reduce operating costs so that its products can be offered at lower prices through economies of scale and error prevention.
What is the unique value proposition of Burger King? ›
As you meet with clients you should refer to the USP and what the benefits of your USP are to them. The benefits of Burger King's USP are that you don't have to eat your hamburger like everyone else. You will enjoy it more because you could have it made the way you like it. It will taste better and you will be happier.