UX ja UI -suunnittelu: mitä ne ovat ja miksi niihin kannattaa panostaa?

Asiakaslähtöisesti suunnitellulla verkkopalvelulla tai sovelluksella on tärkeä rooli brändikokemuksen luomisessa. Huipputulosta tahkoavat yritykset eivät huuda yksipuolisesti omaa agendaansa ja usko brändinluomisessa pelkän logonäkyvyyden voimaan. Aitoa sitoutuvuutta yritykseen luodaan nostamalla asiakas korulauseista kaiken toiminnan keskiöön, jolloin ollaan oikealla tiellä moninkertaistamassa yrityksen liikevaihtoa. 

Käyttäjäkokemus digitaalisissa palveluissa on 2020-luvulla todellinen kilpailuetu. Yleensä se on osa laajempaa asiakaskokemusta, mutta mikäli keskitytään hetkeksi verkkopalveluiden ja sovellusten maailmaan, on ilmiselvää, että niitä palveluita joita on helppo ja mukava käyttää, käytetään enemmän. 

Asiakas- tai käyttäjälähtöisessä suunnittelussa termit UX, UI sekä myös CX ja palvelumuotoilu tulevat tutuiksi. Termit menevät monella iloisesti sekaisin, ja pakkaa sekoittaa entisestään se, että englanninkielisten lyhenteiden ohessa käytetään niiden auki kirjoitettuja sekä suomeksi käännettyjä vastineita. Pyrimme tässä kirjoituksessa avaamaan terminologiaa ja tekemään siitä helpommin ymmärrettävää. 

UX Design,
User Experience Design,
UX-suunnittelu,
käyttäjäkokemussuunnittelu

UX-suunnittelija on viime kädessä vastuussa käyttäjän tyytyväisyydestä palveluun. UX-suunnittelijan työtä on ymmärtää sekä asiakkaan että loppukäyttäjän toiveita ja tarpeita, kuvata käyttäytymismalleja ja -polkuja ja varmistaa, että palvelun rakenne vastaa asiakkaan odotuksiin positiivisesti. UX-suunnittelija vastaa kysymyksiin kuten:

  • Miten verkkopalvelu olisi mahdollisimman helppokäyttöinen?
  • Millaista dataa voin hyödyntää palvelun suunnittelussa?
  • Mikä on sivuston vierailijan oletettu käytös tässä kyseisessä tilanteessa?
  • Minkä esteiden poistaminen helpottaisi kävijän tavoitteiden saavuttamista?

UI Design,
User Interface Design,
UI-suunnittelu,
käyttöliittymäsuunnittelu

UI-suunnittelija vastaa niistä visuaalisista elementeistä, joiden kanssa asiakas on vuorovaikutuksessa nettisivua tai sovellusta käyttäessään. UI-suunnittelija suunnittelee esim. call to action -painikkeet, navigaatiorakenteen, tiedonkeruukentät ja muut interaktiopisteet, ja hän on myös vastuussa värimaailmasta, copystä ja muista sivulla näkyvistä elementeistä. UI-suunnittelija vastaa kysymyksiin kuten:

  • Miltä käyttöliittymän pitäisi näyttää?
  • Miten tuon esiin brändin visuaalisen identiteetin?
  • Miten korostan verkkopalvelun tärkeimmät osiot?
  • Millaisilla visuaalisilla keinoilla voin parantaa sivuston konversiota?

Yksinkertaistaen voisi siis sanoa, että UX-suunnittelija vastaa enemmän tutkimuksesta, asiakasymmärryksen luomisesta sekä suunnittelusta ja UI-suunnittelija käytännön toteuttamisesta.

Designing user pathways and drafting a preliminary page structure at a kickoff workshop.Suunnittelemassa käyttäjäpolkuja ja hahmottelemassa alustavaa sivurakennetta kickoff-työpajassa.

UX- ja UI-suunnittelija samassa paketissa?

Koska UX- ja UI-suunnittelijan tehtävät ovat hyvin läheisiä ja osin päällekkäisiä, toimenkuvat on usein yhdistetty samaan rooliin, mutta ei välttämättä. Ketterä lähestymistapa mahdollistaa palvelumuotoilun elementtien huomioimisen ja samojen metodien hyödyntämisen tutkimus- ja suunnitteluprosessissa alusta loppuun saakka. Usein asiantuntijat erikoistuvat joko UX-suunnitteluun tai visuaalisempaan UI-suunnitteluun, vaikka päällekkäisyyksiä toki tulee väkisinkin.

Meillä Valvella UI- ja UX-suunnittelua ei ole aina roolitettu eri tekijöille, vaan sama asiantuntija saattaa hoitaa molempia tehtäviä projektissa alkukartoituksesta ja tutkimuksesta aina lopullisen käyttöliittymän toteuttamiseen asti. Isommissa hankkeissa UX-suunnittelu ja visuaalisen käyttöliittymän suunnitteluun on tyypillisesti pyhitetty omat asiantuntijansa.

Etsitkö asiantuntevaa UX & UI -suunnittelijaa? Tutustu suunnittelupalveluihimme paremmin: UX & UI -suunnittelu

Käyttäjäkokemuksen (UX) suunnittelu käytännössä

