Användarflöde

Användarflöde är den väg en prototypisk användare tar på en webbplats eller app för att slutföra en uppgift.

Vad är ett användarflöde?

Ett användarflöde är ett koncept inom användarupplevelse (UX) som undersöker och dokumenterar de åtgärder en typisk användare behöver utföra för att slutföra en definierad uppgift. 

När ditt användarflödesschema är klart beskriver det hur användaren tar sig från en ingångspunkt (eller flera ingångspunkter) genom en uppsättning distinkta kontaktpunkter mot ett lyckat resultat och en slutgiltig åtgärd, som att slutföra en registrering. 

Det finns inget enda sätt att bygga ett användarflöde, men många produktchefer och UX-designers skapar användarflödesdiagram genom att utgå från flödesschemamallar i verktyg som Figma, Miro och LucidChart. 

Här är ett exempel på ett flödesschema från Balsamic: 

diagram

Ett användarflödesschema ägs vanligtvis av produktchefer, UX-team och designers och/eller produktutvecklingsteam för att bättre förstå användbarheten hos en webbplats, mobilapp eller mjukvaruprodukt. 

Samtidigt är användarflöden till hjälp för alla intressenter i att förstå kundernas upplevelse av produkten. Andra team som har intresse av, men inte ägarskap över, användarflöden inkluderar: 

  • Kundteam (sälj, kundframgång/service, kontoansvariga)
  • Produktmarknadsföringsteam
  • Bredare team inom produktledning, design och produktutveckling vars arbete angränsar 

Hur skiljer sig användarflöden från uppgiftsflöden eller en kundresa? 

Alla dessa uppgifter är UX-flöden och är en del av att utveckla ett kundfokuserat tankesätt, men var och en av dem tjänar ett distinkt syfte för produktlednings- och produktdesignteamen. 

Här är en snabb översikt av skillnaderna mellan de tre uppgifterna

Uppgiftsflöde  Användarflöde  Kundresa 
Enkel väg  Komplexa vägar  Inkorporerar data från uppgifts- och användarflöden i en kundresekarta 
Inga ingångs- eller utgångspunkter  Innehåller ingångs- och utgångspunkter  Bygger in problem och lösning i ett vidare sammanhang (både i produkten och med hänsyn till andra verktyg) 
Sekventiellt utan förgreningar eller beslutspunkter  Visar förgreningar, beslut och alternativ för att ta hänsyn till användarens val  Uttrycker den emotionella sidan av att använda produkten 
Passar in i ett större användarflöde    Identifierar fokusområden baserat på möjligheter att överraska och glädja kunderna 

När bör du skapa ett användarflöde? 

Är varje ny funktion eller UX-förändring värd att bygga ett användarflöde för? 

Svaret är: det beror på. 

Vi vet att många apputvecklare, i synnerhet, inte prioriterar användarflöden, särskilt när man har prototypverktyg av hög kvalitet. Och vi förstår tveksamheten att lägga till fler steg i processen, särskilt när resurser och tidsramar kräver att du effektiviserar bygget. 

Men när du har resurserna vill du skapa ett användarflödesschema för varje ny funktion eller väsentlig UX-förändring. 

Varför? Eftersom ett användarflöde kommer att: 

  1. Ge dina användare den mest intuitiva upplevelsen från dag 1 
  2. Hålla dig användarcentrerad och organiserad 
  3. Hjälpa dig att kontinuerligt skapa sömlösa upplevelser genom att säkerställa att du dokumenterar, förstår och itererar utifrån baslinjeinformation 

När du zoomar ut till resten av dina intressenter kommer framtagandet av användarflöden att: 

  • Hjälpa kollegor att förstå användarna bättre 
  • Göra det möjligt för dig att arbeta närmare med andra team för att hitta optimeringspunkter 
  • Anpassa dina användarflöden efter data som produceras av andra team 

Vid vilken punkt i designprocessen bör du bygga dina användarflöden? 

Du vill passa in det efter den initiala användarundersökningen och upptäcktsfasen och innan du skapar wireframen. 

Genom att börja tidigt kan du använda det i kundundersökningar för att iterera utan att skapa en kyrkogård av wireframes, wireflows och mockuper med hög eller låg detaljnivå. 

Vanligtvis ser arbetsflödet ut så här: 

  1. Slutför användarundersökning och upptäckt och generera analys 
  2. Slutför uppgiftsflöden 
  3. Bygg användarflödesschema 
  4. Skapa mockuper, wireframes eller prototyper med låg detaljnivå 
  5. Bygg ett wireflow eller skärmflöde (valfritt) 
  6. Påbörja användbarhetstestning 
  7. Iterera på ovanstående 

Hur du börjar bygga ett användarflödesschema 

När du har slutfört din användarundersökning och analys har du det mesta av informationen du behöver för att påbörja ditt användarflöde. 

