Brukerflyter: Hva de er og hvorfor de betyr noe i UX-design13 min read

Flott UX starter ikke med piksler. Det starter med å forstå hva brukerne prøver å gjøre, hvor de går inn i et produkt, hvilke beslutninger de må ta, og hvilken vei som fører dem til et vellykket resultat.

Den veien kalles en brukerflyt.

En brukerflyt er et visuelt kart over trinnene en person tar gjennom en app, nettside eller spesifikk oppgave. Den kan vise en full produktopplevelse, som å gå inn i en SaaS-app, eller en mindre flyt, som å registrere seg, bestille en demo, abonnere på et nyhetsbrev eller fullføre kassen.

For UX-designere, produktteam og grunnleggere er brukerflyter en av de enkleste måtene å designe bedre grensesnitt før man forplikter seg til detaljerte skjermer. De hjelper deg å se hvor brukere kan bli forvirret, hvor en flyt har for mange trinn, og hvilke skjermer du faktisk trenger å designe.

I denne veiledningen vil vi forklare hva brukerflyter er, hvordan du leser dem, når du skal lage dem, og hvordan de støtter bedre UX-design.

Prøv å designe brukerflyter med AI

Beskriv brukerflyten du vil designe, og la Anima gjøre den om til UX, skjermer og kode.

Hva er en brukerflyt?

A brukerflyt er et diagram som viser veien en bruker tar for å fullføre et mål i et produkt. I UX-design er det produktet vanligvis en app, nettside, nettapp eller digital tjeneste.

En brukerflyt begynner med et inngangspunkt, for eksempel en hjemmeside, landingsside, søkeresultat, e-postkobling, påloggingsskjerm eller handlekurv. Det ender med en siste interaksjon, som å opprette en konto, fullføre et kjøp, sende inn et skjema, publisere et prosjekt eller komme til en bekreftelsesside.

En brukerflyt kan representere:

• En komplett produktreise, som å oppdage, registrere deg for og bruke en ny app
• En enkelt oppgave, som å tilbakestille et passord eller oppgradere en plan
• En funksjonsflyt, som å lage et prosjekt, invitere en lagkamerat eller eksportere et design
• En brukergrensesnittflyt som viser hvordan skjermer kobles til inne i produktet

Målet er enkelt: Gjør brukerens vei klar før du designer grensesnittet i detalj.

Et eksempel på en grunnleggende brukerflytstruktur

Brukerflyt vs brukergrensesnittflyt

Vilkårene brukerflyt og brukergrensesnittflyt er nært beslektet.

En brukerflyt fokuserer på brukerens vei mot et mål. Den svarer på spørsmål som:

• Hvor begynner brukeren?
• Hvilken handling prøver de å fullføre?
• Hvilke avgjørelser tar de underveis?
• Hva skjer hvis de lykkes, mislykkes eller tar en annen vei?

En brukergrensesnittflyt fokuserer mer spesifikt på hvordan skjermer, tilstander, knapper, skjemaer og grensesnittelementer kobles sammen. Den svarer på spørsmål som:

• Hvilken skjerm kommer etter denne?
• Hva skjer når brukeren klikker på denne knappen?
• Hvor fører denne feiltilstanden?
• Hva ser brukeren etter å ha sendt inn skjemaet?

I praksis bruker UX-team ofte begge sammen. Brukerflyten definerer banen. Brukergrensesnittflyten gjør denne banen konkret inne i produktet UI.

Hvordan lese en brukerflyt

En brukerflyt legger opp trinnene en bruker tar fra inngangspunktet til den endelige interaksjonen. Hvert trinn er vanligvis representert av en form, også kalt en node. Nodene er forbundet med piler som viser bevegelsesretningen.

De fleste brukerflytdiagrammer bruker et enkelt visuelt språk:

• Sirkel eller oval: Start- eller sluttpunkt
• Rektangel: Skjerm, side eller handling
• Diamant: Beslutningspunkt, for eksempel ja/nei, suksess/fiasko, eller velg vei
• Pil: Bevegelsesretning mellom trinnene

Brukerflytkomponenter forklart

For eksempel kan en enkel registreringsbrukerflyt se slik ut:

