Navigaatiopalkki (navigation bar, navbar) on verkkosivuston päävalikko, joka sisältää linkit tärkeimpiin sivuihin ja osioihin. Se sijaitsee tyypillisesti headerin osana sivun yläreunassa ja on yksi keskeisimmistä käytettävyyselementeistä. Hyvä navigaatiopalkki tekee sivustosta helpon käyttää; huono ajaa kävijät pois.
Navigaatiopalkin rakenne
Klassinen navigaatiopalkki on horisontaalinen linkkilista, jossa on 5–7 päälinkkiä. Tämä määrä perustuu kognitiiviseen psykologiaan: ihminen pystyy prosessoimaan noin 7±2 vaihtoehtoa kerralla ilman ylikuormitusta. Liian monta linkkiä tekee valitsemisesta vaikeaa; liian vähän voi tarkoittaa, että tärkeä sisältö on liian syvällä.
Pk-yrityksen sivustolla tyypillinen navigaatio voisi olla: Etusivu, Palvelut, Referenssit, Tietoa meistä, Blogi, Yhteystiedot. Näiden lisäksi voi olla korostettu CTA-painike kuten “Pyydä tarjous”, joka erottuu visuaalisesti muista linkeistä.
Dropdown-valikot (alasvetovalikot) mahdollistavat hierarkkisen rakenteen, jossa päälinkin alta avautuu alasivujen lista. Esimerkiksi “Palvelut” voi avata listan eri palvelutyypeistä. Tämä pitää navigaation siistin mutta tarjoaa pääsyn syvempään sisältöön.
Navigaation käytettävyysperiaatteet
Hyvä navigaatio on ennakoitava. Käyttäjä ei saa joutua arvailemaan, missä tieto on — linkkilabelien tulee olla selkeitä ja kuvaavia. “Palvelut” on parempi kuin “Mitä teemme”; “Yhteystiedot” on parempi kuin “Keskustellaan”.
Johdonmukaisuus on kriittistä. Navigaatiopalkin pitää näyttää samalta ja toimia samalla tavalla kaikilla sivuilla. Aktiivisen sivun korostus auttaa käyttäjää hahmottamaan, missä hän on — esimerkiksi alleviivaus tai eri väri nykyisellä sivulla.
Navigaation pitää olla helposti saavutettavissa. Siksi se on lähes aina ylhäällä headerissa — ensimmäinen paikka, josta käyttäjä etsii sitä. Joissakin tapauksissa käytetään myös footer-navigaatiota toissijaisena reittinä.
Mobiilinavigaatio
Desktop-näkymän horisontaalinen navigaatiopalkki ei mahdu älypuhelimen näytölle. Mobiilinäkymässä navigaatio piilotetaan tyypillisesti hamburger-menun taakse (☰-ikoni). Kun käyttäjä klikkaa ikonia, navigaatio avautuu joko koko näytön peittävänä overlay-valikona, sivulta liukuvana drawer-valikona tai pudotusvalikkona.
Hyvä mobiilinavigaatio on nopea avata, selkeä käyttää ja helppo sulkea. CTA-painikkeen pitäisi olla näkyvissä myös mobiilissa — esimerkiksi “Soita” tai “Ota yhteyttä” -painike voi olla headerissa hamburger-menun vieressä.
Erikoisnavigaatiotyypit
Mega menu on laaja, usein koko näytön levyinen pudotusvalikko, joka näyttää kaikki alasivut visuaalisessa gridissä, mahdollisesti kuvien kera. Tämä sopii suurille sivustoille, joilla on paljon sisältöä ja jotka haluavat esitellä sitä visuaalisesti.
Sticky navigation eli kiinnittyvä navigaatio pysyy näytön yläreunassa myös vierityksen aikana, jolloin se on aina saatavilla. Tämä parantaa käytettävyyttä etenkin pitkillä sivuilla.
Side navigation eli sivunavigaatio on pystysuora valikko sivun vasemmassa tai oikeassa reunassa. Tämä on harvinaisempi web-sivustoilla mutta yleinen sovelluksissa ja dokumentaatiosivustoilla.
Yhteenveto
Navigaatiopalkki on verkkosivuston kartta ja kompassi — se ohjaa käyttäjää sisällön läpi ja määrittää, kuinka helposti he löytävät etsimänsä. Pk-yritykselle selkeä, intuitiivinen navigaatio tarkoittaa parempia konversioita, pidempää sivustolla vietettyä aikaa ja vähemmän turhautuneita kävijöitä. Navigaatio on niin perustavanlaatuinen, että se kannattaa testata oikeilla käyttäjillä ennen julkaisua — se on investointi, joka maksaa itsensä takaisin.