Jump to content

Hamburger button

From Wikipedia, the free encyclopedia

This is an old revision of this page, as edited by Davidjcmorris (talk | contribs) at 04:28, 12 October 2017 (making it clearer that the hamburger, hotdog, or pancake word should come before the word button or menu without being in plural form.). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Example hamburger icon

Screenshot of Wikipedia mobile app with hamburger icon and opened menu

The hamburger (also known as options, hotdog or pancake) button or menu 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] and is named for its resemblance to the layers in a hamburger, a pile of pancakes, or a hotdog in a long bun.[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]

Compared to other computer menus, a hamburger button increases interaction cost and pay out in less space usage of the screen.[6]

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

The icon was originally designed by Norm Cox as part of the user interface for the Xerox Star,[2] and it saw a resurgence starting in 2009 stemming from the limited screen area available to mobile apps.[8]

See also

References

  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 January 10, 2017.
  5. ^ Bravo, Gonzalo. "Kebab Menu". thenounproject.com. Retrieved April 6, 2017.
  6. ^ Budiu, Raluca (August 31, 2013). "Interaction cost: Definition". Nielsen Norman Group. Retrieved April 9, 2017. {{cite web}}: Cite has empty unknown parameters: |trans_title=, |day=, |month=, and |deadurl= (help)
  7. ^ Constine, Josh (May 24, 2014). "Kill the hamburger buttons". TechCrunch. Retrieved April 10, 2015.
  8. ^ "A Brief History of the Hamburger Icon". placeit.net. October 29, 2014. Retrieved January 25, 2017.