1. Brukeren lander på hjemmesiden
2. Bruker klikker «Start gratis»
3. Bruker skriver inn e-post og passord
4. Systemet sjekker om e-posten er gyldig
5. Bruker bekrefter konto
6. Brukeren kommer til påstigningsskjermen
7. Bruker fullfører oppsettet
8. Brukeren lander i dashbordet

Denne typen brukerflyteksempel hjelper teamet med å forstå opplevelsen før de designer hver skjerm.

Eksempler på brukerflyt

Brukerflyter blir lettere å forstå når du kobler dem til reelle produktoppgaver. Her er noen vanlige eksempler på brukerflyt som UX-team lager under produktplanlegging.

Registreringsbrukerflyt

En registreringsbrukerflyt kartlegger hvordan en ny besøkende blir en registrert bruker.

1. Besøk landingssiden
2. Klikk på registrering CTA
3. Velg registreringsmetode
4. Skriv inn kontodetaljer
5. Bekreft e-post
6. Fullfør onboarding
7. Nå produktdashbordet

Denne flyten hjelper teamene med å redusere friksjonen i den første opplevelsen. Hvis registreringen har for mange trinn, uklare skjemafelt eller forvirrende bekreftelsestilstander, kan brukere droppe før de ser produktet.

Kasse brukerflyt

En brukerflyt for utsjekking kartlegger hvordan en bruker beveger seg fra produktinteresse til kjøp.

1. Se produkt- eller prisside
2. Legg til element eller velg plan
3. Se gjennom handlekurv eller plandetaljer
4. Skriv inn betalingsinformasjon
5. Bekreft kjøpet
6. Nå suksessside eller kvittering

Denne flyten er spesielt viktig for e-handel, SaaS og abonnementsprodukter fordi hvert ekstra trinn kan påvirke konverteringen.

Pålogging og passord tilbakestilt brukerflyt

En påloggingsflyt kartlegger hvordan returnerende brukere får tilgang til kontoen sin, inkludert edge-saker.

1. Åpne påloggingssiden
2. Skriv inn legitimasjon
3. Systemet validerer inndata
4. Brukeren logger på eller ser en feil
5. Om nødvendig starter brukeren tilbakestilling av passord
6. Bruker bekrefter e-post
7. Bruker angir nytt passord
8. Brukeren går tilbake til produktet

Et eksempel på brukerflyt for en påloggingsprosess (oppgaveflyt)

Onboarding brukerflyt

En onboarding-brukerflyt kartlegger hvordan nye brukere når sitt første vellykkede produktøyeblikk.

1. Opprett konto
2. Svar på oppsettspørsmål
3. Velg mal eller utgangspunkt
4. Fullfør første handling
5. Se suksesstilstand
6. Fortsett inn i produktet

For AI-produkter, designverktøy og produktivitetsapper er introduksjonsflyter avgjørende fordi brukere raskt må forstå hva de skal gjøre.

Når du skal opprette en brukerflyt

Lag brukerflyt tidlig i designprosessen, ideelt etter innledende brukerundersøkelser og før UI-design med høy kvalitet.

På dette stadiet hjelper en brukerflyt deg:

• Bestem hvilke skjermer som må eksistere
• Fjern unødvendige trinn
• Identifiser forvirrende beslutningspunkter
• Juster teamet rundt produktstrukturen
• Planlegg prototyper raskere
• Unngå å designe polerte skjermer for en ødelagt bane

Brukerflyter er også nyttige senere i produktets livssyklus. Hvis et eksisterende grensesnitt ikke presterer dårlig, kan en brukerflyt hjelpe deg med å diagnostisere hvor folk faller av, går i loop eller ikke klarer å fullføre nøkkeloppgaver.

Brukerstrømmer er med andre ord ikke bare for nye produkter. De er også nyttige for å forbedre eksisterende produkter.

Rollen til brukerflyt i UX-design

Brukerflyter er en kjernedel av UX-design fordi de kobler brukermål til produktstruktur. Før du bekymrer deg for mellomrom, typografi, visuelt hierarki eller komponenter, må du vite hva brukeren prøver å oppnå og hvordan produktet hjelper dem å komme dit.

