Hamburger Menu eli hampurilaisvalikko on kolmen vaakaviivan muodostama ikoni (☰), joka piilottaa ja avaa navigaatiovalikon painalluksesta. Se on vakiintunut standardi mobiilinäkymissä, joissa tila on rajallista eikä horisontaalinen navigaatiopalkki mahdu näytölle. Nimi tulee ikonin muistuttavuudesta hampurilaisesta, jossa kolme kerrosta (sämpylä-pihvi-sämpylä) on päällekkäin.
Miksi hamburger-menu on yleinen
Responsiivisen suunnittelun myötä verkkosivujen täytyy toimia niin pöytäkoneella kuin älypuhelimessa. Desktop-näkymässä navigaatiossa voi olla kuusi linkkiä vierekkäin, mutta 375 pikselin levyisellä älypuhelimen ruudulla tämä on mahdotonta. Hamburger-menu ratkaisee tämän: se vie vain pienen ikonin verran tilaa mutta sisältää koko navigaation.
Käyttäjät ovat oppineet tunnistamaan hamburger-ikonin välittömästi navigaation merkiksi. Se on web-designin universaali kieli, ymmärretty ympäri maailmaa ilman tekstiä. Tämä tekee siitä tehokkaan ratkaisun pienille näytöille.
Hamburger-menun toiminta
Kun käyttäjä napauttaa hamburger-ikonia, navigaatiovalikko avautuu. Toteutustapoja on useita: koko näytön peittävä overlay-valikko, joka liukuu ylhäältä tai sivulta, tai paikallaan oleva pudotusvalikko, joka työntää sisältöä alaspäin.
Kun valikko on auki, hamburger-ikoni muuttuu usein X-merkiksi (✕), joka kertoo käyttäjälle, miten valikko suljetaan. Vaihtoehtoisesti käyttäjä voi sulkea valikon klikkaamalla sen ulkopuolelle tai valitsemalla jonkin linkin.
Hyvässä hamburger-menussa on selkeät, suuret klikkauspinnat, jotka toimivat hyvin kosketusnäytöllä. CTA-painike kuten “Ota yhteyttä” on usein korostettuna valikon yläosassa, jotta se erottuu muista linkeistä.
Kritiikit ja vaihtoehdot
Hamburger-menu on saanut myös kritiikkiä. Tutkimukset osoittavat, että piilottaminen vähentää navigaation käyttöä — “out of sight, out of mind”. Kun linkit eivät ole heti näkyvissä, käyttäjät eivät tutki sivustoa yhtä aktiivisesti. Tämä voi vaikuttaa negatiivisesti konversioon.
Vaihtoehtoina on esitetty priority+ -navigaatiota, jossa tärkeimmät linkit näkyvät aina ja vähemmän tärkeät menevät “More”-valikon taakse. Tai tab bar -navigaatiota (tyypillinen mobiilisovelluksissa), jossa 3–5 ikonipohjaista linkkiä on näkyvissä näytön alareunassa.
Pk-yrityksen sivustolla hamburger-menu on kuitenkin yleensä paras ratkaisu yksinkertaisuutensa ja tuttuutensa vuoksi. Tärkeintä on, että CTA-painike (esim. “Soita” tai “Ota yhteyttä”) näkyy myös headerissa ilman valikon avaamista.
Hamburger-menu parhaimmillaan
Hyvä hamburger-menu on nopea, selkeä ja intuitiivinen. Se avautuu sujuvasti ilman viivettä, sulkeutuu helposti, ja sisältää kaikki tärkeät linkit loogisessa järjestyksessä. Animaatiot ovat hienovaraisia mutta informatiivisia — käyttäjä ymmärtää, mitä tapahtuu.
Saavutettavuus on tärkeää: hamburger-ikonin pitää olla riittävän suuri (vähintään 44x44 pikseliä) ja sen pitää toimia myös näppäimistöllä ja ruudunlukijalla. ARIA-attribuutit kertovat avustavan teknologian käyttäjille, että kyseessä on navigaatiovalikko.
Yhteenveto
Hamburger Menu on mobiilinavigaation de facto -standardi. Se säästää tilaa, on universaalisti ymmärretty ja mahdollistaa kattavan navigaation pienellä näytöllä. Pk-yritykselle se tarkoittaa parempaa mobiilikokemusta, joka on kriittinen, koska yli 60% verkkoliikenteestä tulee mobiililaitteista. Hyvin toteutettu hamburger-menu tekee sivustosta helpon käyttää älypuhelimella — ja hyvä mobiilikokemuksen on hyvää liiketoimintaa.