Hamburger button: Difference between revisions
m →Original Design: copy edit: sentence case for headings please, MOS:HEADING |
|||
Line 12: | Line 12: | ||
==Appearance and functionality== |
==Appearance and functionality== |
||
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]] '''⋮''' ). 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]] '''⋮''' ). In the [[Microsoft]] Office 365 platform, a similar application menu consisting of three rows of three squares (unofficially called a "waffle menu"<ref>{{cite web|url=https://twitter.com/hashtag/wafflemenu?src=hashtag_click|accessdate=2020-04-29|title=#wafflemenu - Twitter|work=Twitter}}</ref><ref>In [[Dynamics 365]] HTML source code, the symbol is tagged with the ID "d365-waffle" and it's usage is marked with the name and class "NavBarOfficeWaffle"</ref>) 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"/> |
||
==Criticisms== |
==Criticisms== |
Revision as of 22:48, 29 April 2020
![](http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/220px-Hamburger_icon.svg.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Big_Mac_hamburger.jpg/220px-Big_Mac_hamburger.jpg)
The hamburger button, 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
Original design
The icon was originally designed by Norm Cox as part of the user interface for the Xerox Star, introduced in 1981;[2] it saw a resurgence starting in 2009 stemming from the limited screen area available to mobile apps.[3][4][5] 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).”[6]
In mainstream 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.[7] 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,[8] and the hamburger would not return to Windows until a placement on the Start menu of the one-year update of Windows 10.[9]
Appearance and functionality
The "menu" button takes the form of an icon that consists of three parallel horizontal lines (displayed as ≡), suggestive of a list.[3] The name refers to its resemblance to the menu that is typically exposed or opened when interacting with it.[10] The wider button may be reduced to three vertically stacked dots (displayed as a tri-colon or vertical ellipsis ⋮ ). In the Microsoft Office 365 platform, a similar application menu consisting of three rows of three squares (unofficially called a "waffle menu"[11][12]) is displayed.[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]
Criticisms
Appearance
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]
Usability
The menu button may increase interaction cost compared to a bottom bar menu, requiring extra clicks to retrieve the same information, albeit with the benefit of less space usage of the screen, in the context of mobile apps.[17] It has also been argued that designers tend to overload these icons with too much hidden information.[18]
See also
- Menu key
- Triple bar § Application design
- Ellipsis § Usage in menus - used to indicate "More", or partially hidden options whereas the collapsed menu icon signify completely hidden options
References
- ^ "How To Create a Menu Icon". www.w3schools.com. Archived from the original on 2018-09-05. Retrieved 2018-09-20.
- ^ "The origin of the hamburger icon". Archived from the original on 2015-11-07. Retrieved 2018-09-20.
- ^ 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.
- ^ "A Brief History of the Hamburger Icon". placeit.net. 29 October 2014. Archived from the original on 2017-02-02. Retrieved 25 January 2017.
- ^ Ltd., Stuff & Nonsense. "We need a standard show navigation icon for responsive web design". Archived from the original on 2018-09-20. Retrieved 2018-09-20.
- ^ "A Brief History of the Hamburger Icon". Placeit Blog. 2014-10-29. Retrieved 2019-02-23.
- ^ Ali, Fahad (2015-05-13). "Microsoft First Used The Controversial Hamburger Menu In 1985". windowschimp.com. Retrieved 2019-06-12.
- ^ Doppelhammer, Jim. "Windows Elements". doublehammer.com. Retrieved 2019-06-12.
- ^ Shaikh, Rafia (2016-04-04). "Here's How the New Windows 10 Anniversary Start Menu Looks Like". wccftech.com. Retrieved 2019-06-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.
- ^ "#wafflemenu - Twitter". Twitter. Retrieved 2020-04-29.
- ^ In Dynamics 365 HTML source code, the symbol is tagged with the ID "d365-waffle" and it's usage is marked with the name and class "NavBarOfficeWaffle"
- ^ 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.
- ^ Constine, Josh (May 24, 2014). "Kill the hamburger buttons". TechCrunch. Archived from the original on 2016-08-19. Retrieved April 10, 2015.
- ^ 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.
- ^ "Loving & Hating the Hamburger Icon". Webdesigner Depot. 2018-09-17. Retrieved 2019-02-23.
- ^ 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.
- ^ "Loving & Hating the Hamburger Icon". Webdesigner Depot. 2018-09-17. Retrieved 2019-02-23.