Tältä sivulta löydät esimerkkejä ja malleja vaiheistuksen suunnitteluun.
Yleistä
Vaiheistuksella pilkotaan lomakkeet asiakkaan kannalta selkeisiin kokonaisuuksiin. Eri vaiheet näytetään käyttöliittymällä sitä mukaa, kun asiakas 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ää.
Asiakkaan kognitiivinen kuorma vähenee.
Asiakkaalle tulee tunne prosessin etenemisestä, mikä kannustaa jatkamaan loppuun asti.
Asiakas voidaan pysäyttää tärkeän kysymyksen tai asian äärelle.
Asiakkaalle 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 asiakkaan antamien tietojen perusteella?
Vaikuttavatko jotkin asiakkaan antamat tiedot siihen, mitä tietoja myöhemmissä vaiheissa näytetään?
Olisiko asiakkaan hyvä nähdä lopuksi yhteenveto kaikista täytetyistä tiedoista?
Pitääkö asiakkaan 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ä asiakkaalle 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 asiakkaalle 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 asiakkaan pitää voida täyttää tiedot haluamassaan järjestyksessä.
Älä laita eri sivuille sellaisia tietoja, joíta asiakkaan on tarve nähdä yhdellä kertaa.
Sivuttainen vaiheistus
Sivuttaisessa vaiheistuksessa lomake jaetaan aihealueisiin, joista jokainen näytetään omalla sivullaan.
Asiakas 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.
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ä asiakkaalle seuraavaksi näytetään.
Näissä tilanteissa lomakkeelle syntyy luonnostaan vaiheittainen eteneminen.
Jos tulevat kysymykset pystytään päättelemään reaaliaikaisesti asiakkaan 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ää asiakasta.
Joskus asiakkaan 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 asiakas 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 asiakas vahvistaa antamansa tiedot ja käynnistää päättelyn seuraavista näytettävistä kysymyksistä.
Tämä malli sopii myös tilanteisiin, joissa asiakkaan 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 asiakkaalle vastattavaksi yksi kerrallaan.
Tämä vaiheistustapa sopii erityisesti monimutkaisiin tai harvoin vastaan tuleviin tilanteisiin, joissa asiakas tarvitsee runsaasti ohjausta.
Kysymys kerrallaan eteneminen pysäyttää asiakkaan erikseen jokaisen kysymyksen ääreen. Tällöin asiakas 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ä asiakkaan 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
Asiakkaan 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, asiakkaan 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 asiakkaalle. 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 asiakas ei kuitenkaan näe kaikkien vaiheiden nimiä yhdellä kertaa.
Aina vaiheiden lukumäärä ei ole ennalta tiedossa. Tällöin asiakkaalle voi näyttää etenemistä kuvaavan prosenttiluvun.
Valmiina 15 %
Aiempiin vaiheisiin palaaminen
Aikaisempiin vaiheisiin siirtymisen tulee olla helppoa, sillä asiakkaalla voi olla tarve palata muuttamaan antamiaan tietoja. Tarjoa asiakkaalle 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 asiakkaan 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 asiakkaalle ja varmistaa, että hän haluaa tehdä muutokset.
<div className="kds-modal--danger">
<div className="kds-modal__dialog">
<div className="kds-modal__content">
<ModalHeader>Muokkaa tietoja</ModalHeader>
<ModalContent>
<Text>Jos muutat tietoja, kaikki tämän kohdan jälkeen antamasi tiedot tyhjentyvät. Haluatko jatkaa?</Text>
</ModalContent>
<ModalFooter>
<ButtonGroup horizontal="sm">
<Button variant="danger">Jatka </Button>
<Button appearance="outline" variant="danger">
Peruuta
</Button>
</ButtonGroup>
</ModalFooter>
</div>
</div>
</div>