Käyttäjävirrat: Mitä ne ovat ja miksi niillä on merkitystä UX-suunnittelussa15 min read

Suuri UX ei ala pikseleillä. Se alkaa ymmärtämällä, mitä käyttäjät yrittävät tehdä, mihin he tulevat tuotteeseen, mitä päätöksiä heidän on tehtävä ja mikä tie vie heidät onnistuneeseen lopputulokseen.

Sitä polkua kutsutaan a käyttäjävirta.

Käyttäjävirta on visuaalinen kartta vaiheista, joita henkilö suorittaa sovelluksen, verkkosivuston tai tietyn tehtävän kautta. Se voi näyttää täydellisen tuotekokemuksen, kuten SaaS-sovellukseen liittymisen tai pienemmän virran, kuten rekisteröitymisen, demon varaamisen, uutiskirjeen tilaamisen tai kassan suorittamisen.

UX-suunnittelijoille, tuoteryhmille ja perustajille käyttäjävirrat ovat yksi yksinkertaisimmista tavoista suunnitella parempia käyttöliittymiä ennen yksityiskohtaisiin näyttöihin sitoutumista. Niiden avulla näet, missä käyttäjät voivat hämmentyä, missä kulussa on liian monta vaihetta ja mitkä näytöt sinun on todella suunniteltava.

Tässä oppaassa selitämme, mitä käyttäjävirrat ovat, miten niitä luetaan, milloin ne luodaan ja miten ne tukevat parempaa UX-suunnittelua.

Kokeile suunnitella käyttäjävirtoja tekoälyllä

Kuvaile käyttäjävirtaa, jonka haluat suunnitella, ja anna sitten Anima:n muuttaa se UX:ksi, näytöiksi ja koodiksi.

Mikä on käyttäjävirta?

A käyttäjävirta on kaavio, joka näyttää polun, jonka käyttäjä kulkee saavuttaakseen tavoitteen tuotteen sisällä. UX-suunnittelussa kyseinen tuote on yleensä sovellus, verkkosivusto, verkkosovellus tai digitaalinen palvelu.

Käyttäjän kulku alkaa aloituspisteellä, kuten kotisivulla, aloitussivulla, hakutuloksella, sähköpostilinkillä, kirjautumisnäytöllä tai ostoskorilla. Se päättyy viimeiseen vuorovaikutukseen, kuten tilin luomiseen, ostoksen suorittamiseen, lomakkeen lähettämiseen, projektin julkaisemiseen tai vahvistussivulle pääsemiseen.

Käyttäjävirta voi edustaa:

• Täydellinen tuotematka, kuten uuden sovelluksen löytäminen, rekisteröityminen ja käyttö
• Yksittäinen tehtävä, kuten salasanan nollaus tai suunnitelman päivittäminen
• Ominaisuuskulku, kuten projektin luominen, tiimikaverin kutsuminen tai mallin vienti
• Käyttöliittymävirta, joka näyttää, kuinka näytöt yhdistyvät tuotteen sisällä

Tavoite on yksinkertainen: tee käyttäjän polku selväksi ennen kuin suunnittelet käyttöliittymän yksityiskohtaisesti.

Esimerkki käyttäjän kulun perusrakenteesta

Käyttäjävirta vs. käyttöliittymävirta

Ehdot käyttäjävirta ja käyttöliittymän kulku liittyvät läheisesti toisiinsa.

Käyttäjävirta keskittyy käyttäjän polkuun kohti tavoitetta. Se vastaa kysymyksiin kuten:

• Mistä käyttäjä aloittaa?
• Mitä toimia he yrittävät suorittaa?
• Mitä päätöksiä he tekevät matkan varrella?
• Mitä tapahtuu, jos he menestyvät, epäonnistuvat tai valitsevat toisen reitin?

Käyttöliittymän kulku keskittyy tarkemmin siihen, miten näytöt, tilat, painikkeet, lomakkeet ja käyttöliittymäelementit liittyvät toisiinsa. Se vastaa kysymyksiin kuten:

• Mikä näyttö tulee tämän jälkeen?
• Mitä tapahtuu, kun käyttäjä napsauttaa tätä painiketta?
• Mihin tämä virhetila johtaa?
• Mitä käyttäjä näkee lomakkeen lähettämisen jälkeen?

