Mikä on res­pon­sii­vi­nen na­vi­goin­ti? Dy­naa­mi­set valikot mo­bii­li­se­laa­mi­seen

Res­pon­sii­vi­nen na­vi­goin­ti on mo­bii­liop­ti­moin­nin avain­te­ki­jä. Jos mo­bii­li­na­vi­goin­ti ei ohjaa käyttäjiä sujuvasti pisteestä A pis­tee­seen B, he to­den­nä­köi­ses­ti poistuvat sivulta nopeasti, mikä johtaa lii­ken­teen me­ne­tyk­seen ja, mikä tär­keäm­pää, tulojen me­ne­tyk­seen. Erilaiset konseptit, kuten alas­ve­to­va­li­kot tai alareunan na­vi­goin­ti­pal­kit, voivat auttaa pa­ran­ta­maan verk­ko­si­vus­ton na­vi­goin­ti­ko­ke­mus­ta.

Mikä tekee na­vi­goin­nis­ta hyvän ja res­pon­sii­vi­sen?

Hyvä na­vi­goin­ti­jär­jes­tel­mä on minkä tahansa verk­ko­si­vus­ton sel­kä­ran­ka – se auttaa käyttäjiä löytämään heille tärkeät tiedot. Na­vi­goin­tie­le­ment­tien tulisi toimia sujuvasti, olla sel­keä­ra­ken­tei­sia ja itsestään selviä sekä mah­dol­lis­taa in­tui­tii­vi­nen käyttö. Res­pon­sii­vi­sen na­vi­goin­nin suurimmat haasteet ovat mo­bii­li­lait­tei­den ra­jal­li­nen näytötila ja kos­ke­tus­poh­jai­nen vuo­ro­vai­ku­tus. On kuitenkin olemassa useita res­pon­sii­vi­sia rat­kai­su­ja, jotka takaavat selkeän ja käyt­tä­jäys­tä­väl­li­sen verk­ko­si­vus­ton na­vi­goin­ti­ko­ke­muk­sen.

Res­pon­sii­vi­sen verk­ko­suun­nit­te­lun ydin­a­ja­tuk­se­na on, että sivun sisältö ja ulkoasu mu­kau­tu­vat dy­naa­mi­ses­ti laitteen olo­suh­tei­siin ja näytön kokoon.

Useim­mis­sa ta­pauk­sis­sa on parasta noudattaa ”mobile first” -lä­hes­ty­mis­ta­paa. Tämä suun­nit­te­lustra­te­gia asettaa etusi­jal­le verk­kopro­jek­tien mo­bii­liop­ti­moin­nin– mo­bii­li­ver­sion suun­nit­te­lun, käy­tet­tä­vyy­den ja suo­ri­tus­ky­vyn ennen sen mu­kaut­ta­mis­ta pöy­tä­tie­to­ko­neil­le ja kan­net­ta­vil­le tie­to­ko­neil­le. Olemassa olevan verk­ko­si­vus­ton na­vi­goin­ti­jär­jes­tel­män jäl­kia­sen­nus mo­bii­li­käyt­töön on usein mo­ni­mut­kai­sem­paa ja aikaa vievää. Siksi sinun tulisi vastata muutamaan kes­kei­seen ky­sy­myk­seen ennen res­pon­sii­vi­sen na­vi­gaa­tion suun­nit­te­lun ja ra­ken­ta­mi­sen aloit­ta­mis­ta – eri­tyi­ses­ti na­vi­gaa­tion si­joit­te­lun ja yleisen rakenteen osalta.

Mihin na­vi­goin­ti tulisi sijoittaa?

Yleisiä tapoja sijoittaa na­vi­gaa­tio ovat ala­tun­nis­teen na­vi­gaa­tio ja valikon si­joit­ta­mi­nen sivun yläosaan. Ala­tun­nis­teen na­vi­gaa­tios­sa käyttäjät näkevät vain linkin na­vi­gaa­tioon mo­bii­li­si­vun alussa, joka vie heidät suoraan ala­tun­nis­tee­seen, jossa yk­sit­täi­set va­lik­ko­koh­dat si­jait­se­vat.

Jal­ka­poh­jai­seen na­vi­goin­tiin ei kui­ten­kaan ole kovin käyt­tä­jäys­tä­väl­lis­tä: käyttäjät odottavat tärkeiden na­vi­goin­tie­le­ment­tien olevan helposti saa­ta­vil­la, minkä vuoksi jal­ka­poh­jai­nen na­vi­goin­ti on yhä har­vi­nai­sem­paa. Nykyään mo­bii­li­näy­tön na­vi­goin­ti si­joi­te­taan useim­mi­ten sivun yläosaan. Tämä klassinen lä­hes­ty­mis­ta­pa res­pon­sii­vi­seen suun­nit­te­luun on tuttu useim­mil­le käyt­tä­jil­le.

Miten na­vi­goin­ti on ra­ken­net­tu?

Na­vi­goin­ti­si ra­ken­tees­sa on useita erilaisia mah­dol­li­suuk­sia. Kaksi suo­si­tuin­ta vaih­toeh­toa ovat luet­te­lo­na­vi­goin­ti ja res­pon­sii­vi­set ruudukot.

