Brugerstrømme: Hvad de er, og hvorfor de betyder noget i UX-design14 min read

Fantastisk UX starter ikke med pixels. Det starter med at forstå, hvad brugerne forsøger at gøre, hvor de indtaster et produkt, hvilke beslutninger de skal træffe, og hvilken vej der fører dem til et vellykket resultat.

Den vej kaldes en brugerflow.

Et brugerflow er et visuelt kort over de trin, en person tager gennem en app, et websted eller en specifik opgave. Det kan vise en komplet produktoplevelse, som at gå ombord i en SaaS-app eller et mindre flow, som at tilmelde sig, booke en demo, abonnere på et nyhedsbrev eller fuldføre kassen.

For UX-designere, produktteams og grundlæggere er brugerflows en af ​​de enkleste måder at designe bedre grænseflader på, før de forpligter sig til detaljerede skærmbilleder. De hjælper dig med at se, hvor brugerne kan blive forvirrede, hvor et flow har for mange trin, og hvilke skærme du rent faktisk skal designe.

I denne vejledning forklarer vi, hvad brugerflows er, hvordan man læser dem, hvornår de skal oprettes, og hvordan de understøtter bedre UX-design.

Prøv at designe brugerflows med AI

Beskriv det brugerflow, du vil designe, og lad derefter Anima omdanne det til UX, skærme og kode.

Hvad er et brugerflow?

A brugerflow er et diagram, der viser den vej, en bruger går for at fuldføre et mål inde i et produkt. I UX-design er dette produkt normalt en app, hjemmeside, webapp eller digital tjeneste.

Et brugerflow begynder med et indgangspunkt, såsom en startside, landingsside, søgeresultat, e-mail-link, login-skærm eller indkøbskurv. Det ender med en sidste interaktion, såsom at oprette en konto, gennemføre et køb, indsende en formular, udgive et projekt eller komme til en bekræftelsesside.

Et brugerflow kan repræsentere:

• En komplet produktrejse, som at opdage, tilmelde dig og bruge en ny app
• En enkelt opgave, som at nulstille en adgangskode eller opgradere en plan
• Et funktionsflow, som at oprette et projekt, invitere en holdkammerat eller eksportere et design
• Et brugergrænsefladeflow, der viser, hvordan skærme forbindes inde i produktet

Målet er enkelt: Gør brugerens vej klar, før du designer grænsefladen i detaljer.

Et eksempel på en grundlæggende brugerflowstruktur

Brugerflow vs brugergrænsefladeflow

Vilkårene brugerflow og brugergrænseflade flow er nært beslægtede.

Et brugerflow fokuserer på brugerens vej mod et mål. Den besvarer spørgsmål som:

• Hvor starter brugeren?
• Hvilken handling forsøger de at fuldføre?
• Hvilke beslutninger træffer de undervejs?
• Hvad sker der, hvis de lykkes, fejler eller tager en anden vej?

Et brugergrænsefladeflow fokuserer mere specifikt på, hvordan skærme, tilstande, knapper, formularer og grænsefladeelementer forbindes. Den besvarer spørgsmål som:

• Hvilken skærm kommer efter denne?
• Hvad sker der, når brugeren klikker på denne knap?
• Hvor fører denne fejltilstand hen?
• Hvad ser brugeren efter at have indsendt formularen?

I praksis bruger UX-hold ofte begge sammen. Brugerflowet definerer stien. Brugergrænsefladeflowet gør denne vej konkret inde i produktet UI.

Sådan læser du et brugerflow

Et brugerflow angiver de trin, en bruger tager fra indgangspunktet til den endelige interaktion. Hvert trin er normalt repræsenteret af en form, også kaldet en node. Noderne er forbundet med pile, der viser bevægelsesretningen.

De fleste brugerflowdiagrammer bruger et simpelt visuelt sprog:

• Cirkel eller oval: Start- eller slutpunkt
• Rektangel: Skærm, side eller handling
• Diamant: Beslutningspunkt, såsom ja/nej, succes/fiasko, eller vælg vej
• Pil: Bevægelsesretning mellem trin

Brugerflowkomponenter forklaret