Käytännössä UX-tiimit käyttävät usein molempia yhdessä. Käyttäjävirta määrittää polun. Käyttöliittymän virtaus tekee tästä polusta konkretisoituvan tuotteen UI sisällä.

Kuinka lukea käyttäjävirtaa

Käyttäjän kulku näyttää vaiheet, jotka käyttäjä suorittaa aloituspisteestä viimeiseen vuorovaikutukseen. Jokaista vaihetta edustaa yleensä muoto, jota kutsutaan myös solmuksi. Solmut on yhdistetty nuolilla, jotka osoittavat liikkeen suunnan.

Useimmat käyttäjien vuokaaviot käyttävät yksinkertaista visuaalista kieltä:

• Ympyrä tai soikea: Aloitus- tai loppupiste
• Suorakaide: Näyttö, sivu tai toiminto
• Timantti: Päätöskohta, kuten kyllä/ei, onnistuminen/epäonnistuminen tai valitse polku
• Nuoli: Liikkeen suunta portaiden välillä

Käyttäjävirran komponentit selitetty

Esimerkiksi yksinkertainen rekisteröitymisen käyttäjäkulku voi näyttää tältä:

1. Käyttäjä saapuu etusivulle
2. Käyttäjä napsauttaa ”Aloita ilmaiseksi”
3. Käyttäjä syöttää sähköpostiosoitteen ja salasanan
4. Järjestelmä tarkistaa, onko sähköposti kelvollinen
5. Käyttäjä vahvistaa tilin
6. Käyttäjä saapuu aloitusnäytölle
7. Käyttäjä viimeistelee asennuksen
8. Käyttäjä laskeutuu kojelautaan

Tällainen käyttäjävirtaesimerkki auttaa tiimiä ymmärtämään kokemusta ennen jokaisen näytön suunnittelua.

Esimerkkejä käyttäjäkuluista

Käyttäjävirrat on helpompi ymmärtää, kun yhdistät ne todellisiin tuotetehtäviin. Tässä on muutamia esimerkkejä yleisistä käyttäjäkuluista, joita UX-tiimit luovat tuotesuunnittelun aikana.

Rekisteröidy käyttäjävirta

Kirjautumiskäyttäjän kulku kartoittaa, kuinka uudesta vierailijasta tulee rekisteröity käyttäjä.

1. Vieraile aloitussivulla
2. Napsauta rekisteröitymisen toimintakehotus
3. Valitse kirjautumistapa
4. Anna tilin tiedot
5. Vahvista sähköpostiosoite
6. Täydellinen perehdytys
7. Siirry tuotteen kojelautaan

Tämä kulku auttaa tiimejä vähentämään kitkaa ensimmäisellä käyttökerralla. Jos rekisteröitymisessä on liian monta vaihetta, epäselvät lomakekentät tai hämmentävät vahvistustilat, käyttäjät voivat jäädä pois ennen kuin he näkevät tuotteen.

Tarkista käyttäjäkulku

Checkout-käyttäjävirta kartoittaa, kuinka käyttäjä siirtyy tuotekiinnostuksesta ostoon.

1. Katso tuote- tai hintasivu
2. Lisää tuote tai valitse suunnitelma
3. Tarkista ostoskorin tai suunnitelman tiedot
4. Syötä maksutiedot
5. Vahvista osto
6. Saavuta menestyssivu tai kuitti

Tämä kulku on erityisen tärkeä verkkokaupan, SaaS:n ja tilaustuotteiden kohdalla, koska jokainen ylimääräinen vaihe voi vaikuttaa tulokseen.

Kirjautumistunnuksen ja salasanan nollaus

Kirjautumisprosessi kartoittaa, kuinka palaavat käyttäjät pääsevät tililleen, mukaan lukien reunatapaukset.

1. Avaa kirjautumissivu
2. Syötä tunnistetiedot
3. Järjestelmä vahvistaa syötteen
4. Käyttäjä kirjautuu sisään onnistuneesti tai näkee virheen
5. Tarvittaessa käyttäjä aloittaa salasanan nollauksen
6. Käyttäjä vahvistaa sähköpostin
7. Käyttäjä asettaa uuden salasanan
8. Käyttäjä palaa tuotteeseen

Esimerkki käyttäjäkulusta kirjautumisprosessissa (tehtäväkulku)

Käyttöönoton käyttäjävirta

