{"id":8733,"date":"2021-12-22T11:59:00","date_gmt":"2021-12-22T16:59:00","guid":{"rendered":"https:\/\/www.ceros.com\/inspire\/?p=8733"},"modified":"2022-04-20T15:33:57","modified_gmt":"2022-04-20T19:33:57","slug":"design-decoded-hamburger-menu","status":"publish","type":"post","link":"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/","title":{"rendered":"Design Decoded: Ceros Explains the Hamburger Menu"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>Welcome to&nbsp;<strong>Design Decoded<\/strong>, our new video series. In each video, we\u2019ll trace the history of some popular UX design element and attempt to explain its ubiquity. First up, we took a look at <a href=\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-caret\/\">the caret<\/a>. This time, we&#8217;re examining <strong>the hamburger menu<\/strong>.<\/p>\n\n\n\n<script src=\"https:\/\/fast.wistia.com\/embed\/medias\/v0jhbpzpic.jsonp\" async=\"\"><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async=\"\"><\/script><div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\"><div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\"><div class=\"wistia_embed wistia_async_v0jhbpzpic videoFoam=true\" style=\"height:100%;position:relative;width:100%\"><div class=\"wistia_swatch\" style=\"height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;\"><img src=\"https:\/\/fast.wistia.com\/embed\/medias\/v0jhbpzpic\/swatch\" style=\"filter:blur(5px);height:100%;object-fit:contain;width:100%;\" alt=\"\" aria-hidden=\"true\" onload=\"this.parentNode.style.opacity=1;\"><\/div><\/div><\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><em>Wanna grab a burger?<\/em><\/p>\n\n\n\n<p><em>No, not one of those. One of these! You&#8217;ve seen these before. You know, those three straight lines in the top corner of your screen. That&#8217;s called a hamburger. It&#8217;s an icon that hides a collapsible menu of possible destinations. <a href=\"https:\/\/www.amazon.com\/\">Amazon<\/a> uses it in its mobile app. So does <a href=\"http:\/\/asos.com\/\">ASOS<\/a> and the <a href=\"https:\/\/cooking.nytimes.com\/\">New York Times Cooking<\/a> app. <\/em><\/p>\n\n\n\n<p><em>While nearly everyone loves actual burgers, not everyone loves the burger icon. In fact, they hate it. We&#8217;ll check in with the haters in a minute.<\/em><\/p>\n\n\n\n<p><em>The hamburger icon was designed by Norm Cox for the Xerox Star Personal Work Station in 1981. When you clicked on it, a menu would appear. Working with very few pixels, Cox said he designed the icon to be &#8220;road sign simple.&#8221; The icon itself looked a lot like the menu that appeared when you clicked on it.<\/em><\/p>\n\n\n\n<p><em>But, it was phased out almost as quickly as it appeared. By the mid-80s, interface designers mostly stopped using it. <\/em><\/p>\n\n\n\n<p><em>So, why am I seeing it everywhere? Because, phones.<\/em><\/p>\n\n\n\n<p><em>Suddenly, designers had to fit everything on a 3.5-inch display, and the burger icon was an easy way to save space. But it wasn&#8217;t until Facebook replaced its grid icon with a hamburger in 2010 that it really caught on.<\/em><\/p>\n\n\n\n<p><em>That&#8217;s why you see it everywhere, but still,  not everyone&#8217;s a fan.  Remember those haters? UX big shot Mike Stern from Apple famously called it &#8220;terrible.&#8221; Why? Stern&#8217;s beef was that the burger failed to do what any intuitive nav system should: tell you where you are and where else you can go. And they don&#8217;t play well with back buttons. Another problem is that users can&#8217;t go anywhere or see anything without clicking. It demands a commitment first. <\/em><\/p>\n\n\n\n<p><em>So why do people still use it? Because apps have more information to share, and less space to share it, and designers have to put it somewhere. Whether you&#8217;re a burger fan or not, keep your eyes peeled for the meatball, the kebab, and other food-related menu icons. We hope you&#8217;re hungry, because you&#8217;ll be seeing them everywhere.<\/em><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<div class=\"myclass\">In this video series, we look at a popular UX design element and attempt to explain its ubiquity. Today, we examine the hamburger menu.<\/div>\n<p><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":99,"featured_media":8758,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design Decoded: Ceros Explains the Hamburger Menu - Ceros Inspire<\/title>\n<meta name=\"description\" content=\"In this video series, we look at a popular UX design element and attempt to explain its ubiquity. Today, we examine the hamburger menu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Decoded: Ceros Explains the Hamburger Menu - Ceros Inspire\" \/>\n<meta property=\"og:description\" content=\"In this video series, we look at a popular UX design element and attempt to explain its ubiquity. Today, we examine the hamburger menu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Ceros Inspire\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-22T16:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-20T19:33:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2020\/12\/Inspire-WP-Feature-Slot-960x557-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"557\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Eliza Martin\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#website\",\"url\":\"https:\/\/www.ceros.com\/inspire\/\",\"name\":\"Ceros Inspire\",\"description\":\"Just another Ceros Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.ceros.com\/inspire\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2020\/12\/Inspire-WP-Feature-Slot-960x557-4.png\",\"width\":960,\"height\":557},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/#webpage\",\"url\":\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/\",\"name\":\"Design Decoded: Ceros Explains the Hamburger Menu - Ceros Inspire\",\"isPartOf\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/#primaryimage\"},\"datePublished\":\"2021-12-22T16:59:00+00:00\",\"dateModified\":\"2022-04-20T19:33:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/#\/schema\/person\/d4816d142f11de0931d050a980e2d76b\"},\"description\":\"In this video series, we look at a popular UX design element and attempt to explain its ubiquity. Today, we examine the hamburger menu.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#\/schema\/person\/d4816d142f11de0931d050a980e2d76b\",\"name\":\"Eliza Martin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6734f23fdba6fbd0b4379b2861d7ed7f?s=96&d=mm&r=g\",\"caption\":\"Eliza Martin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/8733"}],"collection":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/users\/99"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/comments?post=8733"}],"version-history":[{"count":23,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/8733\/revisions"}],"predecessor-version":[{"id":19630,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/8733\/revisions\/19630"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/media\/8758"}],"wp:attachment":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/media?parent=8733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/categories?post=8733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/tags?post=8733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}