Hampurilaisvalikko: hyödyt ja haitat sekä esimerkkejä verkkokaupoista

Yhä useammat ihmiset tekevät ostoksia mobiililaitteillaan, joten verkkosivustojen on toimittava hyvin myös pienillä näytöillä ja oltava helppokäyttöisiä. Puhelimen näytöllä tilaa on kuitenkin rajallisesti. Jos navigointivalikko on ahdas tai sekava, kävijä voi helposti siirtyä muualle tekemään ostoksensa.

Siksi monet verkkosivustot ja sovellukset käyttävät mobiilinavigoinnissa hampurilaisvalikkoa. Kolmesta vaakaviivasta koostuva kuvake on laajalti tunnettu merkki siitä, että sen takaa löytyy lisää navigointivaihtoehtoja. Sen avulla koko valikko voidaan avata yhdellä painalluksella.

Tässä artikkelissa tutustutaan hampurilaisvalikon hyötyihin ja haasteisiin, sen historiaan ja keskeisiin ominaisuuksiin sekä siihen, miten sitä voi hyödyntää mobiilisivuston suunnittelussa.

Mikä on hampurilaisvalikko?

Pitkään verkkosivustojen navigointi perustui vaakasuoraan valikkoon, jossa eri osiot oli lueteltu näytön yläreunassa. Kun mobiililaitteiden käyttö yleistyi nopeasti 2000-luvun lopulla ja 2010-luvun alussa älypuhelinteknologian ja mobiiliyhteyksien kehityksen ansiosta, verkkosuunnittelijat tarvitsivat tilaa säästävämmän ratkaisun.

Ratkaisuksi tuli hampurilaisvalikko (☰). Sen kuvakkeessa on kolme vaakasuoraa viivaa, jotka muistuttavat hampurilaisen sämpylää ja pihviä. Kuvaketta napauttamalla käyttäjä voi avata ja sulkea navigointivalikon tarpeen mukaan. Hampurilaisvalikon painike sijaitsee yleensä verkkosivuston tai sovelluksen vasemmassa tai oikeassa yläkulmassa.

Hampurilaisvalikon historia

Hampurilaisvalikko on itse asiassa mobiililaitteita vanhempi keksintö. Suunnittelija Norm Cox loi sen 1980-luvun alussa Xerox Star -työaseman graafiseen käyttöliittymään. Työasema oli yksi alkuperäisen Apple Macintoshin käyttöliittymän edeltäjistä. Cox halusi luoda yksinkertaisen ja helposti tunnistettavan kuvakkeen, jonka avulla käyttäjä voisi avata toimintovalikon yhdellä napsautuksella.

Kuvake jäi alkuvuosinaan vähälle käytölle ja lähes unohtui, kunnes matkapuhelinten käyttö yleistyi noin vuonna 2009. Pienillä näytöillä tarvittiin tapa näyttää valikkovaihtoehdot viemättä liikaa tilaa tai tekemättä käyttöliittymästä sekavaa. Hampurilaisvalikon kompakti muoto sopi tähän tarkoitukseen hyvin.

Hampurilaisvalikko yleistyi entisestään, kun Twitter ja muut mobiilisovellukset ottivat sen käyttöön. Se esiintyi myös iPhone 3GS Sanelin-sovelluksessa, jossa sitä käytettiin iOS 4 -käyttöjärjestelmän yhteydessä. Näin kuvakkeesta tuli yhä tutumpi merkki piilotetusta navigointivalikosta.

Hampurilaisvalikon hyödyt ja haitat

Hampurilaisvalikot ovat ihanteellisia mobiililaitteille, mutta navigointipalkit ja välilehtivalikot saattavat palvella pöytäkoneiden käyttäjiä paremmin. Tässä syyt:

Hyödyt

Hampurilaisvalikon tärkein etu on sen pieni koko. Se säästää arvokasta näyttötilaa ja pitää verkkosivuston ulkoasun selkeänä erityisesti pienillä näytöillä, kuten älypuhelimissa.

