Hamburger menu

Zestawienie ikony ze zdjęciem hamburgera

Ikona złożona z trzech linii

Hamburger – kotlet umieszczony pomiędzy dwoma kawałkami bułki

Hamburger menu^[a] – nazwa ikony złożonej z trzech równolegle położonych poziomych linii, która symbolizuje listę menu^[1]. Po jej naciśnięciu na ekranie wyświetlacza rozwija się (bądź chowa) lista kategorii, podstron itp. Umieszczana jest zwykle w górnym rogu graficznego interfejsu użytkownika^[2]. Nazwa ikony nawiązuje do warstw hamburgera, choć sama geneza nazwy nie jest jasna^[3].

Historia

Ikona została zaprojektowana przez amerykańskiego projektanta interakcji Norma Coksa, jako element interfejsu użytkownika stacji roboczej Xerox Star^[1]. Xerox Star został wprowadzony na rynek w 1981 roku i był jednym z pierwszych komercyjnych komputerów posiadających graficzny interfejs użytkownika. Według Coksa hamburger menu miało być czymś w rodzaju pojemnika na menu kontekstowe. Zaprojektowane zostało z myślą, aby być łatwe do zapamiętania, proste i funkcjonalne w realiach niewielkiej ilości dostępnych pikseli. Design miał przywodzić na myśl rezultat wyświetlonej listy menu^[1].

W 1985 roku ikona była wykorzystywana w środowisku Windows 1.0.1 do wywołania menu systemowego^[4]. W późniejszych wersjach systemów Windows ikona z trzema poziomo położonymi liniami została zastąpiona przez ikonę z jedną linią, która to, wraz z wydaniem środowiska Windows 95, została wyparta przez miniaturowe ikony aplikacji^[5]. Hamburger menu ponownie zostało wykorzystane przez Microsoft, w systemie operacyjnym Windows 10, znajdując zastosowanie w Menu Start^[3].

Zastosowanie

Wraz z rozwojem rynku mobilnego, aplikacji mobilnych i rozpowszechnianiem responsywnego projektowania stron internetowych hamburger menu zyskało znaczną popularność^[6]. Jest często wykorzystywane przy projektowaniu stron internetowych, szczególnie na urządzenia mobilne, gdzie stanowi branżowy standard^[7]. Smartfony są ograniczone niewielkim rozmiarem ekranu, przez co twórcy stron i aplikacji, aby zaoszczędzić nieco miejsca, używają tej ikony do reprezentowania bocznego menu^[7]. Czasami ikona złożona z trzech linii redukowana jest do postaci pionowego wielokropka^[3]. Do implementacji funkcjonalności menu stosuje się język JavaScript^[2].

Krytyka

Pomimo popularności wykorzystywanie ikony do wyświetlania nawigacji spotyka się z krytyką projektantów stron internetowych^[6]^[8]. Nie wszyscy użytkownicy komputerów i urządzeń mobilnych rozpoznają ikonę i wiedzą o jej zastosowaniu, dotyczy to w szczególności osób starszych^[9]. Testy A/B przeprowadzone przez web developera Jamesa Fostera wskazywały, że dołączenie do ikony słowa Menu (lub zastąpienie jej tym słowem) zwiększa klikalność^[10]. Jednak testy A/B wykonane przez zespół Booking.com nie potwierdziły tej tezy^[11].

Zobacz też

Uwagi

↑ Istnieje wiele wariantów tej nazwy.

Przypisy

↑ ^a ^b ^c Kelsey Campbell-Dollaghan: Who Designed the Hamburger Icon?. Gizmodo, 2014-03-31. [dostęp 2022-10-11]. (ang.).
↑ ^a ^b How TO - Mobile Navigation Menu. www.w3schools.com. [dostęp 2022-10-11]. (ang.).
↑ ^a ^b ^c Co to jest przycisk menu hamburgera?. technoglitz.com. [dostęp 2022-10-11]. (pol.).
↑ Fahad Ali: Microsoft First Used The Controversial Hamburger Menu In 1985. www.windowschimp.com, 2015-05-13. [dostęp 2022-10-11]. [zarchiwizowane z tego adresu (2021-04-01)]. (ang.).
↑ Krzysztof Kapusta: Menu systemowe - niewidoczny element Windows, który się czasem przydaje. CentrumXP, 2016-01-26. [dostęp 2022-10-11]. (pol.).
↑ ^a ^b Dan Nessler: To hamburger or not to hamburger. medium.com, 2016-02-25. [dostęp 2022-10-13]. (ang.).
↑ ^a ^b Ana Gonzalez: A Brief History of the Hamburger Icon. placeit.net. [dostęp 2022-10-12]. (ang.).
↑ Amy Schade: Supporting Mobile Navigation in Spite of a Hamburger Menu. www.nngroup.com, 2015-08-16. [dostęp 2022-10-14]. (ang.).
↑ Carrie Cousins: Loving & Hating the Hamburger Icon. www.webdesignerdepot.com, 2015-05-16. [dostęp 2022-10-14]. (ang.).
↑ Hamburger icon: How these three lines mystify most people. BBC News, 2018-09-17. [dostęp 2022-10-14]. (ang.).
↑ Michel Ferreira: Would you like fries with that? Discussing the Hamburger Icon.. Booking.com, 2015-09-21. [dostęp 2022-10-14]. (ang.).

Linki zewnętrzne

Hamburger menu na filmie przedstawiającym interfejs Xerox Star

[1] Istnieje wiele wariantów tej nazwy.

[gizmodo-2] Kelsey Campbell-Dollaghan: Who Designed the Hamburger Icon?. Gizmodo, 2014-03-31. [dostęp 2022-10-11]. (ang.).

[w3schools-3] How TO - Mobile Navigation Menu. www.w3schools.com. [dostęp 2022-10-11]. (ang.).

[technoglitz-4] Co to jest przycisk menu hamburgera?. technoglitz.com. [dostęp 2022-10-11]. (pol.).

[5] Fahad Ali: Microsoft First Used The Controversial Hamburger Menu In 1985. www.windowschimp.com, 2015-05-13. [dostęp 2022-10-11]. [zarchiwizowane z tego adresu (2021-04-01)]. (ang.).

[6] Krzysztof Kapusta: Menu systemowe - niewidoczny element Windows, który się czasem przydaje. CentrumXP, 2016-01-26. [dostęp 2022-10-11]. (pol.).

[medium-7] Dan Nessler: To hamburger or not to hamburger. medium.com, 2016-02-25. [dostęp 2022-10-13]. (ang.).

[placeit-8] Ana Gonzalez: A Brief History of the Hamburger Icon. placeit.net. [dostęp 2022-10-12]. (ang.).

[9] Amy Schade: Supporting Mobile Navigation in Spite of a Hamburger Menu. www.nngroup.com, 2015-08-16. [dostęp 2022-10-14]. (ang.).

[10] Carrie Cousins: Loving & Hating the Hamburger Icon. www.webdesignerdepot.com, 2015-05-16. [dostęp 2022-10-14]. (ang.).

[11] Hamburger icon: How these three lines mystify most people. BBC News, 2018-09-17. [dostęp 2022-10-14]. (ang.).

[12] Michel Ferreira: Would you like fries with that? Discussing the Hamburger Icon.. Booking.com, 2015-09-21. [dostęp 2022-10-14]. (ang.).

[a]