Så här skapar du en karta över användarflödet för din webbplats och app

Att förstå hur användare interagerar med din webbplats eller app är avgörande. En karta över användarflödet är ett kraftfullt visuellt verktyg som beskriver den väg som användarna tar genom ditt digitala gränssnitt, vilket hjälper företag att optimera upplevelser och identifiera potentiella smärtpunkter. En bra användarresa kan hjälpa dig att förstå användarnas resor, identifiera smärtpunkter och planera för oförutsedda händelser. I den här guiden förklaras användarflöden, hur man skapar användarflödeskartor och bästa praxis för att utforma dina diagram

Viktiga saker att ta med sig:

• Användarresan beskriver användarens hela upplevelse med ditt företag, medan användarflödet beskriver de steg de följer med hjälp av ditt användargränssnitt.
• Vissa vanliga former som ovaler, rektanglar, diamanter och parallellogram har allmänt förstådda användningsområden i flödesscheman.
• Följ bästa praxis och använd experterna på Optimizely för att höja nivån på din digitala upplevelse.

Användarflöde vs. användarresa

Även om användarflöde och användarresa har liknande namn och överlappar varandra på många sätt, bör du vara medveten om viktiga skillnader mellan dessa begrepp.

Användarresan omfattar alla aspekter av användarens upplevelse av ditt företag. Användarresan börjar när en användare för första gången blir medveten om ditt företag (eller blir medveten om ett behov som du kan lösa) och slutar med deras sista interaktion med ditt företag. Det innebär att även om du inte kan veta exakt när en användarresa börjar eller slutar, kan du använda programvara för hantering av kundresan för att identifiera var en användare befinner sig på sin resa och hur du kan flytta dem till nästa steg.

Användarflödet överlappar användarresan, men beskriver specifikt den väg som användarna följer på din webbplats eller i din applikation. Ett användarflöde kan till exempel börja när en användare besöker din webbplats för första gången och sluta med ett köp. Dessa aktiviteter är en del av den större användarresan, men användarflödet är mer intresserat av den upplevelse som användarna har på din webbplats eller i din app.

Användarresan intresserar sig för användarens känslor, konkreta och immateriella interaktioner, pågående kommunikation, relationsbyggande etc. - den "mänskliga" sidan av processen, medan användarflödet intresserar sig för den "tekniska" sidan av processen - användarens klick, sidbesök och prenumerationer. Användarflödet och användarresan beskriver olika delar av samma relation mellan ditt företag och dina användare.

Bildkälla

Diagram över användarflöde

Dina användare kommer aldrig att se din karta över användarflödet, men du och ditt team kommer att hänvisa till den under hela webbplatsens eller appens livslängd, så även om det inte behöver vara det vackraste dokumentet bör det ändå vara tydligt och användarvänligt.

Även om reglerna för att skapa diagram över användarflöden inte är huggna i sten bör du känna till några bästa praxis och i allmänhet förstå syntaxen för skapande av flödesscheman.

• Ovaler representerar start- och slutpunkten i ditt flödesschema. Beroende på din process kan ditt användarflöde ha mer än en startpunkt och mer än en slutpunkt.
• Kvadrater eller rektanglar representerar enskilda sidor eller steg. I allmänhet kan flödesscheman, kvadrater och rektanglar vara vilket steg som helst i en process, men i webb- och app-design representerar kvadrater och rektanglar enskilda sidor i användargränssnittet.
• Diamanter representerar beslut som användarna måste fatta. När en användare till exempel först försöker logga in på din plattform kan din webbplats uppmana dem att ansluta ett Google- eller Facebook-konto, eller så kan de logga in med en e-post eller fortsätta som gäst. Beroende på vad användaren väljer kan resan genom webbplatsen eller appen skilja sig åt eftersom du levererar en annan upplevelse baserat på användarens val.
• Parallellogram representerar input som krävs av användaren. Du kan till exempel kräva att de anger ett serienummer för att aktivera sin produkt eller en leveransadress för att få en tjänst.
• Pilarna anger flödets riktning. Ditt användarflöde kan innehålla slingor, korsningar och divergerande och konvergerande vägar, så det är viktigt att ange elementens sekvens för att din användarflödeskarta ska vara läsbar.

I allmänhet är dessa fyra former, tillsammans med pilar, de grundläggande byggstenarna i din karta över användarflödet, men du kan alltid använda ytterligare former, färger eller andra designelement för att kommunicera information som du anser vara relevant. Kom ihåg att syftet med en användarflödeskarta inte bara är att följa reglerna eller kryssa i en ruta, utan att kommunicera information om användarflödet. I exemplet nedan visas ytterligare former som andra företag har använt när de har skapat flödesscheman.

Bildkälla

Principer för design av användarflöden

Som med alla former av kommunikation förlorar kartor över användarflöden en del av sitt värde när de utelämnar relevant information och innehåller för mycket irrelevant information. Att utforma ett framgångsrikt användarflöde innebär att balansera flera överväganden för att maximera användbarheten av ditt diagram.

1. Fastställ en detaljnivå

Om dina kartor över användarflöden är för detaljerade blir de invecklade och svåra att läsa. Om de inte är tillräckligt detaljerade är de inte användbara. Att fastställa rätt detaljnivå är ett viktigt första steg i utformningen av en karta över användarflödet.

När det gäller att utforma diagram är den gyllene principen att ta hänsyn till användarnas behov. Vilken typ av frågor kommer de att försöka besvara med hjälp av ditt diagram? Vilken nivå av upplevelse kommer de att ha? Vad kommer de att använda diagrammet till? Genom att svara på dessa frågor får du hjälp att definiera rätt detaljnivå för ditt användarflöde.

2. Överväg alternativ

En av anledningarna till att användarresor är användbara är att de gör det möjligt för designers att visuellt analysera den resa som användare gör när de besöker din webbplats eller app. Gör ditt bästa för att överväga alla alternativ när du utformar din karta över användarflödet.

Vad gör du till exempel om en användare lägger till varor i sin varukorg men lämnar den utan att checka ut? Vad gör du om en användare anger en faktureringsadress men inte en leveransadress? Vad gör du om en användare begär en gratis testversion men sedan köper fullversionen? Din karta över användarflödet hjälper dig att identifiera dessa vägskäl och planera för oförutsedda händelser

3. Använd rätt plattform för digitala upplevelser

Dina användares digitala upplevelse är viktig. Optimizely är en kraftfull plattform för digitala upplevelser med expertverktyg som hjälper till med automatisering, A/B-testning, innehållshantering och mycket mer.

En användarflödeskarta beskriver bara dina kunders resa när de interagerar med ditt digitala gränssnitt. Även om en användarkarta kan hjälpa till att identifiera smärtpunkter och visuellt inspirera till lösningar, är nyckeln till att förbättra kundens upplevelse att förbättra innehållet på din webbplats eller app.

Om du är redo att ta dina digitala upplevelser till nästa nivå, kom igång idag för att boka ett möte med en Optimizely-representantidag.