Käyttäjäkokemuksen (UX) ja käyttöliittymien (UI) parissa työskentelevät käyttävät ammattikieltä, jossa vilisee englanninkielisiä termejä. Osa käsitteistä on suomennettu vaihtelevalla menestyksellä.
UX/UI-termien osaaminen helpottaa aiheesta lukemista, ja antaa itseluottamusta esittää kysymyksiä ja osallistua UX-suunnitteluun liittyviin keskusteluihin. Myös verkostoituminen helpottuu, kun tunnistat UX-alan ihmisten erikoisosaamisalueita.
Käydään ensin läpi tärkeimmät eli UX ja UI. Ja niiden jälkeen loput 22 termiä, joiden tuntemisesta on hyötyä UX/UI-suunnittelusta kiinnostuneelle.
Käyttäjäkokemus (UX)
Suomeksi puhutaan käyttäjäkokemuksesta tai käyttökokemuksesta (user experience, UX). Siihen vaikuttaa kaikki digitaaliset ja fyysiset vaiheet, joita käyttäjä tai asiakas käy läpi palvelussa saadakseen tehtävänsä suoritetuksi. Käyttäjäkokemus muodostuu tunteista, joita syntyy käytön aikana. Positiivisia tunteita herättää esimerkiksi helppokäyttöinen käyttöliittymä, houkutteleva palvelulupaus, tekninen toimintavarmuus, hauskasti puhutteleva brändi ja selkeä viestintä. Negatiivisia tunteita voi aiheuttaa esimerkiksi palvelulupauksen pettäminen tai epälooginen käyttöliittymä.
Käyttäjäkokemuksen suunnittelija yrittää ennakoida ja ottaa suunnittelussa huomioon, mitä ajatuksia tai tunteita käyttäjällä saattaisi herätä eri vaiheissa palvelua. Tyypillisesti työajasta suurin osa keskittyy verkkopalvelun tai sovelluksen toimintalogiikan suunnitteluun ja helppokäyttöisyyden varmistamiseen. Koska käyttökokemus rakentuu muustakin kuin käyttöliittymästä, suunnittelija tekee tiiviisti yhteistyötä mm. liiketoiminnan edustajien ja teknisten osaajien kanssa.
Käyttöliittymä (UI)
Käyttöliittymä (user interface, UI) on se verkkosivuston, sovelluksen tai minkä tahansa muun tuotteen osa, jonka kautta käyttäjä on vuorovaikutuksessa tuotteen kanssa. Esimerkiksi mobiilisovelluksessa käyttöliittymä tarkoittaa niitä elementtejä ja tietoa mitä käyttäjä puhelimen näytöllä näkee, ja miten hän voi ohjata sovellusta sormillaan painelemalla ja muita eleitä käyttäen. Käyttöliittymään kuuluvat myös mobiililaitteen äänet ja fyysiset näppäimet.
Käyttöliittymäsuunnittelija suunnittelee näytöllä näkyvien graafisten elementtien toimintaa ja ulkoasua. Elementtejä ovat esimerkiksi valikot, napit, kuvat, tekstit ja virheilmoitukset.
Lue lisää:
UX/UI-suunnittelun perusteet -verkkokoulutus
5 syytä opiskella UX-suunnittelua
Loput termit aakkosjärjestyksessä
- A/B-testaus
- Design Sprint
- Design System
- Digitaalinen palvelumuotoilu
- Empatiakartta
- Informaatioarkkitehtuuri
- Iteratiivinen kehitys
- Ketterä kehitys
- Konversio
- Korttien lajittelu
- KPI
- Käytettävyystesti
- Käyttäjäkeskeinen suunnittelu
- Käyttäjäpersoona
- Lean UX
- Mockup
- Prototyyppi
- Rautalankakuvat
- Responsiivinen suunnittelu
- UI flow
- UI elementti
- UI komponentti
A/B-testaus
A/B-testauksella (englanniksi A/B testing) etsitään parhaiten toimivaa versiota verkkopalvelun käyttöliittymästä. Testaus toteutetaan niin, että verkkosivuston vierailijoista osa näkee A-version ja toinen osa B-version.
A/B-testaukseen käytettävä ohjelmisto mittaa, kumpi versio houkuttelee sivuston vierailijat tekemään toivottuja asioita, kuten esimerkiksi ostamaan tuotteen. A/B-testauksella pyritään siis parantamaan konversiota.
Design Sprint
Design Sprintille ei ole hyvää suomenkielistä käännöstä. Design Sprintillä viitataan Google Venturesin tunnetuksi tekemään työtapaan, jossa uuden digitaalisen palvelun konsepti ja prototyyppi suunnitellaan ja testataan noin 5 työpäivän kuluessa yhteistyössä eri alojen osaajien kesken.
Ensimmäisten päivien aikana perehdytään liiketoiminnan ja käyttäjien tavoitteisiin. Keskellä viikkoa ideoidaan ja rakennetaan palvelun prototyyppi. Viimeisenä päivänä järjestetään prototyypin käyttäjätestaus, jotta saadaan palautetta konseptin toimivuudesta.
Design System
Design Systemille ei ole vakiintunutta suomenkielistä käännöstä (joskus puhutaan design-järjestelmästä). Design Systemit ovat tänä päivänä yleisiä yrityksissä, joissa työskentelee enemmän kuin yksi suunnittelija, jotka voivat jakaa saman Design Systemin.
Jotkut yritykset ovat rakentaneet oman Design Systemin, koska he haluavat nopeuttaa suunnittelutyötä ”vakioimalla” esimerkiksi suunnittelumenetelmiä ja käyttöliittymän elementtejä, jotta niitä ei tarvitse suunnitella joka projektissa uudelleen. Samalla he pyrkivät varmistamaan, että kaikki saman yrityksen julkaisemat sovellukset ovat visuaalisesti yhtenäisiä ja seuraavat brändi-ilmettä.
Design System sisältää tyypillisesti mm. seuraavia sisältöjä:
- tyylikirjasto (fontit, värit, ikonit)
- komponenttikirjasto (napit, tekstikentät, valikot, jne.)
- komponentit ja tyylit koodimuodossa ohjelmoijille
- kuvaus organisaation suunnitteluprosesseista ja -periaatteista
- tyyliopas käyttöliittymäteksteille (brändille sopiva tapa puhutella käyttäjää)
Digitaalinen palvelumuotoilu
Digitaalinen palvelumuotoilu (digital service design) on digitaalisen palvelun konseptisuunnittelua. Prosessin ja menetelmien osalta kyse on samasta asiasta kuin palvelumuotoilussa (service design) ja suunnitteluajattelussa (design thinking) yleisesti. Digitaalisesta palvelumuotoilusta voidaan puhua, kun on tunnistettu, että jonkinlainen verkkopalvelu tai mobiilisovellus tulee todennäköisesti olemaan keskeinen osa kehitettävää palvelukonseptia.
Palvelumuotoilu on vahvasti ihmiskeskeistä toimintaa, kuten on myös UX/UI-suunnittelussa hyödynnettävä käyttäjäkeskeinen suunnittelu. Molemmissa lähdetään usein liikkeelle tutkimalla käyttäjäryhmien nykyistä arkea.
Eroa voidaan määritellä niin, että palvelumuotoilussa lähtötilanne voi olla “sumuisempi” ja design-menetelmien avulla vasta selvitetään, toisiko digitaalisen ratkaisun kehittäminen lisäarvoa asiakkaalle. Sen sijaan UX/UI-suunnittelun käynnistyessä päätös verkkopalvelun tai sovelluksen tekemisestä on yleensä jo tehty.
Palvelumuotoilussa määritetään ensin liiketoiminnan tavoite ja kehittämisen kohteena oleva asiakasryhmä. Käyttäjätiedon pohjalta ideoidaan erilaisia mahdollisuuksia edistää liiketoimintaa haluttuun suuntaan, ja päätös verkkopalvelun tai sovelluksen toteutuksesta syntyy vasta prototyyppien avulla tehtävien kokeilujen kautta.
Lue lisää: Käytännön digitaalinen palvelumuotoilu -verkkokoulutus
Empatiakartta
Empatiakartat (empathy map) auttavat visualisoimaan käyttäjien käyttäytymistä, asenteita ja tunteita. Empatiakartta jaetaan neljään osaan perustuen siihen mitä käyttäjä sanoo, ajattelee, tekee ja tuntee.
Kartan keskelle asetetaan kehitettävän palvelun kohderyhmään kuuluva käyttäjäpersoona (user persona). Empatiakartan voi täyttää yhteistyössä projektitiimin kanssa, jolloin kaikki tiimin jäsenet saavat syvällisemmän käsityksen käyttäjästä.
Informaatioarkkitehtuuri
Informaatioarkkitehtuuri (information architecture) on kaaviokuva, johon on järjestetty digitaalisen palvelun sisällöt ja toiminnot. Kaavion avulla palvelukokonaisuus hahmottuu paremmin, ja siitä on helpompi keskustella kehitystiimissä.
Hyvän informaatioarkkitehtuurin taustalla on ymmärrys palvelun käyttäjän mentaalimallista ja käyttäjälle tutusta terminologiasta. Myös tieto käyttäjän tavoitteista ja tarpeista auttaa ryhmittelemään sisällöt käyttäjän näkökulmasta loogisesti.
Kun informaatioarkkitehtuuri on kuvattu, on helpompi lähteä suunnittelemaan tarkemmin sivuston tai sovelluksen navigaatiota, eli miten käyttäjä voi liikkua eri sisältöjen ja toimintojen välillä käyttöliittymässä.
Palvelu tuntuu käyttäjälle helpolta ja sujuvalta, kun palvelun informaatioarkkitehtuuri ja navigaatio pohjautuu ymmärrykseen käyttäjän mentaalimallista.
Iteratiivinen kehitys
UX/UI-suunnittelu on iteratiivista eli toistuvaa kehittämistä (iterative development), jossa suunnittelijat vuorottelevat tekemisen ja palautteen hakemisen välillä. Ratkaisuidea visualisoidaan prototyypiksi, ja sen toimivuutta testataan järjestämällä käytettävyystestejä loppukäyttäjien kanssa. Palautetta pyydetään myös projektin tilaajalta, teknisiltä toteuttajilta ja muilta projektin sidosryhmiltä.
Palautteen ja käytettävyystestien havaintojen perusteella tunnistetaan mahdolliset kehityskohteet, jonka jälkeen ratkaisua jatkojalostetaan. Yksi iteraatio kestää yleensä 1–4 viikkoa.
Ketterä kehitys
Ketterä kehitys (agile development) on nykyisin yleisesti käytetty lähestymistapa ohjelmistokehityksessä. Sen sijaan, että koko tuote pyrittäisiin rakentamaan kerralla “valmiiksi”, ketterässä projektissa tuotteen ensimmäinen versio julkaistaan nopeasti loppukäyttäjien kokeiltavaksi. Käyttäjiltä saatavan palautteen perusteella varmistetaan hyvissä ajoin, että toteutettava ohjelmisto etenee oikeaan suuntaan.
Ketterässä kehityksessä myös vältetään laajaa etupainotteista toiminnallisuuden määrittelyä ja dokumentointia. Sen sijaan UX-suunnittelija viimeistelee käyttöliittymän yksityiskohtia yhteistyössä ohjelmoijien kanssa, ja tarvittaessa tuotetta parannetaan myöhemmin (seuraavassa iteraatiossa) käyttäjiltä saatavan palautteen perusteella.
Konversio
Konversioksi (conversion) kutsutaan sitä, kun verkkopalvelussa tai sovelluksessa vieraileva asiakas tekee jotain, mikä edistää palvelun tarjoavan yrityksen tavoitteita.
Verkkosivuston tavoite voi olla esimerkiksi saada vierailija tilaamaan uutiskirje tai ostamaan tuote verkkokaupasta. Verkkopalvelussa voi olla useita tavoitteita, joiden konversion toteutumista kehitetään ja seurataan verkkoanalytiikan avulla.
Korttien lajittelu
Korttien lajittelu (card sorting) on menetelmä, jota UX-suunnittelijat joskus käyttävät tavatessaan suunnittelun alla olevan digitaalisen palvelun tulevia käyttäjiä. Korttien lajittelussa käyttäjät osallistuvat suunnittelutyöhön paperisten korttien avulla, joihin on kirjoitettu palveluun suunniteltuja sisältöjä ja toimintoja. Harjoituksessa käyttäjät järjestävät kortit itselleen loogisella tavalla.
Korttien lajittelu auttaa UX-suunnittelijaa esim. laajan verkkosivuston tai verkkokaupan sisällön rakenteen suunnittelussa, eli informaatioarkkitehtuurin suunnittelussa. Osallistamalla käyttäjiä varmistetaan, että sivuston käyttöliittymän valikot ja navigaatio ovat intuitiivisia ja johdonmukaisia.
KPI
Suorituskykyindikaattorit (key performance indicator, KPI) heijastavat yrityksen yleisiä tavoitteita, ja niiden seuraaminen on hyödyllistä myös UX/UI-suunnittelijalle. KPI-tavoitteista voidaan johtaa konkreettisia palvelun käyttöön liittyviä mittareita, jotka antavat tavoitteita UX/UI-suunnittelijan työlle.
Esimerkiksi jos yritys tavoittelee kasvattavansa uudelleen ostavien käyttäjien määrä, voidaan käyttöliittymää kehittämällä pyrkiä kasvattamaan esimerkiksi ostoslistoja tekevien käyttäjien määrää. Ostoslistan kerran tehnyt käyttäjä todennäköisesti ostaa uudelleen.
Joskus UX-suunnittelijat voivat asettaa myös käyttöliittymän helppokäyttöisyyteen ja tehokkuuteen liittyviä KPI-tavoitteita, kuten onnistumisaste, käyttäjän virhetaso tai tehtävään kuluva aika.
Käytettävyystesti
Käytettävyys- tai käyttäjätesti on tapahtuma, jossa loppukäyttäjiä edustava testihenkilö suorittaa hänelle annettavia tehtäviä käyttäen prototyyppiä tai olemassa olevaa verkkopalvelua tai mobiilisovellusta. Tavoitteena on löytää mahdolliset käytettävyysongelmat mahdollisimman aikaisessa vaiheessa suunnittelua, jolloin käyttöliittymäsuunnitelmien muokkaaminen on vielä helppoa.
Käytettävyystesti ei ole ”myyntitilanne” eli läpikäytäviä prototyyppejä ei esitellä tai selitetä käyttäjälle. Sen sijaan käyttäjää pyydetään ajattelemaan ääneen ja kertomaan miten hän ymmärtää prototyypin käyttöliittymän sisällön ja toiminnallisuuden. Tämä antaa kehitystiimille mahdollisuuden kuulla ja havainnoida, kuinka helppokäyttöinen ja hyödyllinen heidän käyttöliittymäideansa on.
Käyttäjätestiä voi ja kannattaa hyödyntää projektin eri vaiheissa. Ensimmäisissä käyttäjätesteissä voidaan esimerkiksi testata useita erilaisia konsepti-ideoita suppeilla ylätason prototyypeillä. Myöhemmin projektin aikana kun käyttöliittymän toimintalogiikka on varmistunut, voidaan testata yksityiskohtaisempaa käytettävyyttä laajemmalla prototyypillä.
Käyttäjäkeskeinen suunnittelu
Käyttäjäkeskeinen suunnittelu (user-centered design, UCD) ja käyttäjälähtöinen suunnittelu ovat pienistä eroistaan huolimatta käytännössä synonyymeja. Kyseessä on iteratiivinen digitaalisten palvelujen suunnitteluprosessi, jossa suunnittelijat ensin keräävät tietoa tuotteen tai palvelun käyttäjistä ja heidän tarpeistaan, ja pyrkivät sitten suunnittelemaan mahdollisimman hyvin käyttäjien toimintaa helpottavia ratkaisuja.
Käyttäjiä pyritään osallistamaan mahdollisuuksien mukaan suunnitteluprosessin eri vaiheissa niin, että käyttäjät osallistuvat ratkaisujen ideointiin ja/tai toimivat erilaisten prototyyppien testihenkilöinä käyttäjätesteissä.
Käyttäjäpersoona
Käyttäjäpersoona (user persona) on kuvaus henkilöstä, joka edustaa digitaalisen palvelun kohderyhmään kuuluvia käyttäjiä. Käyttäjäpersoonat ovat fiktiivisiä henkilökuvauksia, jotka kuitenkin rakennetaan todellisten käyttäjätutkimuksella kerättyjen tietojen avulla.
Käyttäjäpersoonien tunnistaminen auttaa suunnittelijaa huomioimaan loppukäyttäjän tarpeet käyttöliittymän suunnittelussa, jolloin tuote palvelee käyttäjää mahdollisimman hyvin. Persoonakuvaukset helpottavat myös kehitystiimin sisäisiä keskusteluja, kun persoonan nimellä voidaan viitata tiettyyn käyttäjäryhmään.
Lean UX
Lean UX -termille ei ole hyvää suomenkielistä käännöstä. Lean UX -työtapa perustuu ketterään kehitykseen, jossa kehitystiimin jäsenet työskentelevät tiiviisti yhdessä. He pallottelevat ratkaisuja, ja käyvät läpi UX/UI-suunnitelmia keskustellen, jolloin suunnittelijan ei tarvitse käyttää aikaa käyttöliittymän dokumentointiin.
Lean UX -mallissa on kuvattu, miten käyttäjäkeskeistä suunnittelua voi tehdä tehokkaasti ja ketterästi. Suunnittelupäätöksiä tehdään käyttäjätietoon ja dataan perustuen. Tuotteelle asetetut vaatimukset ajatellaan olettamuksina, jotka saattavat vielä muuttua työskentelyn aikana. Olettamuksia testataan systemaattisesti hypoteesien avulla.
Lean UX -tiimi pyrkii ideoimaan ratkaisuja, jotka on mahdollista toteuttaa käyttöliittymäprototyyppinä tai sovelluksena vähin resursseihin, jotta hypoteesit päästään testaamaan mahdollisimman nopeasti. Ideoita testataan käyttäjätestien avulla, tai mittaamalla käyttäjien toimintaa julkaistussa palvelussa. Käyttäjätestien tulokset puretaan heti koko kehitystiimin kesken.
Mockup
Mockupille ei ole hyvää UX/UI -kontekstiin sopivaa suomenkielistä käännöstä. Mockup-termillä viitataan yksinkertaisesti käyttöliittymäkuvaan, joka esittää jonkin idean tai miltä käyttöliittymä voisi näyttää suunnitellun muutoksen jälkeen. Kuva voi olla rautalankakuva tai visuaalisesti viimeistelty käyttöliittymäkuva, riippuen projektin vaiheesta.
Prototyyppi
Prototyyppi (prototype) on alustava malli verkkopalvelun tai mobiilisovelluksen käyttöliittymästä. Prototyyppi voi olla UX/UI-suunnittelijan tekemä yksinkertainen suunnitteluohjelmassa rakennettu prototyyppi, tai ohjelmoijan koodaama enemmän toimintoja sisältävä prototyyppi.
Suunnitteluohjelmissa (esim. Figmassa) on mahdollista tehdä prototyyppejä helposti yhdistelemällä käyttöliittymäkuvat toisiinsa, jolloin prototyypin nappeja painelemalla voi saada tuntumaa, miltä valmiin käyttöliittymän käyttö tuntuisi. Tätä hyödynnetään käyttäjätestauksessa, jossa käyttäjä voi kokeilla prototyyppiä, ja suunnittelija saa palautetta käyttöliittymän toimivuudesta.
Prototyyppejä voi hyödyntää suunnitteluprosessin eri vaiheissa, jolloin alussa palautetta voi hakea palvelun konsepti-ideaan, ja myöhemmillä testikierroksilla tarkennetulla prototyypillä voi hioa käyttöliittymän yksityiskohtia.
Rautalankakuvat
Rautalankakuvat (wireframes) ovat mustavalkoisia pelkistettyjä kuvia käyttöliittymän eri näkymistä. Rautalankakuvia voi piirtää sekä kynällä ja paperilla, että tietokoneella suunnitteluohjelmaa käyttäen. Rautalankoja käytetään, jotta voidaan nopeasti hahmotella käyttöliittymän toimintaa ilman, että täytyy vielä miettiä visuaalisia yksityiskohtia (niiden aika tulee myöhemmässä suunnitteluvaiheessa).
Rautalankojen avulla voidaan kokeilla erilaisia suunnitteluratkaisuja. Kun ideat on visualisoitu rautalankakuvien muotoon, on ideoista helpompi keskustella projektin tiimin ja tulevien käyttäjien kanssa. Keskusteluissa on myös helpompi keskittyä sovelluksen toimintalogiikkaan, kun visuaalista ulkoasua ei ole vielä mukana.
Responsiivinen suunnittelu
Responsiivisuudella (responsive) tarkoitetaan, että käyttöliittymän elementtien asettelu ja koot osaavat sopeutua erilaisiin näyttökokoihin niin, että käytettävyys on jokaisella laitteella hyvällä tasolla. Responsiivisesti toteutettua käyttöliittymää voi käyttää miellyttävästi esimerkiksi suurilla työpöytänäytöillä ja pienellä puhelimen näytöllä. Selainpohjaista käyttöliittymää suunniteltaessa UX/UI-suunnittelija huomio eri näyttökoot suunnittelussa.
Responsiivisessa suunnittelussa kiinnitetään huomiota myös kontekstiin, jossa eri laitteita käytetään. Esimerkiksi joskus mobiilikäyttäjältä voidaan piilottaa elementtejä, jotka eivät auta käyttäjää tehtävän suorittamisessa puhelimella. Puhelinten kosketusnäytöt vaativat, että toimintonapit ovat riittävän suuria sormilla käytettäväksi.
UI flow (tai wireflow)
UI flowlle ei ole hyvää suomenkielistä käännöstä. UI flow on suunnittelijan tekemä kuvaus, jossa yksittäiset käyttöliittymän näkymät on yhdistetty toisiinsa nuolilla. UI flow näyttää, mistä kohtaa näkymää käyttäjän tulee painaa, jotta hän voi edetä seuraavaan näkymään/toimintoon. Tyypillisesti UI flown avulla kuvataan sovelluksen yleisiä käyttötilanteita.
UI-elementti
UI-elementeiksi (UI element) kutsutaan kaikkia käyttöliittymässä esiintyviä visuaalisesti tunnistettavia osia. Elementtejä ovat esimerkiksi napit, syöttökentät, valikot, kuvat ja linkit.
Jos käyttäjä voi tehdä elementin avulla jotain, tulee suunnittelijan kiinnittää huomiota siihen, että elementin ulkoasu ja muoto antaa vaikutelman toiminnallisuudesta (eli esimerkiksi toimintonapin tulee näyttää visuaalisesti napilta, että käyttäjä huomaa sen).
UI-komponentti
UI-komponentit (UI component) ovat käyttöliittymän suunnitteluohjelmaan ja/tai ohjelmakoodiin rakennettuja valmiita palikoita, joiden avulla voi nopeuttaa käyttöliittymän suunnittelua ja toteutusta. Komponenteiksi voidaan rakentaa mitä tahansa käyttöliittymän elementtejä, esimerkiksi napit, tekstikentät ja valikot.
Kun elementit on kerran rakennettu komponenttikirjastoon, voidaan niitä käyttää helposti esimerkiksi yrityksen kaikissa eri sovelluksissa, ja näin sovellusten ulkoasu saadaan pidettyä helpommin yhtenäisenä. Komponenttien käyttö myös säästää suunnittelijan aikaa, kun elementtien ulkoasua ei tarvitse suunnitella joka kerta uudelleen.
Haluaisitko oppia UX/UI-suunnittelua?
Katso UX Academy Finlandin verkkokoulutus:
UX/UI-suunnittelun perusteet
Tai lue lisää aiheesta:
5 syytä opiskella UX-suunnittelua