{"id":8332,"date":"2017-04-10T14:00:59","date_gmt":"2017-04-10T13:00:59","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=8332"},"modified":"2020-09-03T11:59:57","modified_gmt":"2020-09-03T10:59:57","slug":"hamburger-menu-alternatives-mobile-navigation","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/","title":{"rendered":"Hamburger Menu Alternatives for Mobile Navigation"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you\u2019re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@kollinz\/misused-mobile-ux-patterns-84d2b6930570#6d1e\">low discoverability<\/a> and efficiency. (You can read some of best articles on the topic <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.nngroup.com\/articles\/hamburger-menus\/\">here<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/lmjabreu.com\/post\/why-and-how-to-avoid-hamburger-menus\/\">here<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.lukew.com\/ff\/entry.asp?1945\">here<\/a>, and <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/jamesarcher.me\/hamburger-menu\">here<\/a>.)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for this very problem. None of the ideas listed here is better than the others, their viability and performance obviously depend on the content and the context.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Viability and performance depend on the content and the context.\"<\/p><\/span><\/blockquote>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">1. Tabs<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you have a limited number of sections in your website or app and users should be able to quickly switch between these sections, a tabbed navigation might be the solution.<\/p>\n<div id='gallery-1' class='gallery galleryid-8332 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/1gadus4r2nbamwlvyrky7tq\/'><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"194\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1gadUs4R2NBaMWlVyRKY7TQ.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1gadUs4R2NBaMWlVyRKY7TQ.png 2000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1gadUs4R2NBaMWlVyRKY7TQ-600x58.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1gadUs4R2NBaMWlVyRKY7TQ-768x74.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1gadUs4R2NBaMWlVyRKY7TQ-1500x146.png 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Tabs seem to be the simplest navigation pattern, however, you need to consider a few things when designing them:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>You should have no more than five sections to display<\/li>\n<li>One of the tabs should always be active and should visually be highlighted<\/li>\n<li>The first tab has to be the home page or home screen and the order of the tabs should relate to their priority or logical order in the user flow<\/li>\n<li>Tabs can either be displayed at the top or at the bottom of the screen, based on the context or platform (however, bottom tabs <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/material.google.com\/components\/bottom-navigation.html\">are now a pattern<\/a> in Android, too)<\/li>\n<li>Icons without labels only work for common actions with really well known icons and for interfaces that the users use frequently (e.g. social media apps)<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.smashingmagazine.com\/2016\/11\/the-golden-rules-of-mobile-navigation-design\/\">More tips on designing tabbed navigation<\/a><\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Examples: LinkedIn and Google\u00a0Photos<\/h2>\n<div id=\"attachment_8334\" style=\"width: 810px\" class=\"wp-caption alignnone\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1lDr7SbbRQOXqp8GjSBl7LQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-8334\" class=\"size-full wp-image-8334\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1lDr7SbbRQOXqp8GjSBl7LQ.png\" alt=\"Icon-only tabs on LinkedIn and icon+label tabs on Google\u00a0Photos\" width=\"800\" height=\"131\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1lDr7SbbRQOXqp8GjSBl7LQ.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1lDr7SbbRQOXqp8GjSBl7LQ-600x98.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1lDr7SbbRQOXqp8GjSBl7LQ-768x126.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-8334\" class=\"wp-caption-text\">Icon-only tabs on LinkedIn and icon+label tabs on Google\u00a0Photos<\/p><\/div>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">2. Tabs with a \u2018more\u2019\u00a0option<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When there are more than 5 main sections, a practical solution might be to show the four most prioritized sections and have a fifth element list \u2018everything else\u2019:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/14j5uSBlUujdP39uQioxbeA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8335\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/14j5uSBlUujdP39uQioxbeA.png\" alt=\"14j5uSBlUujdP39uQioxbeA\" width=\"800\" height=\"118\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/14j5uSBlUujdP39uQioxbeA.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/14j5uSBlUujdP39uQioxbeA-600x89.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/14j5uSBlUujdP39uQioxbeA-768x113.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><br \/>\n<\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The design principles for this solution are basically the same as for simple tabs. The \u2018more\u2019 item can either link to a navigation page or work as a dropdown menu with the remaining sections:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1Bwd-AhGD13PJo20VD_SAVQ.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8336 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1Bwd-AhGD13PJo20VD_SAVQ.png\" alt=\"1Bwd-AhGD13PJo20VD_SAVQ\" width=\"375\" height=\"302\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You could argue that the \u2018more\u2019 item isn\u2019t better than the hamburger menu (it\u2019s kind of hidden and its label does not refer to its content at all), however, if you have made the prioritization right, most users will be looking for one of the four visible items anyway so the navigation experience for the majority will still be improved.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Example: Facebook<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_8337\" style=\"width: 385px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1Qxp5FE5cc2S-ygDPdF5M4A.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-8337\" class=\"size-full wp-image-8337\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1Qxp5FE5cc2S-ygDPdF5M4A.png\" alt=\"News feed, friend requests, notification, and search is always available in the header, all the remaining functionality is available from the \u2018more\u2019 menu on\u00a0Facebook\" width=\"375\" height=\"125\" \/><\/a><p id=\"caption-attachment-8337\" class=\"wp-caption-text\">News feed, friend requests, notification, and search is always available in the header, all the remaining functionality is available from the \u2018more\u2019 menu on\u00a0Facebook<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">3. Progressively collapsing menu<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A more sophisticated version of the \u2018tabs + more\u2019 navigation is to design a menu that adapts to the screen width, shows as much of the navigation as possible, and puts everything else under a More item if necessary:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1jT8yOdJXH7lN5JxfqYYfEA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8338 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1jT8yOdJXH7lN5JxfqYYfEA.png\" alt=\"1jT8yOdJXH7lN5JxfqYYfEA\" width=\"700\" height=\"220\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1jT8yOdJXH7lN5JxfqYYfEA.png 700w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1jT8yOdJXH7lN5JxfqYYfEA-600x189.png 600w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This means that the More menu contains more items on a lower resolution?\u2014?items \u2018jump\u2019 under More when there\u2019s not enough space to show them. The flexibility of this solution provides a better experience than the \u2018tabs + more\u2019, especially on in-between screen sizes.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Example: BBC<\/h2>\n<div id=\"attachment_8339\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1sV5B5VzQWrnpcf82khU9IQ.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-8339\" class=\"wp-image-8339 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1sV5B5VzQWrnpcf82khU9IQ.gif\" alt=\"1sV5B5VzQWrnpcf82khU9IQ\" width=\"800\" height=\"31\" \/><\/a><p id=\"caption-attachment-8339\" class=\"wp-caption-text\">The main menu of BBC is rendered according to the actual screen size to always show as many items as\u00a0possible<\/p><\/div>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">4. Scrollable navigation<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you have a number of navigation items without a big distinction in priorities and having a \u2018more\u2019 category would be a bad compromise, another strategy is to list all the items in a scrollable view:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1fdte_FzZ0uh-f-3t5GrwwQ.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8340 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1fdte_FzZ0uh-f-3t5GrwwQ.png\" alt=\"1fdte_FzZ0uh-f-3t5GrwwQ\" width=\"800\" height=\"120\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1fdte_FzZ0uh-f-3t5GrwwQ.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1fdte_FzZ0uh-f-3t5GrwwQ-600x90.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1fdte_FzZ0uh-f-3t5GrwwQ-768x115.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The downside of this solution is that still only the top few items are visible without scrolling and all the remaining ones are off the canvas. This is, however, an acceptable solution when the users are expected to explore the content, e.g. in a web shop or news categories.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As far as visual design is concerned you need to make sure to provide enough visual hints to suggest that there are more elements available upon horizontal scrolling (e.g. by fading and\/or off positioning the last visible element).<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Examples: Medium and\u00a0Google<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_8341\" style=\"width: 482px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1JZhLlFmCrJ2pEk1btrdgww.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-8341\" class=\"size-full wp-image-8341\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1JZhLlFmCrJ2pEk1btrdgww.gif\" alt=\"The main categories can be scrolled at smaller screen sizes on Medium.com\" width=\"472\" height=\"96\" \/><\/a><p id=\"caption-attachment-8341\" class=\"wp-caption-text\">The main categories can be scrolled at smaller screen sizes on Medium.com<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_8342\" style=\"width: 334px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1gedxz8s_lksG2-9XOVA72Q.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-8342\" class=\"size-full wp-image-8342\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1gedxz8s_lksG2-9XOVA72Q.gif\" alt=\"Categories of the Google search results page are available in a scrollable view\" width=\"324\" height=\"88\" \/><\/a><p id=\"caption-attachment-8342\" class=\"wp-caption-text\">Categories of the Google search results page are available in a scrollable view<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">5. Dropdown\u00a0menus<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">An uncommon but interesting pattern is to use dropdown-like menus when the visibility and accessibility of the other sections is not essential:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1nKlPdP8w6xPmdQCsguwfJg.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8343 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1nKlPdP8w6xPmdQCsguwfJg.png\" alt=\"1nKlPdP8w6xPmdQCsguwfJg\" width=\"800\" height=\"249\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1nKlPdP8w6xPmdQCsguwfJg.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1nKlPdP8w6xPmdQCsguwfJg-600x187.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1nKlPdP8w6xPmdQCsguwfJg-768x239.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The dropdown menu actually has a double role in this case: first, it serves as a page title and the downward arrow suggests that there\u2019s a possibility to quickly switch to <em>similar sections. <\/em>Although the options are hidden in this case, the dropdown design suggests that the list would contain options that are either siblings or children of the current page (and it should primarily be used for this purpose).<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Example: Barnes &amp; Noble and Duolingo<\/h2>\n<div id=\"attachment_8344\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1VpBqDwA8-pN4TsD1weAhCg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-8344\" class=\"size-full wp-image-8344\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1VpBqDwA8-pN4TsD1weAhCg.png\" alt=\"When browsing books, the current category and the navigation\/filtering options are always available in a dropdown menu on\u00a0bn.com\" width=\"800\" height=\"476\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1VpBqDwA8-pN4TsD1weAhCg.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1VpBqDwA8-pN4TsD1weAhCg-600x357.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1VpBqDwA8-pN4TsD1weAhCg-768x457.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-8344\" class=\"wp-caption-text\">When browsing books, the current category and the navigation\/filtering options are always available in a dropdown menu on\u00a0bn.com<\/p><\/div>\n<div id=\"attachment_8345\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1KhSOhbBnd7VDfifH9fR5_w.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-8345\" class=\"size-full wp-image-8345\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1KhSOhbBnd7VDfifH9fR5_w.png\" alt=\"While not a common interaction for most users, Duolingo allows to quickly switch between the languages you practice via a\u00a0dropdown\" width=\"800\" height=\"188\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1KhSOhbBnd7VDfifH9fR5_w.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1KhSOhbBnd7VDfifH9fR5_w-600x141.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1KhSOhbBnd7VDfifH9fR5_w-768x180.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-8345\" class=\"wp-caption-text\">While not a common interaction for most users, Duolingo allows to quickly switch between the languages you practice via a\u00a0dropdown<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">And sometimes, surprisingly, the hamburger menu might be a good\u00a0choice<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since the main downside of the hamburger menu is its low discoverability, it\u2019s recommended to consider one of the alternatives when it comes to designing the main navigation menu. However, when designing <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">secondary navigation<\/strong> options, this pattern might be an appropriate solution.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If the primary options are available as prominent on-screen call to action buttons, the hamburger menu seems a good place for all the secondary navigation:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1PYJ_Hvs7ng9abfl-dLKDpQ.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8346 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1PYJ_Hvs7ng9abfl-dLKDpQ.png\" alt=\"1PYJ_Hvs7ng9abfl-dLKDpQ\" width=\"375\" height=\"667\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1PYJ_Hvs7ng9abfl-dLKDpQ.png 375w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1PYJ_Hvs7ng9abfl-dLKDpQ-337x600.png 337w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This pattern can be used when the main navigation is designed around a user flow and the related options are clearly available on the screen. Uber might be a good example:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1hPnxkp_z9oEzgl-6mbSuZA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8347 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1hPnxkp_z9oEzgl-6mbSuZA.png\" alt=\"1hPnxkp_z9oEzgl-6mbSuZA\" width=\"375\" height=\"667\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1hPnxkp_z9oEzgl-6mbSuZA.png 375w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1hPnxkp_z9oEzgl-6mbSuZA-337x600.png 337w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since everything about this screen is designed to request a car, secondary options such as History and Settings should not be available more prominently than from a hamburger menu.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Google Translate is really similar to this:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1BpNyxtQQpD2Hwj8xBU8bTw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8348 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1BpNyxtQQpD2Hwj8xBU8bTw.png\" alt=\"1BpNyxtQQpD2Hwj8xBU8bTw\" width=\"800\" height=\"627\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1BpNyxtQQpD2Hwj8xBU8bTw.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1BpNyxtQQpD2Hwj8xBU8bTw-600x470.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1BpNyxtQQpD2Hwj8xBU8bTw-768x602.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since the main functionality (switching languages and entering text to translate) is the most prominent part of the screen, the hidden menu is a great place to host sections like Help and Community.<\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Conclusion<\/h1>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"There isn\u2019t a one-size-fits-all solution for mobile navigation\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There isn\u2019t a one-size-fits-all solution for mobile navigation, it always depends on your product, on your users, and on the context. What works well for others might not work for you and vice versa. However, the foundation of every well designed navigation is information architecture - clear structure, priorities, and labels based on your users\u2019 needs. So why not start finding the most efficient mobile navigation for your product today?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@kollinz\/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8\">Zoltan's Medium page.<\/a> <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative,&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":125,"featured_media":8367,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-8332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hamburger Menu Alternatives for Mobile Navigation | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"If you\u2019re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative,... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-10T13:00:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T10:59:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/mobile-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/mobile-2.png\",\"width\":1600,\"height\":800},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/\",\"name\":\"Hamburger Menu Alternatives for Mobile Navigation | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/#primaryimage\"},\"datePublished\":\"2017-04-10T13:00:59+00:00\",\"dateModified\":\"2020-09-03T10:59:57+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/1c5933c028aaf3da88f452359cb33a61\"},\"headline\":\"Hamburger Menu Alternatives for Mobile Navigation\",\"datePublished\":\"2017-04-10T13:00:59+00:00\",\"dateModified\":\"2020-09-03T10:59:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/hamburger-menu-alternatives-mobile-navigation\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/1c5933c028aaf3da88f452359cb33a61\",\"name\":\"Zoltan Kollin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/36a519d116a7d3aa44e048cfcbe2c00aa98260d2161b5ee44c22cdf18a41aa9d?s=96&d=mm&r=g\",\"caption\":\"Zoltan Kollin\"},\"description\":\"UX enthusiast and design manager at IBM Budapest Lab (former Ustream). Speaker. Organizer of Amuse conference. Find me on Twitter or Medium.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/8332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=8332"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/8332\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/8367"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=8332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=8332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=8332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}