Jump to content

Hamburger button: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
Undid revision 1219242797 by Dh27h (talk) Removed nonsense about any popularity of "oreo" name, but left some refs to the advertising scheme.
Cewbot (talk | contribs)
 
(7 intermediate revisions by 6 users not shown)
Line 4: Line 4:
| image_gap = 10
| image_gap = 10
| image1 = Hamburger icon.svg
| image1 = Hamburger icon.svg
| caption1 = Collapsed menu icon as used on the ''Hamburger Button''
| caption1 = Collapsed menu icon used on the ''Hamburger Button''
| alt1 = An icon of three lines
| alt1 = An icon of three lines
| image2 = HAMBURGERMENU.png
| image2 = HAMBURGERMENU.png
Line 14: Line 14:


==History==
==History==

=== Original design ===
{{multiple image
{{multiple image
| width = 60
| width = 60
Line 27: Line 27:
The icon was originally designed by [[Norm Cox (designer)|Norm Cox]] as part of the user interface for the [[Xerox Star]] personal computer, introduced in 1981.<ref name="Evernote-origin"/> Cox described the icon's creation, saying, "Its graphic design was meant to be very 'road sign' simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13... can't remember exactly)."<ref>{{Cite web|url=https://blog.placeit.net/history-of-the-hamburger-icon/|title=A Brief History of the Hamburger Icon|date=2014-10-29|website=Placeit Blog|language=en-US|access-date=2019-02-23}}</ref>
The icon was originally designed by [[Norm Cox (designer)|Norm Cox]] as part of the user interface for the [[Xerox Star]] personal computer, introduced in 1981.<ref name="Evernote-origin"/> Cox described the icon's creation, saying, "Its graphic design was meant to be very 'road sign' simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13... can't remember exactly)."<ref>{{Cite web|url=https://blog.placeit.net/history-of-the-hamburger-icon/|title=A Brief History of the Hamburger Icon|date=2014-10-29|website=Placeit Blog|language=en-US|access-date=2019-02-23}}</ref>


=== In mainstream desktop computing ===
In possibly its first use after the Xerox Star, the release of [[Windows 1.0]] in 1985 contained a hamburger icon in each window's control menu.<ref>{{cite web |url=https://www.windowschimp.com/microsoft-first-used-the-controversial-hamburger-menu-in-1985/ |title=Microsoft First Used The Controversial Hamburger Menu In 1985 |last=Ali |first=Fahad |date=2015-05-13 |website=windowschimp.com |access-date=2019-06-12 | archiveurl = https://web.archive.org/web/20210401222227/https://www.windowschimp.com/microsoft-first-used-the-controversial-hamburger-menu-in-1985/
In possibly its first use after the Xerox Star, the release of [[Windows 1.0]] in 1985 contained a hamburger icon in each window's control menu.<ref>{{cite web |url=https://www.windowschimp.com/microsoft-first-used-the-controversial-hamburger-menu-in-1985/ |title=Microsoft First Used The Controversial Hamburger Menu In 1985 |last=Ali |first=Fahad |date=2015-05-13 |website=windowschimp.com |access-date=2019-06-12 | archiveurl = https://web.archive.org/web/20210401222227/https://www.windowschimp.com/microsoft-first-used-the-controversial-hamburger-menu-in-1985/
| archivedate = 2021-04-01}}</ref> It was short-lived, however, as the hamburger icon disappeared in [[Windows 2.0]] in favor of a single horizontal line denoting the control menu. [[Windows 95]] replaced the single line with the program's icon,<ref>{{cite web |url=http://doublehammer.com/help/refwine1.htm#ControlMenu |title=Windows Elements |last=Doppelhammer |first=Jim |website=doublehammer.com |access-date=2019-06-12}}</ref> and the hamburger would not return to Windows until a placement on the [[Start menu]] of the [[Windows 10 version history#Version 1607 (Anniversary Update)|one-year update]] of [[Windows 10]].<ref>{{cite web |url=https://wccftech.com/the-new-hamburger-start-menu-for-windows-10/ |title=Here's How the New Windows 10 Anniversary Start Menu Looks Like |last=Shaikh |first=Rafia |date=2016-04-04 |website=wccftech.com |access-date=2019-06-12}}</ref>
| archivedate = 2021-04-01}}</ref> It was short-lived, however, as the hamburger icon disappeared in [[Windows 2.0]] in favor of a single horizontal line denoting the control menu. [[Windows 95]] replaced the single line with the program's icon,<ref>{{cite web |url=http://doublehammer.com/help/refwine1.htm#ControlMenu |title=Windows Elements |last=Doppelhammer |first=Jim |website=doublehammer.com |access-date=2019-06-12}}</ref> and the hamburger would not return to Windows until a placement on the [[Start menu]] of the [[Windows 10 version history#Version 1607 (Anniversary Update)|one-year update]] of [[Windows 10]].<ref>{{cite web |url=https://wccftech.com/the-new-hamburger-start-menu-for-windows-10/ |title=Here's How the New Windows 10 Anniversary Start Menu Looks Like |last=Shaikh |first=Rafia |date=2016-04-04 |website=wccftech.com |access-date=2019-06-12}}</ref>


