Mukautuva suunnittelu: responsiivinen navigaatio

25 loka 2012 • Teknologia ja digitaalinen kehitys

Responsiivinen design (mukautuva suunnittelu) kasvattaa suosiotaan koko ajan. Kävin jo aiemmin läpi, mitä responsiivinen design on. Mukautuvan suunnittelun myötä monia tuttuja asioita verkkosovelluksissa pitää miettiä ja toteuttaa ihan uudelta kantilta.

Työpöytäkäytössä hyväksi todetut navigaatioratkaisut eivät toimi enää mobiililaitteiden kapeammilla näytöillä. Yksi tärkeimmistä käyttöliittymän elementeistä on navigaatio. Käyn nyt läpi muutamia perusvaihtoehtoja, miten mukautuvan navigaation voi toteuttaa sulavasti mobiililaitteiden näyttöihin.

Responsiivinen navigaatio toteutustapa 1: ylänavigaatio

Ylänavigaatiossa linkit löytyvät sivun ylälaidasta. Kun näytön koko pienenee on tarkoituksena, että linkit seuraavat mukana, eivätkä jää piiloon kuten monilla ei-responsiivisilla sivuilla nykyään käy. Selainikkunaa pienennettäessä paljon linkkejä sisältävä navigaatio rivittyy useammalle riville.

Tämä lähestymistapa on hyvin suoraviivainen toteuttaa, sillä se ei tarvitse kovinkaan monimutkaisia CSS-tyylimääritteitä, eikä se vaadi Javascriptin käyttöä. Toteutustapa on tällä hetkellä kenties se käytetyin responsiivisen navigaation muoto luultavasti juuri helpon toteutettavuuden takia. Ethan Marcotten sivuilta löytyy hyvä malli.

Mitä enemmän sivulla on linkkejä, sitä korkeammaksi sivu kuitenkin kasvaa pienemmillä näytöillä. Tämän vuoksi ratkaisutapa ei välttämättä sovellu kovin hyvin verkkosivustoihin, joiden navigaatiossa on paljon linkkejä. Linkkejä ei myöskään kannata ahtaa niin pieneen tilaan kuin mahdollista. Tällöin mobiililaitteen kosketusnäyttöä käytettäessä linkkiin saattaa olla vaikea osua. Alalinkit eivät toimi tällä ratkaisutavalla myöskään kovinkaan intuitiivisesti.

Toinen tapa käyttää ylänavigaatiota on osittain sama kuin edellä mainittu, mutta näytön koon pienentyessä tarpeeksi kukin navigaatioelementti varaa itselleen kokonaisen rivin. Tämä tuo selkeyttä navigaatioon, koska jokaisella rivillä on vain yksi linkki.

Tästä kuitenkin seuraa auttamattomasti se, että navigaation korkeus kasvaa edelleen huomattavasti. Esimerkiksi alla olevassa esimerkissä navigaation korkeus on yli tuhat pikseliä ja kaikki linkit eivät vielä ole näkyvissä. Näin korkea navigaatio on liian dominoiva.

Vaikka responsiivinen navigaatio on sivuston selailun kannalta kriittinen elementti, käyttäjän tulisi myös päästä mahdollisimman nopeasti käsiksi koko sivun sisältöön. Jos navigaatio on korkea, käyttäjä joutuu rullaamaan monta kertaa alaspäin jokaisella sivun latauksella. On selvää, että kärsimättömämpi käyttäjä vaihtaa tässä kohtaa helposti sivua.

Navigaation pystyy toteuttamaan pelkästään CSS-määritteitä hyväksikäyttäen. Javascriptin avulla alalinkit voi piilottaa niin, että ne aukeavat esimerkiksi linkin perässä olevasta plus-ikonista. Tällöin navigaation korkeussuunnassa vaatima tila pienenee jonkin verran.

Navigaation korkeussuunnassa vaatiman tilan pienentämiseksi on vielä yksi vaihtoehto. Navigaatio voidaan yksinkertaisesti kokonaan “hävittää” napin taakse. Esimerkiksi Starbucks on tehnyt näin. Oletuksena sivun navigaatio ei ole näkyvissä, mutta nappi navigaation avautumista varten löytyy kuitenkin sivun ylälaidasta. Tällainen ratkaisu vaatii kuitenkin jonkin verran Javascriptin käyttöä. Tämän lisäksi kokemattomampi käyttäjä saattaa olla ihmeissään, mistä navigaatio löytyy.

Responsiivinen navigaatio toteutustapa 2: alanavigaatio

Toisenlainen lähestymistapa sivunavigaation toteuttamiseksi on sellainen, jossa käyttäjälle esitetään ensin sisältö ja navigaatio seuraa vasta tämän jälkeen. Hyvä esimerkki löytyy Grey Goosen sivustolta. Isommalla näytöllä navigaatio on kuin liimattu kiinni selaimen alaosaan.

Kun näyttöä pienennetään, navigaatio avautuu kokonaan sivun loppuun (yksi linkki per rivi). Sivun yläosaan on laitettu ankkurilinkki, jonka avulla käyttäjä pääsee hyppäämään suoraan navigaatioon niin halutessaan.

