Vedd a kezedbe a telefonod, és nyisd meg bármelyik kedvenc alkalmazásodat vagy weboldaladat. Jó eséllyel az első dolog, amit a bal vagy a jobb felső sarokban meglátsz, három vastag, vízszintes vonal egymás alatt.
Ráböksz, és csodák csodájára lenyílik egy rejtett menü. Ezt a három vonalat a webfejlesztők és a dizájnerek világszerte csak úgy hívják: a Hamburger menü.
De vajon ki találta ki ezt a furcsa gombot? Miért pont egy gyorséttermi szendvicsről kapta a nevét? És tényleg annyira jó megoldás, mint amennyire elterjedt? Utazzunk vissza egy kicsit az időben!
A xerox és a 16×16 pixeles kihívás
Sokan azt hiszik, hogy a hamburger menüt az okostelefonok megjelenésével, valamikor a 2000-es évek végén találták fel az Apple vagy a Google mérnökei. A valóság azonban az, hogy ez az ikon idősebb, mint a legtöbb ember, aki ma a telefonját nyomkodja.
A három vonalat egy Norm Cox nevű dizájner rajzolta meg 1981-ben. Akkoriban a Xerox Star nevű munkaállomáson dolgozott, amely a világ egyik legelső grafikus felhasználói felülettel (GUI) rendelkező számítógépe volt.
Norm Cox feladata az volt, hogy tervezzen egy gombot, ami egy legördülő opciókat tartalmazó listát szimbolizál. A probléma az volt, hogy mindössze 16×16 pixel állt a rendelkezésére. Így született meg a három vonal: „Olyannak kellett lennie, mint egy egyszerű közúti táblának – memorizálhatónak és letisztultnak” – nyilatkozta később Cox.
A halál és a feltámadás
A Xerox Star után a hamburger ikon hosszú évtizedekre eltűnt. Ahogy a számítógépek monitorai egyre nagyobbak lettek, a szoftverek (mint a Windows vagy a Mac) kényelmesen el tudták helyezni a menüpontokat a képernyő tetején, egymás mellett (Fájl, Szerkesztés, Nézet stb.). Nem volt szükség arra, hogy „elrejtsék” őket egyetlen gomb mögé.
Aztán 2007-ben megjelent az iPhone, és vele együtt az okostelefonok forradalma. A képernyők hirtelen ismét brutálisan kicsik lettek. A dizájnerek pánikba estek: Hová tegyünk ennyi menüpontot egy ekkora kijelzőn?
Ekkor valaki (valószínűleg a Tweetie nevű népszerű Twitter-kliens fejlesztője 2008 környékén) előásta Norm Cox 1981-es zseniális ikonját, és leporolta. A három vonal tökéletes volt arra, hogy jelezze: „Itt egy lista, bökj ide, és lenyílik”.
De miért pont „Hamburger”?
Ahogy az ikon futótűzként kezdett elterjedni a mobilalkalmazásokban, a fejlesztőknek és a dizájnereknek kellett egy rövidebb név a „három vízszintes vonal ikon” helyett.
Ránéztek a formára, és meglátták benne a tökéletes sziluettet:
- 🍔 Felső vonal: A hamburger zsemléjének teteje.
- 🥩 Középső vonal: A szaftos húspogácsa (esetleg egy kis sajt).
- 🍞 Alsó vonal: A zsemle alja.
A név annyira találó és vicces volt, hogy pillanatok alatt megragadt a szakmában, és ma már hivatalosan is így hívja mindenki a Szilícium-völgytől Budapestig.
Tényleg ez a legjobb megoldás?
Bár a hamburger menü zseniálisan spórol a hellyel, a modern UX (felhasználói élmény) szakértők kezdenek rájönni egy hatalmas hibájára: Ami nincs szem előtt, az nincs a fejekben sem.
Mivel a menüpontok el vannak rejtve a három vonal mögé, a felhasználóknak egy extra kattintásba kerül, hogy egyáltalán lássák, mit lehet csinálni az oldalon. Éppen ezért a legfontosabb gombokat (pl. Kosár, Kapcsolat) ma már tilos elrejteni a hamburgerbe. Ezért látod egyre több alkalmazás alján (pl. Facebook, Instagram) a folyamatosan látható ikon-sort (Tab bar) a hamburger helyett.
A konverzió a részletekben rejlik
Egy rossz helyre tett menügomb a bevételed 20%-ába is kerülhet. A WebMetánál nem csak szép gombokat rajzolunk, hanem pontosan tudjuk, mikor kell hamburger menüt használni, és mikor kell a vevő orra elé tolni a lényeget. Ha professzionális weboldalt szeretnél, vedd fel velünk a kapcsolatot!
