Käyttäjäkokemus- ja käyttöliittymäsuunnittelu tunnetaan myös nimellä UX/UI-suunnittelu. UI eli User Interface, suomeksi käyttöliittymä, on se verkkosivuston, sovelluksen tai muun tuotteen osa, jonka kautta käyttäjä on vuorovaikutuksessa tuotteen kanssa. Esimerkiksi mobiilisovelluksessa käyttöliittymä tarkoittaa näytöllä näkyviä elementtejä ja tietoja, joiden avulla käyttäjä voi ohjata sovellusta sormillaan painelemalla ja pyyhkäisemällä.
UX eli User Experience, suomeksi käyttäjäkokemus (tai käyttökokemus), tarkoittaa tunteita, joita käyttäjä kokee hoitaessaan vapaa- ja työajan tehtäviään verkkopalvelun tai mobiilisovelluksen avulla. Riippuen digipalvelun laadusta, tunteet voivat olla mitä tahansa turhautumisen ja ihastumisen välillä. Käytännössä UX/UI-suunnittelu on kokoelma menetelmiä, joiden avulla sovellusta ja käyttöliittymää suunnitellaan.
Käyttäjäkokemus- ja käyttöliittymäsuunnittelu tähtää siihen, että projektin kohderyhmänä olevat käyttäjät viihtyvät palvelussa. Hyvä käyttäjäkokemus syntyy, kun käyttäjä saa tehtyä haluamansa asiat helposti, tehokkaasti ja ilman pitkää käytön harjoittelua. Tyylikäs ulkoasu, selkeät tekstit ja viimeistellyt yksityiskohdat varmistavat miellyttävän kokemuksen.
Käyttäjäkokemussuunnittelu määrittää kokonaiskuvaa
Digitaalisen palvelun hienolla käyttöliittymällä ei ole suurta merkitystä, ellei palvelu auta asiakasta tai käyttäjää suorittamaan tehtäväänsä selvästi helpommin verrattuna muihin toimintatapoihin. Ihmiset eivät ala käyttää esimerkiksi mobiilisovellusta vain siksi, että se voi olla aina mukana. Mobiilisovelluksen tulee helpottaa elämää jollain merkittävällä tavalla.
Jotta voidaan ymmärtää mihin elämänsä kipupisteisiin käyttäjä toivoo parannusta, digitaalisen palvelun suunnittelu yleensä käynnistetään palvelumuotoilustakin tutuilla menetelmillä, kuten käyttäjähaastatteluilla. Näin voidaan tunnistaa kohderyhmät ja löytää motivaatiotekijät, jotka antavat syyn digipalvelun käytölle.
Kerätyn käyttäjätiedon ja projektin tilaajan liiketoiminnallisten tavoitteiden pohjalta voidaan digipalvelulle ideoida tarpeeseen sopivat päätoiminnot, sekä alustava visuaalinen ja viestinnällinen tyyli. Positiivinen käyttäjäkokemus edellyttää, että sovellus on helppokäyttöinen ja toimii saumattomasti yhteen organisaation tarjoamien palveluiden kanssa, jolloin käyttäjä saa asiansa hoidettua käyttöliittymän kautta ja hyvällä fiiliksellä.
Kun käyttäjäkokemus on määritelty, voidaan siirtyä tarkempaan käyttöliittymäsuunnitteluun.
Käyttöliittymäsuunnittelun tavoite
Käyttöliittymäsuunnittelija pohtii seuraavia asioita:
- miten käyttöliittymä voi parhaalla tavalla auttaa käyttäjää tehtävissään,
- mistä käyttöliittymän toiminnot löytyvät ja miten ne toimivat,
- miltä käyttöliittymä visuaalisesti näyttää.
Prototyypit ja käyttäjätestaus
Usein parhaat käyttöliittymäratkaisut löytyvät, kun suunnitteluvaiheen aikana rakennetaan Figmalla (tai vastaavalla työkalulla) prototyyppejä ja testataan niitä tulevien käyttäjien kanssa.
Käyttäjäpalautteen avulla voidaan varmistua käyttöliittymäideoiden toimivuudesta. Voit oppia tästä lisää ilmaisella UX-suunnittelun lyhytkurssilla.
Käyttöliittymäsuunnittelu – vaiheet
Kun käyttäjäkokemusta lähdetään suunnittelemaan, voidaan käyttöliittymäsuunnittelu jakaa kahteen erilliseen työvaiheeseen, jotka ovat interaktiosuunnittelu ja visuaalinen suunnittelu.
Jos haetaan analogiaa omakotirakentamisesta ja verrataan käyttöliittymän ja talon suunnittelua, voisi interaktiosuunnittelu vastata talon arkkitehtuurisuunnittelua. Visuaalisen suunnittelun taas voidaan ajatella olevan vastaava työvaihe kuin talon eri huoneiden sisustussuunnittelu.
Interaktiosuunnittelu käsittää käyttöliittymän toimintalogiikan ja sisällön rakenteen suunnittelun niin, että käyttöliittymä on helposti opittava ja käytettävä.
Interaktiosuunnittelun lopputuloksena syntyy:
- Informaatioarkkitehtuurin kuvaus
- Navigaation toiminnan kuvaus
- Käyttöliittymän elementtien kuvaus
- Prototyyppejä
Visuaalinen suunnittelu nimensä mukaisesti tarkoittaa ulkoasun suunnittelua niin, että käyttöliittymä on selkeä, viimeistelty ja tuo esille brändi-ilmettä. Miellyttävä ulkoasu saa käyttäjän suhtautumaan sovellukseen positiivisesti, mutta ulkoasulla ei voi korjata mahdollisia interaktiosuunnittelun ongelmia, kuten esimerkiksi sekavaa valikkorakennetta.
Visuaalisen suunnittelun lopputuloksena syntyy:
- Ulkoasultaan viimeistellyt kuvat käyttöllittymän näkymistä (tarvittaessa eri näyttökoot huomioiden)
- Ohjeistus fonttien ja värien käytöstä (tyylit)
- Mahdollisesti animaatiot
- Mahdollisesti ikoneita tai muita graafisia elementtejä
Käyttöliittymämallit
Kuten monella muullakin alalla, yksi tehokkaimmista oppimistavoista on tutkia ja hyödyntää jo olemassa olevia toteutuksia, tässä tapauksessa käyttöliittymiä. Ja niitähän riittää, sillä maailma on täynnä erilaisia digitaalisia palveluita ja mobiilisovelluksia.
Yleisimpiin digipalveluihin on muodostunut ns. käyttöliittymämalleja (ui patterns). Nämä mallit ovat syntyneet, kun hyväksi todetut ratkaisut ovat levinneet ja saman toimialan palveluissa on alettu käyttää samankaltaista informaatioarkkitehtuuria, navigaatiota ja käyttöliittymän elementtejä.
Yksi esimerkki käyttöliittymämallista on verkkokaupan käyttöliittymä, ks. alla kuvassa Amazon-verkkokaupan mobiilisivujen yläpalkki.
Verkkokauppojen käyttöliittymissä on tavallista, että ostoskori löytyy aina oikeasta ylänurkasta, ja hakukenttä on yläreunassa. Ostoskorin kautta pääsee maksamaan ostokset. Tuttuja piirteitä löytyy yleensä muualtakin käyttöliittymästä, esimerkiksi samankaltaista on tuoteryhmien selaaminen ja tuotteiden esittely.
Kun käyttöliittymässä on piirteitä, jotka ovat käyttäjälle ennestään tuttuja muista palveluista, nopeutuu uuden palvelun oppiminen huomattavasti. Verkkokaupan tapauksessa käyttäjä voi heti keskittyä tuotteiden vertailuun ja ostamiseen sen sijaan, että hänen pitäisi ensin miettiä, miten verkkokauppaa toimii: mistä voi selata tuotteita, tai mistä napista tuotteet maksetaan.
Olemassa olevan käyttöliittymän jatkokehitys
Kun UX/UI-suunnittelija saa tehtäväkseen jatkokehittää jo olemassa olevaa sovellusta, on hänen hyvä ensin analysoida miten sovellus tällä hetkellä toimii, ja seuraako se mahdollisesti jotain tunnistettavia käyttöliittymämalleja.
Kun suunnittelija ymmärtää miten sovellus tällä hetkellä ratkaisee loppukäyttäjän tarpeita, on helpompi sijoittaa uudet toiminnot loogisiin paikkoihin käyttöliittymässä. Jatkokehitystä tehtäessä tulee varoa, että ei tarpeettomasti rikota ennestään toimivaa käyttölogiikkaa.
Jotta varmistutaan käyttöliittymän muutosten toimivuudesta, on järkevää testata suunnitelmat loppukäyttäjien kanssa käyttöliittymäprototyyppejä hyödyntäen.
Informaatioarkkitehtuuri
Kun uuden palvelun tai toiminnallisuuden alustava konsepti-idea on suunnittelijan tiedossa, käyttöliittymäsuunnittelun voi aloittaa järjestämällä uudet toiminnot ja sisällöt käyttäjän näkökulmasta loogiseksi kokonaisuudeksi. Tästä muodostuu sovelluksen informaatioarkkitehtuuri, joka hienosta nimestään huolimatta yleensä kuvataan helposti rakennettavalla kaaviokuvalla.
Jotta loppukäyttäjän on helppo oppia palvelun käyttö, tulisi informaatioarkkitehtuuri suunnitella niin, että sisältöjen ja toimintojen ryhmittely seuraa käyttäjän ymmärrystä (ns. mentaalimallia) palvelun aiheesta. Tyypillinen virhe on, että esimerkiksi tuotteet ja palvelut ryhmitellään verkkopalveluun organisaation sisäisen rakenteen mukaan. Koska sisäinen rakenne on usein organisaation asiakkaalle tuntematon, on palvelun käyttölogiiikkaa vaikea ymmärtää intuitiivisesti.
Navigaation toiminta
Informaatioarkkitehtuuri näyttäytyy käyttäjälle erityisesti käyttöliittymän navigaatioelementeissä, eli erilaisissa valikoissa, välilehdissä ja oikopoluissa. Navigointi tarjoaa reitit, joita pitkin käyttäjä voi siirtyä sovelluksessa paikasta toiseen.
Käyttäjän useimmin käyttämiin toimintoihin kannattaa tarjota oikopolkuja, jotta aina ei tarvitse selata läpi valikkoja. Oikopolun kautta voi hypätä nopeasti syvemmälle sovellukseen.
Käyttöliittymän elementit
Interaktiosuunnittelua tehdessä hahmotellaan näkymien rakennetta ja sisältöä, ja mietitään mitä kuvia, tekstejä ja toimintoja kussakin näkymässä on. Uutta palvelua tai toiminnallisuutta suunniteltaessa käytetään tyypillisesti ns. rautalankakuvia (wireframes), joista puuttuu vielä visuaalinen ulkoasu.
Mobiilisovelluksien yleisiä käyttöliittymämalleja
Mobiilikäyttöliittymien toimintaa on kuvattu kattavasti puhelinvalmistajien toimesta. Applen ja Googlen tuottamissa käyttöliittymäohjeistoissa kuvataan käyttöliittymäelementtejä (valikkoja, navigaatiomalleja, jne.), joita käytetään iPhonen ja Android-puhelinten mukana tulevissa vakiosovelluksissa, joita ovat esimerkiksi sähköposti- ja kuvagalleriasovellukset.
Vakiosovelluksia käyttäessään ihmiset oppivat käyttöliittymien toiminnasta, joten jos uusien sovellusten suunnittelijat käyttävät samanlaisia toimintoja aina kun mahdollista, on käyttäjän helpompi oppia nopeasti myös uudet sovellukset.
Voit vilkaista Applen käyttöliittymäohjeistoa seuraavasta linkistä:
Human Interface Guidelines (Apple)
Visuaalisen ulkoasun rooli käyttöliittymässä
Käyttöliittymäsuunnittelu tarkoittaa erityisesti käyttöliittymän visuaalista ulkoasua, eli sitä miltä näytöllä näkyvät elementit näyttävät, ja mikä niiden koko ja tarkka sijainti on.
Luova ja huolellisesti tehty visuaalinen ulkoasu on tärkeä osa digitaalista palvelua. Ulkoasu viimeistelee käyttöliittymän, ja vahvistaa omalta osaltaan miellyttävää käyttäjäkokemusta. Nielsen Norman Groupin mukaan on tutkittu, että kun ulkoasu miellyttää käyttäjää, hän jopa antaa anteeksi pieniä kömpelyyksiä käyttöliittymän toiminnassa.
Käyttöliittymäsuunnittelussa käytettävät suunnitteluohjelmat (kuten Figma) helposti ohjaavat suunnittelijaa liian nopeasti värien, fonttien ja muiden ulkoasun yksityiskohtien suunnitteluun. On hyvä muistaa, että uudessa projektissa suunnittelutyötä ei yleensä aloiteta ulkoasun suunnittelusta. Onnistunut käyttöliittymäsuunnittelu perustuu hyvin tehtyyn konsepti- ja interaktiosuunnitteluun, joita käsiteltiin lyhytkurssin edellisillä oppitunneilla.
Käyttöliittymäsuunnittelun työpaikkailmoituksissa näkee käytettävän lyhenneparia UX/UI, kun halutaan korostaa, että suunnittelijalta toivotaan visuaalisen suunnittelun lisäksi laajempaa UX-osaamista. Tällöin suunnittelijalta odotetaan esimerkiksi kykyä suunnitella navigaatiota ja toimintalogiikkaa, ja taitoa hyödyntää prototyyppejä eri ratkaisujen kokeilemiseen loppukäyttäjien kanssa.
Onko jokainen UX-asiantuntija myös visuaalinen suunnittelija?
Visuaalisen suunnittelun kiinnostavuus jakaa ihmisiä. Toisille visuaalisuus on luonteva kulma UX/UI:n opiskeluun, johtuen esimerkiksi aiemmasta graafisen alan osaamisesta tai mielenkiinnosta. Toiset taas eivät koe yksityiskohtaista visuaalista suunnittelua väri- ja fonttivalintoineen omaksi jutukseen, vaan ovat enemmän kiinnostuneita konsepti- tai interaktiosuunnittelusta.
UX-suunnittelijana voi työskennellä myös ilman visuaalista osaamista. UX- ja digikehitysalan työt yleensäkin ovat tiimityötä, jossa suunnittelutyön eri vaiheisiin erikoistuneet tekijät täydentävät toistensa osaamista. Perusteiden opiskelun jälkeen kannattaa lähteä syventymään itseä eniten kiinnostaviin työvaiheisiin.
Brändi-ilme käyttöliittymään
Käyttöliittymän visuaalisen suunnittelun lähtökohtana on yrityksen brändi ja graafinen ohjeisto, jos sellainen on olemassa. Graafisessa ohjeistossa on tyypillisesti määritetty yrityksen logo, fontteja, värejä ja mahdollisesti visuaalisia elementtejä ja kuvia, joita voidaan soveltaa myös käyttöliittymään. Käyttöliittymäsuunnittelija yleensä tallentaa brändielementit suunnitteluohjelmaan (esim. Figmaan) osaksi ns. Design System -kirjastoa, johon on tapana koota käyttöliittymien rakennuspalikat helposti uudelleen käytettävään muotoon.
Jos graafista ohjeistoa ei ole, työskentelyssä otetaan askel taaksepäin ja lähdetään selvittämään, minkälaista mielikuvaa digipalvelua tarjoava yritys haluaa välittää itsestään. Tämän pohdinnan tuloksena syntyy yrityksen visuaalinen identiteetti, värit, fontit ja muut elementit, jotka lopulta dokumentoidaan graafiseen ohjeistoon.
Käyttöliittymäsuunnittelija ei yleensä ole vastuussa yritysilmettä määrittävän graafisen ohjeiston tekemisestä, sillä se vaatii laajempaa visuaalisen alan osaamista. Kuitenkin joissain tapauksissa, esimerkiksi startup-yrityksissä, visuaalisen ilmeen rakentaminen aloitetaan tuotteen käyttöliittymästä, jolloin käyttöliittymäsuunnittelijalta vaaditaan enemmän visuaalisia taitoja.
Helppokäyttöisyys ja saavutettavuus
Visuaalisella suunnittelulla pyritään viestimään haluttuja mielikuvia ja laadukkuutta, mutta ensisijaista on varmistaa käyttöliittymän helppokäyttöisyys. Esimerkiksi, on tärkeää valita selkeät värit toiminnallisten elementtien (esim. napit ja linkit) esittämiseen. Yritysilmeen pääväri voi olla hyvä kandidaatti nappien taustaväriksi, jos sen päälle saa lisättyä vaalean tai tumman tekstin riittävällä kontrastilla. Hyvä kontrasti varmistaa käyttöliittymän tekstien helpon luettavuuden kaikille, myös huononäköisille käyttäjille. Tarvittaessa virallisia brändivärejäkin säädetään digipalveluita varten riittävän kontrastin tavoittamiseksi. Käyttöliittymäsuunnittelu ja tekninen toteutus ovat keskeisessä roolissa rakennettaessa kaikkien ihmisten saavutettavissa olevia digipalveluita.
Värikontrastien tarkistus onnistuu helposti esimerkiksi Contrast Checker -nettisivun avulla, jonne voi copy-pastella viedä värikoodit Figmasta. Kontrastin laskemiseksi nettisivu tarvitsee sekä tekstin (foreground color) että taustan (background color) värikoodit. Nykyisten saavutettavuusvaatimusten mukaisesti esim. leipätekstin tekstin ja taustan välinen kontrasti tulisi olla vähintään 4.50:1.
Sovelluksen ulkoasun toteutuksen tulisi myös sallia tekstifonttien koon suurentaminen käyttäjän tarpeen mukaan, jotta myös heikkonäköiset voivat käyttää sovellusta.
Harjoitustehtävä
Jos käyttöliittymäsuunnittelu kiinnostaa, voit aloittaa harjoittelemalla analysoimaan sovellusten taustalla olevaa interaktiosuunnitelmaa eli toimintalogiikkaa.
Tutki suosikkisovelluksiasi puhelimestasi. Kiinnitä huomiota sovelluksen navigaatioelementteihin, ja yritä muodostaa itsellesi kuva minkälaisen hierarkian mukaan sisällöt ja toiminnot on järjestetty. Tarjoaako sovellus oikopolkuja, ja löydätkö eri sovellusten väliltä samankaltaisuuksia?
Käyttöliittymä- ja käyttökokemussuunnittelu -koulutukset
Tutustu UX/UI-suunnittelun ja Figman perusteet -verkkokoulutukseen, jossa opit myös Figma-suunnitteluohjelman perusteet.