Hamburger button

Last updated
Hamburger icon.svg
Collapsed menu icon as used on the Hamburger Button
NCI Visuals Food Hamburger.jpg
A hamburger, the origin of the nickname

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.

Contents

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

A hamburger menu in a previous version of the Wikipedia mobile app Editing Wikipedia mobile screenshot p 16, Penny Cyclopaedia with menu.png
A hamburger menu in a previous version of the Wikipedia mobile app

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 ), also known as a kebab icon, meatball icon or falafel icon. In the Microsoft Office 365 platform, a similar application menu consisting of three rows of three squares is displayed. [11] 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. [12]

Reception

Appearance

It has been argued that while the collapsed menu button is now commonplace, its functionality is not necessarily immediately obvious when first encountered; [13] in particular, older users less familiar with modern iconography may find it confusing. [14]

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. [15] It has also been argued that designers tend to overload these icons with too much hidden information. [14]

See also

Related Research Articles

The ellipsis..., . . ., or , also known informally as dot-dot-dot, is a series of dots that indicates an intentional omission of a word, sentence, or whole section from a text without altering its original meaning. The word originates from the Ancient Greek: ἔλλειψις, élleipsis meaning 'leave out'.

Graphical user interface User interface allowing interaction through graphical icons and visual indicators

The graphical user interface is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, instead of text-based user interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.

In computing, a window is a graphical control element. It consists of a visual area containing some of the graphical user interface of the program it belongs to and is framed by a window decoration. It usually has a rectangular shape that can overlap with the area of other windows. It displays the output of and may allow input to one or more processes.

The Dock is a prominent feature of the graphical user interface of macOS. It is used to launch applications and to switch between running applications. The Dock is also a prominent feature of macOS's predecessor NeXTSTEP and OpenStep operating systems. The earliest known implementations of a dock are found in operating systems such as RISC OS and NeXTSTEP. iOS has its own version of the Dock for the iPhone and iPod Touch, as does iPadOS for the iPad.

Menu (computing) List of options or commands within a computer program

In computing and telecommunications, a menu is a list of options or commands presented to the user of a computer or communications system. A menu may either be a system's entire user interface, or only part of a more complex one.

File Explorer

File Explorer, previously known as Windows Explorer, is a file manager application that is included with releases of the Microsoft Windows operating system from Windows 95 onwards. It provides a graphical user interface for accessing the file systems. It is also the component of the operating system that presents many user interface items on the screen such as the taskbar and desktop. Controlling the computer is possible without Windows Explorer running.

A taskbar is an element of a graphical user interface which has various purposes. It typically shows which programs are currently running.

Graphical widget Element of interaction in a graphical user interface

A graphical widget in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, GTK, and Cocoa, contain a collection of controls and the logic to render these.

Window manager Type of system software

A window manager is system software that controls the placement and appearance of windows within a windowing system in a graphical user interface. Most window managers are designed to help provide a desktop environment. They work in conjunction with the underlying graphical system that provides required functionality—support for graphics hardware, pointing devices, and a keyboard, and are often written and created using a widget toolkit.

The Start menu is a graphical user interface element used in Microsoft Windows since Windows 95 and in some other operating systems. It provides a central launching point for computer programs and performing other tasks. It has different names in different operating systems and window managers, such as Kickoff Application Launcher in KDE, Dash in GNOME and Unity, and Start screen in Windows 8.

A menu bar is a graphical control element which contains drop-down menus.

Tiling window manager

In computing, a tiling window manager is a window manager with an organization of the screen into mutually non-overlapping frames, as opposed to the more popular approach of coordinate-based stacking of overlapping objects (windows) that tries to fully emulate the desktop metaphor.

The Windows shell is the graphical user interface for the Microsoft Windows operating system. Its readily identifiable elements consists of the desktop, the taskbar, the Start menu, the task switcher and the AutoPlay feature. On some versions of Windows, it also includes Flip 3D and the charms. In Windows 10, the Windows Shell Experience Host interface drives visuals like the Start Menu, Action Center, Taskbar, and Task View/Timeline. However, the Windows shell also implements a shell namespace that enables computer programs running on Windows to access the computer's resources via the hierarchy of shell objects. "Desktop" is the top object of the hierarchy; below it there are a number of files and folders stored on the disk, as well as a number of special folders whose contents are either virtual or dynamically created. Recycle Bin, Libraries, Control Panel, This PC and Network are examples of such shell objects.

In computing, the icon bar is the name of the dock in Acorn's RISC OS operating system, and is fundamental to the OS. Its introduction in 1987 was a new concept in GUIs. It displays icons through which access is provided to all parts of the computer that a typical user will require, from physical devices and system utilities to running applications, and will usually be their starting point for interacting with the system once it has finished booting.

<i>Microsoft Solitaire Collection</i>

Microsoft Solitaire Collection is a video game included with Windows 10. It is developed by Next Level Games via the Microsoft Casual Games. It replaces Solitaire, FreeCell and Spider Solitaire included with the previous versions of Windows. It also adds Pyramid and TriPeaks to Windows for the first time and introduces new daily challenges and themes. Unlike the games included in Windows 7 and earlier versions, Microsoft Solitaire Collection is freemium adware with Xbox Live integration. The app's hub-based design was originally inspired by the design for Windows 8's Start screen in 2012. At the time, the developers considered the game a tool for helping users become more familiar with Windows 8. Unlike its predecessors, Microsoft Solitaire Collection is updated from Windows Store and communicates with a Microsoft server in order to track achievements and offer daily challenges.

Norm Cox (designer) American interaction designer

Norman Lloyd "Norm" Cox is an American interaction designer best known for inventing the hamburger icon.

Microsoft Photos

Microsoft Photos is Microsoft's modern image organizer, graphics editor, and video editor. It was first included in Windows 8 as a functional replacement for Windows Photo Viewer. Photos has Microsoft Sway integration and can use selected photos as a source for creating a Sway project. Users can also upload photos to OneDrive, Facebook, Twitter, Instagram and GroupMe for sharing.

Fluent Design System

Fluent Design System, officially unveiled as Microsoft Fluent Design System, is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language that includes guidelines for the designs and interactions used within software designed for all Windows 10 devices and platforms. The system is based on five key components: Light, Depth, Motion, Material, and Scale. The new design language includes more prominent use of motion, depth, and translucency effects.

Android Pie Ninth major version of the Android mobile operating system

Android Pie is the ninth major release and the 16th version of the Android mobile operating system. It was first released as a developer preview on March 7, 2018, and was released publicly on August 6, 2018.

References

  1. "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. "A Brief History of the Hamburger Icon". Placeit Blog. 2014-10-29. Retrieved 2019-02-23.
  7. Ali, Fahad (2015-05-13). "Microsoft First Used The Controversial Hamburger Menu In 1985". windowschimp.com. Retrieved 2019-06-12.
  8. Doppelhammer, Jim. "Windows Elements". doublehammer.com. Retrieved 2019-06-12.
  9. Shaikh, Rafia (2016-04-04). "Here's How the New Windows 10 Anniversary Start Menu Looks Like". wccftech.com. Retrieved 2019-06-12.
  10. 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.
  11. 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.
  12. Constine, Josh (May 24, 2014). "Kill the hamburger buttons". TechCrunch . Archived from the original on 2016-08-19. Retrieved April 10, 2015.
  13. 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.
  14. 1 2 "Loving & Hating the Hamburger Icon". Webdesigner Depot. 2018-09-17. Retrieved 2019-02-23.
  15. 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.