UX ja UI – ota käsitteet haltuun

Web designer -opintojeni aikana korviini kantautui paljon uusia käsitteitä. Muutamat niistä on mielestäni syytä nostaa jalustalle. Nettisivustojen suunnittelussa esiin nousevat vahvasti kaksi lyhennettä: UX ja UI.

Tunteet peliin

Käyttökokemus eli User Experience, UX perustuu tunteisiin. Mitä tunteita palvelun käyttäminen herättää ja miltä palvelun käyttäminen tuntuu? Käyttökokemuksen suunnittelulla pyritään siihen, että tuotteen tai palvelun käyttö on asiakkaalle mahdollisimman luontevaa ja vaivatonta.

Digitaalisissa palveluissa, kuten nettisivustoissa, hyvä käyttökokemus muodostuu muun muassa ymmärrettävyydestä ja käytön helppoudesta, visuaalisuudesta, uuden arvon luomisesta sekä niin sanotusta wow-efektistä. Lisäksi nopeus on nykyihmiselle yksi tärkeimmistä vaatimuksista nettisivustolla: pitkät latausajat venyttävät hermot kireälle ja pahimmillaan käyttäjä lopettaa palvelun käytön kokonaan. UX-suunnittelun vaiheisiin kuuluvat muun muassa erilaisten käyttäjäprofiilien laadinta, rakennekaaviot sekä kuvakäsikirjoitukset.

Kasvot esiin

Käyttöliittymä eli User Interface, UI kuvastaa sitä kohtaa, jonka kautta käyttäjä on yhteydessä nettisivustoon. Käyttöliittymä siis kertoo, miltä sivusto visuaalisesti käyttäjän silmissä näyttää. UI-suunnittelussa tärkeitä elementtejä ovat muun muassa valokuvat, grafiikat, värit, fontit sekä erilaiset efektit.

Hyvä käyttöliittymä hivelee käyttäjän silmiä ja houkuttelee tutustumaan sivustoon paremmin. Visuaalisesti tyylikäs kokonaisuus ja loogiset toiminnallisuudet luovat selkeän, turvallisen ja miellyttävän tunteen käyttäjälle.

Miten hyvä käyttökokemus ja käyttöliittymä syntyvät?

Hyvä käyttökokemus syntyy varsin yksinkertaisista asioista, joiden lähtökohtana on toimivuus. Visuaalisesti näyttävä ulkoasu antaa käyttökokemukselle viimeisen kruunun.

Käyttöliittymän suunnittelussa ja sen arvioinnissa hyödynnetään usein käytettävyysasiantuntija Dr. Jacob Nielsenin kehittämää 10 säännön kokoelmaa.

1. Yksinkertaisuus on kaunista: nettisivusto huomioi käyttäjän tarpeen ja kertoo vain tarvittavan tiedon. Olennaisia asioita nostetaan esiin muun muassa visuaalisin keinoin.
2. Puhu käyttäjän kieltä: nettisivustolla pitää olla termejä, joita käyttäjä ymmärtää. Luontevuus sekä asioiden looginen järjestys luovat turvallisen vaikutelman käyttäjälle.
3. Minimoi muistettavat asiat: käyttäjän ei tarvitse itse muistaa asioita vaiheesta toiseen. Käyttöliittymän eri osien tulisi liittyä toisiinsa niin, että toimintojen välinen yhteys on helposti tunnistettavissa ja ennalta-arvattavissa. 
4. Yhdenmukaisuus ja standardit: nettisivuston termien ja toimintojen tulisi merkitä aina samaa eri puolilla sivustoa, jotta käyttäjä ei mene sekaisin. Yleiset käytännöt kannattaa huomioida eikä hyviksi havaittuja tapoja kannata lähteä soveltamaan.
5. Palaute: nettisivuston tulee pitää käyttäjä tietoisena nykytilanteesta ja antaa siitä sopivaa palautetta riittävän lyhyessä ajassa. Käyttäjän ei pitäisi joutua miettimään, tekeekö järjestelmä jotain vai onko se esimerkiksi vikatilassa. Selkeät napit ja ilmoitukset sekä ennalta-arvattavuus luovat turvaa käyttäjäkokemukseen.
6. Anna vapautta: kunnioita käyttäjän vapautta ja anna mahdollisuus hallita tilannetta. Jos käyttäjä joutuu tilaan, josta haluaa pois, hänen pitäisi päästä takaisin lähtöruutuun helposti ja nopeasti. Paluu-napin tulisi aina olla selkeästi esillä.
7. Tehokas ja joustava käyttö: huomioi aloittelijat ja edistyneet käyttäjät. Toista ja korosta asioita. Tarjoa erilaisia oikopolkuja, jotka tuovat tehokkuutta toimintoihin. Monipuolinen käyttöliittymä huomioi käyttäjän taidot ja antaa kaikille miellyttävän kokemuksen. Olennaista on myös se, että sivusto toimii moitteettomasti kaikilla eri laitteilla ja selaimilla.
8. Selkeät virheilmoitukset: epämääräiset virhekoodit eivät auta käyttäjää. Tarjoa mieluummin selkeitä virheilmoituksia, joista käyvät ilmi ongelmatilanteen yksityiskohdat ja tilanteeseen sopiva ratkaisu. Älä jätä käyttäjää pulaan.
9. Ongelmien ennaltaehkäisy: selkeä rakenne ennaltaehkäisee ongelmatilanteita. Varoita käyttäjää ennen kuin hän tekee peruuttamattomia muutoksia.
10. Ohjeet ja dokumentaatio: nettisivuston tulisi toimia ilman ohjeita, mutta pidä huolta, että ne ovat kuitenkin kaikkien saatavilla.

Web-terveisin,
Essi
essi.rantanen@telegraafi.fi