Brukerflyter hjelper UX-team med å gjøre tre viktige ting.

1. Lag et mer intuitivt grensesnitt

En tydelig brukerflyt gjør det endelige grensesnittet lettere å forstå.

Når du kartlegger flyten før du designer, kan du oppdage friksjon tidlig. Kanskje en bruker må ta en avgjørelse før de har nok informasjon. Kanskje dukker det opp et skjema for tidlig. Kanskje mangler bekreftelsestrinnet. Kanskje det er tre skjermer der én ville være nok.

Hvis flyten er forvirrende, vil grensesnittet sannsynligvis også være forvirrende.

2. Vurder et eksisterende grensesnitt

Brukerflyter er en fin måte å optimalisere eksisterende produkter som kanskje ikke konverterer eller beholder som forventet. Hvis brukere ikke konverterer, aktiverer eller fullfører en viktig oppgave, kartlegg gjeldende flyt.

Du kan oppleve at brukere blir sendt til feil skjerm, bedt om for mye informasjon eller tvunget gjennom en bane som ikke samsvarer med hensikten deres.

3. Formidle strategien din til teammedlemmer og interessenter

Brukerflyter er gode for samarbeid. De gir designere, utviklere, statsministere, beslutningstakere og interessenter et felles kart over opplevelsen.

Designere kan bruke flyten til å planlegge skjermer. Utviklere kan bruke den til å forstå tilstander og kantsaker. PM-er kan bruke det til å klargjøre krav. Interessenter kan bruke den til å gjennomgå logikken i opplevelsen før teamet investerer i detaljert design eller implementering.

Brukerflyter kan også hjelpe utviklere med å forstå helheten strukturen bak den endelige prototypen, som gjør overlevering mer effektiv.

Brukerreise vs brukerflyt

Brukerreiser og brukerflyter blir ofte forvirret, men det er ikke det samme.

A brukerreise forteller den bredere historien om en brukers forhold til et produkt. Det inkluderer vanligvis brukermål, følelser, motivasjoner, smertepunkter og berøringspunkter før, under og etter produktbruk.

A brukerflyt fokuserer på veien en bruker tar inne i produktet for å fullføre et spesifikt mål.

Viktige forskjeller

Begge er nyttige. Reisen hjelper deg å forstå brukerens kontekst. Flyten hjelper deg med å designe den faktiske banen gjennom grensesnittet.

Hvordan lage en brukerflyt

Du kan opprette en brukerflyt med en tavle, designverktøy, diagramverktøy eller AI-designverktøy. Formatet betyr mindre enn klarheten til banen.

1. Definer brukermålet

Start med handlingen brukeren ønsker å fullføre.

• Opprett en konto
• Kjøp et produkt
• Bestill en demo
• Publiser et nettsted
• Inviter en lagkamerat
• Eksporter et design til kode

En brukerflyt bør bygges rundt et spesifikt mål, ikke et vagt produktområde.

2. Velg inngangspunktet

Bestem hvor brukeren skal begynne. Eksempler inkluderer en startside, prisside, søkeresultat, e-postkampanje, appoversikt, varsling eller delt kobling.

Ulike inngangspunkter kan skape forskjellige flyter. En tilbakevendende bruker og en førstegangsbesøkende trenger kanskje ikke den samme banen.

3. Kartlegg den lykkelige veien

Lykkestien er den enkleste vellykkede ruten fra start til slutt.

1. Brukeren åpner prissiden
2. Bruker velger plan
3. Bruker oppretter konto
4. Bruker legger inn betalingsdetaljer
5. Bruker bekrefter kjøp
6. Brukeren lander på suksesssiden

Dette gir deg basisopplevelsen.

4. Legg til vedtak og kantsaker

Ekte brukere følger ikke alltid den perfekte veien. Legg til beslutningspunkter som:

• Har brukeren allerede en konto?
• Er skjemaet gyldig?
• Har betalingen lyktes?
• Valgte brukeren månedlig eller årlig fakturering?
• Har brukeren tillatelse til å fortsette?
• Hva skjer hvis brukeren avbryter?

Disse grenene er det som gjør en enkel vei til en ekte UX-designbrukerflyt.

5. Forenkle flyten

