Hamburger menu

Zestawienie ikony ze zdjęciem hamburgera
Hamburger menu
Ikona złożona z trzech linii
Hamburger
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

[edytuj | edytuj kod]
Hamburger menu (wraz z otwartym menu) na zrzucie ekranu aplikacji mobilnej

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

[edytuj | edytuj kod]
Ikony wykorzystane przez aplikacje Spotify, BBC News, Amex, BBC Sport, T-Mobile, Now TV

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

[edytuj | edytuj kod]
Hamburger menu w prawym górnym rogu przeglądarki internetowej

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ż

[edytuj | edytuj kod]

Uwagi

[edytuj | edytuj kod]
  1. ↑ Istnieje wiele wariantów tej nazwy.

Przypisy

[edytuj | edytuj kod]
  1. ↑ a b c Kelsey Campbell-Dollaghan: Who Designed the Hamburger Icon?. Gizmodo, 2014-03-31. [dostęp 2022-10-11]. (ang.).
  2. ↑ a b How TO - Mobile Navigation Menu. www.w3schools.com. [dostęp 2022-10-11]. (ang.).
  3. ↑ a b c Co to jest przycisk menu hamburgera?. technoglitz.com. [dostęp 2022-10-11]. (pol.).
  4. ↑ 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.).
  5. ↑ Krzysztof Kapusta: Menu systemowe - niewidoczny element Windows, który się czasem przydaje. CentrumXP, 2016-01-26. [dostęp 2022-10-11]. (pol.).
  6. ↑ a b Dan Nessler: To hamburger or not to hamburger. medium.com, 2016-02-25. [dostęp 2022-10-13]. (ang.).
  7. ↑ a b Ana Gonzalez: A Brief History of the Hamburger Icon. placeit.net. [dostęp 2022-10-12]. (ang.).
  8. ↑ Amy Schade: Supporting Mobile Navigation in Spite of a Hamburger Menu. www.nngroup.com, 2015-08-16. [dostęp 2022-10-14]. (ang.).
  9. ↑ Carrie Cousins: Loving & Hating the Hamburger Icon. www.webdesignerdepot.com, 2015-05-16. [dostęp 2022-10-14]. (ang.).
  10. ↑ Hamburger icon: How these three lines mystify most people. BBC News, 2018-09-17. [dostęp 2022-10-14]. (ang.).
  11. ↑ 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

[edytuj | edytuj kod]
Źródło: „https://pl.wikipedia.org/w/index.php?title=Hamburger_menu&oldid=73919089”