top of page
  • Reut Kabilo

Think Before You Hamburger

Hidden Navigation Menu (Hamburger Menu) – If and How to Use It

menu in ui design

An app’s navigation menu serves as its foundation, and can make the difference between a positive user experience and one that leads to failure. Therefore, before designing the application, you should put some thought into planning your navigation menu and choosing the right one for your app.

There are Three Types of Navigation Menus:

  • A Visible Menu – in which all navigation links are immediately visible and accessible to users, and do not require any prior action

  • A Hidden Menu – in which the navigation bar is hidden under an icon (such as the hamburger), and requires the users to click on a button in order to access or even see the links

  • A Combo Menu – in which some of the links are visible and some are hidden under and icon or button.

visible menu
Example for visible Menu - screenshot from Linkedin

What is the Hamburger Menu and Why is it so Popular?

The hamburger menu is a hidden menu, marked by an icon that consists of three horizontal stripes, which are also responsible for the nickname (the stripes resemble two buns with a burger between them).

The obvious benefit of this menu (and hidden menus in general), is the fact that it saves a lot of space and therefore allows for a cleaner and simpler design of the app. This is why many designers automatically opt for the hamburger menu.

However, along with the big benefit, the hamburger menu also carries some significant disadvantages – first, users have to perform an additional action in order to reach the navigation bar, which hampers their user experience. Second, users might not notice the menu or forget it’s there, which will prevent them from discovering and accessing much of your app’s content.

close menu
Example for app with Hamburger Menu - Screenshot from Gett

So How to Chose the Right Menu?

As mentioned above, since the hamburger menu can damage your user experience, it is usually preferable to use a visible or a combo menu. You can decide which one of those is best for your app, based on the following (research-based) rule of thumb:

  • If your app has four or less main navigation tabs, use a visible menu. The Medium app, for example, offers a bottom navigation bar with all four navigation options visible (plus the home page icon)

  • If your app has a higher number of main navigation links, opt for a combo menu. Facebook, for example, had used a hidden menu in the past, but the results were not great, so these days they offer a combo navigation bar at the bottom of the screen that includes the man navigation tabs, plus a hamburger menu for secondary navigation options.

tabs bar
Example for Tabs menu - screenshot from Medium

In conclusion – while the hamburger menu does save space, it also prevents users from easily viewing their navigation options and therefore makes for a more cumbersome user experience. Therefore, you should think twice before your next hamburger. If you do choose to use one, try to incorporate more links on the screen itself in order make your content more accessible to users.

2 צפיות0 תגובות

פוסטים אחרונים

הצג הכול


bottom of page