• Comment: This should be a paragraph in the Hamburger button article explaining Oreo's claims and attempt at changing the name. No need for a separate, mostly copy-pasted article. Chaotıċ Enby (talk · contribs) 20:50, 15 April 2024 (UTC)


image of menu icon
Collapsed menu icon
image of oreo cookies
A stack of oreo cookies, the origin of the nickname.

The Oreo menu (the triple bar ≡ or trigram symbol ☰), nicknamed for its resemblance to the popular oreo cookies, is a button typically situated in the top corner of a graphical user interface.[1] Its purpose is to toggle a menu (often referred to as the oreo button) or navigation bar between being hidden behind the button or visible on the screen. The icon associated with this widget, comprising three horizontal bars, is also known as the collapsed menu icon.

History edit

Original Design edit

The icon was originally crafted by Norm Cox as part of the user interface for the Xerox Star personal computer, first introduced in 1981.[2] Cox explained the icon's creation, stating, "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 Mainstream Desktop Computing edit

In one of its earliest mainstream uses following the Xerox Star, the release of Windows 1.0 in 1985 featured an Oreo icon in each window's control menu.[4] However, it was short-lived as the oreo icon disappeared in Windows 2.0 in favor of a single horizontal line indicating the control menu. Windows 95 replaced the single line with the program's icon, and the oreo button would not make a comeback to Windows until its placement on the start menu in a one-year update of Windows 10.[5]

Appearance and Functionality edit

The "menu" button takes the form of an icon consisting of three parallel horizontal lines (represented as ≡), reminiscent of a list.[6][7] The name refers to its likeness to the menu typically revealed or opened upon interaction. The broader button can be condensed to three vertically stacked dots (displayed as a tri-colon or vertical ellipsis ⋮ ), also known as a kebab icon, meatball icon, or falafel icon.[8] In the Microsoft Office 365 platform, a similar application menu featuring three rows of three squares is displayed.[9] Tapping, clicking, or otherwise activating this button reveals a menu, distinguishing it from a menu or tab bar that remains constantly visible.[10]

Advocates for alternative nicknames, such as the "oreo menu," argue for enhanced descriptiveness and user intuitiveness,[11] drawing upon the familiar structure of an oreo cookie.[12][13] Additional suggestions for alternative names, including sandwich, hotdog, pancake, tribar (or triple bar), and double OREO[8], among others, aim to broaden the range of descriptive options available. It's important to note that claims suggesting "hamburger" as the more prevalent term lack substantiation.[14][15]

Reception edit

Appearance edit

It has been discussed that while the collapsed menu button is now commonplace, its functionality may not be immediately obvious upon first encounter;[16] specifically, older users less familiar with modern iconography may find it perplexing.[17] The placement of the oreo menu icon also varies depending on the specific website or app.[17]

Usability

The menu button may increase interaction cost compared to a menu bar, requiring additional clicks to access the same information, albeit with the advantage of conserving screen space.[18] It allows the interface to maintain a clean look due to its simplicity and uses very little real estate.[19]

See also

Hamburger button

triple bar

References edit

  1. ^ "How to Create a Menu Icon". w3chools. Retrieved 15 April 2018.
  2. ^ "The origin of the hamburger icon". Evernote. Retrieved 2024-04-15.
  3. ^ Gonzalez, Ana (2020-04-13). "A Brief History of the Icon". Placeit Blog. Retrieved 2024-04-15.
  4. ^ "Microsoft First Used The Controversial Hamburger Menu In 1985". 2021-04-01. Archived from the original on 2021-04-01. Retrieved 2024-04-15.
  5. ^ Shaikh, Rafia (2016-04-04). "Here's How the New Windows 10 Anniversary Start Menu Looks Like". Wccftech. Retrieved 2024-04-15.
  6. ^ "Who Designed the Hamburger Icon?". Gizmodo. 2014-03-31. Retrieved 2024-04-15.
  7. ^ Sayles, Ashlee (2018-05-04). "Hamburger Menu | Web Design Trends | Michigan Web Design". Artonic. Retrieved 2024-04-15.
  8. ^ a b Appdrawn. "The Ultimate Web Menu Icon Glossary". www.appdrawn.com. Retrieved 2024-04-15.
  9. ^ Chuong Nguyen (2015-06-26). "Office 365 Store saves time with single sign-on to web apps". TechRadar. Retrieved 2024-04-15.
  10. ^ Constine, Josh (2014-05-24). "Kill The Hamburger Button". TechCrunch. Retrieved 2024-04-15.
  11. ^ April 08, Eric Berger; Information, 2024 The. "Oreo claims the hamburger menu as its own". www.campaignlive.com. Retrieved 2024-04-15.{{cite web}}: CS1 maint: numeric names: authors list (link)
  12. ^ "Oreo reckons it inspired the design of an ubiquitous UI icon". inkl. 2024-04-14. Retrieved 2024-04-15.
  13. ^ Joseph Foley (2024-04-14). "Oreo reckons it inspired the design of an ubiquitous UI icon". Creative Bloq. Retrieved 2024-04-15.
  14. ^ "Oreo craves change, turns internet's 'hamburger menu' into 'The Oreo Menu'". The Drum. Retrieved 2024-04-15.
  15. ^ Kaushik, Vikalp (2022-02-23). "Choose Correct Menu Icon for your Navigation?". Medium. Retrieved 2024-04-15.
  16. ^ "Hamburger icon: How these three lines mystify most people". BBC News. 2015-05-15. Retrieved 2024-04-15.
  17. ^ a b Weinberg, Michael (2023-09-01). "Is Your Website Menu Icon the Right One?". Boldist. Retrieved 2024-04-15.
  18. ^ Tsiodoulos, Dimitrios (2016). Comparison of hamburger and bottom bar menu on mobile devices for three level navigation (PDF). Stockholm Sweden.{{cite book}}: CS1 maint: location missing publisher (link)
  19. ^ "What is a hamburger icon (slide drawer navigation)? – TechTarget Definition". WhatIs. Retrieved 2024-04-15.

Category:Graphical control elements