Kun käyttäjä napauttaa hampurilaiskuvaketta, navigointivalikko avautuu esimerkiksi sivulta liukuvana valikkona, pudotusvalikkona tai koko näytön peittävänä näkymänä. Näin sivuston navigointi pysyy helposti saatavilla viemättä jatkuvasti tilaa muulta sisällöltä, mikä voi parantaa mobiilikäyttökokemusta.

Haitat

Vaikka hampurilaisvalikko säästää tilaa, sen käyttö pöytäkoneilla voi vaikeuttaa sivuston sisällön löytämistä. Jos käyttäjä ei tunnista valikkokuvaketta, hän saattaa ohittaa sen ja jäädä paitsi tärkeistä sivuista tai navigointivaihtoehdoista.

Ongelmaa voi ehkäistä käyttämällä responsiivisia teemoja, joissa navigointi mukautuu käytettävän laitteen mukaan. Pöytäkoneella sivusto voi näyttää perinteisen vaakasuuntaisen navigointipalkin, kun taas mobiililaitteella valikko voidaan korvata hampurilaisvalikolla, joka säästää näyttötilaa.

Käytännön esimerkkejä: hampurilaisvalikot toiminnassa

Responsiivisessa verkkosivustossa hampurilaisvalikko näkyy usein vain mobiililaitteilla, kun taas pöytäkoneilla käytetään perinteistä navigointivalikkoa. Seuraavat kaksi verkkokauppaa ovat hyviä esimerkkejä hampurilaisvalikon toimivasta käytöstä:

TCB Jeans

TCB Jeans pitää asiat yksinkertaisina käyttämällä perinteistä kolmen viivan hampurilaisvalikkopainiketta mobiilisivustonsa yläreunassa. Kun sitä napsauttaa, vasemmalta liukuu esiin lista linkkejä, mukaan lukien Etusivu, Tuotteet ja Tietoa meistä. Tuotteet-linkin vieressä on pieni plusmerkki, joka vihjaa lisävaihtoehtojen löytyvän napauttamalla.

TCB käyttää hampurilaisvalikkoa myös pöytäkoneversiossaan. Näin sivustolla voidaan näyttää koko näytön levyinen taustakuva ja nostaa houkuttelevat tarjoukset esiin. Mobiiliversiossa valikko avautuu sivun päälle liukuvana kerroksena. Tämä auttaa käyttäjää hahmottamaan, että valikon voi sulkea ja palata sen alla olevaan sivuun.

TCB hampurilaisvalikon vahvuuksia ovat:

• Selkeä. Hampurilaisvalikko pitää mobiilisivuston navigoinnin selkeänä, sillä kaikki valikkovaihtoehdot eivät vie tilaa näytöltä samanaikaisesti.
• Helposti tunnistettava. Hampurilaisvalikko on yleinen mobiilisivustoilla, joten useimmat käyttäjät tunnistavat sen helposti.
• Tuotteiden korostaminen. Kun navigointivalikko on piilossa kuvakkeen takana, tuotekuvat saavat enemmän tilaa ja tuotteet pääsevät paremmin esille.

Gymshark

Gymsharkin verkkosivusto on loistava esimerkki siitä, kuinka pöytäkoneversio voi erota mobiilioptimoidusta versiosta. Pöytäkoneella ei ole hampurilaisvalikkoa, mutta mobiilissa se ilmestyy vasempaan yläkulmaan. Sen napauttaminen paljastaa hakukentän ja tuotekategorioiden alivalikot. Etusivulle pääsee takaisin napauttamalla X-kuvaketta oikeasta yläkulmasta.

Gymsharkin hampurilaisvalikko nostaa tarjoukset ja uutuudet ensimmäiseksi, jotta asiakkaat huomaavat ne heti. Valikko on myös helppokäyttöinen: painike sijaitsee tutulla paikalla, ja sen takaa avautuu selkeä lista vaihtoehdoista.

Vinkkejä toimivan hampurilaisvalikon suunnitteluun

Näillä kuudella vinkillä voit tehdä hampurilaisvalikosta selkeämmän ja helpommin käytettävän sekä parantaa konversioita.

Pidä valikko helposti löydettävissä

