UI-suunnittelijan vinkkipankki verkkosivuille vol. 2

7.10.2021

Hyödynnä käytännönläheiset vinkit ja kehitä helposti verkkosivustosi käyttäjäkokemusta.

Verkkosivujen ja -palveluiden suunnittelussa ei suinkaan ole kyse pelkästään siitä, minkä värisiä painikkeita viljellään tai mikä riviväli leipätekstiin asetellaan – vaikka nekin ovat toki tärkeitä aiheita! Onnistuneen käyttäjäkokemuksen takaamiseksi on kuitenkin syytä kaivautua vielä syvemmälle käyttäjän ajatteluun.

Tämä on jatko-osa UI-suunnittelijan vinkkiblogisarjaan, jossa pyritään antamaan konkreettisia vinkkejä siihen, millä tavalla käyttäjät saadaan rakastumaan sivustoosi ja tekemään siellä juuri niitä juttuja, joita sinä haluat. Tutustu myös aiempaan osaan täällä.

Aika on rahaa ja jokainen klikki maksaa


Edellisessä vinkkipankissa
vinkkailin siitä, miten sulkeutuvuuden hahmolakia rikkomalla käyttäjää voi houkutella skrollaamaan sivustolla alaspäin. Mennään tässä kuitenkin vielä vähän syvemmälle ihmisaivoihin. 

Vuorovaikutuksen kustannuksilla tarkoitetaan niitä henkisiä ja fyysisiä toimenpiteitä, joita käyttäjän on tehtävä saavuttaakseen haluamansa päämäärän verkkosivuilla. Tällaisia toimenpiteitä ovat esim. lukeminen, luetun ymmärtäminen, skrollaaminen, etsiminen, klikkaaminen, kirjoittaminen, sivun lataamisen odottelu jne. Vuorovaikutuksen kustannus on suoraan kytköksissä sivuston käytettävyyteen: mitä enemmän käyttäjä joutuu näkemään vaivaa, sitä huonompi käytettävyys sivustolla on. 

Kun selaamme verkkosivuja, analysoimme jatkuvasti tiedostamattamme vuorovaikutuksen kustannusta: kuinka todennäköistä on, että skrollaamalla tai klikkaamalla saavutan haluamani asian? Jaksanko nähdä etsimisen ja kokeilun vaivan vai siirrynkö suosiolla kilpailijan verkkosivuille? Toisin sanoen haluamme verkkosivujen(kin) äärellä päästä mahdollisimman helpolla ja saada mahdollisimman suuren hyödyn mahdollisimman pienellä vaivalla. 



Säästä asiakkaasi aivopähkinöiltä


Edellä mainittujen vuorovaikutuksen kustannusten minimointi on yksi käytettävyyden kulmakivistä: jos käyttäjän polku on mahdollista tehdä helpommaksi, miksi ei siis tehdä niin? Yksi yleisimmistä synneistä onkin sysätä käyttäjän harteille aikamoisia taakkoja: etsi, hae, nouda, löydä, ratkaise, muista. 

Usein esimerkiksi organisaation sisäisistä tarpeista rakennettu navigaatio tai terminologia voi toki ylläpitää sisäistä harmoniaa kahvihuoneissa (eihän vain kenenkään varpaille astuttu?), mutta valitettavasti käyttäjäraukka päätyy silloin usein kaivamaan etsimäänsä kuin neulaa heinäsuovasta. Harva meistä ottaa verkkosivuilla surffailua sanaristikoiden kaltaisena päivän hauskana ja haastavana aivopähkinänä, eikö vain?


Vaasa.fi-sivuston alla olevien Visit Vaasan verkkosivujen navigointi on suunniteltu käyttäjän, ei organisaatiorakenteen, ehdoilla. Tärkeimmät, ja osin sesongittain vaihtuvat, matkailijoiden tarpeet ja käyttötavat on tunnistettu ja erotettu näkyvästi päänavigaatiosta.



Vuorovaikutuksen kustannuksiin voi helposti vaikuttaa myös visuaalisilla keinoilla, esim. huomioimalla käyttäjän katsetta, korostamalla tärkeimpiä asioita ja palastelemalla tietoa ja elementtiä sopiviin kokonaisuuksiin.

Ihanteelliseen käytettävyyteen pääseminen ei kuitenkaan ole ihan helppoa. Mitä enemmän käyttäjiä, käyttötapoja ja toiminnallisuuksia sivustolla on, sitä enemmän esim. sivuston rakenteelta tai navigaatiolta vaaditaan. Tärkeäintä onkin tunnistaa (esim. analytiikan tai käyttäjätutkimuksen avulla), mitkä ovat kaikista tärkeimmät asiat ja käyttötapaukset sivustolla. Priorisoi niitä!


Jos käyttäjän tarpeet on tunnistettu, teknisen toteutuksen ei tarvitse välttämättä olla monimutkainen. Mökkiviikonloppua miettivän käyttäjän yksi tärkeimmistä tarpeista on ajankohdan päättäminen ja varaustilanteen tietäminen. Villa Meribjörkön kevyillä verkkosivuilla varaustilanne on saatu heti käyttäjän nähtäville varausjärjestelmän upotusta hyödyntämällä.