Meillä Valvella käyttäjäkokemuksen suunnittelu nojautuu muutamaan peruspilariin; tutkimukseen, asiakasymmäryksen rakentamiseen, datan tarkasteluun ja iteratiiviseen suunnitteluun, joka sisältää käyttäjätestaamista.

Käytännössä siis esim. uuden verkkopalvelun suunnittelussa aloitetaan selvittämällä mitä tavoitteita ja tarpeita palvelun kohderyhmillä on, miten he ovat kyseisen asian mahdollisesti tottuneet hoitamaan tähän asti ja millaisia esteitä tai kipupisteitä uudistuksessa pyritään selättämään. Hahmottelemme ja piirrämme erilaisia käyttäjäpolkuja, rakennekaaviota ja rautalankamalleja siitä millainen uuden palvelun rakenne tulisi olla. Näitä käymme yhdessä asiakkaamme kanssa läpi useamman iteraation verran ja sisällytämme mukaan käyttäjätestaamista aina kun mahdollista.

Outline models of the Blueprint Genetics website. Alustavia rautalankamalleja verkkosivustosta.

Käyttöliittymät ja prototyypit UI-suunnittelun keskiössä

Kun hahmotelma verkkopalvelun rakenteesta ja kokoonpanosta on saatu rautalankamallien avulla valmiiksi, on aika soveltaa brändin visuaalista identiteettiä ja alkaa suunnittelemaan verkkopalvelun käyttöliittymää (UI) ja ulkoasua toden teolla.

Luomme design layoutit eli tutummin leiskat soveltaen aiemmin suunniteltuja rautalankamalleja ja iteroimme niitä yhdessä asiakkaidemme kanssa muutaman kommentointikierroksen verran. Näissä on eroa rautalankamalleihin se, että leiskoissa käytetään värejä, kuvia, kuvituksia, ikoneita ja muita visuaalisia elementtejä kun itse rautalankamallit ovat kirjaimellisesti vain raamit käyttöliittymälle.

Suosittelemme käyttäjätestaamista prototyyppien avulla, jolloin klikkailtavaa ja interaktiivista protoa esittelemällä ja testaamalla saadaan kerättyä kultaakin arvokkaampaa palautetta oikeilta käyttäjiltä ennen kuin verkkopalvelusta on tarvinnut koodata riviäkään.

The user interface of Blueprint’s website once the brand colours, text content and images are added to the outline models. Verkkosivujen käyttöliittymä, kun rautalankamalleihin lisätään brändivärit, tekstisisällöt ja kuvat.

Miksi UI- ja UX-suunnitteluun sitten kannattaa panostaa? 

Kaikki ymmärtävät, että palveluita joita on helppo ja mukava käyttää käytetään todennäköisemmin uudestaan kuin niitä, joista jää huono fiilis. Kustannuksia tarkastellessa on äärettömän paljon tehokkaampaa tehdä hyvä ja kattava pohjatyö, laatia tarvittavat pohjat, osiot ja komponentit huolella, ja käyttää näitä uudelleen ja uudelleen eri käyttötarkoituksiin myöhemmin, kuin aina lähteä nollasta liikkeelle kun tarve uusille toiminnoille tai ominaisuuksille ilmenee. Jos yhtälöön sisällyttää vielä ohjelmistokehittäjät, voidaan todeta että hyvin suunnitellun verkkopalvelun tai sovelluksen kehittäminen on nopeampaa, vähemmän stressaavaa ja varmempaa kuin huonosti suunnitellun.

Tästä syystä monet yritykset ovat alkaneet luomaa omaa design-järjestelmäänsä, jossa linjataan kaikki yrityksen digitaalisissa kanavissa käytetyt komponentit ja elementit. Katso esimerkki LähiTapiolan ja Turvan Duet Design Systemistä.

Viime kädessä kyse on kuitenkin liiketoiminnan kasvattamisesta. McKinseyn vuoden 2018 tutkimuksessa selvitettiin asiakaslähtöisen suunnittelun vaikutusta liikevoiton vuosittaiseen kasvuun:

"Pörssiyrityksissä, joissa asiakaslähtöinen suunnittelu on vahvasti mukana yrityksen strategiassa ja toimintatavoissa, liikevoiton vuosittainen kasvu on jopa kaksi kertaa voimakkaampaa kuin niissä yrityksessä, joissa asiakaslähtöinen suunnittelu ei ole toiminnan keskiössä."

Asiakas on siis kuningas, ja tämä kannattaa ottaa strategisena päätöksenä huomioon kaikessa tekemisessä yrityksen kasvun turvaamiseksi. Yrityksissä, joissa asiakasta kuunnellaan tarkalla korvalla ja joissa on jo lähtökohtaisesti selkeä ymmärrys asiakassegmenteistä, arvoista ja tarpeista, UX- ja UI-suunnitteluprosessin aloittaminen myös päästään käynnistämään ketterästi, kun dataa ja ymmärrystä yrityksen asiakkaista voidaan käyttää suoraan projektin suunnitteluvaiheessa.

Haluatko luoda jotain tavallista upeampaa?

Panosta parhaaseen asiakaslähtöiseen käyttäjäkokemuksen ja käyttöliittymän suunnitteluun. Ota yhteyttä tai varaa tapaaminen asiantuntijoidemme kanssa keskustellaksesi seuraavasta projektistasi.