{"id":20687,"date":"2023-02-14T13:30:39","date_gmt":"2023-02-14T13:30:39","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/what-is-a-hamburger-menu\/"},"modified":"2023-02-14T15:07:56","modified_gmt":"2023-02-14T15:07:56","slug":"what-is-the-hamburger-menu-icon","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/","title":{"rendered":"What is the hamburger menu icon?"},"content":{"rendered":"

You might have heard the term \u2018hamburger\u2019 being thrown around in the <\/span>web design<\/span><\/a> world. By now, we\u2019d like to think that the hamburger icon is pretty recognisable. iPhone\u2019s OS, the Facebook app and many of Google\u2019s various offerings makes it a daily used piece of User Interface (UI) for most internet users.\u00a0<\/span><\/p>\n

So, what\u2019s the hamburger menu all about? In short, the three stacked lines create a symbol for a menu, which is usually hidden until clicked. This makes the menu icon look like a hamburger thanks to its simplified design.<\/span><\/p>\n

In this blog, we look at the origins of the hamburger menu and explore whether it\u2019s something your website should be incorporating.<\/span><\/p>\n

Where did the hamburger menu icon come from?<\/b><\/h2>\n

Although it has rapidly become a popular visual icon for the web and apps, the hamburger icon is actually a lot older than you might think. Back in the 80s, Norm Cox was responsible for its design as part of the interface for Xerox Star, and not much has really changed about its use today.<\/span>
\n<\/span>
\n<\/span>In an interview with designer Geoff Alday, Cox told about how the symbol was created as a \u201ccontainer for contextual menu choices\u201d. The design had to be simple as there were only 16 x 16 pixels to work with.<\/span>
\n<\/span>
\n<\/span>The earliest use of the symbol seems to be from Apple\u2019s old iOS system available on the iPhone 3Gs \u2018Voice Memo\u2019 app. The symbol brought in a side menu of recording and further options within the app.<\/span>
\n<\/span>
\n<\/span>Some would credit Apple for the resurgence of the hamburger icon, but its use within Facebook\u2019s app has also caused a revival of the three little lines. All in all, it hasn\u2019t derived too far from its initial creation back in the 90s.<\/span><\/p>\n

Is the hamburger menu icon a good design?<\/b><\/h2>\n

There is some debate on whether the hamburger icon is good or bad for digital design. One of the main benefits of the icon is that you can use it to hold as much or as little information as required, so it can function to your needs.\u00a0<\/span><\/p>\n

What\u2019s often seen as a drawback however, is that some everyday users still don\u2019t identify it as a universal symbol. Perhaps a few more years of use are what it takes to solidify this icon up there with the trash icon (usually a trash can) and the save icon (usually a floppy disk).<\/span>
\n<\/span>
\n<\/span>One particular way of using the icon and helping users identify its use is to have the icon sit alongside the word \u2018menu\u2019. In a study by New Zealand web developer, James Foster, using the word \u2018menu\u2019 in tandem with the icon can increase the click rate by 7.2%. Putting the icon inside a box (making it more like a button) is said to increase the click rate by 22.4%.<\/span><\/p>\n

Should I use a hamburger menu design on my website?<\/b><\/h2>\n

We believe it all depends on your target market, nature of your website and size of your menu. We would also suggest implementing the hamburger menu on your website for mobile and tablet users. You can even see it in use on this very website when not on desktop. It\u2019s a space saving design, keeping the pages looking uncluttered and modern. <\/span>
\n<\/span>
\n<\/span>We have also seen some great examples of it on desktop sites, so we wouldn\u2019t rule out the minimalist style if it suits your site. There\u2019s always the option of split testing, where you run two versions of your site side by side, with different versions of a menu. This way you can see which menu works best for your audience and apply it.<\/span><\/p>\n

Will my users recognise the menu hamburger icon?<\/b><\/h2>\n

Enabling an easy user journey is vital for conversion rates on your site. It is such a well known design feature, that when users spot the menu hamburger icon, they know that\u2019s where they can find what they need. We\u2019ve implemented the hamburger menu design in some of our recent web projects. One website where the menu icon works incredibly well, both on desktop and mobile, is on <\/span>Sales Geek<\/span><\/a>.<\/span><\/p>\n

What are the alternatives to hamburger menu?<\/b><\/h2>\n

When you\u2019re creating an app, or if you have a very simple website there could be other options to favour. Let\u2019s look at Instagram for example. If they were implementing the hamburger icon design, the users would have to click on the menu, choose what they wanted to do before being able to do it. Instead they have what is known as a tabbed menu. This means that the user can immediately click on the most used features like \u2018Home\u2019, \u2018Search\u2019, and \u2018New Post\u2019. This direct access to the functionality keeps the users engaged, and able to switch between features at high speed.<\/span><\/p>\n

Speak to the experts to find out more<\/b><\/h2>\n

Hopefully you\u2019re no longer asking yourself \u2018what\u2019s the hamburger menu?\u2019 But, if you feel you\u2019re still not sure which menu style to implement on your site, or you feel you need to modernise your website, <\/span>get in touch with us<\/span><\/a>. We can help with your design and development<\/a> needs and give you advice on what will work best for your business.<\/span><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"You might have heard the term \u2018hamburger\u2019 being thrown around in the web design world. By now, we\u2019d like to think that the hamburger icon is pretty recognisable. iPhone\u2019s OS, the Facebook app and many of Google\u2019s various offerings makes it a daily used piece of User Interface (UI) for most internet users.\u00a0 So, what\u2019s […]","protected":false},"author":84,"featured_media":27282,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1676,1680],"tags":[],"class_list":["post-20687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-web-development"],"acf":[],"yoast_head":"\nWhat Is The Hamburger Menu Icon? | Fifteen - Nottingham<\/title>\n<meta name=\"description\" content=\"We explore what the hamburger menu icon is all about, the origins of the it and whether you should be incorporating it on your website.\" \/>\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.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the hamburger menu icon?\" \/>\n<meta property=\"og:description\" content=\"We explore what the hamburger menu icon is all about, the origins of the it and whether you should be incorporating it on your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-14T13:30:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-14T15:07:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/02\/Hamburger-Menu-Icon.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2500\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kyle Lindsay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kyle Lindsay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What Is The Hamburger Menu Icon? | Fifteen - Nottingham","description":"We explore what the hamburger menu icon is all about, the origins of the it and whether you should be incorporating it on your website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/","og_locale":"en_GB","og_type":"article","og_title":"What is the hamburger menu icon?","og_description":"We explore what the hamburger menu icon is all about, the origins of the it and whether you should be incorporating it on your website.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2023-02-14T13:30:39+00:00","article_modified_time":"2023-02-14T15:07:56+00:00","og_image":[{"width":2500,"height":800,"url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/02\/Hamburger-Menu-Icon.jpg","type":"image\/jpeg"}],"author":"Kyle Lindsay","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kyle Lindsay","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/"},"author":{"name":"Kyle Lindsay","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"headline":"What is the hamburger menu icon?","datePublished":"2023-02-14T13:30:39+00:00","dateModified":"2023-02-14T15:07:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/"},"wordCount":888,"commentCount":0,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/02\/Hamburger-Menu-Icon.jpg","articleSection":["Web Design","Web Development"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/","name":"What Is The Hamburger Menu Icon? | Fifteen - Nottingham","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/02\/Hamburger-Menu-Icon.jpg","datePublished":"2023-02-14T13:30:39+00:00","dateModified":"2023-02-14T15:07:56+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"description":"We explore what the hamburger menu icon is all about, the origins of the it and whether you should be incorporating it on your website.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/#primaryimage","url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/02\/Hamburger-Menu-Icon.jpg","contentUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2016\/02\/Hamburger-Menu-Icon.jpg","width":2500,"height":800,"caption":"hamburger-menu-icon"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/what-is-the-hamburger-menu-icon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"What is the hamburger menu icon?"}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714","name":"Kyle Lindsay","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","caption":"Kyle Lindsay"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/kyle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/20687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=20687"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/20687\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media\/27282"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=20687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=20687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=20687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}