Aloittava käyttäjävirta kartoittaa, kuinka uudet käyttäjät saavuttavat ensimmäisen onnistuneen tuotehetken.

1. Luo tili
2. Vastaa asetuskysymyksiin
3. Valitse malli tai aloituspiste
4. Suorita ensimmäinen toimenpide
5. Katso menestystila
6. Jatka tuotteeseen

Tekoälytuotteille, suunnittelutyökaluille ja tuottaville sovelluksille käyttöönottoprosessit ovat kriittisiä, koska käyttäjien on ymmärrettävä, mitä tehdä seuraavaksi nopeasti.

Milloin käyttäjävirta luodaan

Luo käyttäjävirtoja suunnitteluprosessin varhaisessa vaiheessa, mieluiten ensimmäisen käyttäjätutkimuksen jälkeen ja ennen korkealaatuista UI-suunnittelua.

Tässä vaiheessa käyttäjävirta auttaa sinua:

• Päätä, mitä näyttöjä tarvitaan
• Poista tarpeettomat vaiheet
• Tunnista hämmentävät päätöskohdat
• Järjestä tiimi tuoterakenteen ympärille
• Suunnittele prototyyppejä nopeammin
• Vältä suunnittelemasta kiillotettuja näyttöjä rikkinäiselle polulle

Käyttäjävirrat ovat hyödyllisiä myös myöhemmin tuotteen elinkaaren aikana. Jos olemassa oleva käyttöliittymä ei toimi kunnolla, käyttäjävirta voi auttaa sinua diagnosoimaan, missä ihmiset jäävät pois, luopuvat tai eivät suorita tärkeitä tehtäviä.

Toisin sanoen käyttäjävirrat eivät koske vain uusia tuotteita. Ne ovat hyödyllisiä myös olemassa olevien tuotteiden parantamiseen.

Käyttäjävirtojen rooli UX-suunnittelussa

Käyttäjävirrat ovat keskeinen osa UX-suunnittelua, koska ne yhdistävät käyttäjätavoitteet tuotteen rakenteeseen. Ennen kuin huolehdit välilyönnistä, typografiasta, visuaalisesta hierarkiasta tai komponenteista, sinun on tiedettävä, mitä käyttäjä yrittää saada aikaan ja kuinka tuote auttaa häntä pääsemään sinne.

Käyttäjävirrat auttavat UX-tiimejä tekemään kolme tärkeää asiaa.

1. Luo intuitiivisempi käyttöliittymä

Selkeä käyttäjävirta tekee lopullisesta käyttöliittymästä helpompi ymmärtää.

Kun kartoitat virtauksen ennen suunnittelua, voit havaita kitkan ajoissa. Ehkä käyttäjän on tehtävä päätös ennen kuin hänellä on tarpeeksi tietoa. Ehkä lomake ilmestyy liian aikaisin. Ehkä vahvistusvaihe puuttuu. Ehkä on kolme näyttöä, joissa yksi riittäisi.

Jos kulku on hämmentävää, myös käyttöliittymä on todennäköisesti hämmentävä.

2. Arvioi olemassa oleva käyttöliittymä

Käyttäjävirrat ovat loistava tapa optimoida olemassa olevia tuotteita, jotka eivät välttämättä tuota tai säilytä odotetulla tavalla. Jos käyttäjät eivät muunna, aktivoi tai suorita tärkeää tehtävää, kartoita nykyinen kulku.

Saatat huomata, että käyttäjät ohjataan väärälle näytölle, pyydetään liikaa tietoja tai heidät pakotetaan kulkemaan polkua, joka ei vastaa heidän tarkoitustaan.

3. Välitä strategiasi tiimin jäsenille ja sidosryhmille

Käyttäjävirrat sopivat erinomaisesti yhteistyöhön. Ne antavat suunnittelijoille, kehittäjille, päämiehille, päättäjille ja sidosryhmille yhteisen kartan kokemuksista.

Suunnittelijat voivat käyttää kulkua näyttöjen suunnitteluun. Kehittäjät voivat käyttää sitä ymmärtääkseen tiloja ja reunatapauksia. PM:t voivat käyttää sitä vaatimusten selventämiseen. Sidosryhmät voivat käyttää sitä tarkastellakseen kokemuksen logiikkaa ennen kuin tiimi panostaa yksityiskohtaiseen suunnitteluun tai toteutukseen.

