Käyttötarkoitus
Käytä vaiheistuskomponenttia kun:
- käyttäjän täytyy saada kokonaiskuva siitä, miten jokin prosessi etenee (esim. palveluun hakeutuminen)
- prosessiin liittyy eri vaiheita
- käyttäjän on tärkeä toimia tietyssä järjestyksessä
- prosessin vaiheisiin liittyy eri toimintoja tai ohjeistuksia
Esimerkit
Alla näet esimerkit vaiheistuskomponentin numeroidusta ja numeroimattomasta versiosta.
Numeroitu vaiheistuskomponentti
Numeroitu prosessi soveltuu hyvin tapauksiin, joissa vaiheiden järjestys on selkeä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
Vaiheistuskomponentti ilman numerointia
Voit käyttää numeroimatonta prosessia silloin, kun vaiheiden järjestys on enemmän ohjeellinen.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
-
Vaiheen otsikko
Tähän voit lisätä tekstiä, joka kertoo käyttäjälle mitä kyseisessä vaiheessa tapahtuu. Pidä teksti tiiviinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
Toiminnallisuudet
Komponentista on käytössä sekä numeroitu että numeroimaton versio. Voit lisätä vaiheistuskomponentin myös haitari-komponentin sisälle.
Voit lisätä vaiheistuskomponenttiin seuraavat kentät:
- Otsikko
- Lyhyt kuvausteksti
- Prosessin vaiheet (vähintään 2)
Jokaiseen vaiheeseen voit lisätä seuraavat kentät:
- Otsikko (pakollinen)
- Tekstikappale (suositus 1 kpl) (valinnainen)
- Painike tai linkki (suositus 1 kpl) (valinnainen)
Ohjeistus
Pidä tekstit lyhyinä, jotta käyttäjä saa kokonaiskuvan prosessista ja sen vaiheista helposti silmäilemällä.
Suosittelemme toisen tekstikappaleen lisäämistä vain poikkeustapauksissa. Poikkeustapaus voi olla esimerkiksi palvelun aikataulutiedoista kertominen omassa kappaleessa. Jos aiheen selittäminen vaatii pidempiä tekstipätkiä, on hyvä miettiä sisällölle vaihtoehtoisia esitystapoja, esim. haitarikomponentti.
Otsikon lisääminen vaiheituskomponenttiin ei ole pakollinen, mutta suosittelemme sen käyttöä. Jos lisäät vaiheistuskomponentin haitari-komponentin sisälle, voit jättää otsikon pois. Tässä tapauksessa haitarin otsikko riittää.
Käytettävien painikkeiden ja linkkien tulee olla sidottuja kyseisen vaiheen sisältöön. Suosittelemme, että yhdessä vaiheessa on vain yksi painike tai linkki. Käytä painiketta silloin, kun ohjaat käyttäjää toimimaan (esimerkiksi soittamaan tai asioimaan verkossa). Kun haluat ohjata käyttäjän lisätiedon ääreen, käytä linkkiä.
Joskus toisen painikkeen/linkin lisääminen voi olla perusteltua. Esimerkiksi jos asiasta saa lisätietoa kahdesta lähteestä, voit ohjata käyttäjän molempiin. Jos tuntuu tarpeelliselta lisätä useita painikkeita/linkkejä, on hyvä ensin miettiä, kannattaako vaihe jakaa osiin.