Luettelot voidaan näyttää sekä yk­si­ta­soi­si­na että mo­ni­ta­soi­si­na na­vi­gaa­tioi­na. Tällä muodolla on kaksi selkeää etua: en­sin­nä­kin verk­ko­ke­hit­tä­jät voivat toteuttaa luettelot suh­teel­li­sen yk­sin­ker­tai­ses­ti, ja lisäksi se mukautuu käyttäjän tot­tu­muk­siin.

Ruu­duk­ko­na­vi­goin­ti on ihan­teel­li­nen lyhyille na­vi­goin­ti­koh­teil­le ja erityisen suosittu verk­ko­kau­pas­sa. Kohteet näytetään vie­rek­käin ruu­duk­ko­muo­dos­sa, ja sa­rak­kei­den määrä riippuu näytön koosta. Jos suun­nit­te­let kak­si­sa­rak­keis­ta ruudukkoa, varmista, että kohteiden määrä on pa­ril­li­nen, jotta vältät epä­sym­met­ri­sen asettelun.

Mitä mo­bii­li­na­vi­goin­ti­kon­sep­te­ja on saa­ta­vil­la?

Nyt pääsemme kes­kei­seen ky­sy­myk­seen: miten mobiilin na­vi­goin­ti­va­lik­ko tulisi avautua? Konsepti määräytyy sen mukaan, miten na­vi­goin­ti esitetään käyt­tä­jäl­le. Näyt­tö­vaih­toeh­to­ja on monia: na­vi­goin­ti voidaan näyttää suoraan sivulla tai avata na­paut­ta­mal­la linkkiä. Na­vi­goin­ti voi joko siirtää sisällön alaspäin tai sijaita sen ylä­puo­lel­la. Olemme koonneet tähän muutamia esi­merk­ke­jä.

Na­vi­goin­ti pu­do­tus­va­li­kos­ta

Yksi klas­si­sis­ta res­pon­sii­vi­sis­ta na­vi­goin­ti­tyy­peis­tä on pu­do­tus­va­lik­ko. Se muis­tut­taa paljon pe­rin­teis­tä työpöydän na­vi­goin­tia, joten se on käyt­tä­jil­le tuttu ja yleisesti valittu na­vi­goin­ti­kon­sep­ti. Valikko ak­ti­voi­daan pai­na­mal­la pai­ni­ket­ta tai kuvaketta, ja se ilmestyy sisällön päälle peit­tä­mät­tä sitä kokonaan.

Liukuvan na­vi­gaa­tion

Toinen suosittu na­vi­goin­ti­tyyp­pi on liu­ku­va­va­lik­ko, joka tunnetaan myös nimellä har­mo­nik­ka- tai laa­jen­net­ta­va laa­tik­ko­na­vi­goin­ti. Kun käyttäjät na­paut­ta­vat va­lik­ko­pai­ni­ket­ta, na­vi­goin­ti avautuu liu­ku­vas­ti – toisin kuin pu­do­tus­va­li­kot, se ei peitä sisältöä, vaan työntää sen alaspäin. Vaikka tämän lä­hes­ty­mis­ta­van to­teut­ta­mi­nen on hieman mo­ni­mut­kai­sem­paa, sitä pidetään erittäin skaa­lau­tu­va­na ja tilaa sääs­tä­vä­nä. Koska siihen voidaan si­säl­lyt­tää ali­va­lik­ko­koh­tei­ta, se tarjoaa tyy­lik­kään ratkaisun sekä yk­sin­ker­tai­sil­le että mo­ni­mut­kai­sem­mil­le va­li­koil­le.

Alaosan na­vi­goin­ti­palk­ki

Alareunan na­vi­goin­ti­palk­ki on yhä suo­si­tum­pi ratkaisu mo­bii­li­so­vel­luk­sis­sa ja verk­ko­si­vus­toil­la, joissa valikko näkyy näytön ala­reu­nas­sa. Tämä na­vi­goin­ti­tyy­li on erityisen käyt­tä­jäys­tä­väl­li­nen, koska se on helppo käyttää äly­pu­he­li­mil­la. Se toimii hyvin pro­jek­teis­sa, joissa on muutama keskeinen na­vi­goin­ti­koh­de, ja tarjoaa selkeän, jär­jes­täy­ty­neen rakenteen, joka auttaa käyttäjiä siir­ty­mään nopeasti verk­ko­si­vus­ton pää­osioi­den välillä.

Off-canvas-na­vi­goin­ti

Tässä lä­hes­ty­mis­ta­vas­sa res­pon­sii­vi­nen na­vi­goin­ti si­joi­te­taan ole­tusar­voi­ses­ti näytön näkyvän alueen ul­ko­puo­lel­le. Valikkoa ei ole in­tegroi­tu pää­aset­te­luun, mikä tekee off-canvas-na­vi­goin­nis­ta tilaa säästävän ratkaisun, joka ei vie tilaa näkymässä. Vasta kun va­lik­ko­ku­va­ket­ta na­pau­te­taan, na­vi­goin­ti liukuu näkyviin ja työntää koko asettelun sivuun. Tämä menetelmä sopii erityisen hyvin suurille na­vi­goin­ti­hie­rar­kioil­le, joissa on useita ali­va­li­koi­ta.