UX/UI prosessi

Miten lähestyä suunnitteluprosessia

Onnistunut UX/UI design alkaa yhteisen prosessin sopimisella johon osallistujat sitoutuvat. Prosessit eivät ole itseisarvo, vaan työkaluja varmentamaan hyvä lopputulos. Työkalujen ja -tapojen tulee joustaa tarvittaessa. Projektit ovat harvoin täysin toistensa kaltaisia.

Olen avannut tähän lähestymistapani yleisiin suunnitteluperiaatteisiin. Tuplatimantti on tuttu useista palvelumuotoilun prosessin kuvauksista.

1. Tutki ja kehitä

Tuplatimantti Tutki

Projektin alkuvaiheet ovat kriittisen tärkeitä onnistumisen kannalta. Kerää kaikki oleellinen tieto. Arvokkaita lähteitä ovat mm kyseisen asiakkaan tavoitteet sekä liiketoiminnan mittarit eli miten onnistuminen arvioidaan. Tutkimukset ovat pohjana käyttäjäkokemuksen onnistumisen mittareille. Muista kerätä iemmista projekteista opittu sekä yrityksen ns hiljainen sisäinen tieto. Lyhyesti sanottuna tämä vaihe koostaa kaiken tarpeellisen lähtötiedon.

Käyttäjätutkimukset antavat ymmärrystä kohderyhmän toiveista, luuloista, puheista, tekemisistä ja ajattelusta. Tässä kannattaa olla tarkkana: valitse oikeat metodit oikeaan yhteyteen. Eri metodien ominaisuudet tulee ymmärtää, samoin oleelliset kysymykset joihin kaivataan vastuksia.

Design aktiviteetit eri vaiheissa

Varhaisvaiheen tutkimus pyrkii ymmärtämään loppukäyttäjien, asiakkaiden ja busineksen tarpeet ja tulkitsemaan miten UI/UX design tulisi toteuttaa niin että se toimisi toivotulla tavalla.

Käyttöliittymäratkaisujen evaluointi kohderyhmillä puolestaan hakee vastauksia optimaalisen ratkaisun löytymiseen useista eri vaihtoehdoista. Tämä tapahtuu vasta siinä vaiheessa kun on luotu jotain konkreettista, kuten visualisointeja.

2. Ymmärrä ja määrittele tavoitteet

Tuplatimantti ymmärrä

Kootun materiaalin analysointi vaatii osaamista. Tässä yhteistyö eri osapuolien kanssa on keskeinen tekijä laadukaaseen ja kattavaan lopputulokseen. Tämä vaihe läpivalaisee kokonaisuuden ja tuo vastauksia jotka ryhmä kiteyttää sekä rajaa ongelman määrittelyyn.

Mistä asiakasarvo syntyy? Entä liiketoiminta-arvo? Mitkä ovat tärkeimmät kehityskohteet? Miltä nykyinen palvelu näyttää asiakkaan näkökulmasta? Selvitä asiakkaiden käyttäytymismallit. Onko pullonkauloja? Miten haluat asemoitua kilpailijoihin nähden? Mikä oli projektin alkuperäinen tavoite? Onko sitä kenties viilattava?

Lopputuloksena on vaatimusmäärittely, joka kuvaa selkeästi ja tiiviisti halutun lopputuloksen.

3. Ideoi ja suunnittele

Tuplatimantti - ideoi

Synnytä ideoita kehityskohteisiin liittyneiden kysymysten pohjalta. Valitse ideoista parhaat. Mitkä ideoista luovat eniten arvoa asiakkaalle? Entä liiketoiminta-arvo? Miten helppoa/haastavaa niiden toteutaminen on? Testaa ideat.

Design lähtee luodun pohjamateriaalin pohjalta hakemaan visualisoitua muotoa palvelulle tai tuotteelle.

Alkuvaiheessa luonnostelu ja ideointi käyttää mahdollisimman nopeita menetelmiä jotta ajatusten muokkaus tapahtuisi mahdollisimman nopeasti. Variaatioita ja vaihtoehtoja syntyy useita.

Iterointi eli aiempaan vaiheeseen palaaminen kuuluu vahvasti tähän vaiheeseen.

Kevyet design luonnokset

