Vaiheistus

Vaiheistuskomponentin avulla voit esitellä ja visualisoida prosessin, joka etenee tiettyjen vaiheiden kautta.

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ä.

  1. 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ä.

    Esimerkki painikkeesta

    Esimerkki lisätietolinkistä

  2. 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ä.

  3. 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ä.

  4. 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ä.

  5. 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.

  1. 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ä.

    Esimerkki painikkeesta

    Esimerkki lisätietolinkistä

  2. 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ä.

  3. 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ä.

  4. 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ä.

  5. 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.