Men vilken information är mest relevant för den här övningen? Enligt vår upplevelse inkluderar frågorna du behöver lyfta ur din analys: 

  • Vilka är användarens mål för uppgiften? 
  • Vad är viktigt för användaren och vad ger dem förtroende att fortsätta? 
  • Vilken ytterligare information behöver användaren för att slutföra uppgiften? 
  • Vilka tveksamheter eller hinder har användaren för att slutföra uppgiften? 
  • Vad är ingångspunkten? 

Svaren på dessa frågor kommer att ligga till grund för hur du designar sidorna och avgöra vilket innehåll och vilka navigeringslänkar som ska inkluderas. 

Om till exempel användarens primära mål är att bläddra bland olika produkter, kommer din sida eller skärm att erbjuda en annan design och funktionalitet än om det primära målet är att köpa en produkt och gå vidare. 

diagram

Hur många steg bör ett användarflöde innehålla? 

Svaret beror i hög grad på uppgiften, typen av användare och din bransch. 

Ett kortare användarflöde indikerar inte nödvändigtvis en bättre upplevelse än ett längre användarflöde, särskilt om det missar potentiella användarinteraktioner eller förenklar användarnas mål för mycket. 

Till exempel kommer ett användarflöde för en landningssida att vara mindre komplicerat än onboarding-flödet för en app som erbjuder både freemium- och betalversioner. 

Exempel på användarflöde 

Användarflöden kan ta många olika former beroende på vilken typ av webbplats eller app du bygger. Till exempel kan ett typiskt användarflöde för en e-handelssajt se ut så här: 

  • Användaren börjar på startsidan 
  • Från startsidan klickar användaren vidare till en kategorisida 
  • Från kategorisidan klickar användaren på en produkt 
  • Från produktsidan lägger användaren till varan i varukorgen 
  • Från varukorgen går användaren till checkout 
  • Från checkout-skärmen slutför användaren köpet 

I verkligheten kan användare ta många olika vägar till köp. Till exempel, i scenariot ovan, kunde användaren gå tillbaka till kategorisidan för att se fler produkter istället för att gå direkt till varukorgen. Eller så kunde de använda sökning för att navigera på sajten istället för att klicka sig genom sajthierarkin. Eller så kunde användaren komma in från en annan sida än startsidan. 

Eftersom det finns många olika vägar som användare kan ta, modelleras användarflöden ofta som flödesscheman med noder för var och en av de huvudsakliga navigeringsvägarna. Syftet med användarflödesanalys är att identifiera de viktigaste användarflödena genom din app eller webbplats och hitta områden där navigeringsflödet kan förbättras. 

Gratis mallar för användarflöden att prova 

Vill du komma igång med din användarflödeskarta snabbt eller hitta hjälp för att hålla dig på rätt spår? Det finns gott om gratis mallar för användarflöden som är tillgängliga och validerade av produktteammedlemmar på några av världens mest användarcentrerade företag. 

Här är några av våra favoriter: 

Du kan även använda dedikerade verktyg som: 

  • Overflow – ett diagramverktyg för användarflöden som animerar dina importerade användarflödesdesigner 
  • MockFlow – ett brainstorming-verktyg som hjälper dig att visualisera dina idéer innan du dokumenterar dem 
  • Timblee – ett UX-planeringsverktyg designat för 

Glöm inte att ta hänsyn till läckande data 

Genom att samla in data om varje steg i ditt användarflöde kan du utvärdera hur dina användare navigerar din produkt eller webbsida. Till sin natur kommer trattar att krympa vid varje steg där användare faller bort. Data indikerar var din tratt är "läckande" (med en stor andel personer som faller bort mellan stegen) och kan behöva åtgärdas. 

För att täta "läckorna", överväg var du kan korrigera smärt- eller friktionspunkter, var du kan erbjuda mer information och var du kan minska distraktioner och erbjuda mindre. 

Till exempel, på en e-handelssajt kan du genomföra en användarflödesanalys och upptäcka att många personer kommer till varukorgen men inte slutför sitt köp. Genom att identifiera att övergivna varukorgar är ett problem kan du börja generera hypoteser om varför användare faller bort vid den punkten. 

Det kan vara att dina fraktkostnader är för höga och att användarna får en prischock. Eller kanske finns det för många fält att fylla i och kunderna tappar intresset. Eller kanske är navigeringen inte tydlig nog vad gäller vilken åtgärd som ska vidtas härnäst. 

När du har genererat en hypotes om varför ditt användarflöde är suboptimalt kan du börja med A/B-testning av dina idéer för att avgöra vilka förändringar som kommer att ha en positiv inverkan på ditt användarflöde. 

Hur A/B-testning kan hjälpa till att förbättra ditt användarflöde 

A/B-testning är processen att jämföra två olika versioner av en sajt eller app mot varandra för att se vilken som presterar bättre med hjälp av verklig data. A/B-testning är ett utmärkt sätt att validera hypoteser om förändringar på din sajt eller app. 

Genom att gå igenom dina användarflöden, identifiera förbättringsmöjligheter och testa olika idéer kan du kontinuerligt förbättra dina konverteringsgrader