For eksempel kan et simpelt tilmeldingsbrugerflow se sådan ud:

1. Brugeren lander på hjemmesiden
2. Brugeren klikker på “Start gratis”
3. Brugeren indtaster e-mail og adgangskode
4. Systemet kontrollerer, om e-mailen er gyldig
5. Bruger bekræfter konto
6. Brugeren når onboarding-skærmen
7. Bruger fuldfører opsætning
8. Bruger lander i dashboard

Denne type brugerflow-eksempel hjælper teamet med at forstå oplevelsen, før de designer hver skærm.

Eksempler på brugerflow

Brugerflows bliver nemmere at forstå, når du forbinder dem med rigtige produktopgaver. Her er et par almindelige brugerflow-eksempler UX-teams opretter under produktplanlægning.

Tilmeld brugerflow

Et tilmeldingsbrugerflow kortlægger, hvordan en ny besøgende bliver en registreret bruger.

1. Besøg landingssiden
2. Klik på tilmelding CTA
3. Vælg tilmeldingsmetode
4. Indtast kontooplysninger
5. Bekræft e-mail
6. Fuldstændig onboarding
7. Nå produktets dashboard

Dette flow hjælper teams med at reducere friktionen i den første oplevelse. Hvis tilmeldingen har for mange trin, uklare formularfelter eller forvirrende bekræftelsestilstande, kan brugere falde fra, før de nogensinde ser produktet.

Checkout brugerflow

Et kassebrugerflow kortlægger, hvordan en bruger bevæger sig fra produktinteresse til køb.

1. Se produkt- eller prisside
2. Tilføj vare eller vælg plan
3. Gennemgå indkøbskurv eller planoplysninger
4. Indtast betalingsoplysninger
5. Bekræft køb
6. Nå successide eller kvittering

Dette flow er især vigtigt for e-handel, SaaS og abonnementsprodukter, fordi hvert ekstra trin kan påvirke konverteringen.

Login og adgangskode nulstil brugerflow

Et login-flow kortlægger, hvordan tilbagevendende brugere får adgang til deres konto, inklusive edge-sager.

1. Åbn login-siden
2. Indtast legitimationsoplysninger
3. System validerer input
4. Brugeren logger ind eller ser en fejl
5. Hvis det er nødvendigt, starter brugeren nulstilling af adgangskode
6. Bruger bekræfter e-mail
7. Brugeren indstiller ny adgangskode
8. Brugeren vender tilbage til produktet

Et eksempel på brugerflow for en login-proces (task flow)

Onboarding af brugerflow

Et onboarding-brugerflow kortlægger, hvordan nye brugere når deres første succesfulde produktøjeblik.

1. Opret konto
2. Besvar opsætningsspørgsmål
3. Vælg skabelon eller udgangspunkt
4. Fuldfør første handling
5. Se succestilstand
6. Fortsæt ind i produktet

For AI-produkter, designværktøjer og produktivitetsapps er onboarding-flows afgørende, fordi brugerne hurtigt skal forstå, hvad de skal gøre.

Hvornår skal der oprettes et brugerflow

Skab brugerflow tidligt i designprocessen, ideelt efter indledende brugerundersøgelser og før UI-design med høj kvalitet.

På dette stadium hjælper et brugerflow dig:

• Beslut hvilke skærme der skal eksistere
• Fjern unødvendige trin
• Identificer forvirrende beslutningspunkter
• Juster teamet omkring produktstrukturen
• Planlæg prototyper hurtigere
• Undgå at designe polerede skærme til en brudt sti

Brugerstrømme er også nyttige senere i produktets livscyklus. Hvis en eksisterende grænseflade ikke præsterer dårligt, kan et brugerflow hjælpe dig med at diagnosticere, hvor folk falder fra, går i sløjfe eller undlader at udføre nøgleopgaver.

Brugerstrømme er med andre ord ikke kun til nye produkter. De er også nyttige til at forbedre eksisterende produkter.

Rollen af brugerstrømme i UX design

Brugerstrømme er en kernedel af UX design, fordi de forbinder brugermål med produktstruktur. Før du bekymrer dig om mellemrum, typografi, visuelt hierarki eller komponenter, skal du vide, hvad brugeren forsøger at opnå, og hvordan produktet hjælper dem med at komme dertil.

