Hamburger button

Collapsed menu icon as used on the Hamburger Button
Hamburger - icon nickname origin

The Collapse Menu Button or Hamburger Button is a button placed typically in a top corner of a graphical user interface.[1] Its function is to toggle a menu between being collapsed behind the button or displayed on the screen. The icon typically associated with this menu is three horizontal bars is more formally known as the Collapsed Menu Icon however the term Hamburger Button gained acceptance and is commonly used.

History

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]

Appearance

It takes the form of an icon that consists of three parallel horizontal lines (displayed as ☰), suggestive of a list.[3] The names refer to its resemblance to the menu that is typical exposed or opened when interacting with it.[6]

The wider button may be reduced to three vertically stacked dots (displayed as a tri-colon or vertical ellipsis ⋮ )[7] In the Microsoft Office 365 platform, a similar application menu consisting of three rows of three squares is displayed.[8]

Functionality

Selecting (tapping or clicking) this button results in a menu being revealed (sliding out or popping up), which distinguishes it from a menu bar, which is always on display.

Programming

Programmers are able to obtain the collapsed menu icon item from an icon library or it can be formed directly in CSS.[9][1][10][11]

Criticisms

There have been a number of criticisms of the button and its icon:

  • Concerns that while the collapsed menu button is now commonplace, its functionality is not necessarily immediately obvious when first encountered.[12]
  • Criticisms that a menu button increases interaction cost, albeit with the benefit of in less space usage of the screen, in the context of mobile apps compared to a bottom bar menu.[13]
  • Suggestions of "poor design choice" in apps for mobile devices by TechCrunch.[14][15]

See also

References

  1. 1 2 "How To Create a Menu Icon". www.w3schools.com. Archived from the original on 2018-09-05. Retrieved 2018-09-20.
  2. ↑ "The origin of the hamburger icon". Archived from the original on 2015-11-07. Retrieved 2018-09-20.
  3. 1 2 Campbell-Dollaghan, Kelsey (March 31, 2014). "Who Designed the Hamburger Icon?". Gizmodo. Archived from the original on 2016-02-06. Retrieved February 2, 2016.
  4. ↑ "A Brief History of the Hamburger Icon". placeit.net. 29 October 2014. Archived from the original on 2017-02-02. Retrieved 25 January 2017.
  5. ↑ 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.
  6. ↑ 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.
  7. ↑ "Why did Google choose to use vertical three dots icon instead of Hamburger icon on Chrome? - Quora". www.quora.com. Retrieved 2017-01-10.
  8. ↑ 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.
  9. ↑ "Three Line Menu Navicon - CSS-Tricks". 10 October 2012. Archived from the original on 2018-09-20. Retrieved 2018-09-20.
  10. ↑ Robson, Stuart. "Create a pure CSS menu button". Archived from the original on 2018-09-20. Retrieved 2018-09-20.
  11. ↑ Kadlec, Tim. "Mobile Navigation Icons - TimKadlec.com". timkadlec.com. Archived from the original on 2018-09-20. Retrieved 2018-09-20.
  12. ↑ 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.
  13. ↑ 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.
  14. ↑ Constine, Josh (May 24, 2014). "Kill the hamburger buttons". TechCrunch. Archived from the original on 2016-08-19. Retrieved April 10, 2015.
  15. ↑ Keith, Jeremy. "Navicon". Archived from the original on 2018-09-20. Retrieved 2018-09-20.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.