Blogi

Käyttöliittymäsuunnittelu ja käyttäjäkokemus­suunnittelu

käyttäjäkokemussuunnittelu.

Ohjelmistokehityksessä käyttöliittymäsuunnittelu ja käyttäjäkokemussuunnittelu ovat projektin alkupäässä toteutettava prosessi. Niiden tarkoituksena on hahmotella käyttäjille yksinkertainen ja selkeä käyttöliittymä, joka mahdollistaa erinomaisen käyttö- eli käyttäjäkokemuksen.

Hyvin suunniteltu on puoliksi tehty” on sanonta, jonka me kaikki olemme joskus kuulleet.

Toimiva käyttöliittymä (UI eli User Interface) ohjaa käyttäjää tämän näkemien ja kuulemien asioiden mukaan. Hyvät värikontrastit, hierarkiat ja äänitoiminnot parantavat käyttökokemusta (UX eli User Experience) ja ne perustuvat siihen, miten ihminen hahmottaa visuaalisia rakenteita. Nämä asiat liittyvät myös aiemmin julkaistuun blogikirjoitukseemme saavutettavuudesta.

Suunnittelijan on kysyttävä, miksi joku tekee niin kuin tekee, sen sijaan, että ihmettelee, mitä ihmettä he tekevät.
– Don Norman 2013 –

Mitä käyttöliittymäsuunnittelu ja käyttäjäkokemussuunnittelu tarkoittavat

Tiivistettynä käyttöliittymäsuunnittelu (UI Design) tarkoittaa sitä, miltä sovellus visuaalisesti näyttää. Fontit, värit, painikkeet ja grafiikat ovat tärkeitä elementtejä sovelluksen käyttöliittymässä. Käyttäjäkokemussuunnittelussa (UX Design) keskitytään käyttäjän positiiviseen kokemukseen sovellusta käyttäessä.

Jokaisella vierailemallasi verkkosivulla tai käyttämälläsi sovelluksella on käyttöliittymä. Se siis tarkoittaa sitä, mitä näet eli sommittelua, sisältöjä, painikkeita ja niin edelleen.

Sovellukset ja verkkosivut voivat olla visuaalisesti todella näyttäviä ja kauniita, mutta jos käyttäjä ei löydä haluamaansa niin hän turhautuu helposti. Käyttöliittymän painopiste on sovelluksen laadussa, visuaalisuudessa ja teknisissä asioissa.

Käyttökokemus on yksi suunnittelun keskeisimmistä asioista. Sen painopiste on sovelluksen toimivuudessa ja logiikassa. Käyttäjäkokemussuunnittelussa otetaan huomioon käyttäjän tarpeet, tavoitteet. Hyvä käyttökokemus voi myös lisätä käyttäjien sitoutumista, luottamusta ja uskollisuutta sovellusta kohtaan.

Yllä olevassa kuvassa käyttökokemus johdattelee käyttäjää. Käyttöliittymä on alusta, missä käyttökokemusta toteutuu digitaalisella alustalla. Käyttökokemukset ovat osa päivittäistä arkeamme, esimerkkeinä oven avaaminen tai omenan kuoriminen.

Yhdessä käyttöliittymä- ja käyttäjäkokemussuunnittelu luovat kokonaisvaltaisen käyttöliittymän, joka tarjoaa käyttäjille helppokäyttöisen ja visuaalisesti miellyttävän sovelluksen käyttökokemuksen.

Sovelluksen käyttöliittymäsuunnittelu ja käyttäjäkokemussuunnittelu

UI/UX- suunnittelu tarkoittaa sitä, miltä digitaalinen palvelu tai sovellus näyttää ja miltä se tuntuu. Suunnittelussa haetaan tasapainoa näiden kahden asian välillä ja pyritään löytämään kultainen keskitie. Kun sovellus on visuaalisesti miellyttävä, selkeä ja helppo käyttää niin silloin suunnittelu on onnistunut.

Hyvin suunnitellun sovelluksen käyttäjä ei edes kiinnitä asiaan huomiota, mutta kun suunnittelussa on tehty virheitä, käyttäjä kokee negatiivisen yllätyksen tai odottamattoman tilanteen ja turhautuu. Tällöin sovellus ei palvele käyttäjää hänen odotustensa mukaisesti.

Käyttöliittymä- ja käyttäjäkokemussuunnittelu kulkevat niin lähellä toisiaan, että niitä on välillä vaikea erottaa toisistaan. Ohjelmistotalojen sisällä puhutaan paljon käyttäjän tekemistä tehtävistä.

Käyttäjän tehtäviä voi lähestyä esimerkiksi Google Mapsin kautta. Henkilö vierailee itselle tuntemattomassa kaupungissa ja haluaa löytää itseään lähimmän kahvilan. Hän kirjoittaa Mapsin hakukenttään ”kahvilat” ja kartalle ilmestyvät häntä lähimpänä olevien kahviloiden sijainnit.

Tämän jälkeen käyttäjä valitsee kartalta haluamansa kohteen ja navigoi sinne. Perille päästyään hän lopettaa navigoinnin. Edellä mainittu on esimerkki sovelluksen tehtävästä.

Käyttöliittymäsuunnittelussa huomioidaan erilaisia tehtäviä, joita sovelluksessa voi tehdä. Suunnittelija pyrkii tekemään kokemuksesta mahdollisimman selkeän ja saumattoman. Suunnittelijan täytyy huomioida käyttäjän ensisijainen tehtävä, jonka tämä haluaa sovelluksella. Google Maps sovelluksen ylälaitaan sijoitettu tekstihakukenttä on helposti löydettävissä. Tämä on käyttäjäkokemussuunnittelua.