Low fidelity protoilulla viitataan yleensä paperille piirrettyihin tai muilla tavoin nopeasti tehtyihin karkeisiin hahmotelmiin. Tässä vaiheessa ei vielä keskitytä tarkempaan visuaaliseen ilmeeseen. Keskeistä on idean, rakenteen, logiikan ja käytettävyyden kehittäminen askel kerrallaan. Olennaista on eteneminen versiosta toiseen nopeasti, jolloin uusia ennätetään tehdä riittävästi.

Vaikka ideointi monesti jätetään UX/UI designerille tai vastaavalle hoidettavaksi, on tämäkin vaihe yhteistyötä vaativa. Luovalle tekijälle jää kyllä ideoiden visualisointi, mutta ieoita, ehdotuksia ja palautetta tulee saada eri tahoilta runsaasti ja nopeasti.

Luonnos 3d rakennus

Nopeilla luonnoksilla pystyy kuvaamaan niin rakenteita kun vaikkapa tapahtumasarjoja

Suunnittelun varhaisessa vaiheessa on keskeistä saada nähtäville runsaasti  variaatioita. Uusia vaihtoehtoja luodaan nopeasti ja olemassaolevia kehitetään vauhdilla. Iterointi eli työvaiheen toisto kuuluu tähän vaiheeseen hyvin keskeisesti. Käyttöliittymäsuunnittelija luo jatkuvan palautteen pohjalta tarkennuksia ja uusia ehdotuksia. Näin luovitaan yhteistyössä kohti parasta ratkaisua.

Alkuvaiheiden vapaan piirtämisen versioista edetään tyypillisesti ns rautalankaversioihin, joissa rakenne selkiytyy ja mittasuhteet tarkentuvat. Kokonaisuus saa askel kerrallaan todentuntuisemman ilmeen.

Tässä kohtaa on hyvä ottaa mukaan henkilöitä joiden kanssa testaamalla saadaa selville vastaako ehdotus toivottua. Esille voi tulla niin käytettävyysongelmia kuin toisistaan erilaisia mieltymyksiä. Nyt on vielä edullista tehdä suuriakin korjauksia, kallis tuotekehityskoneisto ei ole vielä käynnissä. A/B vertailutestauksella selviää (samoin kuin myöhemmässä High fidelity design- vaiheessa) mihin suuntaan kannattaa edetä.

Omassa esimerkissäni  (varhaisvaiheen visuaalisia kokeiluja) vaihtoehtoja oli kolme. Keskimmäinen pääsi eri tahojen äänestyksen ja lisätoiveiden pohjalta jatkokehitykseen.

proto variantteja eLearning

Varhaisvaiheen visuaalisia kokeiluja. Tässä vaiheessa oli vielä useita ympäristöjä vaihtoehtoina. Projekti alkoi taustan visualisointi tilauksena.  Siksi visualisointi vietiin tässä vaiheessa jo hiukan pidemmälle kuin yleensä. Skouppi muokkautui projektin aikana koskemaan myös käyttöliittymän suunnittelua.

Iterointi

Iteroinnilla tarkoitetaan samojen työvaiheiden toistamista kunnes haluttu lopputulos saavutetaan. Yhdessä kehittämisessä on alusta asti edustajia niin softan kehityksestä, johdosta, kohderyhmän edustaja plus kenties kolleega jolla on vastaavanlaista osaamista.

Luonnosten toistuva työstäminen voi tuntua raskaalta ja puuduttavalta, mutta se jatkojalostaa tehokkaasti ideoita. Näin saadaan jatkuvasti kehittyviin protoihin eri tahojen yksityiskohtaisetkin tarpeet osaksi ratkaisua. Hahmotelma tarkentuu askel kerrallaan, virheet ja epätarkkuudet poistuvat.

UX/UI design prosesseissa ideoiden kehittäminen eteenpäin runsaan luonnostelun avulla on kenties kaikkein tärkein ydinosa. Luonnosten karkeustasolla on merkityksensä. Näin varmistaa ettei katsojat erehdy luulemaan protoa lopulliseksi, vaan ymmärtävät sen välivaiheeksi jossa keskitytään vain tiettyihin osa-alueisiin.

Oheinen esimerkki on projektista joka alkoi sisältökentän visuaalisen ilmeen ja mallin uudistamisena. Projektin edetessä päädyimme kuitenkin uusimaan myös koko rakenteen. Tästä syystä alun luonnokset ovat keskittyneet enemmän sisällön ilmiasuun. Optimi olisi luonnollisesti ollut edetä molemmissa heti alusta saakka. Esimerkissä Eiran kaltainen katunäkymä koettiin osuvammaksi kuin iso kauppakeskus.

