Hamburger button

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
Example hamburger icon

Screenshot of Wikipedia mobile app with hamburger icon and opened menu

The hamburger, sandwich, hotdog, pancake, tribar (or triple bar) double oreo or options button is a button placed typically in a top corner of a graphical user interface.[1] It takes the form of an icon that consists of three parallel horizontal lines (displayed as ), suggestive of a list,[2]. The names refer to its resemblance to the layers in a hamburger, a pile of pancakes, or three hotdogs.[3]

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.[1]

Use of this icon as a graphical shortcut originated in order to save space on smaller devices (like smartphones).[3] On devices with even smaller user interfaces, the wider hamburger button may be reduced to three vertically stacked dots (displayed as a tri-colon or vertical ellipsis ),[4] from which it may also be described as a kebab.[5] In the Microsoft Office 365 platform, a similar application menu consisting of three rows of three squares is displayed, which is informally described as the waffle by its users.[6]

In the context of mobile apps, compared to a bottom bar menu, a hamburger button increases interaction cost and pays out in less space usage of the screen.[7]

Hamburger buttons have been criticized by TechCrunch as a "poor design choice" in apps for mobile devices.[8]

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.[9]

See also[edit]

References[edit]

  1. ^ a b Bawcombe, Libby (August 27, 2014). "The hamburger menu-icon debate". The Atlantic. Atlantic Media. Retrieved April 10, 2015. 
  2. ^ a b Campbell-Dollaghan, Kelsey (March 31, 2014). "Who Designed the Hamburger Icon?". Gizmodo. Retrieved February 2, 2016. 
  3. ^ a b Lessin, Jessica (March 18, 2013). "What's a 'hamburger' button? A guide to app features". The Wall Street Journal. Dow Jones & Company. Retrieved April 10, 2015. 
  4. ^ "Why did Google choose to use vertical three dots icon instead of Hamburger icon on Chrome? - Quora". www.quora.com. Retrieved 2017-01-10. 
  5. ^ Bravo, Gonzalo. "Kebab Menu". thenounproject.com. Retrieved 2017-04-06. 
  6. ^ Nguyen, Chuong (June 26, 2015). "Office 365 Store saves time with single sign-on to web apps". Tech Radar Pro. Retrieved 2018-02-08. 
  7. ^ Tsiodoulos, Dimitrios (2016). Comparison of hamburger and bottom bar menu on mobile devices for three level navigation (PDF) (Thesis). Retrieved 2018-06-13. 
  8. ^ Constine, Josh (May 24, 2014). "Kill the hamburger buttons". TechCrunch. Retrieved April 10, 2015. 
  9. ^ "A Brief History of the Hamburger Icon". placeit.net. 29 October 2014. Retrieved 25 January 2017.