Käyttäjävirrat voivat myös auttaa kehittäjiä ymmärtämään kokonaisuutta rakenne lopullisen prototyyppisi takana, mikä tekee vaihto tehokkaampi.

Käyttäjän matka vs. käyttäjävirta

Käyttäjien matkat ja käyttäjävirrat sekoitetaan usein, mutta ne eivät ole sama asia.

A käyttäjän matka kertoo laajemman tarinan käyttäjän suhteesta tuotteeseen. Se sisältää yleensä käyttäjän tavoitteet, tunteet, motivaatiot, kipukohdat ja kosketuspisteet ennen tuotteen käyttöä, sen aikana ja sen jälkeen.

A käyttäjävirta keskittyy polkuun, jonka käyttäjä kulkee tuotteen sisällä saavuttaakseen tietyn tavoitteen.

Keskeiset erot

Molemmat ovat hyödyllisiä. Matka auttaa ymmärtämään käyttäjän kontekstia. Vuo auttaa sinua suunnittelemaan todellisen polun käyttöliittymän läpi.

Kuinka luoda käyttäjävirta

Voit luoda käyttäjäkulun taululla, suunnittelutyökalulla, kaaviotyökalulla tai tekoälysuunnittelutyökalulla. Muotoilla on vähemmän merkitystä kuin polun selkeydellä.

1. Määritä käyttäjän tavoite

Aloita toiminnolla, jonka käyttäjä haluaa suorittaa.

• Luo tili
• Osta tuote
• Varaa demo
• Julkaise verkkosivusto
• Kutsu joukkuetoveri
• Vie malli koodiin

Käyttäjävirta tulisi rakentaa tietyn tavoitteen ympärille, ei epämääräisen tuotealueen ympärille.

2. Valitse aloituspiste

Päätä, mistä käyttäjä aloittaa. Esimerkkejä ovat kotisivu, hinnoittelusivu, hakutulos, sähköpostikampanja, sovelluksen hallintapaneeli, ilmoitus tai jaettu linkki.

Eri tulopisteet voivat luoda erilaisia virtauksia. Palaava käyttäjä ja ensikertalainen eivät välttämättä tarvitse samaa polkua.

3. Kartoita onnellinen polku

Onnellinen polku on yksinkertaisin onnistunut reitti alusta loppuun.

1. Käyttäjä avaa hintasivun
2. Käyttäjä valitsee suunnitelman
3. Käyttäjä luo tilin
4. Käyttäjä syöttää maksutiedot
5. Käyttäjä vahvistaa ostoksen
6. Käyttäjä saapuu menestyssivulle

Tämä antaa sinulle peruskokemuksen.

4. Lisää päätökset ja reunatapaukset

Todelliset käyttäjät eivät aina seuraa täydellistä polkua. Lisää päätöskohtia, kuten:

• Onko käyttäjällä jo tili?
• Onko lomake voimassa?
• Onko maksu onnistunut?
• Valitsiko käyttäjä kuukausi- vai vuosilaskutuksen?
• Onko käyttäjällä lupa jatkaa?
• Mitä tapahtuu, jos käyttäjä peruuttaa?

Nämä haarat tekevät yksinkertaisesta polusta todellisen UX-suunnittelun käyttäjävirran.

5. Yksinkertaista virtausta

Kun virtaus on kartoitettu, etsi kitkaa.

• Voimmeko poistaa askelman?
• Voimmeko yhdistää näyttöjä?
• Pyydämmekö tietoja liian aikaisin?
• Onko seuraava toimenpide ilmeinen?
• Onko olemassa umpikuja?
• Ovatko virhetilat selkeitä?
• Tietääkö käyttäjä aina mitä tapahtui?

Parhaat käyttäjävirrat tuntuvat ilmeisiltä, koska monimutkaisuus on jo ratkaistu kulissien takana.

Käyttäjävirrat pähkinänkuoressa

Käyttäjävirrat ovat tuotesuunnittelun rakennekarttoja. Ne näyttävät, kuinka käyttäjät siirtyvät sovelluksen, verkkosivuston tai tehtävän läpi aloituspisteestä lopulliseen vuorovaikutukseen.

Vahva käyttäjävirta:

