14.08.20

Alareunan navigointivalikko nostaa verkkosivujen mobiilikäytön uudelle tasolle.

Posted by Slava Solovyev

Minkä tahansa verkkosivuston tehtävänä on ratkaista sille asetetut yrityksen liiketoiminnalliset tavoitteet. Niiden toteutumisen kannalta on ratkaisevassa asemassa verkkosivujen mutkaton käyttäjäkokemus (UX = User Experience), etenkin mobiiliympäristössä. Käyttäjäkokemuksen kannalta taas keskeinen rooli on huolellisesti suunnitellussa navigoinnissa joka ohjaa käyttäjää kohti toivottuja sisältöjä — helposti ja suorinta reittiä.

Oberlo:n maaliskuussa 2020 julkaistun tutkimuksen mukaan yli 52% koko web-liikenteestä tulee matkapuhelimien kautta. Tästä huolimatta käyttäjät edelleen suosivat selailuun tietokoneita mobiililaitteiden sijaan. BroadbandSearch.net mukaan vuonna 2019 55,9% verkkosivustoilla vietetystä ajasta tulee nimenomaan tietokoneista. Mobiilikäyttäjien osuus on saman tutkimuksen mukaan 40,1%. Huom! Nyt ei puhuta sivustolle tulevasta liikenteestä, vaan nimenomaan siellä vietetystä ajasta.

Samaan aikaan CleverTap:in tutkimus osoittaa, että jopa mobiililaitteille hyvin optimoidut verkkosivustot jäävät kauas taakse mobiilisovellusten sitoutumis- ja konversioluvuista. Huonompi tulos selittyy ainakin osittain sillä, että mobiilioptimoinnissa laajasti käytetyt UX-ratkaisut ovat vanhentuneet. 

Ensimmäinen asia, mikä tulee mieleen puhuttaessa mobiilinavigoinnista on yläkulmaan sijoitettu ns. hampurilaisvalikko (kolmesta allekkaisesta viivasta koostuva kuvake). ”Hampparia” klikkaamalla avautuu näytölle sen taakse piilotettu valikko. Tämäntyyppisestä mobiilinavigoinnista tuli alan ”standardi” jo vuoden 2010 alkupuolella. Ja siitä lähtien verkkosuunnittelijat kiistävät siitä, onko ratkaisu tarpeeksi käyttäjäystävällinen kun puhutaan tehokkaasta mobiilinavigonnista. 

Hampurilaisvalikon sijainnilla on hyvin merkittävä rooli kun sitä tarkastellaan peukalon käytön näkökulmasta: näyttöjen kasvaessa valikkoon ei pääse käsiksi yhtä helposti — ainakaan niissä tilanteissa, joissa ihmiset pitävät laitteitaan yhdellä kädellä ja koskettavat näyttöä saman käden peukalolla. Tässä yhteydessä on merkille pantava, että John Clarkin tutkimuksen mukaan noin 50% käyttäjistä pitää puhelimiaan edellä kuvatulla tavalla. Vastaavasti Steven Hooberin tietojen mukaan jopa 75% ihmisistä operoi näytön toiminnallisuuksia yhdellä peukalolla.

Koska suurin osa ihmisistä on omaksunut edellä mainitun tavan käyttää mobiililaitetta on verkkosivuston suunnittelussa tärkeä huomioida myös peukalon käytön periaatteet. Kuten alla olevasta kuvasta voi havainnollistaa, valikkopainike sekä ylänurkkaan sijoitettu logo (joka toimii samalla etusivu -painikkeena) sijaitsevat yleensä heikoimmin saavutettavalla näytön alueella.

The diagram is based on Arturas Leonovas’ findings

Onko siis olemassa parempaa tapa toteuttaa navigointi mobiilisivustoilla? Käännytään tässä yhteydessä suosituimpien mobiilisovellusten puoleen. Nämähän suunnitellaan lähtökohtaisesti mobiililaitteille. Kuten voimme huomata, navigointi niissä tapahtuu alareunaan sijoitetun navigointipalkin avulla.

Kyseistä lähestymistapaa voisi mielestämme soveltaa myös verkkosivustojen mobiiliversioissa sijoittamalla hampurilaisvalikko sekä logo näytön alareunaan. Näin navigointi tulisi ikään kuin “lähemmäksi” itse loppukäyttäjää.  

