Valintapolku
Valintapolku on suunnittelumalli vaiheistetun monivalinnan toteuttamiseen. Malli perustuu valintakoriin, joka mahdollistaa yhden tai useamman toiminnon toteuttamisen usealle elementille.
Yleistä
Valintapolun suunnittelumallia voi käyttää tilanteissa, joissa valittavia vaihtoehtoja saattaa olla paljon ja käyttäjän täytyy pystyä valitsemaan kokoelmasta yksi tai useampi tietoryhmä, joille valitaan yksi tai useampi yhteinen parametri.
Valintapolku koostuu seuraavista vaiheista:
- Toiminnon aloittaminen (esim. reseptien uusiminen)
- Valintojen tekeminen (käyttäjä valitsee uusittavat reseptit)
- Valintojen tarkistaminen (valitut reseptit näytetään yhteenvetona)
- Yhteisten parametrien määrittäminen (käyttäjä päättää mihin reseptit lähetetään uusittavaksi)
- Varmistus (yhteenveto valinnoista ja parametreista)
- Vahvistus toiminnon suorittamisesta
Valintapolku vai monivalinta
Yksivaiheinen monivalinta voidaan toteuttaa yhdessä näkymässä ilman lisämääreitä. Valintapolku sen sijaan vaatii useamman vaiheen.
Valintapolku on yksivaiheiseen monivalintaan verrattuna kognitiivisesti vaativampi ratkaisu, joka vaatii käyttäjältä useita toisiinsa liittyviä valintoja. Käytä valintapolkua vain tilanteissa, joissa valintojen tekeminen edellyttää useampiin vaiheisiin jaettua toteutusta.
Yksivaiheisen monivalinnan voi toteuttaa esimerkiksi MultiselectV2-, TableV2- tai Checkbox-komponenteilla siten, että toiminto suoritetaan loppuun asti yhdessä näkymässä.
- Vaiheistettu monivalinta (valintapolku)
- Yksivaiheinen monivalinta
Tee näin
- Varmista, että valintoihin liittyvä tieto kulkee mukana eri vaiheissa.
- Tarjoa mahdollisuus muokata valintoja varmistukseen saakka.
- Kaikissa vaiheissa pitää olla selkeästi havaittavissa mitä kyseisessä vaiheessa on tarkoitus tehdä.
Älä tee näin
- Älä käytä valintapolkua, jos valintojen suorittaminen ei edellytä vaiheistettua toteutusta.
Toiminnon aloittaminen
Valintapolun prosessi rakentuu tietyn tehtävän suorittamisen ympärille. Käyttäjälle tulee alusta asti olla selvää, mikä on valintapolun käyttötarkoitus (esim. valittujen reseptien uusiminen).
Vaiheistetun monivalinnan voi yleensä erottaa itsenäiseksi valintapolukseen erillisen näkymän avulla.
Vaihtoehtoisesti valintapolun voi myös yhdistää “yleisempään” näkymään: esimerkiksi verkkokaupoissa ostamista ei erotella erillisiin katselu- ja ostamisnäkymiin, vaan ostaminen on osana sivuston keskeistä toimintoa.
Valintojen tekeminen
Seuraavaksi käyttäjälle tulee esittää näkymä, jossa valinnat tehdään.
Käyttäjän kannalta on tärkeää, että tarjotut vaihtoehdot muodostavat selkeästi rajatun kokoelman. Esimerkiksi jos valintapolun tavoite on reseptien uusiminen, valintalistan tulee koostua pelkästään resepteistä. Jos listauksessa näytettäisiin reseptien lisäksi myös esimerkiksi lähetteitä, kaikille valinnoille yhteisen toiminnon tekeminen muuttuisi mahdottomaksi.
Listauksen muoto riippuu näytettävästä tiedosta. Tyypillisesti valintakorin listauksessa käytetään joko taulukkoa tai korttimaista esitystapaa.
Valintalistauksen voi esittää joko samassa näkymässä valintatilassa tai erillisessä valintanäkymässä.
Valintalistaus: Valintatila
Valintatilalla tarkoitetaan listausnäkymän “aktiivista” toimintatilaa, joka mahdollistaa valintojen tekemisen.
Valintatilalla vältetään tarve useammille erillisille sivuille. Valintatilan haasteena on käyttöliittymän selkeyden säilyttäminen, kun näytettävät elementit muuttuvat käyttäjän siirtyessä valintatilaan (esim. taulukkoon ilmestyy jokaiselle riville valintaruutu).
Valintatilaa voidaan soveltaa myös yksivaiheisen monivalinnan toteuttamiseen.
Valintalistaus: Erillinen valintanäkymä
Erillinen valintanäkymä mahdollistaa valintapolun listauksen toteuttamisen siten, että käyttäjälle näytetään vain valintojen tekemisen kannalta olennaiset tiedot ja valintojen tekemiseen liittyvät toiminnot (esim. valintaruudut).
Erillisessä valintanäkymässä voi esimerkiksi piilottaa käyttöliittymästä prosessin kannalta epäolennaiset navigaatioelementit.
Erillinen näkymä voi olla oma sivunsa tai modaali muun sisällön päällä.
Vaihtoehtojen esittäminen
Vaihtoehdot esitetään tyypillisesti valintaruutujen (Checkbox) avulla. Valintojen tekeminen Checkboxeilla on yleinen konventio, jonka käyttäjät tunnistavat muista yhteyksistä.
Checkbox-komponentin aktiivisen tilan korostuksen tukena voi käyttää myös muita visuaalisia vihjeitä. Valittuina olevia elementtejä voi tarvittaessa korostaa myös esimerkiksi reunaviivan tai värisävyn avulla.
Valintakortti
Valinnan esittäminen korteissa.
Valinnat taulukossa
Valinnan esittäminen taulukossa.
Valintojen tarkistaminen
Kun käyttäjä on valinnut haluamansa elementit listasta, käyttäjälle tulee näyttää yhteenveto valinnoista.
Tyypillisin esimerkki valintojen yhteenvedosta on verkkokaupoissa käytettävä ostoskori, joka näyttää valitut ostokset ennen kuin käyttäjä siirtyy täyttämään maksutietoja.
Yhteenveto on tärkeä varsinkin silloin, kun vaihtoehtoja on runsaasti ja käyttäjä tekee valintoja useassa eri näkymässä (esim. useasta sivusta koostuva lista).
Esimerkiksi tilanteessa jossa valintalistaus koostuu useasta sivusta, yhteenvetonäkymä mahdollistaa elementtien tarkastelun ilman, että käyttäjän tarvitsee navigoida kaikkien sivujen läpi uudestaan.
Yhteenvetonäkymän toiminnallisuudet:
- valintojen poistaminen
- määrien muokkaaminen (jos tarpeellista)
- palaaminen takaisin listaukseen (ilman, että valinnat katoavat)
- seuraavaan vaiheeseen siirtyminen
Valintojen yhteenvedon voi esittää joko sisällön vieressä näkyvänä kelluvana valintakorina tai erillisenä sivuna.
Kelluva valintakori
Kelluva valintakori toimii tehokkaimmin leveillä näytöillä, kun sisällön vieressä on tarpeeksi tilaa elementin näyttämiseen.
Kapeammissa mobiilinäkymissä valintakorin voi piilottaa painikkeen taakse. Käyttäjä voi tällöin tarkastella valintakoria modaalinäkymässä, joka aukeaa muun sisällön päälle (overlay).
Valintalista erillisellä sivulla
Käyttäjän tekemät valinnat voi näyttää kelluvan valintakorin sijaan myös erillisellä sivulla.
Erillinen sivu saattaa tilanteesta riippuen olla selkeämpi valittujen elementtien tarkasteluun. Toisaalta tämä malli tuo yhden vaiheen lisää valintapolun prosessiin.
Erillisellä sivulla näytettävä valintalista on listauksen vieressä kelluvaa valintakoria selkeämpi ratkaisu sellaisissa tilanteissa, kun käyttäjän tekemien valintojen määrä on todennäköisesti suuri.
Yhteisten parametrien määrittäminen
Valintojen tekemisen ja tarkastamisen jälkeen käyttäjä määrittää valintoja koskevat parametrit. Esimerkiksi reseptien uusiminen voi sisältää useita parametrejä (esim. uusimispyynnön vastaanottaja, vahvistustiedon vastaanottaminen tekstiviestitse).
Parametrien määrittämisvaiheessa käyttäjälle tulee tarjota mahdollisuus palata valintojen muokkaukseen ilman, että tietoja katoaa.
Myös tässä vaiheessa kannattaa näyttää yhteenveto tehdyistä valinnoista esimerkiksi valintakorissa tai haitarissa. Näin tieto valinnoista kulkee mukana koko prosessin läpi.
Varmistus
Ennen prosessin päättämistä käyttäjälle tulee näyttää yhteenveto, joka toimii varmistuksena tehdyistä valinnoista ja niihin liittyvistä parametreistä. Varmistusvaiheen yhteenvedossa näytetään valintapolun oleellisimmat tiedot:
- Valintapolun tarkoitus (esim. reseptin uusiminen)
- Käyttäjän tekemät valinnat (käyttäjän valitsemat reseptit)
- Valinnoille yhteiset parametrit (uusimispyynnön vastaanottaja)
Lisäksi käyttäjän pitää pystyä palaamaan takaisin edellisiin vaiheisiin ennen toiminnon loppuun suorittamista (esim. reseptin uusimispyynnön lähettäminen). Vaihe päättyy toiminnon suorittamiseen.
Prosessin päättäminen / Vahvistus
Valintapolun lopuksi käyttäjälle näytetään vahvistus toiminnon onnistumisesta. Olennaisinta on, että käyttäjälle on selkeää, että prosessi on päättynyt.
Vahvistuksen voi esittää käyttämällä esimerkiksi Result-komponenttia.