• Alkaa selkeästä käyttäjätavoitteesta
• Näyttää käyttäjän sisääntulokohdan
• Kartoittaa polun vaiheet, näytöt ja päätökset
• Sisältää tärkeitä reunakoteloita
• Auttaa ryhmiä tunnistamaan kitkan ennen yksityiskohtaista UI-suunnittelua
• Helpottaa vaihtoa suunnittelijoille, kehittäjille, PM:ille ja sidosryhmille

UX-tiimeille käyttäjävirrat ovat yksi käytännöllisimmistä työkaluista muuttaa käyttäjätutkimus käyttöliittymärakenteeksi. Niiden avulla voit suunnitella tarkoituksella sen sijaan, että arvailet näyttö kerrallaan.

FAQ: Käyttäjävirrat

Mitä käyttäjävirrat ovat?

Käyttäjävirrat ovat kaavioita, jotka näyttävät polun, jonka käyttäjä kulkee sovelluksen, verkkosivuston tai tuotetehtävän kautta. Ne alkavat yleensä sisääntulokohdasta, kuten kotisivulta tai kirjautumisnäytöstä, ja päättyvät, kun käyttäjä saavuttaa tavoitteen, kuten rekisteröitymisen, oston tai lomakkeen lähettämisen.

Mikä on käyttäjävirta UX-suunnittelussa?

UX-suunnittelussa käyttäjäkulku kartoittaa vaiheet, näytöt, päätökset ja toimet, joita käyttäjä suorittaa saavuttaakseen tavoitteen. UX-tiimit käyttävät käyttäjävirtoja tuoterakenteen suunnitteluun, kitkan vähentämiseen ja selkeämpien käyttöliittymien suunnitteluun ennen korkealaatuisten näyttöjen luomista.

Mitä eroa on käyttäjävirran ja käyttäjämatkan välillä?

Käyttäjämatka näyttää laajemman kokemuksen, mukaan lukien käyttäjien motivaatiot, tunteet, kipukohdat ja kosketuspisteet. Käyttäjävirta keskittyy tiettyyn polkuun, jonka käyttäjä kulkee tuotteen sisällä suorittaakseen tehtävän.

Mikä on käyttöliittymävirta?

Käyttöliittymän kulku näyttää, kuinka näytöt, UI-tilat, painikkeet, lomakkeet ja vuorovaikutukset yhdistyvät tuotteen sisällä. Se liittyy läheisesti käyttäjävirtaan, mutta keskittyy tarkemmin käyttöliittymätason polkuun.

Milloin käyttäjävirta tulisi luoda?

Luo käyttäjävirta ensimmäisen käyttäjätutkimuksen jälkeen ja ennen yksityiskohtaista UI-suunnittelua. Voit myös luoda käyttäjävirtoja myöhemmin tarkastaaksesi olemassa olevan tuotteen, diagnosoidaksesi putoamisen tai parantaaksesi konversioita.

Mitkä ovat esimerkkejä käyttäjävirroista?

Yleisiä esimerkkejä käyttäjäkuluista ovat kirjautumisprosessit, kassavirrat, käyttöönottoprosessit, kirjautumisprosessit, salasanan palautusprosessit, varausvirrat, päivitystyöt ja tiimitovereiden kutsuminen.

Miksi käyttäjävirrat ovat tärkeitä?

Käyttäjävirrat auttavat tiimejä ymmärtämään, kuinka käyttäjät liikkuvat tuotteen läpi ennen kuin investoivat yksityiskohtaiseen suunnitteluun tai kehittämiseen. Ne paljastavat kitkan, puuttuvat vaiheet, hämmentävät päätökset ja tarpeettoman monimutkaisuuden prosessin varhaisessa vaiheessa.

Miten käyttäjävirta saadaan aikaan?

Aloita käyttäjätavoitteella, valitse aloituskohta, kartoita onnellinen polku, lisää päätökset ja reunatapaukset ja yksinkertaista sitten polkua. Käytä ympyröitä tai soikioita aloitus- ja loppupisteisiin, suorakulmioita näytöille tai toimiin, timantteja päätöksiin ja nuolia osoittamaan suunta.

Kokeile Anima Playground käyttäjävirtoja ja UX-suunnittelua

Anima Playground avulla voit siirtyä tuoteideasta UX-kulkuun, suunnitteluun ja toimivaan koodiin selaimessa. Kuvaile kokemusta, jonka haluat rakentaa, tarkenna sitä tekoälyllä ja tee tuloksesta todellinen interaktiivinen tuote.

Aloita suunnittelu Anima Playground:llä.