{"id":11469,"date":"2017-08-29T15:46:49","date_gmt":"2017-08-29T14:46:49","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=11469"},"modified":"2017-09-13T00:28:30","modified_gmt":"2017-09-12T23:28:30","slug":"use-hamburger-menu","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/use-hamburger-menu\/","title":{"rendered":"When To Use a Hamburger Menu"},"content":{"rendered":"

Oh, the hamburger menu. An icon of three stacked lines (two buns and the meat in the middle) used to represent a menu. Clicking\/Tapping on the icon reveals available navigation options. A lot of posts have been written about the hamburger menu, mostly by designers, arguing against it. If you missed all, read Hidden Navigation Hurt UX Metrics<\/a> by NNGroup. In a nutshell, it\u2019s not about the icon itself but rather about hiding the navigation behind<\/em> an icon.<\/p>\n

However, in some cases, the hamburger menu might be a good choice.<\/p>\n

Hamburger As a Secondary Navigation<\/h2>\n

Since the main downside of the hamburger menu is its low discoverability, it\u2019s not recommended for the main navigation menu. However, when designing secondary navigation<\/em> options, this pattern might be an appropriate solution. If the primary navigation options are available as on-screen CTA buttons or in some other form, the hamburger menu can be a good place for all the secondary navigation.<\/p>\n

Consider Uber\u2019s primary screen in example below:<\/p>\n

\"\"<\/a>

The map and search (the two important navigation elements for this screen) are visible all the\u00a0time.<\/p><\/div><\/center><\/p>\n

<\/p>\n

Since everything about the primary screen is designed to request a car, secondary options such as History and Settings can be hidden behind the hamburger menu (these features are unlikely to be used every time a person opens the app). The hamburger icon doesn\u2019t distract users from the task, and still, gives them access to the secondary features.<\/p>\n

In this particular case:<\/p>\n

Less navigation elements means fewer distractions when users interact with the app. Minimizing the navigation focuses the user\u2019s attention on completing the\u00a0task.<\/span>
\nIn general, if you choose whether or not to use a hamburger consider \u201c80% rule.<\/em>\u201d Do the navigation options which you\u2019re going to hide behind the hamburger icon fall below the 80% of regular usage? If your answer is yes, then putting them in a hamburger menu is OK.<\/p>\n

Conclusion<\/h2>\n

While hidden navigation is very often harmful to the user, though any design decisions must always be considered within the context of the app\u2019s goal. In other words, there are no \u2018good\u2019 or \u2018bad\u2019 patterns. Context is what matters the most.<\/em><\/p>\n

Thank you!<\/p>\n

This post was originally published on Nick's Medium profile<\/a>. <\/em><\/p>\n

\n
\n
\n \"Design\n <\/div>\n
\n
\n

\n Sign up to the Newsletter <\/h2>\n<\/p><\/div>\n
\n

\n Get notified of the latest product updates and news at Marvel.<\/h3>\n<\/p><\/div>\n
\n Sign up <\/div>\n<\/p><\/div>\n
\n \"Design\n <\/div>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"

Oh, the hamburger menu. An icon of three stacked lines (two buns and the meat in the middle) used to represent a menu. Clicking\/Tapping on the icon reveals available navigation options. A lot of posts have been written about the hamburger menu, mostly by designers, arguing against it. If you missed all, read Hidden Navigation Hurt UX Metrics by NNGroup…. Read More ￫<\/a><\/p>\n","protected":false},"author":165,"featured_media":11844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-11469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n