Når flyten er kartlagt, se etter friksjon.

• Kan vi fjerne et trinn?
• Kan vi kombinere skjermer?
• Ber vi om informasjon for tidlig?
• Er neste handling åpenbar?
• Er det en blindvei?
• Er feiltilstander klare?
• Vet brukeren alltid hva som har skjedd?

De beste brukerflytene føles åpenbare fordi kompleksiteten allerede er løst bak kulissene.

Brukerflyt i et nøtteskall

Brukerflyter er strukturelle kart for produktdesign. De viser hvordan brukere beveger seg gjennom en app, nettside eller oppgave fra inngangspunkt til endelig interaksjon.

En sterk brukerflyt:

• Starter med et tydelig brukermål
• Viser brukerens inngangspunkt
• Kartlegger trinnene, skjermene og beslutningene i banen
• Inkluderer viktige kantsaker
• Hjelper team å identifisere friksjon før detaljert UI-design
• Gjør overlevering enklere for designere, utviklere, statsministere og interessenter

For UX-team er brukerflyt et av de mest praktiske verktøyene for å gjøre brukerforskning om til grensesnittstruktur. De hjelper deg med å designe med hensikt i stedet for å gjette skjerm for skjerm.

FAQ: Brukerflyter

Hva er brukerflyter?

Brukerflyter er diagrammer som viser veien en bruker tar gjennom en app, nettside eller produktoppgave. De begynner vanligvis ved et inngangspunkt, for eksempel en hjemmeside eller påloggingsskjerm, og slutter når brukeren fullfører et mål, for eksempel å registrere seg, kjøpe eller sende inn et skjema.

Hva er en brukerflyt i UX-design?

I UX-design kartlegger en brukerflyt trinnene, skjermbildene, beslutningene og handlingene en bruker tar for å fullføre et mål. UX-team bruker brukerflyter til å planlegge produktstruktur, redusere friksjon og designe klarere grensesnitt før de oppretter høykvalitetsskjermer.

Hva er forskjellen mellom en brukerflyt og en brukerreise?

En brukerreise viser den bredere opplevelsen, inkludert brukermotivasjoner, følelser, smertepunkter og berøringspunkter. En brukerflyt fokuserer på den spesifikke banen en bruker tar inne i produktet for å fullføre en oppgave.

Hva er en brukergrensesnittflyt?

En brukergrensesnittflyt viser hvordan skjermer, UI-tilstander, knapper, skjemaer og interaksjoner kobles sammen inne i et produkt. Det er nært knyttet til en brukerflyt, men det fokuserer mer spesifikt på banen på grensesnittnivå.

Når bør du opprette en brukerflyt?

Lag en brukerflyt etter innledende brukerundersøkelser og før detaljert UI-design. Du kan også opprette brukerflyter senere for å revidere et eksisterende produkt, diagnostisere frafall eller forbedre konvertering.

Hva er eksempler på brukerflyt?

Vanlige brukerflyteksempler inkluderer registreringsflyter, betalingsflyter, onboarding-flyter, påloggingsflyter, tilbakestillingsflyter for passord, bestillingsflyter, oppgraderingsflyter og inviter-en-lagkamerat-flyter.

Hvorfor er brukerflyt viktig?

Brukerflyter hjelper team med å forstå hvordan brukere beveger seg gjennom et produkt før de investerer i detaljert design eller utvikling. De avslører friksjon, manglende trinn, forvirrende beslutninger og unødvendig kompleksitet tidlig i prosessen.

Hvordan får du en bruker til å flyte?

Start med et brukermål, velg inngangspunktet, kartlegg den lykkelige banen, legg til vedtak og kantsaker, forenkle deretter banen. Bruk sirkler eller ovaler for start- og sluttpunkter, rektangler for skjermer eller handlinger, ruter for avgjørelser og piler for å vise retning.

Prøv Anima Playground for brukerflyt og UX-design

Anima Playground lar deg gå fra produktidé til UX flyt, design og arbeidskode i nettleseren. Beskriv opplevelsen du ønsker å bygge, avgrens den med AI, og gjør resultatet til et ekte interaktivt produkt.

Begynn å designe med Anima Playground.