Brugerflow hjælper UX-teams med at gøre tre vigtige ting.

1. Skab en mere intuitiv grænseflade

Et klart brugerflow gør den endelige grænseflade lettere at forstå.

Når du kortlægger flowet før design, kan du opdage friktion tidligt. Måske skal en bruger tage en beslutning, før de har nok information. Måske dukker en formular op for tidligt. Måske mangler bekræftelsestrinnet. Måske er der tre skærme, hvor én ville være nok.

Hvis flowet er forvirrende, vil grænsefladen sandsynligvis også være forvirrende.

2. Evaluer en eksisterende grænseflade

Brugerstrømme er en fantastisk måde at optimere eksisterende produkter, som muligvis ikke konverterer eller beholder som forventet. Hvis brugere ikke konverterer, aktiverer eller fuldfører en vigtig opgave, skal du kortlægge det aktuelle flow.

Du kan opleve, at brugere bliver sendt til den forkerte skærm, bedt om for meget information eller tvunget gennem en sti, der ikke matcher deres hensigt.

3. Formidl din strategi til teammedlemmer og interessenter

Brugerflows er gode til samarbejde. De giver designere, udviklere, PM’er, beslutningstagere og interessenter et fælles kort over oplevelsen.

Designere kan bruge flowet til at planlægge skærme. Udviklere kan bruge det til at forstå tilstande og kantsager. PM’er kan bruge det til at præcisere krav. Interessenter kan bruge det til at gennemgå logikken i oplevelsen, før teamet investerer i detaljeret design eller implementering.

Brugerflows kan også hjælpe udviklere med at forstå det overordnede strukturen bag din endelige prototype, hvilket gør aflevering mere effektiv.

Brugerrejse vs brugerflow

Brugerrejser og brugerstrømme er ofte forvirrede, men det er ikke det samme.

A brugerrejse fortæller den bredere historie om en brugers forhold til et produkt. Det inkluderer normalt brugermål, følelser, motivationer, smertepunkter og berøringspunkter før, under og efter produktbrug.

A brugerflow fokuserer på den vej, en bruger går inde i produktet for at fuldføre et specifikt mål.

Nøgleforskelle

Begge er nyttige. Rejsen hjælper dig med at forstå brugerens kontekst. Flow hjælper dig med at designe den faktiske vej gennem grænsefladen.

Sådan opretter du et brugerflow

Du kan oprette et brugerflow med et whiteboard, designværktøj, diagramværktøj eller AI-designværktøj. Formatet betyder mindre end stiens klarhed.

1. Definer brugermålet

Start med den handling, brugeren ønsker at fuldføre.

• Opret en konto
• Køb et produkt
• Book en demo
• Udgiv en hjemmeside
• Inviter en holdkammerat
• Eksporter et design til kode

Et brugerflow bør bygges op omkring et specifikt mål, ikke et vagt produktområde.

2. Vælg indgangspunktet

Beslut hvor brugeren starter. Eksempler omfatter en startside, prisside, søgeresultat, e-mailkampagne, app-dashboard, notifikation eller delt link.

Forskellige indgangspunkter kan skabe forskellige flows. En tilbagevendende bruger og en førstegangsbesøgende har muligvis ikke brug for den samme sti.

3. Kortlæg den glade vej

Den glade vej er den enkleste vellykkede rute fra start til slut.

1. Brugeren åbner prissiden
2. Bruger vælger plan
3. Bruger opretter konto
4. Bruger indtaster betalingsoplysninger
5. Bruger bekræfter køb
6. Brugeren lander på successiden

Dette giver dig basisoplevelsen.

4. Tilføj afgørelser og kantsager

Rigtige brugere følger ikke altid den perfekte vej. Tilføj beslutningspunkter som:

• Har brugeren allerede en konto?
• Er formularen gyldig?
• Er betalingen lykkedes?
• Valgte brugeren månedlig eller årlig fakturering?
• Har brugeren tilladelse til at fortsætte?
• Hvad sker der, hvis brugeren annullerer?

Disse grene er det, der gør en simpel vej til et ægte UX-designbrugerflow.