Oma vaiheensa olisi täysiverisen navigontipalkin luominen sovellusten valikon tapaan. Nimittäin, hampurilaisvalikkkoon liittyy kaksi keskeistä ongelmaa. Ensinnäkin, hampparin käyttöaste on huomattavasti pienempi, koska sen taakse piilotettu sisältö on yhden ylimääräisen klikin takana. Näin ihmiset käyttävät sitä todennäköisesti vähemmän. Toiseksi, piilotettu navigointi heikentää sisällön löydettävyyttä verrattuna näkyvään tai osittain näkyvään valikkoon. 

Kara Pernice ja Rally Budiu Nielsen Norman -tutkimusryhmä havaitsi, että vain 57% ihmisistä käyttää hampparin taakse piilotettua navigointia. Yhdistelmänavigointia (alareunan navigointipalkki yhdistettynä hampurilaisvalikkoon) puolestaan käyttävät 86% ihmisistä, mikä on 1,5 kertaa enemmän. Lisäksi tutkimuksesta selviää, että käyttäjillä kestää keskimäärin 15% pitempään löytää tiettyjä asioita, kun navigointi oli piilotettu hampurilaisvalikon taakse. 

Palataan vielä hetkeksi sovelluksiin. Useimmissa niistä on alavalikko, jossa on kolme tai viisi klikattavaa kohtaa, jotka kaikki ovat kätevästi näkyvillä. Googlen suunnittelusuositusten mukaan (Google’s Visual Framework) hyvin suunniteltu alapalkki noudattaa kolmea yleistä periaatetta, jotka ovat:

  • Ergonomisuus
    Alimman navigointipalkin tulisi olla helposti saavutettavissa mobiililaitteissa sekä palkkielementtien tulee olla tarpeeksi isoja, jotta käyttäjät voivat helposti klikata niitä
  • Johdonmukaisuus
    Alavalikon tulisi olla aina näkyvissä näytöllä
  • Suhteellisuus
    Alapalkissa tulisi olla näkyvillä vain ylätason (tärkeimmät) asiat / aihiot 

Sovellustyyppisellä alareunan navigointipalkilla on myös omat määrälliset rajoituksensa: tilaa on vähän ja vain ylätason aihiot pääsevät näkyvästi esille. Ilmeinen ratkaisu onkin yhdistää navigointipalkki hampurilaisvalikkoon siirtämällä hampurilapainike yhdeksi alapalkin elementiksi. Näin käyttäjillä olisi kätevä ja mutkaton pääsy tärkeimpiin sivuston elementteihin sekä mahdollisuus helposti löytää verkkosivuston alemman tason sivut.

Yhdistelmävalikko voi epäilemättä tuntua liialliselta ratkaisulta puhumattakaan siitä, että se ei välttämättä edes sovi kaikille verkkosivustolle. Pidetään kuitenkin mielessä se, että suunnittelun tärkein tavoite on helpottaa loppukäyttäjän elämää. Ja kun suurin osa verkkoliikenteestä tulee mobiililaitteista, on luontevaa hyödyntää sovellusmaailman parhaita UX-käytäntöjä.

Katso esimerkki alareunan navigointivalikkototeutuksesta tasteofvisitlahti.fi -sivulla (navigointivalikko näkyy mobiilissa).

Pääkuva Charles Deluvio on Unsplash

Nämäkin saattavat kiinnostaa

Miltä brändisi näyttäisi kiinaksi?

Miltä brändisi näyttäisi kiinaksi?

Etabloituminen Kiinan markkinoille on tunnetusti oma lukunsa ja vaatii tekijöiltä kärsivällisyyttä, avarakatseisuutta ja ennen kaikkea innostusta uusien asioiden oppimiseen. Tässä jutussa käymme läpi, mitä kaikkea kannattaa ottaa huomioon, kun lokalisoit brändiä Kiinan kieli- ja kulttuuriympäristöön.

read more
Entäs mahdollisuudet?

Entäs mahdollisuudet?

Kiinalainen kriisiä tarkoittava sana (危機) koostuu kahdesta merkistä, joista toinen tarkoittaa ’vaaraa’ ja toinen ’mahdollisuutta’. Vaarat ovat kaikkien tiedossa. Nyt puhutaan mahdollisuuksista.

read more