Har du någonsin fyllt i ett formulär på mobilen och sett fälten fortsätta komma? Du svarar på en fråga, trycker på nästa, och det kommer en till. Och en till. Efter den femte eller sjätte skärmen utan något slut i sikte ger du upp. Du blir inte klar med formuläret. Du hittar en konkurrent som gör det enklare. Det här händer hela tiden med dåligt utformade formulär i flera steg. Men när ett formulär i flera steg är byggt rätt händer något annat. Användarna flyger igenom det. De blir klara snabbare än med ett enda långt formulär. Konverteringen hoppar med 86 procent jämfört med att fråga om allt på en sida.
Det här kapitlet går igenom hur formulär i flera steg fungerar, när du ska använda dem (och när inte), hur du ordnar stegen så att fler blir klara och vad som skiljer ett välgjort guidat formulär från ett som tappar användare halvvägs. Om du har ett formulär med fler än sju fält eller en komplex process med olika databehov i olika skeden är det här din guide för att göra rätt.
Vad är ett formulär i flera steg?
Ett formulär i flera steg är ett formulär som är uppdelat på flera skärmar eller sidor. I stället för att visa alla fält på en gång visar det en del av fälten per steg. En besökare fyller i den första skärmen, klickar på nästa, ser den andra skärmen och fortsätter tills hen är klar. Det kallas också stegvis formulär, guidat formulär eller progressivt formulär, även om termerna betyder något olika beroende på hur formuläret är byggt.
Termen guidat formulär syftar på ett formulär där stegen kommer i följd och är obligatoriska. Steg 1 leder till steg 2, steg 2 leder till steg 3, och det går inte att hoppa över något. Det fungerar bra för ansökningsprocesser, introduktionsflöden eller kvalificering av leads där varje steg bygger på det förra. Ett progressivt formulär är något annat. Det visar fält dynamiskt utifrån tidigare svar på samma skärm eller laddar fält villkorligt utan att gå till en ny sida. Vissa progressiva formulär förgrenar sig i olika vägar utifrån besökarens svar, vilket betyder att två besökare kan se helt olika steg beroende på sina svar.
I det här kapitlet behandlar vi formulär i flera steg och guidade formulär som samma sak för tydlighetens skull. Huvudprincipen är att formuläret delas upp på flera skärmar med en del av fälten på varje. Besökaren går igenom stegen i följd, antingen bara framåt eller med möjlighet att gå tillbaka och ändra sina svar.
När ska du använda ett formulär i flera steg och när ett på en sida?
Den vanliga visdomen säger att formulär i flera steg alltid konverterar bättre. Det stämmer inte riktigt. Formulär i flera steg konverterar bättre när du har mycket data att samla in eller en komplex kundresa. Men om du har ett enkelt formulär som ryms på en skärm utan scrollning dödar en uppdelning i steg ofta konverteringen i stället för att förbättra den.
Använd ett formulär i flera steg om formuläret har fler än sju fält. Om du har sju fält eller färre och de ryms på en skärm utan scrollning, behåll det på en sida. Merarbetet med flera steg (sidladdningar, komplexitet, oro för förloppet) är inte värt den marginella vinsten. Men om du har tio, femton eller tjugo fält är ett formulär i flera steg nästan alltid bättre. Ett fallexempel från en finansiell leadgenereringstjänst visar det tydligt. Ett formulär som delades från en enda sida med många frågor till fyra fokuserade steg ökade konverteringen från elva procent till fyrtiosex procent. Det är kraften i formulär i flera steg, men det fungerar bara när formuläret är långt nog för att motivera stegen.
Använd ett formulär i flera steg om ditt formulär samlar in olika typer av information i olika skeden. Ett ansökningsformulär kan fråga efter grunduppgifter (namn, e-post), sedan situationen (vad ansöker du om, varför) och sedan känsliga uppgifter (referenser, lönehistorik). Att dela upp dem i steg grupperar relaterade frågor, vilket känns mer naturligt än att blanda dem på en sida.
Undvik formulär i flera steg om din målgrupp redan är på väg att agera. En kund som redan har bestämt sig för att köpa din produkt och vill gå vidare snabbt kommer att störa sig på ett kassaformulär i tre steg. Hen vill slutföra köpet på snabbaste sätt. Därför använder dyra B2B-transaktioner ofta formulär på en sida. Kunden vet vad hen vill ha och behöver inte att formuläret leder hen genom steg.
Undvik formulär i flera steg för enkla transaktioner. En nyhetsbrevsanmälan behöver inga steg. En återställning av lösenord behöver inga steg. Ett "kontakta oss"-formulär med fyra fält behöver inga steg. Om formuläret är enkelt och alla fält ryms på en skärm är ett steg bättre. Lägg inte till steg bara för att du kan.
Hur många steg ska ett formulär i flera steg ha?
Svaret är inte ett magiskt tal. Rätt antal steg beror på en princip. Varje steg ska motsvara en tydlig tankeuppgift, inte en slumpmässig gruppering av fält. Dela inte upp ett formulär i steg bara för att minska antalet synliga fält. Dela upp det när besökaren behöver byta tankesammanhang.
För de flesta formulär är mellan tre och fem steg optimalt. Två steg känns som att du lika gärna kunde ha använt en sida. Sju steg eller fler ger ifyllnadströtthet. Användarna börjar undra hur många skärmar de har kvar. Ju längre vägen är, desto fler lämnar. Håll dig till tre till fem om inte ditt formulär har en mycket särskild struktur som kräver fler.
Vad räknas som ett steg? Ett steg är en tankeuppgift. Ett steg där du samlar in vem någon är (grunduppgifter, kontaktuppgifter, roll) är en uppgift. Ett steg där du lär dig om personens problem är en uppgift. Ett steg där personen beskriver sin nuvarande lösning är en uppgift. Ett steg där personen anger sin budget och tidplan är en uppgift. Vart och ett av dem är ett eget tankesammanhang, och därför känns det naturligt i stället för överväldigande att dela upp dem i separata steg.
Därför spelar villkorslogik roll i formulär i flera steg
Alla besökare behöver inte se alla steg. En besökare som ansöker om ett lån behöver inte samma frågor som en besökare som ber om en demo. En besökare som köper en basplan behöver inte samma steg som den som köper en företagsplan. Där blir villkorslogik avgörande. Villkorslogik låter dig visa olika steg utifrån vad en besökare svarar. Den minskar det totala antalet steg besökaren ser och får formuläret att kännas personligt i stället för generiskt.
Utan villkorslogik tvingar du alla genom samma väg. En besökare som svarar nej på en fråga behöver inte nästa fråga, men måste ändå se och hoppa över de följande fem fälten. Den friktionen byggs på. Med villkorslogik hoppar du direkt till rätt steg. Formuläret anpassar sig efter behoven. Därför är villkorslogik inte bara en trevlig funktion. Den är nödvändig för varje formulär i flera steg med förgrenade vägar eller olika användningsfall.
Huvudprincipen med villkorslogik är tydlighet. Om du hoppar en besökare från steg två direkt till steg fem måste hen förstå varför och vad som hände. Om logiken är trasig eller förvirrande lämnar besökarna eftersom de känner sig vilsna. De vet inte om de gjorde fel när de svarade på en fråga eller om formuläret är trasigt. Testa alltid villkorliga grenar noga före lansering. Se till att varje möjlig svarsväg leder till rätt steg.
Hur ska du bygga upp och ordna stegen i ett formulär i flera steg?
Ordningen du presenterar information i spelar mycket större roll än antalet steg. En psykologisk princip är i görningen. När någon har lagt ner möda på ditt formulär genom att fylla i ett steg är hen mer benägen att fortsätta till nästa steg. Ju längre hen stannar hos dig, desto troligare är det att hen blir klar. Så det första steget är inte bara ett steg. Det är åtagandets punkt där användarna avgör om de fortsätter eller överger hela formuläret.
Första steget: börja med enkla, icke-känsliga frågor
Det första steget i ett formulär i flera steg ska ha lägsta möjliga tröskel. Fråga efter namn, e-post eller en enkel fråga om preferens. Börja inte med att fråga efter telefonnummer, budget, referenser eller något som kräver förtroende eller djup eftertanke. En besökare ser det första steget och fattar ett snabbt beslut. Om det känns enkelt och snabbt blir hen klar. Om det känns påträngande eller komplext lämnar hen.
Psykologin här kallas effekten av tilldelad framgång (endowed progress effect). När någon har börjat på ditt formulär har hen redan investerat. Hen har valt att engagera sig i dig. Nästa steg känns mindre avskräckande eftersom hen redan har investerat i steg ett. Därför måste ditt första steg vara det enklaste. Låt människor känna att de gör framsteg direkt. Efter att ha slutfört steg ett går 90 procent av dem som började vidare till steg två. Efter att ha slutfört steg två fortsätter 85 procent till steg tre. Men om steg ett är svårt och komplext kommer du aldrig till steg två.
Mellansteg: gruppera relaterad information, skjut upp känsliga frågor
I mellanstegen samlar du in huvuddelen av dina data. Här frågar du om kundens problem, situation, nuvarande lösning och begränsningar. Gruppera relaterade fält. Ett steg kan täcka situationen och smärtpunkterna. Ett annat täcker tidplan och budget. Ett tredje täcker teamet och beslutsprocessen.
Här är huvudprincipen. Fråga inte efter känslig information i de tidiga stegen, även om den är relevant. Skjut upp budgetfrågor, telefonnummer och allt som kräver personliga uppgifter till steg tre eller fyra. Varför? För att besökaren vid steg tre redan har investerat. Hen har fyllt i två steg med information. Den nedlagda insatsen skapar ett psykologiskt åtagande. Hen är mer villig att svara på känsliga frågor eftersom det känns som att slösa bort det arbete hen redan har gjort om hen ger upp nu. Principen kallas "skin in the game"-effekten. Ju mer investerad en besökare är, desto mer villig är hen att lämna information som hen normalt skulle tveka att dela.
Sista steget: bekräftelse, betalning och känsliga uppgifter
Det sista steget ska innehålla allt som slutför transaktionen eller låser åtagandet. Om du samlar in betalning är det här betalfältet hör hemma. Om du behöver en underskrift eller ett samtycke är det här det sista steget. Om du har känsliga frågor om budget eller personuppgifter som du undvek i tidigare steg hör de hemma här. Vid det sista steget har besökaren fyllt i det mesta av formuläret. Hen är engagerad. Hen är mycket mer benägen att svara på frågor och slutföra hela processen.
Det sista steget kan också innehålla en bekräftelseskärm som visar besökaren vad hen har angett. Låt hen granska sina svar före det slutliga inskicket. Det förbättrar noggrannheten och bygger förtroende för att uppgifterna är rätta. Det fungerar också som en signal om förloppet. Hen ser en bekräftelseskärm och vet att formuläret nästan är klart. Den psykologiska avslutningen ökar ifyllnadsgraden.
Förloppsindikatorer och navigering
Utan förloppsindikator vet besökarna inte hur lång tid formuläret tar. De börjar, fyller i ett steg, klickar på nästa och undrar om det är tio steg till. Osäkerheten leder till avhopp. Vissa besökare ger bara upp eftersom de inte vill binda sig för ett okänt antal steg. En förloppsindikator löser det genom att visa var de är och hur många steg som återstår.
Det finns tre vanliga stilar. Numrerade steg visar steg två av fyra som text eller som stegindikatorer överst. Procentfält visar en visuell fyllnad som växer allteftersom besökaren går framåt. Punktindikatorer visar vilket steg som är aktivt med en linje eller visuell koppling mellan dem. Alla fungerar, men forskning visar att numrerade steg och procentfält är något effektivare än punkter eftersom de visar helheten tydligt. När någon ser steg ett av fyra vet hen att det är tre till. När hen ser ett fält som är två procent fyllt får hen inte samma tydlighet.
Själva förloppsindikatorn har en psykologisk effekt. Att visa förloppet genom ett formulär ökar faktiskt andelen som blir klara. Ett formulär som visar att du är fyrtio procent klar får fler inskick än ett formulär utan indikator, även om den totala insatsen är densamma. Det är effekten av tilldelad framgång igen. Besökarna känner att de gör framsteg, vilket motiverar dem att fortsätta.
Ta alltid med en tillbakaknapp som låter besökarna ändra sina tidigare svar. En besökare kan inse att hen svarade fel på en fråga eller vilja ändra ett tidigare svar. Om du tvingar hen framåt utan möjlighet att gå tillbaka känner hen sig fast. Användare som känner sig fast lämnar. Användare som kan navigera fritt blir oftare klara eftersom de känner sig i kontroll. Tillbakaknappen förbättrar också datakvaliteten. Om en besökare kan gå tillbaka och rätta misstag får du mer korrekt information.
Fältstrategi i varje steg
Nu när vi har gått igenom stegens övergripande struktur kan vi zooma in på fälten i varje steg. Hur många fält ska ligga på varje skärm? Vilken layout fungerar bäst? Hur hanterar du validering och felmeddelanden?
Begränsa varje steg till tre till fem fält som mest. Det är ingen hård regel, men en praktisk riktlinje. Ett steg med ett eller två fält känns som att man knappt kommer framåt. Ett steg med åtta fält känns överväldigande. Sikta på tre till fyra fält per steg i genomsnitt. Det ger dig tillräckligt med utrymme för att samla in meningsfull information utan att något enskilt steg känns som en börda.
Använd en enda kolumn för varje fält. Använd aldrig layouter med flera kolumner i ett steg. Det låter självklart, men många team försöker få plats med fler fält på skärmen genom att använda två eller tre kolumner. Vad som faktiskt händer är att användare hoppar över fält eftersom det visuella flödet bryts. En användare som läser nedåt på en sida följer det naturliga mönstret uppifrån och ned. När fält är ordnade i kolumner missar användarna fält. Ett oberoende användbarhetsinstitut har testat det grundligt. Formulär med en kolumn har betydligt högre ifyllnadsgrad än formulär med flera kolumner med exakt samma fält.
Placera etiketter ovanför fälten, aldrig vid sidan. När etiketter sitter till vänster om ett fält tar de horisontellt utrymme och trycker ned fälten på sidan. När etiketter sitter ovanför fälten finns de precis där när användaren fokuserar på fältet. Ännu viktigare är att etiketter som placeras inuti fältet som platshållartext försvinner när användaren klickar i fältet. Etiketter ovanför fälten förblir synliga så att användaren aldrig glömmer vad hen fyller i.
Validera fält när användaren lämnar fältet, aldrig medan hen skriver. När du validerar under tiden någon skriver blir användarna frustrerade. De ser felmeddelanden innan de har skrivit klart. Det känns som att formuläret dömer dem eller kritiserar det de skriver. Validera efter att de går vidare till nästa fält. Det ger dem tid att bli klara och dig en chans att kontrollera deras svar utan att avbryta flödet. En besökare som skriver ett telefonnummer behöver inte se ett fel medan hen fortfarande skriver. Låt hen bli klar och kontrollera sedan om det är giltigt.
Minimera öppna textfält. Öppna textfält kräver att folk skriver stycken. De sänker ifyllnadsgraden rejält eftersom det tar tid och kraft att skriva. Begränsa ditt formulär till högst två öppna textfält totalt. För allt annat, använd rullgardinslistor, alternativknappar, kryssrutor eller betygsskalor. En rullgardinslista som frågar vilken bransch du arbetar i går snabbare än att be någon skriva sin bransch. En alternativknapp som frågar efter företagets storlek (litet, medelstort, stort, koncern) går snabbare än att be någon skriva sin företagsstorlek. Använd strukturerade fält när det går.
Vanliga misstag som dödar ifyllnadsgraden i formulär i flera steg
Du kan följa alla principer i det här kapitlet perfekt och ändå förstöra din ifyllnadsgrad om du gör något av de här misstagen.
Fråga inte efter känslig information för tidigt. Om ditt första steg frågar efter telefonnummer eller årsomsättning förlorar du besökare innan de är investerade nog för att lita på dig med känsliga uppgifter. Spara dem till steg tre eller senare.
Ta aldrig bort tillbakaknappen. Vissa formulär tillåter bara navigering framåt. Gör inte det. Användarna fastnar, känner sig instängda och lämnar. Ett formulär med navigering bakåt presterar alltid bättre än ett utan.
Validera inte medan användarna skriver. Det skapar ständig återkoppling och frustration. Vänta tills de går vidare till nästa fält.
Ha inte förloppsindikatorer som försvinner eller ändras oväntat. Om ditt förloppsfält visar att du är på steg två av fem och sedan plötsligt ändras till steg två av sex tappar besökarna förtroendet. De känner att formuläret döljer information. Håll det totala antalet steg konstant genom hela formuläret.
Använd inte layouter med flera kolumner. Du tappar ifyllda fält eftersom användare hoppar över fält som de inte ser i det naturliga läsflödet.
Underlåt inte att spara förloppet mellan stegen. Om en besökare fyller i tre steg och sedan går därifrån ska arbetet vara sparat. Om hen kommer tillbaka till formuläret ska de tidigare angivna uppgifterna finnas kvar. När data försvinner måste besökarna skriva in allt igen eller ge upp. Det dödar konverteringen. Vissa formulärbyggare använder lokal lagring för att spara förloppet så att en besökare som stänger webbläsaren och kommer tillbaka senare har sina data kvar. Det är en kraftfull drivkraft för att fler blir klara.
Använd inte trasig villkorslogik som skickar folk till fel steg. Om en besökare svarar på fråga tre med alternativ A och din logik ska hoppa hen till steg fem men i stället visar steg sex lämnar hen. Testa alltid att din villkorliga förgrening fungerar rätt före lansering.
Så hjälper WEMASY dig att bygga formulär i flera steg
Med WEMASY:s formulärbyggare kan du skapa formulär i flera steg med villkorslogik, automatisk förloppsföljning och inbyggd analys. Bygg ett leadformulär i fem steg och se vilket steg som har högst avhopp. Skicka olika besökare till olika steg utifrån deras svar. Spara besökarens förlopp så att uppgifterna finns kvar om hen stänger webbläsaren och kommer tillbaka senare. Alla formulärinskick landar i din översikt där du kan se svar, exportera data och koppla inskick till ditt CRM. Du kan också följa mått som ifyllnadsgrad per steg, tid per sida och var folk hoppar av. För mer sammanhang om hur formulär driver affärsresultat och passar in i din samlade webbplatsstrategi, se vår guide till webbplatsformulär och deras betydelse.