5. Forenkle flowet

Når flowet er kortlagt, skal du kigge efter friktion.

• Kan vi fjerne et trin?
• Kan vi kombinere skærme?
• Spørger vi om oplysninger for tidligt?
• Er den næste handling indlysende?
• Er der en blindgyde?
• Er fejltilstande klare?
• Ved brugeren altid, hvad der skete?

De bedste brugerflows føles indlysende, fordi kompleksiteten allerede er løst bag kulisserne.

Brugerstrømme i en nøddeskal

Brugerstrømme er strukturelle kort til produktdesign. De viser, hvordan brugere bevæger sig gennem en app, hjemmeside eller opgave fra indgangspunkt til endelig interaktion.

Et stærkt brugerflow:

• Starter med et klart brugermål
• Viser brugerens indgangspunkt
• Kortlægger trinene, skærmbillederne og beslutningerne på stien
• Indeholder vigtige kantsager
• Hjælper teams med at identificere friktion før detaljeret UI-design
• Gør overdragelse lettere for designere, udviklere, PM’er og interessenter

For UX-teams er brugerflows et af de mest praktiske værktøjer til at omdanne brugerforskning til grænsefladestruktur. De hjælper dig med at designe med hensigt i stedet for at gætte skærm for skærm.

FAQ: Brugerstrømme

Hvad er brugerflows?

Brugerflows er diagrammer, der viser den vej, en bruger går gennem en app, hjemmeside eller produktopgave. De begynder normalt ved et indgangspunkt, såsom en hjemmeside eller login-skærm, og slutter, når brugeren fuldfører et mål, såsom tilmelding, køb eller indsendelse af en formular.

Hvad er et brugerflow i UX-design?

I UX-design kortlægger et brugerflow de trin, skærmbilleder, beslutninger og handlinger, som en bruger foretager for at fuldføre et mål. UX-teams bruger brugerflows til at planlægge produktstruktur, reducere friktion og designe klarere grænseflader, før de opretter high-fidelity-skærme.

Hvad er forskellen mellem et brugerflow og en brugerrejse?

En brugerrejse viser den bredere oplevelse, herunder brugermotivationer, følelser, smertepunkter og berøringspunkter. Et brugerflow fokuserer på den specifikke vej, en bruger går inde i produktet for at fuldføre en opgave.

Hvad er et brugergrænsefladeflow?

Et brugergrænsefladeflow viser, hvordan skærme, UI-tilstande, knapper, formularer og interaktioner forbindes inde i et produkt. Det er tæt relateret til et brugerflow, men det fokuserer mere specifikt på stien på grænsefladeniveau.

Hvornår skal du oprette et brugerflow?

Opret et brugerflow efter indledende brugerundersøgelser og før detaljeret UI-design. Du kan også oprette brugerflows senere for at revidere et eksisterende produkt, diagnosticere frafald eller forbedre konvertering.

Hvad er eksempler på brugerstrømme?

Almindelige eksempler på brugerflow inkluderer tilmeldingsflows, checkout-flows, onboarding-flows, login-flows, password-nulstillingsflows, bookingflows, opgraderingsflows og invite-en-teammate-flows.

Hvorfor er brugerstrømme vigtige?

Brugerflow hjælper teams med at forstå, hvordan brugere bevæger sig gennem et produkt, før de investerer i detaljeret design eller udvikling. De afslører friktion, manglende trin, forvirrende beslutninger og unødvendig kompleksitet tidligt i processen.

Hvordan får man en bruger til at flyde?

Start med et brugermål, vælg indgangspunktet, kortlæg den lykkelige vej, tilføj afgørelser og kantsager, og forenkl derefter stien. Brug cirkler eller ovaler til start- og slutpunkter, rektangler til skærmbilleder eller handlinger, diamanter til beslutninger og pile til at vise retning.

Prøv Anima Playground for brugerflows og UX design

Anima Playground lader dig gå fra produktidé til UX flow, design og arbejdskode i browseren. Beskriv den oplevelse, du vil bygge, forfin den med kunstig intelligens, og forvandl resultatet til et ægte interaktivt produkt.

Begynd at designe med Anima Playground.