Mobile first – verkkopalvelun suunnittelu mobiililähtöisesti
Verkkopalveluja käytetään nykyisin ensisijaisesti mobiilissa. Verkkopalvelu kannattaa optimoida siihen ympäristöön, jossa enemmistö käyttäjistä toimii. Siksi mobile first -lähestymistapa sopii useimpien verkkopalveluiden suunnitteluun.
Mobiililaitteiden osuus on tilastojen mukaan jo 60% kaikesta verkkoliikenteestä, ja trendi on kasvava. Lähes kaikki verkon käyttäjät selaavat sitä mobiilisti ainakin osan ajasta.
Se, millä laitteella kävijä verkkopalveluun saapuu, vaikuttaa monella tapaa palvelun käyttöön. Mobiilikäyttäjän näyttö on pienempi ja yhteys usein hitaampi ja epävakaampi verrattuna desktop-käyttöön. Rajattu data ja vanhat laitteet voivat asettaa rajoitteita käytölle.
Mobiililaitteella verkkopalvelua käytetään hiiren ja näppäimistön sijaan koskettamalla. Kun tietokonetta selataan yleensä työpöydän ääressä, mobiilikäyttäjä taas voi olla liikkeellä. Mobiililaitteella tarvittava tieto halutaan löytää nopeasti ja helposti.
Mitä mobile first -suunnittelu on?
Mobile first tarkoittaa nimensä mukaisesti verkkopalvelun suunnittelua mobiilikäyttö edellä. Mobiililähtöisyys varmistaa, että käyttö mobiililaitteilla on sujuvaa ja intuitiivista.
Verkkopalveluja on jo pitkään suunniteltu responsiivisiksi eli toimimaan kaikilla päätelaitteilla. Toisin kuin mobile first, responsiivinen suunnittelu lähtee yleensä liikkeelle desktop-käyttöliittymän suunnittelusta. Sen jälkeen ominaisuuksia karsitaan tai sijoitellaan uudella tavalla yksinkertaisempaa mobiiliversiota varten (ns. graceful degradation).
Mobile first eroaa responsiivisesta suunnittelusta siinä, että se lähtee liikkeelle pienimmästä versiosta, eli älypuhelimesta, ja muut versiot suunnitellaan sen jälkeen. Lopputulos on tässäkin lähestymistavassa palvelu, joka toimii kaikilla päätelaitteilla.
Mobile first -suunnittelun ytimessä on:
- keskittyminen tärkeimpään sisältöön ja ominaisuuksiin
- selkeä ja yksinkertainen käyttöliittymä
- rajallisen tilan tehokas hyödyntäminen
- ominaisuuksien progressiivinen lisääminen suuremmille näytöille (ns. progressive enhancement)
Miksi verkkopalvelu kannattaa suunnitella mobiililähtöisesti?
Parempi käyttökokemus kaikilla laitteilla
Mobiilinäytön pieni koko pakottaa tunnistamaan, mikä sisältö on tärkeintä ja miten käytöstä tehdään mahdollisimman sujuvaa. Tämä johtaa selkeämpään ja parempaan käyttökokemukseen kaikilla laitteilla.
Nopeampi palvelu
Mobiilioptimoitu verkkopalvelu on nopea latautumaan. Nopea sivusto pärjää paremmin sekä hakukonenäkyvyydessä että käytettävyydessä.
Hakukoneoptimointi
Google käyttää mobile first indexing -periaatetta, eli verkkopalvelu tai -sivusto indeksoidaan ensisijaisesti mobiiliversion suorituskyvyn perusteella.
Suunnittelun skaalautuvuus
Kun olennaisin on tunnistettu, on helpompi lisätä ominaisuuksia kuin poistaa niitä. Yksinkertaisempi mobiiliversio skaalautuu jo sellaisenaan paremmin suuremmille näytöille kuin toisin päin. Toisaalta sisältöjä ja toimintoja voidaan lisätä asteittain tarvittaessa.
Mobile first parantaa verkkopalvelun saavutettavuutta
Mobile first -periaatteet parantavat monella tapaa verkkopalvelun saavutettavuutta. Sisällön priorisointi ja selkeä hierarkia helpottavat tiedon hahmottamista niille, joilla on kognitiivisia haasteita. Motorisista rajoitteista kärsivät hyötyvät isoista ja selkeistä painikkeista ja kosketuspinnoista. Yksinkertainen navigaatio ja yhden sarakkeen asettelu helpottavat ruudunlukuohjelmien toimintaa.
Milloin mobile first ei ole paras lähtökohta?
Mobile first -suunnittelu sopii useimpiin verkkopalveluihin, mutta poikkeuksiakin on. Jos palvelua käytetään lähes yksinomaan isoilla näytöillä, on desktop-lähtöinen suunnittelu käytännöllisempi vaihtoehto. Tällaisia palveluita voivat olla esimerkiksi monimutkaiset yritysjärjestelmät tai paljon dataa esittävät analytiikka- ja hallintapaneelit. Silloinkin mobiilikäyttö kannattaa kuitenkin huomioida ainakin perustasolla.
Mobile first -suunnittelun periaatteet
- Pienin näyttö ensin
Suunnittelu aloitetaan pienimmästä näytöstä, eli puhelimesta. Sen jälkeen sisältöjä ja ominaisuuksia laajennetaan progressiivisesti suuremmille näytöille, kuten tabletille tai tietokoneelle.
- Sisällön priorisointi
Pienemmille näytöille suunnittelu pakottaa tunnistamaan, mitä käyttäjä tulee sivustolle tekemään ja mikä sisältö on todella tarpeellista. Tärkeän sisällön tulee olla helposti saatavilla, ja sen tulee löytyä nopeasti ja vaivattomasti.
- Selkeä hierarkia ja luettavuus
Kun ruudulla on vähemmän tilaa, sisällön tulee olla helposti luettavissa ja hahmotettavissa. Selkeä ja looginen hierarkia luodaan mm. hyödyntämällä fonttikokoja, riittävää kontrastia, otsikointia ja tyhjää tilaa elementtien välissä.
- Yksinkertainen navigointi
Yksinkertaiset ratkaisut, kuten hampurilaisvalikko, toimivat parhaiten navigointiin mobiilissa. Päävalikko tarvitsee tuekseen myös vaihtoehtoisia navigointitapoja. Mobile first -suunnittelussa toissijaista navigointia tuetaan esimerkiksi linkkilaatikoiden ja oikopolkupainikkeiden avulla.
- Kosketusystävälliset toiminnot
Mobiililaitteilla palvelun käyttö tapahtuu koskettamalla. Isot painikkeet ja selkeät kosketuspinnat tekevät mobiilikäytöstä sujuvaa. Hover-toimintoja ei tule käyttää mobiilissa lainkaan.
- Suorituskyky
Suorituskyky ja latausnopeus ovat mobiilikäytössä ensisijaisen tärkeitä. Latausnopeudesta huolehditaan optimoimalla kuvat ja mediatiedostot sekä minimoimalla turhat skriptit, laajennukset ja muut raskaat elementit.
Naantalin kaupunki tavoittaa matkailijat mobiiliystävällisesti
Matkaillessa tietoa ja inspiraatiota etsitään samalla, kun ollaan liikkeellä. Siksi Naantalin matkailusivusto suunniteltiin mobiilikäyttö edellä.
Verkkopalvelun suunnittelu lähtee käyttäjien tarpeista
Me luomme verkkopalveluita, jotka ovat saavutettavia, selkeitä ja tehokkaita. Meillä suunnittelu lähtee aina liikkeelle käyttäjien todellisista tarpeista. Lopputuloksena on verkkopalvelu, joka toimii vaivattomasti – missä ja millä tahansa sitä selataan.
Jutellaanko teidän tarpeistanne?
Eeva Sahlsten
Head of Sales
S-posti: eeva.sahlsten@poutapilvi.fi
Puh: 040 7040325