Luonnos katukuva
katunäkymä draft

Iterointi on saatava tehtyä ennen siirtymistä kehitysvaiheeseen. Tähän saakka on käyttöliittymän muuttaminen ja tarkentaminen ollut edullista. Eteenpäin mentäessä alkaa tekninen toteutus lukitsemaan ratkaisuja, joten suuret linjat eivät kenties ole enää muutettavissa. Virheitä voi korjata myöhemminkin, mutta hinta kasvaa.

Esimerkissäni on graafinen ilme ja sivun rakennemalli yhdistetty ja eri pääkentät väritetty. Näin ei edelleenkään pääse tapahtumaan vahinkoa että katselmoijat luulisivat versiota lopulliseksi ehdotukseksi.

eLearning street view sample

Tarkat design mockupit

High fidelity design on tarkan detaljitason suunnittelua. Tässä vaiheessa eri elementit saavat tarkan kokonsa, ilmeensä ja paikansa. Tästä eteenpäin kyse on paljon esteettisestä viilaamisesta sekä sen varmistamisesta että luotu malli varmasti toimii koodattuna hyvin. Yllätyksiä tulee aina, joten tiivis yhteistyö kehittäjien kanssa on välttämätöntä.

Loppukäyttäjät voivat kertoa prototyyppiä kokeilemalla onko ratkaisu mieleinen. Testaajia voi olla niin talon sisältä kuin oikeasta kohderyhmästä. Ei kannata ujostella esittää prototyyppejä asiakkaille. He ovat lähes aina otettuja että saavat olla mukana antamassa palautetta.

Myös brandin vaatimukset tulee tehdä aivan erityisen huolella tässä vaiheessa.

4. Kehitä ja toimita

Tuplatimantti - kehitä

Käyttöliittymän pienet osaset eli komponentit tulee tarjota kehittäjille niin että lopputulos on varmasti oikeanlainen. Alla löytyy hiukan tarkemmin tietoa kirjaston käytöstä. Yhteisestä kannasta kehitystiimi saa kaiken tarvitsemansa tiedon komponenteista.

Yllätyksiä tulee aina. Nopeiten korjaukset saa toteutukseen olemalla osana kehitystiimiä toteutusvaiheessakin.

Monile esimerkki Talentmiles

Kirjaston luominen ja detaljien hiominen

Komponenttikirjasto lienee jo lähes kaikilla yrityksillä olemassa jossain muodossa. Se mikä on paras ratkaisu on monen tekijän summa. Parhaan ratkaisun valinnassa voivat projektin devaajat auttaa paljon. Kyse on niin helposta hyödynnettävyydestä kuin kirjaston ylläpidosta ja päivitettävyydestä.

Esimerkit eivät olleet tähän projektiin liittyviä, vaan ainoastaan visualinen pieni otos mihin kirjasto liittyy. Sieltä löytyy niin kaikki eri fontit ja niiden variaatiot, käyttökontekstit, värit ja niiden käyttökontekstit, kuin ikonit ja napit eri tiloineen sekä vakioidut komponentit. Tyypillisesti kentissä ynnä vastaavissa komponenteissa käytetään jotain valmista lähdettä.

fonts and colors
Icons and fields

Toimita ja kerää opittu

Siinäpä se sitten on, melkein valmis paketti. Tehtävät eivät kuitenkaan lopu tähän. Varmista että lopputulos vastaa busineksen odotuksia lopputuloksesta.

Projekteissa jää helposti hoitamatta kunnolla opitun tiedon kerääminen ja tallentaminen uusia versioita ja projekteja varten. Löydöksiä syntyy usein enemmän kuin muistetaan jälkikäteen. Muistin varaan ei kannata liikaa nojautua, sillä tekijät vaihtuvat ja sitä kautta opittu katoaa helposti. Varmista siis että projektilla on paikka mihin löydökset tallennetaan ja mistä myöhemmät projetit sitä hyödyntävät. Haasteeksi tässä kohtaa nousee usein helposti hyödynnettävän ratkaisun löytäminen.

example Talentmiles
example Sofor
example Ekahau

Talentmiles, eLearning

Sofor, työhyvinvointi

Ekahau, Vision 2 sisäpaikannus