===Mobile usage===
Cox's hamburger icon saw a resurgence starting in 2009 stemming from the limited screen area available to [[mobile app]]s.<ref name="Gizmodo" /><ref name="PlaceItHist"/><ref name="Stuff"/>
Cox's hamburger icon saw a resurgence starting in 2009 stemming from the limited screen area available to [[mobile app]]s.<ref name="Gizmodo" /><ref name="PlaceItHist"/><ref name="Stuff"/>

In 2024, [[Mondelez International]] publicly tried to encourage calling it an "Oreo" rather than "hamburger" menu.<ref>{{Cite web |last=Berger |first=Eric |date=2024-04-08 |title=Oreo claims the hamburger menu as its own |url=https://www.campaignlive.com/article/oreo-claims-hamburger-menu-its-own/1868061 |access-date=2024-04-15 |website=campaignlive.com |language=en}}</ref><ref>{{Cite web |title=Oreo craves change, turns internet’s ‘hamburger menu’ into ‘The Oreo Menu’ |url=https://www.thedrum.com/news/2024/04/09/oreo-craves-change-turns-internet-s-hamburger-menu-the-oreo-menu |access-date=2024-04-15 |website=The Drum}}</ref>


==Appearance and functionality==
==Appearance and functionality==
[[File:Editing Wikipedia mobile screenshot p 16, Penny Cyclopaedia with menu.png|thumb|A hamburger menu in a previous version of the [[List of Wikipedia mobile applications#Wikimedia Foundation|Wikipedia mobile app]]]]
[[File:Editing Wikipedia mobile screenshot p 16, Penny Cyclopaedia with menu.png|thumb|A hamburger menu in a previous version of the [[List of Wikipedia mobile applications#Wikimedia Foundation|Wikipedia mobile app]]]]
The "menu" button takes the form of an [[icon (computing)|icon]] that consists of three parallel horizontal lines (displayed as '''≡'''), suggestive of a list.<ref name="Gizmodo"/> The name refers to its resemblance to the menu that is typically exposed or opened when interacting with it.<ref name="WSJ_20130318"/> The wider button may be reduced to three vertically stacked dots (displayed as a tri-colon or [[Ellipsis|vertical ellipsis]] '''⋮''' ), also known as a ''kebab icon'', ''meatball icon'' or ''falafel icon''. In the [[Microsoft]] Office 365 platform, a similar application menu consisting of three rows of three squares is displayed.<ref name="TechR-365"/> Tapping, clicking or otherwise activating this button results in a [[Menu (computing)|menu]] being revealed, which distinguishes it from a [[menu bar|menu or tab bar]] that is always on display.<ref name="TechCrunch - 24 May 2014 - Kill The Hamburger Button"/>
The "menu" button takes the form of an [[icon (computing)|icon]] that consists of three parallel horizontal lines (displayed as '''≡'''), suggestive of a list.<ref name="Gizmodo"/> The name refers to its resemblance to the menu that is typically exposed or opened when interacting with it.<ref name="WSJ_20130318"/> The wider button may be reduced to three vertically stacked dots (displayed as a tri-colon or [[Ellipsis|vertical ellipsis]] '''⋮''' ), also known as a ''kebab icon'', ''meatball icon'' or ''falafel icon''. In the [[Microsoft]] Office 365 platform, a similar application menu consisting of three rows of three squares is displayed, this is referred to as a "waffle".<ref name="TechR-365"/> Tapping, clicking or otherwise activating this button results in a [[Menu (computing)|menu]] being revealed, which distinguishes it from a [[menu bar|menu or tab bar]] that is always on display.<ref name="TechCrunch - 24 May 2014 - Kill The Hamburger Button"/>


==Reception==
==Reception==
===Appearance===
It has been argued that while the collapsed menu button is now commonplace, its functionality is not necessarily immediately obvious when first encountered;<ref name="bbc-H-mystery"/> in particular, older users less familiar with modern iconography may find it confusing.<ref name="Loving & Hating the Hamburger Icon">{{Cite web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|title=Loving & Hating the Hamburger Icon|date=2018-09-17|website=Webdesigner Depot|language=en|access-date=2019-02-23}}</ref> The location of the hamburger menu icon also depends on the specific website or app.<ref name="Hamburger menu icon: should it be on the left or right?">{{Cite web|url=https://uxpickle.com/hamburger-menu-icon-should-it-be-on-the-left-or-right/|title=Hamburger menu icon: should it be on the left or right?|date=2018-09-17|website=UX Pickle|language=en|access-date=2022-11-02}}</ref>


It has been argued that while the collapsed menu button is now commonplace, its functionality is not necessarily immediately obvious when first encountered;<ref name="bbc-H-mystery"/> in particular, older users less familiar with modern iconography may find it confusing.<ref name="Loving & Hating the Hamburger Icon">{{Cite web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|title=Loving & Hating the Hamburger Icon|date=2018-09-17|website=Webdesigner Depot|language=en|access-date=2019-02-23}}</ref> The location of the hamburger menu icon also depends on the specific website or app.<ref name="Hamburger menu icon: should it be on the left or right?">{{Cite web|url=https://uxpickle.com/hamburger-menu-icon-should-it-be-on-the-left-or-right/|title=Hamburger menu icon: should it be on the left or right?|date=2018-09-17|website=UX Pickle|language=en|access-date=2022-11-02}}</ref>
In 2024, the company that makes [[Oreo cookies]] publically tried to encourage calling it an "Oreo" rather than "hamburger" menu.<ref>{{Cite web |last=April 08 |first=Eric Berger |last2=Information |first2=2024 The |title=Oreo claims the hamburger menu as its own |url=https://www.campaignlive.com/article/oreo-claims-hamburger-menu-its-own/1868061?utm_source=website&utm_medium=social |access-date=2024-04-15 |website=www.campaignlive.com |language=en}}</ref><ref>{{Cite web |title=Oreo craves change, turns internet’s ‘hamburger menu’ into ‘The Oreo Menu’ |url=https://www.thedrum.com/news/2024/04/09/oreo-craves-change-turns-internet-s-hamburger-menu-the-oreo-menu |access-date=2024-04-15 |website=The Drum}}</ref>


===Usability===
The menu button may increase [[interaction cost]] compared to a menu bar, requiring extra clicks to retrieve the same information, albeit with the benefit of less space usage of the screen.<ref name="Tsiodoulos"/> It has also been argued that designers tend to overload these icons with too much hidden information.<ref name="Loving & Hating the Hamburger Icon"/>
The menu button may increase [[interaction cost]] compared to a menu bar, requiring extra clicks to retrieve the same information, albeit with the benefit of less space usage of the screen.<ref name="Tsiodoulos"/> It has also been argued that designers tend to overload these icons with too much hidden information.<ref name="Loving & Hating the Hamburger Icon"/>


Line 51: Line 48:
* [[Menu key]]
* [[Menu key]]
* {{section link|Triple bar|Application design}}
* {{section link|Triple bar|Application design}}
* {{section link|Ellipsis|Usage in computer system menus}} – used to indicate "More", or partially hidden options whereas the collapsed menu icon signify completely hidden options
* {{section link|Ellipsis|In computer user interface}} – used to indicate "More", or partially hidden options whereas the collapsed menu icon signify completely hidden options


== References ==
== References ==
{{reflist|2|refs=
{{reflist|2|refs=


<ref name="W3s-howto">{{cite web|url=https://www.w3schools.com/howto/howto_css_menu_icon.asp|title=How To Create a Menu Icon|website=www.w3schools.com|access-date=2018-09-20|archive-url=https://web.archive.org/web/20180905231557/https://www.w3schools.com/howto/howto_css_menu_icon.asp|archive-date=2018-09-05|url-status=live}}</ref>
<ref name="W3s-howto">{{cite web|url=https://www.w3schools.com/howto/howto_css_menu_icon.asp|title=How To Create a Menu Icon|website=w3schools.com|access-date=2018-09-20|archive-url=https://web.archive.org/web/20180905231557/https://www.w3schools.com/howto/howto_css_menu_icon.asp|archive-date=2018-09-05|url-status=live}}</ref>


<ref name="Gizmodo">{{cite web |first=Kelsey |last=Campbell-Dollaghan |url=https://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 |title=Who Designed the Hamburger Icon? |publisher=[[Gizmodo]] |date=March 31, 2014 |access-date=February 2, 2016 |archive-url=https://web.archive.org/web/20160206205739/http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 |archive-date=2016-02-06 |url-status=live }}</ref>
<ref name="Gizmodo">{{cite web |first=Kelsey |last=Campbell-Dollaghan |url=https://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 |title=Who Designed the Hamburger Icon? |publisher=[[Gizmodo]] |date=March 31, 2014 |access-date=February 2, 2016 |archive-url=https://web.archive.org/web/20160206205739/http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 |archive-date=2016-02-06 |url-status=live }}</ref>
Line 62: Line 59:
<ref name="PlaceItHist">{{cite web |url=https://blog.placeit.net/history-of-the-hamburger-icon/ |title=A Brief History of the Hamburger Icon |author=<!--Staff writer(s); no by-line.--> |date=29 October 2014 |website=placeit.net |access-date=25 January 2017 |archive-url=https://web.archive.org/web/20170202023133/https://blog.placeit.net/history-of-the-hamburger-icon/ |archive-date=2017-02-02 |url-status=live }}</ref>
<ref name="PlaceItHist">{{cite web |url=https://blog.placeit.net/history-of-the-hamburger-icon/ |title=A Brief History of the Hamburger Icon |author=<!--Staff writer(s); no by-line.--> |date=29 October 2014 |website=placeit.net |access-date=25 January 2017 |archive-url=https://web.archive.org/web/20170202023133/https://blog.placeit.net/history-of-the-hamburger-icon/ |archive-date=2017-02-02 |url-status=live }}</ref>


<ref name="Evernote-origin">{{cite web|url=https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83|title=The origin of the hamburger icon|access-date=2018-09-20|archive-url=https://web.archive.org/web/20151107060809/https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83|archive-date=2015-11-07|url-status=live}}</ref>
<ref name="Evernote-origin">{{cite web|url=https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83|title=The origin of the hamburger icon|website=evernote.com|access-date=2018-09-20|archive-url=https://web.archive.org/web/20151107060809/https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83|archive-date=2015-11-07|url-status=live}}</ref>


<ref name="Stuff">{{cite web|url=https://stuffandnonsense.co.uk/blog/we_need_a_standard_show_navigation_icon_for_responsive_web_design|title=We need a standard show navigation icon for responsive web design|first=Stuff & Nonsense|last=Ltd.|date=17 March 2012 |access-date=2018-09-20|archive-url=https://web.archive.org/web/20180920161124/https://stuffandnonsense.co.uk/blog/we_need_a_standard_show_navigation_icon_for_responsive_web_design|archive-date=2018-09-20|url-status=live}}</ref>
<ref name="Stuff">{{cite web|url=https://stuffandnonsense.co.uk/blog/we_need_a_standard_show_navigation_icon_for_responsive_web_design|title=We need a standard show navigation icon for responsive web design|website=Stuff & Nonsense|date=17 March 2012 |access-date=2018-09-20|archive-url=https://web.archive.org/web/20180920161124/https://stuffandnonsense.co.uk/blog/we_need_a_standard_show_navigation_icon_for_responsive_web_design|archive-date=2018-09-20|url-status=live}}</ref>


<ref name="WSJ_20130318">{{cite news | url= https://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/ | title= What's a 'hamburger' button? A guide to app features | last= Lessin | first= Jessica | date= March 18, 2013 | work= [[The Wall Street Journal]] | publisher= [[Dow Jones & Company]] | access-date= April 10, 2015 | archive-url= https://web.archive.org/web/20150416195303/http://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/ | archive-date= 2015-04-16 | url-status= live }}</ref>
<ref name="WSJ_20130318">{{cite news | url= https://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/ | title= What's a 'hamburger' button? A guide to app features | last= Lessin | first= Jessica | date= March 18, 2013 | work= [[The Wall Street Journal]] | publisher= [[Dow Jones & Company]] | access-date= April 10, 2015 | archive-url= https://web.archive.org/web/20150416195303/http://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/ | archive-date= 2015-04-16 | url-status= live }}</ref>
Line 74: Line 71:
<ref name="Tsiodoulos">{{cite thesis |last=Tsiodoulos |first=Dimitrios |date=2016 |title=Comparison of hamburger and bottom bar menu on mobile devices for three level navigation |url=http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf |access-date=2018-06-13 |archive-url=https://web.archive.org/web/20180613235022/http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf |archive-date=2018-06-13 |url-status=live }}</ref>
<ref name="Tsiodoulos">{{cite thesis |last=Tsiodoulos |first=Dimitrios |date=2016 |title=Comparison of hamburger and bottom bar menu on mobile devices for three level navigation |url=http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf |access-date=2018-06-13 |archive-url=https://web.archive.org/web/20180613235022/http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf |archive-date=2018-06-13 |url-status=live }}</ref>


<!-- <ref name="Kadlec">{{cite web|url=https://timkadlec.com/2012/08/mobile-navigation-icons/|title=Mobile Navigation Icons - TimKadlec.com|first=Tim|last=Kadlec|website=timkadlec.com|access-date=2018-09-20|archive-url=https://web.archive.org/web/20180920161131/https://timkadlec.com/2012/08/mobile-navigation-icons/|archive-date=2018-09-20|url-status=live}}</ref>
<!-- <ref name="Kadlec">{{cite web|url=https://timkadlec.com/2012/08/mobile-navigation-icons/|title=Mobile Navigation Icons|first=Tim|last=Kadlec|website=TimKadlec.com|access-date=2018-09-20|archive-url=https://web.archive.org/web/20180920161131/https://timkadlec.com/2012/08/mobile-navigation-icons/|archive-date=2018-09-20|url-status=live}}</ref>
-->
-->
<ref name="TechCrunch - 24 May 2014 - Kill The Hamburger Button">{{cite web | url= https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/ | title= Kill the hamburger buttons | last= Constine | first= Josh | date= May 24, 2014 | work= [[TechCrunch]] | access-date= April 10, 2015 | archive-url= https://web.archive.org/web/20160819092410/https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/ | archive-date= 2016-08-19 | url-status= live }}</ref>
<ref name="TechCrunch - 24 May 2014 - Kill The Hamburger Button">{{cite web | url= https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/ | title= Kill the hamburger buttons | last= Constine | first= Josh | date= May 24, 2014 | work= [[TechCrunch]] | access-date= April 10, 2015 | archive-url= https://web.archive.org/web/20160819092410/https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/ | archive-date= 2016-08-19 | url-status= live }}</ref>

Latest revision as of 17:54, 26 May 2024

An icon of three lines
Collapsed menu icon used on the Hamburger Button
A picture of a hamburger with three buns
A hamburger, the origin of the nickname

The hamburger button (the triple bar ≡ or trigram symbol ☰), so named for its unintentional resemblance to a hamburger, is a button typically placed in a top corner of a graphical user interface.[1] Its function is to toggle a menu (sometimes referred to as a hamburger menu) or navigation bar between being collapsed behind the button or displayed on the screen. The icon which is associated with this widget, consisting of three horizontal bars, is also known as the collapsed menu icon.

History

[edit]
Xerox Star computer interface
Microsoft Windows 1.0 screenshot
Early versions of the hamburger button can be seen in the 1980s graphical user interfaces of the Xerox Star computer and Microsoft Windows 1.0

The icon was originally designed by Norm Cox as part of the user interface for the Xerox Star personal computer, introduced in 1981.[2] Cox described the icon's creation, saying, "Its graphic design was meant to be very 'road sign' simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13... can't remember exactly)."[3]

In possibly its first use after the Xerox Star, the release of Windows 1.0 in 1985 contained a hamburger icon in each window's control menu.[4] It was short-lived, however, as the hamburger icon disappeared in Windows 2.0 in favor of a single horizontal line denoting the control menu. Windows 95 replaced the single line with the program's icon,[5] and the hamburger would not return to Windows until a placement on the Start menu of the one-year update of Windows 10.[6]

Cox's hamburger icon saw a resurgence starting in 2009 stemming from the limited screen area available to mobile apps.[7][8][9]

In 2024, Mondelez International publicly tried to encourage calling it an "Oreo" rather than "hamburger" menu.[10][11]

Appearance and functionality

[edit]
A hamburger menu in a previous version of the Wikipedia mobile app

The "menu" button takes the form of an icon that consists of three parallel horizontal lines (displayed as ), suggestive of a list.[7] The name refers to its resemblance to the menu that is typically exposed or opened when interacting with it.[12] The wider button may be reduced to three vertically stacked dots (displayed as a tri-colon or vertical ellipsis ), also known as a kebab icon, meatball icon or falafel icon. In the Microsoft Office 365 platform, a similar application menu consisting of three rows of three squares is displayed, this is referred to as a "waffle".[13] Tapping, clicking or otherwise activating this button results in a menu being revealed, which distinguishes it from a menu or tab bar that is always on display.[14]

Reception

[edit]

It has been argued that while the collapsed menu button is now commonplace, its functionality is not necessarily immediately obvious when first encountered;[15] in particular, older users less familiar with modern iconography may find it confusing.[16] The location of the hamburger menu icon also depends on the specific website or app.[17]

The menu button may increase interaction cost compared to a menu bar, requiring extra clicks to retrieve the same information, albeit with the benefit of less space usage of the screen.[18] It has also been argued that designers tend to overload these icons with too much hidden information.[16]

See also

[edit]

References

[edit]
  1. ^ "How To Create a Menu Icon". w3schools.com. Archived from the original on 2018-09-05. Retrieved 2018-09-20.
  2. ^ "The origin of the hamburger icon". evernote.com. Archived from the original on 2015-11-07. Retrieved 2018-09-20.
  3. ^ "A Brief History of the Hamburger Icon". Placeit Blog. 2014-10-29. Retrieved 2019-02-23.
  4. ^ Ali, Fahad (2015-05-13). "Microsoft First Used The Controversial Hamburger Menu In 1985". windowschimp.com. Archived from the original on 2021-04-01. Retrieved 2019-06-12.
  5. ^ Doppelhammer, Jim. "Windows Elements". doublehammer.com. Retrieved 2019-06-12.
  6. ^ Shaikh, Rafia (2016-04-04). "Here's How the New Windows 10 Anniversary Start Menu Looks Like". wccftech.com. Retrieved 2019-06-12.
  7. ^ a b Campbell-Dollaghan, Kelsey (March 31, 2014). "Who Designed the Hamburger Icon?". Gizmodo. Archived from the original on 2016-02-06. Retrieved February 2, 2016.
  8. ^ "A Brief History of the Hamburger Icon". placeit.net. 29 October 2014. Archived from the original on 2017-02-02. Retrieved 25 January 2017.
  9. ^ "We need a standard show navigation icon for responsive web design". Stuff & Nonsense. 17 March 2012. Archived from the original on 2018-09-20. Retrieved 2018-09-20.
  10. ^ Berger, Eric (2024-04-08). "Oreo claims the hamburger menu as its own". campaignlive.com. Retrieved 2024-04-15.
  11. ^ "Oreo craves change, turns internet's 'hamburger menu' into 'The Oreo Menu'". The Drum. Retrieved 2024-04-15.
  12. ^ Lessin, Jessica (March 18, 2013). "What's a 'hamburger' button? A guide to app features". The Wall Street Journal. Dow Jones & Company. Archived from the original on 2015-04-16. Retrieved April 10, 2015.
  13. ^ Nguyen, Chuong (June 26, 2015). "Office 365 Store saves time with single sign-on to web apps". Tech Radar Pro. Archived from the original on 2018-02-09. Retrieved 2018-02-08.
  14. ^ Constine, Josh (May 24, 2014). "Kill the hamburger buttons". TechCrunch. Archived from the original on 2016-08-19. Retrieved April 10, 2015.
  15. ^ Stokel-Walker, Chris (16 May 2015). "Hamburger icon: How these three lines mystify most people". BBC. Archived from the original on 2018-02-20. Retrieved 11 October 2018.
  16. ^ a b "Loving & Hating the Hamburger Icon". Webdesigner Depot. 2018-09-17. Retrieved 2019-02-23.
  17. ^ "Hamburger menu icon: should it be on the left or right?". UX Pickle. 2018-09-17. Retrieved 2022-11-02.
  18. ^ Tsiodoulos, Dimitrios (2016). Comparison of hamburger and bottom bar menu on mobile devices for three level navigation (PDF) (Thesis). Archived (PDF) from the original on 2018-06-13. Retrieved 2018-06-13.