Hampurilaisvalikko on yleensä pieni, joten sen on erotuttava selkeästi muusta sisällöstä. Sijoita kuvake näytön vasempaan tai oikeaan yläkulmaan, jotta käyttäjät voivat löytää sen. Pidä sijainti samana kaikilla sivustosi sivuilla.

Käytä tuttua hampurilaiskuvaketta

Käytä yleisesti tunnettua kolmen vaakaviivan kuvaketta (☰). Useimmat käyttäjät tunnistavat sen ja ymmärtävät, että sitä napauttamalla saa navigointivalikon auki.

Aseta valikkokohteet tärkeysjärjestykseen

Järjestä valikkokohteet loogisesti. Voit lisätä valikkoon hakukentän ja sijoittaa tärkeimmät ja useimmin käytetyt kategoriat tai sivut listan alkuun.

Huomioi mobiilikäyttö ja saavutettavuus

Varmista, että valikko toimii hyvin eri mobiililaitteilla ja kosketusnäytöillä. Valikkokohteiden on oltava riittävän suuria, jotta niitä on helppo painaa sormella.

Lisää animaatioita ja visuaalisia vihjeitä

Hienovaraiset tehosteet auttavat käyttäjää hahmottamaan, miten valikko toimii. Esimerkiksi kolme viivaa voivat muuttua X- tai +-merkiksi, kun valikko avataan tai suljetaan. Viivojen paksuus tai pituus voi myös muuttua hieman. Häivytykset ja siirtymät tekevät valikon käytöstä sujuvampaa. Voit myös vaihtaa kuvakkeen väriä tai lisätä siihen kevyen painallustehosteen.

Testaa valikkoa ja kerää palautetta

Testaa hampurilaisvalikkoa oikeilla käyttäjillä ennen sen viimeistelyä. Tarkkaile, miten he käyttävät sitä, ja kerää palautetta, jotta voit tehdä tarvittavia parannuksia.

Hampurilaisvalikon käyttö muiden navigointityökalujen kanssa

Joskus sivustosta saa toimivamman yhdistelemällä erilaisia painikkeita ja valikoita. Jokaisella vaihtoehdolla on omat vahvuutensa ja heikkoutensa, mutta yhdessä ne voivat tehdä sivustolla liikkumisesta sujuvampaa ja tehokkaampaa.

Verkkokaupassa navigoinnin tulisi auttaa asiakkaita löytämään tuotteet helposti ja siirtymään sujuvasti ostoskoriin ja kassalle. Varmista, että kaikkia navigointielementtejä on helppo käyttää kosketusnäytöllä. Kokeile erilaisia yhdistelmiä ja testaa, mikä toimii parhaiten kohderyhmällesi:

• Ylävalikko ja hampurilaisvalikko. Näytä ylävalikossa tärkeimmät kategoriat ja toiminnot, kuten kauppa ja ostoskori. Sijoita harvemmin tarvittavat linkit, kuten Tietoa meistä, Yhteystiedot, Asiakaspalvelu ja Käytännöt, hampurilaisvalikkoon. Näin sivun ilme pysyy selkeänä, mutta käyttäjät löytävät silti tarvitsemansa tiedot helposti.
• Välilehdet ja hampurilaisvalikko. Käytä tuotekategoriasivuilla välilehtiä, joiden avulla asiakkaat voivat rajata tai lajitella tuotteita esimerkiksi uutuuksien, myydyimpien tuotteiden tai hinnan mukaan. Näin tuotteiden etsiminen on helpompaa, kun asiakas on ensin siirtynyt oikeaan osioon hampurilaisvalikon kautta.
• Kiinnitetty ylävalikko ja hampurilaisvalikko. Pidä tärkeimmät pikalinkit päätuoteryhmiin näkyvissä kiinnitetyssä ylävalikossa, joka pysyy näytön yläreunassa sivua vieritettäessä. Hampurilaisvalikkoon voi sijoittaa linkit harvemmin käytetyille sivuille.

Esimerkiksi Fly by Jingin verkkokaupassa hampurilaisvalikko sisältää laajan valikoiman linkkejä eri osioihin. Kauppasivulla tuotteita voi puolestaan rajata neljän välilehden avulla: ”Kastikkeet”, ”Setit”, ”Ruokakomero” ja ”Tuotteet”.