Jokainen sivusto on erilainen, mutta näiden nyrkkisääntöjen noudattaminen auttaa käyttäjää sivustolla kuin sivustolla:

  • kerro tärkeimmät asiat heti alussa
  • suosi silmäiltävyyttä: selkeitä otsikoita, listauksia, korostuksia jne.
  • minimoi elementit, jotka vievät huomion tärkeimmästä asiasta
  • tue käyttäjän päätöksentekoa: älä anna liian paljon vaihtoehtoja kerralla
  • käytä suunnittelukonventioita, jotta käyttäjä löytää esim. navigaation helposti
  • sijoita mobiilikäyttöliittymässä klikattavat elementit niin että niihin on helppo yltää isommallakin näytöllä.


Vaikka verkkosivut ei osaa lukea käyttäjän ajatuksia (vielä!), voimme hyvin myös auttaa käyttäjää arvioimaan, paljonko vaivaa jokin asia häneltä vaatii. Esim. verkkokaupassa tilausprosessin etenemisestä kertominen visuaalisesti tai sanallisesti auttaa käyttäjää hahmottamaan, kuinka kaukana maali häämöttää.

Muumi Babyn verkkokaupassa kynnystä kuukausitilauksen tekemiseen madalletaan kertomalla helposti silmäiltävällä, numeroidulla listauksella, mitkä kuukausitilauksen tekemisen vaiheet ovat. Helppoa!


Odotukset saavat sivustokävijäsi toimimaan


Mitä jos joku kehittäisi maailman käytettävimmän verkkosivuston, jossa kaikki elementit on jetsulleen oikeanlaisia ja oikeissa paikoissa, eikä käyttäjän tarvitsisi ajatella oikeastaan yhtään mitään? Eikö jokaisen kannattaisi kopioida tämä parhaista parhain template sivuilleen ja kaikki osapuolet olisivat tyytyväisiä?

Valitettavasti homma ei mene ihan näin suoraviivaisesti, sillä käyttäjäkokemuksen sopassa keittyy muitakin aineksia. Niinpä ehkä hieman nurinkurisesti kalliiksikaan koettu vuorovaikutuksen kustannus ei välttämättä katkaise kamelin selkää ja karkota käyttäjiä kilpailijan syliin (ainakaan heti). 

Eli siis mitä? Palataanpa ajatukseen käyttäjästä, joka tiedostamattaan jatkuvasti arvioi ja analysoi, miten hän saa hommansa hoidettua mahdollisimman vähällä vaivalla. Käyttäjällä on kuitenkin samaan aikaan myös oletuksia ja odotuksia, joita hän peilaa sivustoon. Millainen aiempi kokemus hänellä on vaikka tämän tyyppisistä sivustoista? Miten hän suhtautuu juuri tähän brändiin? Onko hän törmännyt markkinointiin, joka on luonut hänelle tiettyjä mielikuvia

Jos käyttäjä olettaa saavansa sivustosta positiivisen kokemuksen (oli oletuksen takana sitten vahva brändi, markkinointi tai sivuston miellyttävä ulkonäkö), hän on valmis ponnistelemaan enemmän - silloin hänen olettamansa arvo kompensoi mahdollisia vuorovaikutuksen kustannuksia (eli skrollailu, klikkailu, etsiminen jne.).

Uni Resortsin verkkosivujen visuaalinen ilme viestii tarkoituksella laatua, designia ja ylellisyyttä. Kuvilla, väreillä ja elementtien rytmityksillä pyritään tietynlaiseen mielikuvaan. Tämä ilme voi kuitenkin karkottaa käyttäjiä, jotka etsivät halvinta mahdollista majoitusratkaisua. Tärkeintä onkin tunnistaa, että sivusto puhuttelee juuri tavoiteltua kohderyhmää.



Itsensä ja asiakkaansa tuntemus vie pitkälle


Tarinan opetus? Markkinoinnin ja vahvan brändin vaikutusta ei voi sivuuttaa verkkosivuillakaan, eikä brändien ja verkkosivujen maailmassa one size for all valitettavasti pidä paikkaansa. Luksusfiilis ja prameat kuvat voivat olla helppo keino saada näyttämään sivusto kuin sivusto ulkoisesti kivalta, mutta jos paketti ei vastaa brändiäsi tai sivustolla vierailevan mielenmaisemaa, mennään rytinällä metsään. Tunne siis itsesi ja asiakkaasi, ja tarjoa sivustollasi kokemuksia, jotka vastaavat heidän odotuksiaan - tai totta kai vielä mieluummin ylitä ne.

Mietitkö, kuinka voisit itse parantaa nykyisten sivujesi käyttäjäkokemusta?

Laita minulle rohkeasti viestiä antti.niemela@buorre.fi tai soita 040 0252 351 ja käydään läpi tarpeitasi!  


Antti Niemelä

antti.niemela@buorre.fi

Jatka katsomista

Pysy mukana kehityskulussa

Tilaa uutiskirjeemme ja pysy ajan tasalla markkinoinnin, digipalveluiden ja muotoilun uutisista. Lupaamme inspiroida ja innostaa, emme täyttää sähköpostiasi turhaan!