Mobiilinavigaation suunnittelu kotisivuille vaatii täysin erilaista ajattelutapaa kuin työpöytäversion navigaatio. Yli 60 prosenttia sivustokävijöistä selaa nykyään mobiililaitteella, mutta moni sivusto tarjoaa edelleen kömpelön ja vaikeaselkoisen mobiilinavigaation.
Kun suunnittelet mobiilinavigaatiota, et voi yksinkertaisesti pienentää työpöytäversion valikkoa. Pienet näytöt, kosketusohjaus ja erilainen käyttäytyminen vaativat kokonaan uuden lähestymistavan.
Mobiilinavigaation erityisvaatimukset
Mobiililaitteiden kosketusnäytöt asettavat selkeitä rajoituksia navigaation suunnittelulle. Sormenpäiden koko määrittää painikkeiden vähimmäiskoon – alle 44 pikseliä korkeita ja leveitä painikkeita on vaikea osua tarkasti.
Peukalon ulottuvuusalue on kriittinen tekijä. Suurimmassa osassa puhelimia käyttäjä hallitsee laitetta yhdellä kädellä, ja peukalo yltää luontevasti vain tiettyihin näytön osiin. Navigaation tärkeimmät elementit kannattaa sijoittaa näytön alaosaan tai keskialueelle.
Latausaika on mobiilissa entistäkin kriittisempi. Hidas 3G-yhteys tai heikko 4G-kuuluvuus tarkoittaa, että jokainen turha elementti hidastaa sivuston latautumista. Navigaation pitää latautua ensimmäisten joukossa, jotta käyttäjä pääsee heti liikkumaan sivustolla.
Yleinen virhe on kopioida kaikki työpöytäversion valikkokohteet mobiiliin. Asiakas etsii mobiilissa tyypillisesti vain muutamaa asiaa: yhteystietoja, aukioloaikoja, hintoja tai tiettyä tuotetta. Liian monimutkainen valikko hämmentää ja hidastaa.
Hamburger-valikko vai näkyvät painikkeet
Hamburger-valikko (kolme viivaa) on yleisimmäksi muodostunut mobiilinavigaation ratkaisu, mutta se ei ole automaattisesti paras valinta kaikille sivustoille.
Tutkimukset osoittavat, että näkyvät navigaatiopainikkeet toimivat paremmin kuin piilotettu hamburger-valikko, jos tärkeimpiä kohteita on vain 3-5 kappaletta. Käyttäjät löytävät sisällön nopeammin ja klikkailevat enemmän, kun vaihtoehdot ovat heti näkyvillä.
Esimerkki onnistuneesta toteutuksesta: ravintolasivustolla näkyvillä ovat suoraan ”Menu”, ”Varaa pöytä” ja ”Yhteystiedot” -painikkeet. Vähemmän tärkeitä kohteita kuten ”Historia” ja ”Henkilökunta” voi piilottaa hamburger-valikkoon.
Tab bar -navigaatio näytön alareunassa toimii erityisen hyvin sovelluksenkaltaisille sivustoille. Tämä ratkaisu on tuttu mobiilisovelluksista, joten käyttäjät osaavat käyttää sitä intuitiivisesti.
Vältä kuitenkin kahta erillistä navigaatiota samassa näkymässä. Jos käytät tab bar -navigaatiota alhaalla, älä laita vielä hamburger-valikkoa ylänurkkaan.
Kosketusystävällinen suunnittelu
Mobiilinavigaation painikkeiden koon pitää olla vähintään 44×44 pikseliä, mutta 48×48 pikseliä on turvallisempi valinta. Tämä takaa, että normaalikokoisella sormella osuu painikkeeseen luotettavasti.
Painikkeiden väliin tarvitaan riittävästi tilaa. Jos navigaatioelementit ovat liian lähellä toisiaan, käyttäjä klikkaa vahingossa väärää kohdetta. Vähintään 8-10 pikselin marginaali riittää useimmiten.
Hierarkian visualisointi on mobiilissa haastavampaa kuin isolla näytöllä. Breadcrumb-navigaatio auttaa käyttäjää ymmärtämään, missä kohtaa sivustoa hän on menossa. Tämä on erityisen tärkeä verkkokauppasivustoilla ja laajemmilla yritysten sivustoilla.
Yksi tärkeimmistä mutta usein unohdetuista seikoista on takaisin-painikkeen toimivuus. Varmista, että selaimen takaisin-painike toimii oikein myös mobiilissa ja että sivustolla on selkeä tapa palata edelliseen näkymään.
Hakutoiminto osana navigaatiota
Hakukenttä on mobiilinavigaation tärkein mutta aliarvostettu osa. Käyttäjät turvautuvat hakuun nopeammin mobiililaitteilla kuin työpöydällä, koska valikkojen selailu on hitaampaa.
Haku kannattaa tuoda näkyväksi jo sivun latautuessa sen sijaan, että se piilotetaan hakukuvakkeen taakse. Jos tilaa ei ole riittävästi, hae-kuvakkeen pitää olla helposti löydettävissä ja tunnistettavissa.
Hakukentän placeholder-tekstissä kannattaa antaa konkreettinen vihje siitä, mitä sivustolta voi hakea. Pelkkä ”Hae…” ei kerro mitään. Sen sijaan ”Hae tuotteita, reseptejä…” tai ”Hae palveluita, yhteystietoja…” ohjaa käyttäjää paremmin.
Hakutulosten sivun pitää myös olla mobiilioptimoidtu. Tulokset pitää esittää selkeässä listassa, jossa jokainen kohde on helppo valita kosketusnäytöltä.
Testaus ja optimointi
Mobiilinavigaation toimivuutta ei voi testata vain tietokoneen selaimessa. Aidon käyttökokemuksen saat vain testaamalla sivustoa oikeilla mobiililaitteilla erilaisissa ympäristöissä.
Testaa navigaatiota ainakin iPhonella ja Android-puhelimella, sekä tabletilla. Eri selaimet saattavat näyttää navigaation hieman eri tavalla, joten testaa myös Safari-, Chrome- ja Firefox-selaimilla.
Käytettävyystesti oikeiden käyttäjien kanssa paljastaa ongelmia, joita et itse huomaa. Pyydä tuttuja tai asiakkaita kokeilemaan sivuston käyttöä omilla puhelimillaan. Katso, missä he epäröivät tai tekevät virheitä.
Google Analyticsin mobiiliraportit kertovat, missä käyttäjät poistuvat sivustolta mobiililaitteilla. Jos tietty sivu tai navigaatiovaihe aiheuttaa poikkeuksellisen paljon poistumisia, siinä on todennäköisesti käytettävyysongelmia.
Yleiset virheet mobiilinavigaatiossa
Suurin virhe on olettaa, että kaikki työpöytäversion valikkokohteet mahtuvat järkevästi mobiiliin. Liian pienet painikkeet ja tungoksessa olevat valikot turhauttavat käyttäjiä nopeasti.
Toinen klassinen sudenkuoppa on responsiivisen navigaation testaaminen vain yhdellä laitteella. Navigaatio saattaa toimia täydellisesti iPhone 12:lla, mutta olla käyttökelvoton pienemmällä tai isommalla näytöllä.
Pop-up-valikot ja dropdown-valikot toimivat huonosti kosketusnäytöillä. Käyttäjä voi vahingossa sulkea valikon koskettamalla väärää kohtaa, tai alavalikot saattavat aueta väärään suuntaan.
Älä myöskään unohda vaakasuuntaa. Moni käyttäjä kääntää puhelinta sivuttain katsoessaan videoita tai kuvia. Navigaation pitää toimia myös landscape-tilassa.
UKK
Montako navigaatiokohdetta mobiilissa saa maksimissaan olla näkyvillä?
Optimaalinen määrä on 3-5 pääkohdetta näkyvillä kerrallaan mobiilimobiilissa. Tämä perustuu siihen, että käyttäjä pystyy prosessoimaan vaihtoehdot nopeasti ilman skrollaamista. Loput voi sijoittaa hamburger-valikkoon tai alakategorioihin.
Pitääkö hakukenttä olla aina näkyvillä mobiilinavigaatiossa?
Hakukentän näkyvyys riippuu sivuston tyypistä. Verkkokaupassa ja sisältörikkalla sivustolla haku kannattaa pitää näkyvillä tai helposti saavutettavissa. Yksinkertaisella esittelysivustolla hakukenttä vie turhaan arvokasta tilaa.
Toimiiko breadcrumb-navigaatio mobiililaitteilla?
Breadcrumb-navigaatio toimii mobiilissa, mutta se vaatii huolellista suunnittelua. Käytä lyhyitä nimiä ja varmista, että jokainen taso on helppo koskettaa. Pitkät breadcrumb-polut kannattaa katkaista ”…” -merkinnällä ja näyttää vain tärkeimmät tasot.