Tämäntyyppinen mukautuva navigaatio on helppo toteuttaa eikä se vaadi Javascriptia. Huonona puolena on se, että käyttäjä tavallaan pakotetaan siirtymään yläosan napista sivun alaosaan. Tämän johdosta käyttäjäkokemus saattaa siis kärsiä. Yksi vaihtoehto on toki jättää yläosan ankkurilinkki pois, mutta tällöin navigaatioon ei pääse mitenkään muuten kuin rullaamalla sivun alaosaan.

Responsiivinen navigaatio toteutustapa 3: pudotusvalikkoon perustuva navigaatio

Yksi tapa on muuttaa navigaatio pudotusvalikko-elementiksi (dropdown). Tällöin responsiivinen navigaatio vie huomattavasti vähemmän tilaa kuin suurin osa edellisistä vaihtoehdoista. Tämän lisäksi pudotusvalikko toimii kunkin mobiiliselaimen natiivitoiminnallisuuksilla.

Esimerkiksi Android-päätelaitteilla aukeaa lista, josta on helppo valita koskettamalla oikea vaihtoehto. Esimerkki pudotusvalikkonavigaation käytöstä löytyy Sofokuksen toteuttaman Shipsu-palvelun sivuilta.

Kuten muissakin lähestymistavoissa, tässäkin lähestymistavassa on muutama kääntöpuoli. Tyylikkään pudotusvalikon teko saattaa osoittautua yllättävän vaikeaksi. Jokainen selain muotoilee pudotusvalikot omalla sisäänrakennetulla tavallaan. Tämän vuoksi pudotusvalikkoon lisätyt tyylimääritteet eivät toimi välttämättä läheskään kaikilla selaimilla. Alalinkit saa toteutettua pudotusvalikkoon helposti esimerkiksi sisennettyinä, mutta tämä ei yleisesti ottaen näytä erityisen tyylikkäältä.

Pudotusvalikkoihin perustuva ratkaisu vaatii myös hieman Javascriptin käyttöä. Pudotusvalikko saattaa myös toistaiseksi hämätä joitakin käyttäjiä. Saattaa tuntua oudolta, että navigaatio on pudotusvalikossa, sillä yleensä sillä valitaan vaihtoehtoja lomakkeita täytettäessä. Pudotusvalikkonavigaation toteutus onnistuu esimerkiksi Selectnav.js:n avulla.

Koska mobiililaitteiden käyttö sivujen selailemissa kasvaa hurja vauhtia, niin uskon, että käyttäjät tulevat tottumaan tähänkin sivujen selailutapaan. Mobiilipäätelaitteilla käytettävissä oleva ruututila on kuitenkin aina rajallinen ja pudotusvalikkoihin perustuva toteutus on yksi erinomainen vaihtoehto navigoimiseen.

Responsiivinen navigaatio toteutustapa 4: kaksi navigaatiota

Tyylimääritteiden avulla on helppo piilottaa elementtejä. Tämä mahdollistaa sen, että eri kokoisille näytöille voi myös suunnitella kokonaan erilaisia navigaatioita. Esimerkiksi Authenticjobs sivustolla on tehty ratkaisu, jossa pienemmällä näytöllä koko ylänavigaatio katoaa.

Mukautuva navigaatio Authenticjobs sivuilla

Ratkaisu toki vapauttaa paljon tilaa muulle sisällölle, mutta muutoin tämä on mielestäni hieman kyseenalainen ratkaisu. Halutaanko käyttäjältä oikeasti piilottaa toiminnallisuuksia?

Kun käyttäjä vierailee ensimmäistä kertaa mobiilipäätelaitteen kanssa verkkosivuilla löytämättä haluamaansa, hän tuskin kokeilee samaa myös isommalla näytöllä. Tämän lisäksi tässä toteutustavassa saatetaan joutua ylläpitämään useampaa navigaatiorakennetta. Tämä kasvattaa työmäärää sivujen kehittämisessä ja siten vaikuttaa ylläpitokustannuksiin negatiivisesti.

Yhteenveto

Näyttää siltä, että responsiivinen design on tullut jäädäkseen. Mukautuva suunnittelu tarjoaa niin paljon etuja suhteessa muihin tapoihin toteuttaa yhteensopivuus mobiileille päätelaitteille, että se tulee yleistymään väistämättä.

Mukautuva navigaatio on vain yksi, mutta tärkeä osa-alue responsiivista suunnittelua. Tämä artikkeli ei pyri listaamaan kaikkia mahdollisia vaihtoehtoja responsiivisen navigaation toteuttamiseen, vaan kuvailemaan tällä hetkellä yleisimmin käytössä olevien ratkaisumallien hyviä ja huonoja puolia. Onkin suotavaa, että verkkopalvelun toteuttaja (ja graafikko) hallitsee kaikki yleisimmät lähestymistavat ja osaa valita sopivan tapauskohtaisesti.