Take a look at the top left corner of our website. Do you recognize this triple bar icon? Every Internet user has seen it before, and we intuitively know what’s inside - a website or mobile menu. For any designer, it's known as a “hamburger menu” as it takes after the form of the famous sandwich. The icon’s design is super simple; however, its UX causes a lot of controversies, with a lot of authoritative resources, like Techcrunch, calling for killing this button and replacing it with user-friendlier options. Show
In this article, we’ll get to the bottom of the advantages and disadvantages of a hamburger icon, we’ll share some good examples of its usage and offer some hamburger menu alternatives. You can find more works in our case studies. Source: Dribbble What is a hamburger menu?Let’s start with a few words on the origin of the hamburger icon. It was created by the designer Norm Cox for the first computer Xerox Star in 1981, and looked like a three-line button that represented menu. However, it wasn’t widely used until 2009, when it appeared on the Facebook user interface in the form of a grid menu which was transformed to the “sandwich” in 2010. By this time, it started spreading to every popular platform on the Internet. Thus, it has become a staple in UX/UI design and seems set to stay there for a long time. The designers community has met the new trend cautiously: some of them dislike the icon and suggest replacing it with convenient tabs, while others welcome the new minimalistic hamburger menu website design and place it in every system, be it a corporate website or bank website design. So, we might assume, the reason for the dislike is not in how it looks, but when and where it is used. Hamburger menu prosNo matter what haters say about hamburger icons, they have won the trust of millions of users across the world. You can see a hamburger button in almost every place where a compact menu is required, and here’s why: RecognizabilityThe triple bar icon is a universally understood sign, even though many users may not know it is called a hamburger. The user’s brain detects icons faster than any word and it doesn’t require translation into other languages. However, this doesn’t work with all types of icons. Some designers replace menu tabs with relevant icons to save space on mobiles. In this case, instead of making users guess what’s underneath, it might be reasonable to replace multiple icons for one hamburger button, with a side menu hidden inside. Clearer navigationThe hamburger menu allows the designer to drag the user’s attention to primary navigation by shifting secondary options from the main screen to a hidden side menu. It is especially appropriate in mobile design where main CTA buttons are sticky on the main screen, such as map, taxi, or gaming apps, with the main functions to find a place, request a car, or play. In these cases, the hamburger button will cover the menu with settings, account, payment options, etc. Direct accessThe hamburger icon allows users to access the section they need without scrolling through all the content or clicking on screens step-by-step. It means they complete the necessary action faster with direct access via the hamburger. Hamburger menu consThe hamburger menu seems like a perfect solution for minimalist design, doesn’t it? But there’s a flip side. It is difficult to discoverThere are at least three reasons why a hamburger navigation menu may be unnoticed:
It is not one-clickBeing hidden under the hamburger menu, features take longer to discover, which makes users first click on the icon, then on the tab, and probably search for them in sub-sections. This may cause frustration as most people prefer to act immediately instead of browsing the website. It’s hard to reach on mobileThe Hamburger menu UX is not well-thought in terms of physical location. While smartphone screens are getting larger, it’s harder to reach out to a button in the top corner without messing everything up. In comparison, bottom tabs, or slider menus allow the user to comfortably browse the app. We’ll get back to the alternatives a bit later. Tips to make a good hamburger menuDespite the disadvantages we listed above, there’s a way to make a hamburger menu better. Bear in mind that hamburger menus are becoming more sophisticated and go beyond a triple bar icon, so you have to deal with additional content and complex layouts. To help you improve the hamburger menu, we’d like to share some tips: Create a custom iconThe three-line form doesn’t leave much room for imagination. The aim is to remain consistent and recognizable for a good user experience, and to be creative at the same time: Source: Userapi Make it responsiveWhat to put in the hamburger drawer? Desktop users would appreciate a mega menu with vertical links, rows and tabs of content. Mobile users prefer a horizontal navbar or vertical sliding navigation, and it doesn’t make sense to display more than one column of the menu. What can be done to satisfy both? Use a responsive or adaptive design and make a hamburger menu wrap up on mobile and roll out on a desktop. The popular approach is to wrap the visible topnav desktop menu into the hidden hamburger menu: click to explore how to do it with HTML, CSS and Javascript code. Think over animationA hamburger menu is impossible without animation that turns three lines into an arrow or cross button and opens up a menu. The hamburger menu animations tend to become fluid and elastic in order to create intricate but seamless transitions. Work on duration and delay, and experiment on audio to provide cues for each of the menu elements. You can even play with CSS - this will allow a captivating user experience from the hamburger menu design. Source: Tumpanus Conduct user testsConduct A/B tests showing two groups of web and app visitors versions of your hamburger menu or hamburger menu vs. alternatives. Also, use heatmaps to discover how users navigate through your website and use the hamburger menu, in particular. Hamburger menu inspirationNow that we have shed some light on the pros and cons of hamburger menu and learned some best practices of its design, it’s time to take a look at some decent hamburger menu website examples: Source: Awwwards Source: Valnetinc Source: Patrickheng Source: Kommigraphics Source: Thebiggr And here are some hamburger menu mobile examples - with custom icons, smart interactions, and minimalistic design: Source: Dribbble Source: Dribbble Source: Dribbble
Source: Dribbble Source: Dribbble Alternatives to the hamburger menuLet’s be straight: sometimes cons outweigh pros and require an alternative to hamburger ui menu design. If you doubt the effectiveness of a hidden menu and feel that users will miss something important without visible sections, we suggest you consider these alternatives: “Add” buttonWith this UI, the main menu functions are presented on the home screen and optional ones pop up upon clicking the “add” button. Source: Сdn-images-1 Sticky navbarIn the web interface, it often makes no sense to hide the menu at all. As LMS developers, we know that some products like online courses require to be always in sight. Source: Snowbird Single page dot navigationLong-scrolling pages is a popular trend of recent years - why click and search when you can scroll down and down, see everything and find what you need? Source: Codropspz-tympanus Swipeable contextual menuA swipeable menu works well for mobile app interfaces in which you click on the feature and swipe for more options to deal with it. Source: Dribbble Narrow verticalA narrow vertical sidebar which turns into a full-screen menu and rolls back when you select the necessary section - it saves space but is not a widely accepted pattern, and might be difficult to notice. Source: Dribbble TabsThe bottom tabbed menu must be one of the most popular solutions for mobile. It comes in handy when the menu is small. In other cases, it works well stacked on top with drop-downs. Source: Dribbble Hamburger variationsSometimes the problem is that a hamburger button doesn’t imply menu for an inexperienced user. In this case, it’s reasonable to have hamburger menu pattern but label the icon with a word. Source: Mathis-biabiany Central verticalThe simpler, the better. Don’t hide the menu, put it right in the center of the screen. Source: Tvihorf Progressively collapsing menuUnlike the hamburger, a progressively collapsing menu offers several options, plus the full stack of options and the “more” button. Source: Kyusuf Floating menuA floating menu might be one of the best hidden navigation options. Users do not need to look for a hidden menu, a floating panel follows the user across screens. Source: Dribbble Final wordThe key take-away from this article is that the hamburger menu is neither good nor bad but it fits individually to each specific context and audience. That’s why it’s critical to run tests and consider alternatives. Do you know what type of navigation suits your company best? Feel free to drop us a line in the live chat to discuss. |