Käyttökokemussuunnittelun opas
Käyttökokemuksen ja käyttöliittymien suunnittelu määrittelee, miten palvelu toimii käyttäjän näkökulmasta. Oppaasta löydät tietoa Helsingin kaupungin UX- ja UI-suunnittelun toimintatavoista ja ohjeista. Tämä syventävä opas on tarkoitettu tuoteomistajille sekä kaupungin projekteissa työskenteleville UX/UI-suunnittelijoille.
Tällä sivulla
- Mitä on käyttökokemuksen suunnittelu?
- Käyttökokemussuunnittelu kehittämisen eri vaiheissa
- Kaupungin UX-verkosto kokoaa yhteen kaikki kaupungilla UX-työtä tekevät!
- Sinua voisi kiinnostaa
Mitä on käyttökokemuksen suunnittelu?
Käyttökokemuksen (UX) ja käyttöliittymien (UI) suunnittelu varmistaa digitaalisten palvelujen käyttäjälähtöisyyden.
Käyttökokemus (User Experience, UX) on kokonaisvaltainen käsite, joka kuvaa, miltä henkilöstä tuntuu ja mitä hän ajattelee ollessaan vuorovaikutuksessa jonkin digitaalisen tuotteen, palvelun tai järjestelmän kanssa. Onko tuote tai palvelu intuitiivinen ja selkeä käyttää? Pystyykö henkilö saavuttamaan tavoitteensa vaivattomasti ja tehokkaasti? Entä kokeeko hän palvelun hyödylliseksi tai luotettavaksi?
Hyvän käyttökokemuksen keskiössä ovat aina käyttäjän subjektiiviset tarpeet, tavoitteet, motivaatiotekijät sekä mahdolliset haasteet ja rajoitteet. UX-suunnittelun lähtökohtana on näiden tarpeiden syvällinen ymmärtäminen tutkimuksen ja testauksen avulla.
Kun palvelu on rakennettu sen käyttäjiä kuunnellen ja heidän tarpeensa huomioiden, on lopputuloksena korkeampi asiakastyytyväisyys, helpompi ja nopeampi asioiden hoitaminen, pienempi määrä virheitä sekä suurempi halu käyttää palvelua uudelleen.
Käyttöliittymä (User Interface, UI) ja sen visuaalinen ilme ovat näkyvin osa käyttökokemusta. Kun käyttökokemus (UX) keskittyy loppukäyttäjien ymmärtämisen avulla palvelun kokonaiskuvan suunnitteluun, syvennytään käyttöliittymäsuunnittelussa puolestaan palvelun visuaalisuuteen yksityiskohtaisesti. Hyvin suunniteltu käyttöliittymä on visuaalisesti ja hierarkkisesti selkeä, toimii eri laitealustoilla yhdenmukaisesti ja opastaa käyttäjää intuitiivisesti eteenpäin.
Kaupungin visuaalisen ilmeen tavoitteena on rakentaa yhtenäistä ja tunnistettavaa Helsinki-kuvaa. Tavoitteena on, että myös kaupungin digitaaliset palvelut ja verkkosivustot tunnistaa Helsingin kaupungin palveluiksi ensi silmäyksellä: tämä vahvistaa yhdenmukaista käyttökokemusta ja luottamusta kaupungin palveluihin.
Visuaalisen ilmeen ohjeisto kertoo, mistä elementeistä ilme koostuu ja kuinka elementtejä käytetään eri tilanteissa ja sovelluksissa.
Käytettävyys on yksi hyvän käyttökokemuksen tärkeimmistä kulmakivistä. Yksinkertaisimmillaan käytettävyydessä on kyse siitä kuinka helppoa ja intuitiivista palvelun käyttäminen on. Hyvä käytettävyys koostuu kuitenkin monesta eri osatekijästä, joiden teoreettinen tausta ja laadun mittarit löytyvät kognitiotieteestä. UX/UI-suunnittelija on käytettävyyden asiantuntija, joka kykenee päivittäisessä työssään huomioimaan käytettävyyden lainalaisuuksia intuitiivisesti.
Käytettävyyden laatua voidaan mitata viidellä keskeisellä mittarilla:
- Opittavuus: Kuinka nopeasti käyttäjät ymmärtävät miten palvelua käytetään ja kykenevätkö he saavuttamaan tavoitteensa mahdollisimman vähäisellä koulutuksella?
- Tehokkuus: Kuinka nopeasti ja vaivatta käyttäjät kykenevät suorittamaan haluamansa tehtävät palvelussa?
- Muistettavuus: Kuinka hyvin käyttäjät muistavat miten palvelua käytettiin, kun aikaa edellisestä käyttökerrasta on jo kulunut tovi?
- Virheet: Kuinka monta virhettä käyttäjät tekevät palvelua käyttäessään, miten vakavia virheet ovat ja kuinka nopeasti käyttäjä toipuu niistä sekä pääsee eteenpäin?
- Tyytyväisyys: Kuinka miellyttävänä käyttäjät kokevat palvelun käytön? Korkea tyytyväisyys edistää osaltaan positiivista käyttökokemusta ja rohkaisee käyttämään palvelua uudelleen.
Saavutettavuus on digitaalisen maailman esteettömyyttä. Tavoitteena on, että palvelua voi käyttää pysyvistä tai väliaikaisista toiminnan rajoitteista huolimatta mahdollisimman helposti. Hyvä saavutettavuus vahvistaa yhdenvertaisuuden kokemusta ja kertoo moninaisuuden ja erilaisten ihmisten tarpeiden huomioimisesta.
Saavutettavuus huomioidaan suunnittelussa visuaalisesti, sisällöllisesti ja teknisesti. Päivittäisessä työssään UX/UI-suunnittelija huomioi saavutettavuudesta esimerkiksi seuraavanlaisia seikkoja:
- Onko käyttöliittymän sivurakenne looginen ja helposti navigoitavissa myös apuvälineiden, kuten ruudunlukijan avulla?
- Onko palvelu visuaalisesti helposti hahmotettava ja ovatko värit, kontrastit ja tekstikoot havaittavia myös näkörajoitteiselle?
- Ovatko käyttöliittymätekstit selkeäkielisiä, loogisia ja kaikille ymmärrettäviä?
Helsingin tavoitteena on pyrkiä digitaalisten palveluiden saavutettavuudessa vähintään WCAG-ohjeistuksen mukaiseen AA- tai sitä parempaan tasoon.
Digitaalisten palvelujen kehittämisessä kannattaa noudattaa ”mobiili ensin” -periaatetta, jonka keskiössä on mobiilikäytön huomioiminen jo palvelun suunnittelussa. Näin varmistetaan, että palvelun käyttö on sujuvaa useimmilla laitteilla. Periaate myös rohkaisee palvelun toimintojen ja sisällön määrätietoiseen priorisointiin.
Huomioi ainakin näitä asioita:
- Suunnittele käyttöliittymä mobiililaitteen ruudun kokoon ja katsele suunnitelmaa pieneltä ruudulta.
- Tee mobiilikäyttäjän navigoinnista helppoa ja tuo tärkeimmät linkit suoraan käyttäjän nähtäville. Älä jätä tärkeimpiä linkkejä piiloon valikkoihin, joita mobiilikäyttäjät eivät usein avaa.
- Huomioi pieni näyttökoko myös sisällöntuotannossa. Kirjoita selkeästi ja tiiviisti.
Digitaalisten palveluiden ja tuotteiden yhtenäistä käyttökokemusta ja ilmettä hallinnoidaan Helsinki Design System -kirjaston suunnittelumallien ja komponenttien avulla. Helsinki Design System tarjoaa huolella suunnitellut, Helsingin brändiin pohjautuvat ja saavutettavuusstandardit täyttävät käyttökokemusratkaisut ja käyttöliittymien rakennuspalat kaikille Helsingin digitaalisille palveluille.
Vältä siis turhaa työtä ja katso ensin, mitä on jo valmiiksi saatavilla. Varmista myös, että kehitystiimisi suunnittelijat hyödyntävät HDS:n aineistoja ja ohjeita.
Tutustu Helsinki Design Systemiin
Käyttökokemussuunnittelu kehittämisen eri vaiheissa
Käyttökokemus kannattaa ottaa huomioon kaikissa digitaalisen palvelun tai tuotteen suunnitteluvaiheissa.
-
1Asiakastutkimus pohjalla
Kun UX/UI-suunnittelija kutsutaan palvelun kehittämiseen mukaan, on todennäköistä, että palvelumuotoilussa on jo edetty tiettyyn vaiheeseen. Tällöin palvelumuotoilun tuloksena on saattanutkin jo syntyä asiakasprofiileja, palvelupolkuja tai muuta asiakasymmärrystä, joilla UX/UI-suunnittelija pääsee hyvin vauhtiin. Voi myös olla, että palvelusta on tehty jo aiemmin erilaisia asiakastutkimuksia tai käyttäjätestejä, joiden tuloksista on myös hyötyä UX/UI-suunnittelijalle.
Käyttäjäymmärryksen määrän ja laadun tarpeeseen vaikuttaa suunniteltavan palvelun tai sen ominaisuuden monimutkaisuus sekä kuinka pitkällä palvelun elinkaaressa ollaan.
Esimerkiksi pienet UX/UI-parannukset jo julkaistuun palveluun harvoin vaativat lisää käyttäjätutkimusta, vaan suunnittelija voi tehdä päätökset omaan asiantuntijuuteensa perustuen. Jos kyseessä on puolestaan täysin uusi palvelu tai ominaisuus, nousee tarve käyttäjäymmärryksen määrälle ja laadulle huomattavasti.
-
2Osana palvelun konseptointia
Osana ideointi- ja konseptointiprosessia UX/UI-suunnittelija tekee useita eritasoisia hahmotelmia. Suurin osa hahmotelmista jää kuitenkin työpöydälle jo varhaisessa vaiheessa ja vain muutama potentiaalisin valikoituu jatkokehitykseen. Niitä katsotaan kenties yhdessä useamman silmäparin kera ja parhaassa tapauksessa testataan käyttäjillä. Näin tiedetään mitkä konseptit – ja millä muutoksilla – kannattaa viimeistellä tuotantovalmiiksi.
Vaiheen tuotoksia: palvelun pääominaisuudet, informaatioarkkitehtuuri, käyttäjän polku ja interaktiot palvelussa, sekä alustavat visuaaliset valinnat.
-
3Prototyyppi ja käyttäjätestaus
Ensimmäisiä konsepteja kannattaa testata palvelun loppukäyttäjillä jo hyvissä ajoin ennen ohjelmistokehityksen alkamista, kun muutosten tekeminen suunnitelmiin on vielä helppoa ja halpaa. Oikeiden loppukäyttäjien käsissä ilmenee yleensä aina jotain parannettavaa.
Prototyyppi on ensimmäinen konkreettinen visuaalinen luonnos tai malli kehitettävästä palvelusta tai palvelumuotoilun konseptointivaiheessa syntyneestä palveluvisiosta. Prototyypit ja visualisoinnit auttavat kommunikoinnissa eri sidosryhmien kanssa, ja prototyypin avulla palvelua voidaan testata käyttäjillä.
Prototyyppejä voidaan tehdä monilla tavoin. Prototyypin toteutustapa kannattaa valita ajan, resurssien ja käyttötarkoituksen mukaan.
-
4Tuotantovalmiin käyttöliittymän suunnittelu ja toteutus
Kun käyttökokemuskonseptin päälinjat ovat hyvällä mallilla, voi käyttöliittymäsuunnitteluun painottuva konseptin viimeistely alkaa. Tällöin käyttöliittymän eri toiminnallisuudet, interaktiot ja visuaalisuus viimeistellään yksityiskohtaiselle tasolle. Lopputulos vastaa jo täysin sitä, miltä valmis ja julkaistu palvelu tulee näyttämään.
Tärkeimpiä kohderyhmiä tuotantovalmiin käyttöliittymän toteutuksessa ovat sen käytäntöön toteuttavat ohjelmistokehittäjät. Tuotantovalmiissa käyttöliittymäkuvissa tärkeässä roolissa ovatkin UX/UI-suunnittelijan kehittäjille suunnatut ohjeistukset siitä, miten käyttöliittymän tulisi toimia ja käyttäytyä eri tilanteissa, kuten tietokoneen näytöltä mobiilikokoon siirryttäessä.
UX/UI-suunnittelijoiden ja ohjelmistokehittäjien välisen yhteistyön tulisi olla aktiivista ja keskustelevaa ongelmanratkaisua. Aktiivisella yhteistyöllä voidaan jo hyvissä ajoin löytää suunnitteluratkaisuja, jotka palvelevat sekä teknisesti hyvää toteutusta että käyttäjän tarpeita. Joskus myöhäisessäkin vaiheessa kehittämistä saattaa myös ilmaantua teknisiä rajoitteita, jotka vaativat muutoksia käyttöliittymäsuunnitelmiin. Tällöin aktiivisen ongelmanratkaisun- ja keskustelevan kulttuurin on hyvä jo olla olemassa. UX/UI-suunnittelija myös osaltaan seuraa käyttöliittymän kehittämisen etenemistä ja pitää huolen siitä, että käyttöliittymät tulevat yksityiskohtia myöten toteutetuksi kuten ne oli suunniteltu.
-
5Käyttöliittymätekstit ja sisältömuotoilu
Käyttöliittymät ja sisällöt kulkevat käsi kädessä. Käyttäjän tarpeista lähtevät sisällöt ovat keskeinen osa digitaalisen palvelun käyttökokemusta. Käyttöliittymien selkeä kieli tukee myös hyvää käytettävyyttä.
Sisällön sujuvuuteen vaikuttaa itse tekstin lisäksi myös sisällön visuaalinen asettelu ja hierarkia. Toisaalta käyttöliittymäsuunnittelulla voidaan esimerkiksi korostaa haluttuja sisältöjä tai kehottaa toimintaan. Käyttöliittymäsuunnittelija tekeekin tiivistä yhteistyötä sisältömuotoilijan kanssa suunnittelun edetessä.
Lue lisää sisältömuotoilun oppaasta
Tutustu myös hel.fi-äänensävyyn eli tyyli ja kieli, joilla kaupunki viestii verkkosivuilla.
-
6Palvelun jatkuva kehittäminen
Palvelun julkaisun jälkeen UX/UI-suunnittelija keskittyy käyttäjäpalautteen perusteella tapahtuvaan iteratiiviseen palvelun jatkokehittämiseen ja ohjelmistokehittäjien tukemiseen. Usein tämä tarkoittaa pienempien tuotantovalmiiden käyttöliittymäparannusten suunnittelua ja toteutusta yhdessä ohjelmistokehittäjien kanssa, sekä niiden käytettävyystestausta. Jatkokehitys ja ylläpitotyö voivat olla myös muun muassa saavutettavuuden validointia, sisältöjen kehittämistä, dokumentaation työstämistä, käyttäjäymmärryksen keräämistä seuraavien kehityskohteiden priorisointia varten tai kokonaan uusien palvelun ominaisuuksien konseptien luomista.
-
7Käytettävyystestaus
Palvelun käytettävyyttä kannattaa testata säännöllisesti erilaisilla käyttäjäryhmillä. Käytettävyystestaus keskittyy tutkimaan, miten helppoa palvelun käyttäminen on. Tämä eroaa käyttäjätestauksesta, jonka näkökulma on usein laajempi – esimerkiksi konseptin validointi, sisältöjen tai koko palvelupolun testaaminen.
Käytettävyystestauksessa arvioidaan palvelun tai sen ominaisuuden käytettävyyttä antamalla testitilanteessa käyttäjälle tehtävä, jonka hän suorittaa palvelussa. Käyttäjää havainnoidaan ja häneltä pyydetään palautetta.
Hyvä ohjelmistokehittäjä on UX/UI-suunnittelijan paras ystävä. Varmista, että muotoilu ja ohjelmistokehitys toimivat yhdessä.