Mitä sovelluksen UI/UX-suunnittelu edellyttää

Yksinkertaistettuna UI/UX suunnittelu etenee seuraavasti: Ensin tutustutaan sovellusideaan ja käyttäjien tarpeisiin. Sitten sovellus hahmotellaan rautalankamallina. Tämän jälkeen suunnitelmaan lisätään värit, fontit ja muut elementit.

Ennen suunnittelun aloittamista tarvitaan tietoa seuraavista asioista:

  1. Tavoitteet: Mitä sovelluksella halutaan saavuttaa ja miten sen tulee auttaa käyttäjiä heidän tarpeissaan?
  2. Kohderyhmä: Ketkä sovellusta käyttävät eli kenen käyttämänä sovelluksen tulee toimia helposti. Jos kohderyhmänä ovat esimerkiksi ikäihmiset, niin sovelluksen tekstien pitää olla hyvin erottuvia, painikkeiden isoja ja selkeitä.
  3. Sovelluksen toiminnallisuus ja käyttötapaukset: Mitä sovellus tarjoaa käyttäjille, miten he tulevat käyttämään sovellusta ja millaisia tehtäviä he tekevät? Esimerkiksi Google Maps auttaa ihmisiä löytämään paikasta a paikkaan b.
  4. Määrittelydokumentti kuvaa sovelluksen toiminnallisuutta ja tavoitteita yksityiskohtaisesti. Se auttaa suunnittelijaa ymmärtämään sovelluksen toiminnallisuutta ja auttaa suunnittelemaan toiminnallisuutta tukevan käyttöliittymän.
  5. Tekninen toteutus: Millaisia teknisiä ratkaisuja sovellus tarvitsee ja miten ne vaikuttavat käyttöliittymän suunnitteluun.
  6. Visuaalinen identiteetti. Miltä sovelluksen tulee näyttää, jotta se on visuaalisesti houkutteleva ja selkeä.

Sovelluksen toimivuuden ymmärtää parhaiten klikkailtavan käyttöliittymäsuunnitelman avulla, joka voidaan toteuttaa esimerkiksi Adobe XD-suunnittelutyökalulla. Siitä selviää paitsi sovelluksen ulkoasu myös sen toiminnallisuudet.

UI/UX-suunnittelun trendit

Digitaalinen maailma muuttuu vauhdilla ja erilaiset trendit ohjaavat myös suunnittelua. Käyttäjistä tulee päivä päivältä tottuneempia digitaalisien laitteiden käyttäjiä, mikä on suunnittelijankin otettava huomioon.

Suunnittelijan on tärkeää tuntea käyttäjäkohderyhmä ja toteuttaa käyttöliittymäsuunnittelu käyttäjälähtöisesti trendejä hyödyntämällä. Suunnittelussa trendit toimivat käytännössä kuin muoti.

Jotkut elementit voivat olla trendi tänä vuonna ja ensi vuonna ne ovat pois muodista. Esimerkiksi erittäin suuret fontit ovat hetken muotia, mutta seuraavaan vuosikymmeneen suuria fontteja ei nähdä enää missään.

Trendit parantavat monesti käyttökokemusta ja hyviä käyttökokemuksia hyödyntämällä kehitetään uutta. Radikaaleja muutoksia ei ole syytä tehdä, koska tällä on negatiivinen vaikutus käyttökokemukseen.

Käyttöliittymät ja käyttökokemus arjessa

Käyttöliittymä- ja käyttäjäkokemussuunnittelua voidaan ajatella myös tavallisten arkisten asioiden kautta. Miltä asiat näyttävät ja miten ne toimivat.

Kaikki keinotekoiset asiat ovat suunniteltuja. Joskus tulee vastaan jopa hupaisia esimerkkejä siitä, miltä asiat näyttävät suhteessa siihen, ovatko ne käytännöllisiä.

Kuvittele, että olet kahvilassa ja saat kahvisi kupissa, joka näyttää todella kauniilta ja laadukkaalta. Kuppia on kuitenkin hankala pidellä sillä sen kahva on liian pieni. Ryypätessäsi kuuma kahvi polttaa huultasi, sillä kupin reuna on liian ohut.

Lasi josta loiskuu kahvia

Tämä on esimerkki huonosta käyttökokemuksesta. Vaikka kuppi näyttää hyvältä, sen suunnittelussa ei ole otettu huomioon käyttäjän mukavuutta ja turvallisuutta. Tämä voi johtaa siihen, että käyttäjä ei halua käyttää kyseistä kuppia uudelleen tai jopa alkaa vältellä kyseistä kahvilaa.

Pohdi omaa arkeasi ja kiinnitä huomiota päiväsi aikana tuleviin huonoihin käyttökokemuksiin ja mieti, miten niitä voisi parantaa.

Vaikkapa kaupassa käynti, millainen käyttökokemus siitä syntyy? Ovatko tuotteiden hinnat selkeästi esillä ja löydätkö helposti etsimäsi?

Sovelluskehityksessä pohditaan samankaltaisia asioita: Ovatko toiminnot kunnossa? Onko sovelluksen sisällä navigointi helppoa? Tapahtuuko painikkeista se mitä käyttäjä olettaa niistä tapahtuvan?

Lähteenä on käytetty mm. Jarmo Röksän blogikirjoitusta Kaikki keinotekoiset asiat ovat suunniteltuja – Ihmistuntemus ja digipalveluiden käyttöliittymäsuunnittelu

Tutustu palveluihin ja aiempiin projekteihin