Hamburger Menu vs. Tab Bar
In this case study, we researched and tested the hamburger and tab bar menu patterns. The goal was to determine which navigation style – hamburger or tab bar menu – provides the most intuitive and positive user experience as well as which is preferred by users.
While designing the Case Pick app seen below, we explored both menu patterns. The initial and ongoing design exploration sparked a curiosity to better understand which design pattern created the best user experience.
Navigation Goals
Navigation is meant to tell the user three things:
Mobile User Interface Animation By App Designers @ Ramotion UI & UX Design Agency
- Where am I?
- Where else can I go?
- What will I find when I get there?
The tab bar fulfills all three navigation goals. It is visible on every screen and therefore always gives visual orientation to the user. It shows you where you are within the app by the active tab highlighting, where you can go with the other tabs, and what you will find when you get there with the icons and descriptive labels. The tab bar allows you to access deeper content, navigating from a parent screen to a child screen, without losing context and your position in the app.
The hamburger menu is less effective, since you have to tap once before you’re even allowed to see the option you want. With that being said, the hamburger menu helps get everything tucked away neatly. This keeps users from getting distracted from the core functions that you want your users to see. It may pose a problem if the users actively use the features within the hamburger menu.
User Research
Guerilla testing was conducted to identify users’ preference and familiarity between the hamburger menu and the tab bar navigation designs. Eight participants (four male and four female) with an estimated age range of 20 to 50 years old were asked to complete two tasks for each navigation design pattern on an iPhone 8. All participants were asked to speak their thought processes out loud while completing each task.
Prior to introducing the two navigation design patterns to the participants, each participant was asked to name the apps they use daily. After the participants completed all tasks, they were asked to rate their level of comfort using mobile apps on a scale of 1 to 5, with 5 representing “very comfortable.” The median value of comfort with using apps amongst participants was 4.6. Finally, more participants (5) preferred the tab bar design option. Reasons mentioned for the tab bar preference included: more intuitive, quick and easy to get to, and easier to navigate.
We identified 18 apps that are used daily by the participants, which are predominantly social media and news apps. Out of the 18 apps, 11 on iOS use the tab bar design pattern compared to 9 on Android. However, there is consistency between the apps design patterns on both operating systems with the exception of the Podcast and NPR apps on Android, which uses neither of the hamburger menu nor tab bar pattern. Additionally, there does appear to be a correlation between the estimated age range of the participants and the menu navigation preference – five out of the seven participants representing the estimated 20 to 40-year age range prefer the tab menu navigation design.
Pros and Cons
Based on the guerilla testing findings and secondary research, we identified the top pros and cons for both the hamburger and tab bar menu design patterns.
Hamburger Menu
Pros:
- It makes UI and navigation much cleaner
- Icon is generally well-recognizable
- Allows for direct navigational access
Tab Bar
Pros:
- All items of the menu are seen by user at all times
- Located in a “golden” zone, i.e. the most comfortable zone for reaching menu items
- Tab Bars often hold some important functions or particular key elements of the app
Cons:
- Low discoverability
- Less efficient
- Clash with platform navigation patterns
- Not glanceable
- Putting features in a navigation drawer signifies that they’re of lesser importance
- Click rates for hamburger menus in the top left are low
- Navigational buttons at the top of the screen are hard to reach
Cons:
- Takes up more screen real-estate than the hamburger menu
- Users are more familiar with the hamburger menu
- The icon may not be enough to guess what destination is triggered after tapping on the particular item
Conclusion
While we recommend adopting the tab bar design pattern for primary navigation, there may be instances when a hamburger menu pattern may be the better design decision. However, in most cases the tab bar design pattern provides a better user experience. If used correctly, both design patterns are powerful navigation patterns.
As seen below, the tab bar has been leveraged in Case Pick, My KP Meds, and KP Washington.
Learn More
External Links
The Golden Rules Of Bottom Navigation Design
5 Smart Alternatives to the Hamburger Menu
Disclaimer: These links are hosted on websites not affiliated with Kaiser Permanente. The MCoE does not validate the contents of linked resources.
Want to learn more? Check out these case studies below:
 |
Figma Tool Figma is a design platform that features good tools for UX/UI design, prototyping, collaboration, and specifications |
 |
Search Tool Best practices in implementing search functionality. |
 |
Sign Out Button Inconsistencies of sign out button locations and design. Provides recommendations for a button standard. |
 |
Zeplin tool MCoE Design team has been using Zeplin for specs and comps. Learn about the Zeplin tool. |