Vaiheistus
Tältä sivulta löydät esimerkkejä ja malleja vaiheistuksen suunnitteluun.
Yleistä
Vaiheistuksella pilkotaan lomakkeet käyttäjän kannalta selkeisiin kokonaisuuksiin. Eri vaiheet näytetään käyttöliittymällä sitä mukaa, kun käyttäjä etenee lomakkeella. Jos lomaketta ei vaiheisteta, kaikki kysymykset avautuvat yhdellä kertaa täytettäväksi.
Vaiheistamisen hyötyjä
- Lomakkeesta tulee hallittavampi ja helpompi täyttää.
- Käyttäjän kognitiivinen kuorma vähenee.
- Käyttäjälle tulee tunne prosessin etenemisestä, mikä kannustaa jatkamaan loppuun asti.
- Käyttäjä voidaan pysäyttää tärkeän kysymyksen tai asian äärelle.
- Käyttäjälle voidaan näyttää myöhemmissä vaiheissa tietoja, jotka riippuvat aiemmissa vaiheissa annetuista vastauksista.
- Tietoja voidaan validoida ja tallentaa vaihe kerrallaan, jolloin mahdolliset virheet huomataan ajoissa.
Pohdi seuraavia asioita kun mietit, miten vaiheistus kannattaa tehdä:
- Onko prosessissa aina samat vaiheet, jotka tunnetaan ennalta?
- Voivatko vaiheet tai niiden lukumäärä vaihdella käyttäjän antamien tietojen perusteella?
- Vaikuttavatko jotkin käyttäjän antamat tiedot siihen, mitä tietoja myöhemmissä vaiheissa näytetään?
- Täytyykö lomake pystyä tallentamaan keskeneräisenä?
- Olisiko käyttäjän hyvä nähdä lopuksi yhteenveto kaikista täytetyistä tiedoista?
- Pitääkö käyttäjän voida itse päättää, missä järjestyksessä hän suorittaa vaiheet?
Tee näin
- Vaiheista pitkät tai monimutkaiset lomakkeet.
- Vaiheista lyhyet lomakkeet vain harkitusti.
- Valitse tilanteeseen sopiva vaiheistamistapa.
- Näytä kussakin vaiheessa vain oleelliset tiedot.
- Näytä käyttäjälle selkeästi, missä vaiheessa lomaketta hän on menossa.
- Tarjoa pitkissä lomakkeissa mahdollisuus tallentaa se keskeneräisenä ja jatkaa täyttämistä myöhemmin.
- Tajoa käyttäjälle mahdollisuus palata helposti aiempiin vaiheisiin.
Älä tee näin
- Älä vaiheista todella lyhyttä ja helposti täydennettävää lomaketta, jos se vaikeuttaa ja hidastaa lomakkeen täyttämistä.
- Älä tee yksittäisestä vaiheesta liian pitkää.
- Älä vaiheista lomaketta, jossa käyttäjän pitää voida täyttää tiedot haluamassaan järjestyksessä.
- Älä laita eri sivuille sellaisia tietoja, joíta käyttäjän on tarve nähdä yhdellä kertaa.
Sivuttainen vaiheistus
Sivuttaisessa vaiheistuksessa lomake jaetaan aihealueisiin, joista jokainen näytetään omalla sivullaan. Käyttäjä etenee lomakkeella sivu kerrallaan. Sekä uuteen että aiempaan vaiheeseen siirtyminen aiheuttaa sivulatauksen. Jos sivunvaihtoja on tiheästi, se voi heikentää käyttökokemusta.
Sivuttain vaiheistamista voi olla hyötyä esimerkiksi seuraavissa tilanteissa:
- Lomake on pitkä tai sisällöltään monimutkainen.
- Tiedot voidaan jakaa selkeisiin erillisiin aihealueisiin, joiden tietoja ei tarvitse nähdä yhdellä kertaa.
Älä käytä sivuttaista vaiheistusta seuraavissa tilanteissa:
- Lomake on erittäin lyhyt ja sisällöltään yksinkertainen.
- Eri vaiheissa olevia tietoja on tarve nähdä samalla kertaa.
- Tietoja pitää voida siirtää vaiheesta toiseen.
Vaiheistus yhdellä sivulla
Lomakkeen voi vaiheistaa myös yhden sivun sisällä, jolloin lomakkeeseen ei tule sivusiirtymiä. Vaiheistus voi tapahtua dynaamisten sisältöjen mukaan, aihealueittain tai kysymys kerrallaan.
Dynaamisten sisältöjen mukaan vaiheistaminen
Vaiheistus dynaamisten sisältöjen mukaan tarkoittaa tilannetta, jossa lomakkeen myöhemmät kohdat riippuvat aiemmin annetuista vastauksista. Tällöin vasta tiettyjen tietojen täyttämisen jälkeen voidaan päätellä, mitä kysymyksiä käyttäjälle seuraavaksi näytetään. Näissä tilanteissa lomakkeelle syntyy luonnostaan vaiheittainen eteneminen.
Jos tulevat kysymykset pystytään päättelemään reaaliaikaisesti käyttäjän antamien vastausten perusteella, ei lomakkeella tarvitse välttämättä olla erillisiä painikkeita, jotka avaavat seuraavat kysymykset. Kysymykset voivat siis ilmestyä käyttöliittymälle reaaliaikaisesti sitä mukaa, kun uudet näytettävät kysymykset saadaan pääteltyä edellisten vastausten perusteella. Lomakkeen täyttämisen tulee kuitenkin tuntua luontevalta, eikä sisältöjen muuttuminen reaaliaikaisesti saa hämmentää käyttäjää.
Joskus käyttäjän kannattaa kuitenkin vahvistaa tiedot, joiden perustella lähdetään tekemään päättelyä seuraavista näytettävistä tiedoista. Kyseessä voi olla esim. tilanne, jossa ei pystytä automaattisesti päättelemään, onko käyttäjä jo antanut kaikki tarvittavat tiedot (esim. kaikki eri tulot, joita hänellä on). Näissä tilanteissa lomakkeelle voidaan tuoda esim. Jatka- tai Vahvista-painike, jolla käyttäjä vahvistaa antamansa tiedot ja käynnistää päättelyn seuraavista näytettävistä kysymyksistä. Tämä malli sopii myös tilanteisiin, joissa käyttäjän syöttämien tietojen pohjalta tehdään raskaita hakuja taustajärjestelmistä, eikä niitä haluta tehdä turhaan.
Dynaamisten sisältöjen mukaan vaiheistamisesta voi olla hyötyä erityisesti asiantuntijakäyttöliittymissä, joissa vaaditaan tehokkuutta. Tällöin voidaan välttää ylimääräisiä klikkauksia, kun esim. Jatka-painike laitetaan ainoastaan niihin kohtiin, joissa sitä prosessin etenemisen kannalta todella tarvitaan.
Aihealueiden mukaan vaiheistaminen
Lomakkeen voi vaiheistaa myös aihealueiden mukaan. Kun yhteen aiheeseen liittyviin kysymyksiin on vastattu, painetaan Jatka-painiketta, ja seuraavan aihealueen kysymykset ilmestyvät käyttöliittymälle.
Aihealue kerrallaan etenevä lomake voi sopia esimerkiksi tilanteisiin, joissa yksittäiset aihealueet ovat lyhyitä ja selkeitä. Aihealueet ja niiden laajuus kannattaakin miettiä huolellisesti, sillä ne rytmittävät etenemistä. Tärkeää on myös se, että lomakkeella voi keskittyä kerralla sellaiseen kokonaisuuteen, joka tuntuu prosessin etenemisen kannalta mielekkäältä.
Jos käyttöliittymältä vaaditaan tehokkuutta, prosessia ei kannata pilkkoa liian pieniin vaiheisiin. Tällöin jatka-painikkeen painaminen hidastaa etenemistä.
Kysymys kerrallaan vaiheistaminen
Lomakkeen eteneminen kysymys kerrallaan on tapa pilkkoa prosessi pienimpiin mahdollisiin osiin. Kysymykset tuodaan käyttäjälle vastattavaksi yksi kerrallaan.
Tämä vaiheistustapa sopii erityisesti monimutkaisiin tai harvoin vastaan tuleviin tilanteisiin, joissa käyttäjä tarvitsee runsaasti ohjausta. Kysymys kerrallaan eteneminen pysäyttää käyttäjän erikseen jokaisen kysymyksen ääreen. Tällöin käyttäjä voi keskittyä yhteen asiaan kerrallaan ja hänelle voidaan antaa vastaamiseen tarvittavat kohdistetut ohjeet.
Huomioi, että kysymys kerrallaan eteneminen ei sovi tehokkuutta vaativiin käyttöliittymiin.
Eri vaiheistustapojen yhdisteleminen
Välillä käyttäjän kannalta parhaaseen lopputulokseen pääsee yhdistelemällä eri vaiheistustapoja.
Sivuttain vaiheistetulla lomakkeella voi olla tarpeen vaiheistaa yksittäinen sivu vielä dynaamisten sisältöjen tai aihealueiden mukaan. Etenkin erittäin pitkissä prosesseissa tällainen kahden tason vaiheistus voi olla tarpeellinen.
Kysymys kerrallaan etenevällä lomakkeella voi olla välillä tarve vastata yksittäisen kysymyksen sijaan yhteen kokonaiseen aihealueeseen. Esimerkiksi osoitetiedot (katuosoite, postinumero, postitoimipaikka, maa) voi olla luontevampaa täyttää yhtenä kokonaisuutena kuin yksittäin ilmestyvinä kenttinä.
Vaiheistuksen näyttäminen
Käyttäjän tulee aina nähdä selkeästi, miten prosessi on vaiheistettu ja missä vaiheessa prosessia hän on menossa. Kullekin vaiheelle tulee antaa kuvaava ja selkeä otsikko, joka erottuu käyttöliittymällä. Jos prosessin kaikki vaiheet ovat etukäteen tiedossa, käyttäjän olisi hyvä nähdä myös lista kaikista vaiheista.
Jos vaiheiden määrä voi vaihdella käyttäjän tekemien valintojen myötä, tästä kannattaa mainita käyttäjälle. Esimerkki: “Hakemuksen täyttäminen etenee vaiheittain ja vaiheiden määrä riippuu antamistasi vastauksista. Hakemuksessa on enintään xx vaihetta.”
Vaiheistuksen visualisointiin voidaan käyttää esimerkiksi Timeline-komponenttia.
Timeline-komponentti ei toimi kaikissa tilanteissa. Esim. mobiilikoossa sivu kerrallaan etenevällä lomakkeella voidaan näyttää Timelinen sijaan vaiheen numero ja vaiheiden kokonaismäärä. Näissä tilanteissa käyttäjä ei kuitenkaan näe kaikkien vaiheiden nimiä yhdellä kertaa.
Aina vaiheiden lukumäärä ei ole ennalta tiedossa. Tällöin käyttäjälle voi näyttää etenemistä kuvaavan prosenttiluvun.
Valmiina 15 %Aiempiin vaiheisiin palaaminen
Aikaisempiin vaiheisiin siirtymisen tulee olla helppoa, sillä käyttäjällä voi olla tarve palata muuttamaan antamiaan tietoja. Tarjoa käyttäjälle aina selkeä painike, josta hän pääsee siirtymään aiempaan vaiheeseen. Jos vaiheistuksen esittämiseen käytetään Timeline-komponenttia, aikajanan aikaisemmat vaiheet voivat lisäksi toimia linkkeinä kyseisiin vaiheisiin.
Kun lomakkeella siirrytään aiempaan vaiheeseen, siellä näkyvät tiedot voivat olla selailu- tai muokkaustilaisia. Jos aiemmat vastaukset ovat selailutilassa, tulee käyttöliittymällä olla toiminto, jolla vastaukset saa muokattaviksi.
Joskus käyttäjän jo täyttämiä tietoja voi kadota siksi, että hän palaa lomakkeella aiempaan vaiheeseen muuttamaan antamiaan tietoja. Tällöin tietojen katoamisesta kannattaa kertoa käyttäjälle ja varmistaa, että hän haluaa tehdä muutokset.