Responsiivisen web-sivuston toinen haaste on yhtenäisen käyttäjäkokemuksen tarjoava ja helppo navigointi erikokoisilla sivuilla ja teknisesti eri tavoin toimivilla laitteilla.
Navigoinnin haasteet tulevat kahta kautta: ensinnäkin suurten valikkorakenteiden sovituksesta pienille näytöille ja toiseksi siksi, että kosketusnäyttöisillä laitteilla ei ole hiirikäyttöisen tietokoneen tapaan ruudulla näkyvää hiiriosoitinta, jota voi siirtää eri elementtien päälle ja mennä valikoissa hierarkkisesti alaspäin. Lähestymistapa responsiivisilla sivuilla edellyttää siten uutta ajattelua koko navigointikysymykseen – varsinkin kun tavoitteena on säilyttää sama sisältö kaikenkokoisilla näytöillä sekä hiirtä tai kosketusnäyttöä käytettäessä.
Oman kokemukseni mukaan edelliset ehdot täyttävän responsiivisen navigoinnin voi toteuttaa monella tavalla, joista yksikään ei ole täysin ongelmaton. Yleisperiaatteena sivustojen suunnittelussa voi kuitenkin suositella ylimmän tason valikkojen pitämistä mahdollisimman lyhyinä käyttäen vain muutamaa valintaa ja niissä lyhyitä tekstejä – hyvä esimerkki tästä ovat MTV3:n uusimmat www.mtv.fi -sivut. Lyhyt päävalikko pitää ulkoasun yhtenäisenä niin tietokonenäytöillä kuin älypuhelimissa katsottuna.
“Älä tee mitään” -ratkaisu
Helpointa on toteuttaa responsiivinen valikko kaikenkokoisille näytöille tekemättä oikeastaan mitään: lyhyt, yksinkertainen ja yksitasoinen valikkorakenne, joka kapenee ja tarvittaessa jakautuu useammalle riville näytön koosta riippuen. Käytännössä tämä ratkaisutapa sopii vain pienille sivustoille, joissa ei ylipäätään ole monia sivuja – esimerkiksi aloittavan pienyrityksen sivuston voi toteuttaa responsiivisena kaikille laitteille toimivaksi hyvin edullisesti käyttäen tätä ratkaisutapaa. Tästä linkistä löydät erään suunnitteluoppaan esimerkin tällaisesta ratkaisusta.
Näytä pienissä ruuduissa vain ison valikon ylätaso
Ensimmäisen ratkaisun laajennus on luoda valikon ylätasosta lyhyt ja näyttää pienillä näytöillä joko suoraan tai valintapainikkeesta painaen vain tämä ylätaso samaan tapaan kuin “älä tee mitään” -ratkaisussa. Kustakin ylimmästä valikkotason valinnastaa päästään päätason sivulle, joka kuvailee tämän osion sisältöä ja alempia tasoja. Sivulla on harkinnan mukaan mahdollisuus siirtyä linkkien kautta seuraaville sivutasoille.
Olen aikaisemmin käyttänyt tätä ratkaisua omilla sivuillani lähinnä melko helpon teknisen toteutuksen ja pienten näyttöjen yksinkertaisen, vaikkakin rajoitetun käytettävyyden vuoksi. Ratkaisu toimii kohtuullisesti, kun sisällöstä vastaan vain yksi henkilö, mutta monien sisällöntuottajien tapauksessa ratkaisu voin nopeasti johtaa toimimattomiin linkkeihin. Tällä hetkellä ratkaisu on käytössä vain yhdellä testisivustollani, josta kuvakaappaus ohessa.
Kolmen viivan valintapainike
Tämän hetken trendinä mobiililaitteiden sovelluksissa ja responsiivisissa sivustoissa on näyttää valikko vasta, kun ruudulla näkyvää painiketta klikataan. Yhä useammin tuo valintapainike on “kolmen viivan painike”. Löydät tuon valintapainikkeen esimerkiksi Facebookin älypuhelinsovelluksesta ja monista muista erillissovelluksista. Myös WordPress-ohjelmistoon sisältyvän uusimman ulkoasusta vastaava teema “Twenty Fourteen” toimii tällä periaatteella. Tässäkin ratkaisutavassa haasteena on valikkojen koko: monia tasoja ja kymmeniä sivuja sisältävä suuren näytön hiirellä avautuva valikkorakenne muodostaa erittäin pitkän listan selattavaksi pienellä ruudulla – tästä vasemmalla esimerkki omasta tällä hetkellä 72 sivua sisältävästä www.tiirikainen.fi -sivustostani käyttäen tätä oletusteemaa.
Uusimmissa sivustojeni ulkoasuversioissa olen siirtynyt käyttämään ratkaisua, jossa kaikki valikkoihin sisältyvät valinnat voi tehdä myös älypuhelimissa käyttäen kolmen viivan painiketta ja vaiheittain avautuvaa valikkoa.
Vaiheittain avautuva valikko pieniinkin ruutuihin
Jo parinkymmenen sivun sivusto, jossa pieniäkin näyttöjä käyttävälle halutaan varmistaa helppo pääsy kaikkeen sisältöön ilman todella pitkää valikon rullailua ruudulla, edellyttää edellisiä kehittyneempää ratkaisua.
Ensinnäkin tarvitaan suhteellisen lyhyt ylimmän tason valikko ja esimerkiksi “kolmen viivan” painikkeesta avautuva valikko, jossa osoitetaan sopivaksi katsotulla symbolilla ne valikon osat, joissa on alavalikkoja. Alavalikot aukeavat klikkaamalla alavalikon osoitinta tai koko valikkoriviä.
Ulkoasullisesti ja valikkojen avautumisessa on monia mahdollisia tyylejä: valikko voi avautua suoraan valintapainikkeen alle työntäen sisältöä alaspäin, ponnahtaa halutusta reunasta sivun päälle ja kaikissa vaihtoehdoissa voi käyttää erilaisia erilaisia animointeja.
Suhteellisen hyvä esimerkki tällaisesta ratkaisutavasta on yle.fi, jonka sivujen toiminnoista suurimmalla näyttökoolla ja iPhone3:n 320 pikselin levyisellä näytöllä oheinen kuvasarja. Otan mieluusti kommentteja myös tällä bisnes & IT -sivustollani nyt käytössä olevasta vasemmalta ponnahtavasta valikkoratkaisusta 🙂
Invalid Displayed Gallery
Uusi ote sivuston suunnitteluun
Jo edellisten ratkaisuesimerkkien perusteella on selvää, että koko sivuston rakenteen ja ulkoasun suunnitteluun tarvitaan uusi ote. Siitä myöhemmissä sarjan jutuissa, seuraavassa jutussa ratkaisuja kuvien ja videoiden asettamista haasteista responsiivisilla sivuilla.
