Stäng Huvudmeny

10 tips för fullt optimerat webbformulär

Mobil UX-Design

Alla har vi dem på vår sajt för att få in kunder eller leads och alla har vi blivit frustrerade av att fylla i dem. Webbformulären. Dom låååånga, energi- och tidskrävande formulären. Låt oss göra dom trevliga, friktionsfria – och konverterande!

Att optimera sina webbformulär handlar främst om att minska friktionen och göra formulären mer intuitiva. Det kan härledas från vår metod om när i en kundresa du vill öka motivation och när du vill minska friktion.

Webbformulär ligger senare i kundresan, närmare bestämt i fasen ”commitment” – då du faktiskt tar ett beslut till handling:

Motivation kundresan

I denna post ger vi 10 tips på hur du kan se över och optimera dina formulär för att primärt minska friktionen för dina besökare. Det genom att fokusera på att förenkla, inge förtroende, tydliggöra action och förtydliga värde.

Du får också lite mobil-bonus i slutet av posten (hang in there). Här kommer tipsen!

1 Ha så få fält som möjligt

Formulär ska aldrig få besökaren att fråga sig ”är informationen nödvändig?”. Dels blir vi osäkra när vi ombeds lämna ifrån oss personlig information som vi inte förstår vad den ska användas till, men framförallt blir vi uttråkade och skiter i att slutföra – i ett läge där vi är snubblande nära att göra det vi från början hade för intention att göra (konvertera).

Ett typiskt exempel på detta var då vi arbetade med försäkringsbolaget Skandia (försäkringsformulär är som du vet snarkiga). Vi ställde frågan ”Behöver vi verkligen all den här informationen, kollar ni på den ens?”. Efter några samtal med jurister visade det sig att nej, informationen behövdes inte… Förvisso utfördes en rad förändringar, men formuläroptimeringen var en bidragande faktor till 222 % ökad signup av försäkringar.

Optimerat formulär åt skandia

Det finns fler case som bekräftar att färre fält i ett formulär kan leda till högre konvertering.

Optimera formulär TibesBlivakker.no tog bort 3 av sina 17(!) formulärfält som de egentligen inte behövde, och ökade då antalet registreringar med 11 %.

Eller som det här flygbolaget som i ett test reducerade sina fält till det absolut nödvändigaste och då ökade antalet besökare som gick vidare till nästa steg med 45 % och antalet inskickade formulär med hela 35 %:

Tänk på att inte be om saker du verkligen inte behöver.

  • Be inte om adressen om du inte ska skicka dem något.
  • Behöver du be om personliga uppgifter, informera om varför du behöver dem och hur de kommer att användas, t.ex ”Vi behöver ditt telefonnummer för att kunna skicka ett sms när du kan hämta ut ditt paket”.
  • Se över de fält som inte är obligatoriska. Behöver icke-obligatoriska fält vara med?
  • Överväg om några av fälten på ett lämpligt sätt kan bli insamlade vid ett senare tillfälle.

Nästa steg är att inleda formuläret med det enklaste fältet att fylla i för att få igång och ”värma upp” användaren, för att sedan gradvis öka komplexiteten.

2 Bryt ner långa formulär i flera steg

I de fall där ni faktiskt behöver ha ett långt formulär (we’re looking at you, försäkringsbolag), var kreativa och få formulären att KÄNNAS korta. Ska vi luras? Nej, men:

  • Genom att gradvis engagera besökaren, kommer motivationen och den positiva känslan av ”nästan i mål” finnas med användaren. Och känslan av ”jag vill inte avsluta för då har jag påbörjat i onödan”.
  • Du kan dessutom använda en progress bar för att visualisera hur många steg som är avklarade, och hur många som är kvar.

Nedan SaaS-företag ville få fler att signa up sig på en demo för deras programvara. De flyttade fälten för företags-information till ett separat steg, och resultatet? 30 % fler signups.

formulär 1 kolumn
formulär 2 kolumner

Vi genomförde ett experiment med Dagens industri, där vi jobbade med just gradvis engagemang och en progress bar. Den förändringen gav 29 % ökad konvertering (och en minskad bounce rate med 67 %). (Läs mer om detta case här)

Formulär Gradual engagement

Spara det du påbörjat

Besökare som börjar att fylla i formuläret men inte slutför, vad kan du göra för dem?

Jo, du kan spara formuläret till senare.

Speciellt om du har formulär i flera steg kan spara de värden du mottagit, och ge personen valet att återkomma för att slutföra (i det fall hen lämnar). Speciellt användbart vid långa ansökningar, skapande av annonser etc. Det här är ett exempel vi gjort åt en av våra kunder:

3 Använd directional och visual cues för att leda användaren vidare

Så kallade ”Directional cues” är element som finns för att dra uppmärksamhet till ett annat element på sidan. De kan med fördel användas för att rikta fokus till första fältet, för att vägleda användaren till att börja fylla i formuläret. ”Visual cues kan användas för att leda användaren framåt/nedåt och vidare i formuläret.

formulär directional cues

Fotnot: Du vill ha EN tydlig action, om formuläret inte är din viktigaste action på sidan vill du inte konkurrera ut något annat genom att dra uppmärksamheten till formuläret.

Med hjälp av eyetracking kunde ConversionXL i detta test se hur olika utformade directional cues påverkade interaktionen med formulär.

form eyetracking

Den version med en handritade pil mot första fältet gjorde att flest fokuserade på formuläret, och mindre på texten. Det skulle också visa sig att de som under testet exponerats för pilarna, i efterhand mindes formuläret och visste hur de skulle gå tillväga för att kontakta bolaget under besöket.

Takeaway: Directional cues hjälper användaren att se – och ansikten fungerar sämre än pilar (i detta fall).

4 Undvik flera kolumner

Formulärfälten bör följa ett vertikalt flöde. Flera kolumner bryter besökarens vertikala momentum i att flytta sig neråt i formuläret.

slalom i formulärAnvänd en kolumn för att undvika risken att användarna tolkar fälten inkonsekventa och missförstår hur fälten relaterar till varandra. Nedan visas 5 olika sätt att tolka ordningsföljd av två kolumner:

Undvik två kolumner i formulär

Anta inte att besökaren förstår hur det hänger ihop bara för att du gör det. Kolla t.ex på detta användningstest (samt video nedan 1:10 in) där besökaren började fylla i uppgifter i första kolumnen som om hen hade inlogg, fortsätter sedan till kolumn två trots ett till synes tydligt ”OR” mellan dem. Först när användaren kommer ner till ”email” i kolumn två inser användaren att ”detta har jag ju redan fyllt i” och inser att första kolumnen var ifylld i onödan.

5 Placering av fälttitlar

Du kan placera din fälttitel (label) på flera olika sätt, och vi ska visa varför ovanför (top alignment) eller innuti (infield top aligned) är att rekommendera.

Vi kollar på ett användningstest utfört av Agnieszka (Aga) Bojko och Robert M. Schumacher. I studien testades 5 alternativa fälttitel-placeringar:

field_labels

Resultatet visade ingen större skillnad i tid för att slutföra formuläret, MEN:

  • Variation 3 (ovanför) visade sig vara mest effektiv då den hade minst antal fixeringar (dvs bra visuell scanning).
  • Variation 1 och 2 upplevdes som relativt lätta att fylla i (vi visar dock nedan varför effektiviteten är sämre här än när man har titeln ovanför), medan variation 4 med labels inuti fälten upplevdes som svårast. Vi återkommer till hur du vill placera titeln effektivt inuti.
  • Det bekräftades i testet att variation 4 och 5 visade på lägre upplevd nöjdhet, låg effektivitet för scanning och för variation 4 även svårigheter i bearbetning av formuläret.

Titel ovanför

Vi konstaterar att det är viktigt att titeln är nära fältet så att det dels inte uppstår några oklarheter kring vilken titel som hör till vilket fält samt att du vill minimera antal interaktioner. Dvs, anledningen till varför ovanför är bättre än bredvid:

fälttitel är effektivare ovanför

Titel inuti men ovanför skrift

När du placerar fälttiteln inuti fältet, kommer du att vid skrift skriva över rubriken. Lösningen kan upplevas smart i och med att du sparar utrymme och minskar längden av formuläret… Men det blir ett rent onöje när användaren får ett felmeddelande och ska skriva om, och inte ser vad som ska in i respektive fält…

Lösningen till det är i sådana fall något som kallas ”Float Label Pattern”. Dvs, när du börjar skriva, flyttas titeln upp.
Eller, att direkt placera titeln i fältet men ovanför där du skriver.

Fälttitelns placering påverkar

6 Använd smarta formulär

Genom att sätta kaka på redan identifierade användare kan du dels förifylla den information du redan känner till eller helt enkelt inte fråga efter den igen. Men i vissa lägen är det bättre att vara transparent med att du det facto vet vem användaren är (dvs visa förifyllda fält).

Du kan också använda dig av en känd data för att räkna ut en annan. Tex, om du anger postadress kan du räkna ut stad. Om du anger land kan du räkna ut landskod för telefonnumret.

Microsoft är halvvägs hemma:
Microsoft använder IP för att fylla formulär

Vi använder oss själva av denna funktion i formuläret för anmälningar till vår kurs Conversion Manager. När du skriver din e-postadress plockar vi upp (det antagna) namnet på personen.

Smart formulär Conversion Manager

Vårt kontaktformulär fungerar på samma sätt (testa nedan!):

7 Dropdowns – Använd dem på rätt sätt

Att använda dropdown-menyer för att välja sitt svar är något som ofta förekommer i formulär idag, men anta inte att alla vet vad de ska göra med en drop-down (på samma sätt som att man inte ska anta att alla kan scrolla…).

dropdown menyFormisimo visar här på ett case för ett formulär där 65 % av de som droppade av i formuläret, gjorde det från ett dropdown-fält. Man menar att ett problem är att dropdown-menyer gömmer information som måste bli uppackat och sorterat av användaren för att hitta rätt svar.

Dropdown kan dock vara bra, om de används på rätt sätt. En riktlinje att använda sig av är att det ofta är en bra funktion vid 7-15 svarsalternativ.

Används det vid för många eller för få svarsalternativ kan det däremot leda till dålig användarupplevelse.

För många svarsalternativ

dropdown formulär landHar man en dropdown med för många val blir det svårt för användaren att skanna och navigera i dem. Man måste scrolla vilket leder till dålig upplevelse och översikt. Ett klassiskt exempel på detta är när man ska välja sitt hemland för t.ex leverans.

Problem som kan uppstå:

  • Du får scrolla långt p.g.a bokstavsordning
  • När du kommer till ”Swe” inser du att just det låg längst upp som som vanligast alternativ

Du vet ditt land, så använd textfält med auto-complete istället.

formulär dropdown välja land
Baymard har gjort en demo på vad de anser är ett bra alternativ just för conutry-selector, testa denna här.

För få svarsalternativ

När dropdown menyer har färre än 7 alternativ lider de av en så kallad ”lack of up-front information”. Istället för två interaktioner (klicka för att se + klicka för att välja) kan en bättre lösning vara att visa alla alternativ direkt i form av:

  1. Radio buttons (checka för ditt val)
  2. Knappar (tryck på ditt val)

flerval knappar

Se flera bra tips på hur du undviker dropdowns här.

Dropdown-menyer HAR dock en plats inom webdesign, men tänk alltid över på vilken information du försöker få in via din dropdown, och överväg om det finns mer passande alternativ, tex textfält med auto-complete eller radio buttons.

Spotify har fattat grejen:
Spotify har optimerat sina formulär

Ett bra sätt att öka användbarheten är även att göra det möjligt att interagera med dropdown med tangentbordet, upp- och nedpilar för att navigera och enter för att välja rätt alternativ.

8 Positiv validering

check_mark_green

Att motivera användaren att fortsätta fylla i ert formulär med positiv förstärkning vid avklarat fält, är en effektiv metod. Se varför checkmarks & bockar konverterar här.

För att försäkra användaren att hen är på väg att göra något bra, kan du till formuläret med fördel addera:

    • Social proofs

USP:ar

Försäkran för att undvika att användaren känner sig osäker, t.ex. genom att förklara varför information de lämnar behövs samt att den är i säkra händer

Länk till policy kring personuppgifter kan i vissa fall också vara en bra idé

Ett enkelt experiment som Interflora gjorde var att de började validera användaren genom att göra fältet grönt när det fyllts i, vilket ledde till 13 % ökad konvertering.

9 Minska friktionen med rätt felmeddelanden

Shit happens. Saker blir fel ibland när användare fyller i ditt formulär. Felmeddelanden skapar friktion för användaren, oavsett vems fel det är. Så hur kan vi göra för att minska friktionen här?

Se till att:

  • Använd positiva och motiverande ord och undvik anklagande och negativt klingande ord som ”måste”, ”fel” och ”ogiltig” – Lägg skulden på sig själv och inte på användaren
  • Ha custom felmeddelanden för respektive fält, t.ex ”det saknas @ i din e-postadress”
  • Lägg meddelandet VID det fält som blivit fel
  • Se till att visa alla meddelanden samtidigt om flera fält blivit fel för att inte ”lura” användaren att man är good to go när man fixat det första man fått upp
  • Se till att användaren inte behöver börja om från början om det blivit fel
  • Identifiera vanliga felstavningar

Förslag vid felstavning i formulär

The best error message is the one that never shows up Thomas Fuchs

Psst… För den vågade! Använd humor i dina felmeddelanden för att lätta upp stämningen i det annars frustrerade ögonblicket. Var dock försiktig och välj dina tillfällen rätt! Till exempel som Gmail och Yahoo gör här!

form_correctionform_correction

10 Motivera med rätt CTA

Själva knappen med tillhörande CTA, som används för att skicka in formuläret är viktig, inte bara för att gå vidare, utan även för att den motiverar användaren att påbörja och slutföra.

Budskapet här bör vara vara:

  • kort
  • innehålla ett handlingsverb
  • vara specifikt och bekräfta värdet

Enligt Janne Wibe, ska en CTA-text också alltid tilltala personligt och skrivas i ”jag-form”, inte i ”du-form”.

En bra CTA skrivs enligt formen:
”Jag vill_______”
/Joanna Wiebe, Copyhackers

Detta har även testats av Michael Aagaard, som genom att byta ut ”starta din prenumeration” till ”starta min prenumeration” ökade klick med 90 %:
CTA-text formulär

Att bara använda en action, såsom ”starta nu” eller ”prenumerera”, visar inte på värde och eventuella pain points. Din CTA vill bekräfta det värde som användaren konverterar för att få från dig. Ett experiment som Empire Flippers körde visar just det; att ”Make Money Flipping Websites” konverterar 33 % bättre än ”Join us”.

cta i formulärConversionXL har en ytterligare exempel här.

Se även till att de är tydliga och isolerade i sin placering för att det inte ska vara några tveksamheter kring var man ska klicka. För motivationens skull, se även till att visa värde och vad som händer (var man hamnar) när man klickar. Detta gör att man lättare kan visualisera var man hamnar när man är klar.

Specifikt för mobil

Den mobila upplevelsen av att fylla i formulär skiljer sig en hel del från desktop, och med den ökade mobiltrafiken idag är det viktigt att anpassa och optimera sina formulär specifikt för mobilt användande.

Vi vill därför återkomma med en separat post specifikt för mobil. Principerna blir desamma, men ytan mindre.

Några saker att tänka på:

  • Se till att användaren får upp rätt tangentbord för rätt ändamål, text- siffer- och epost-läge etc.
    tangentbord för mobil
  • Alla klickbara element bör vara minst 44×44 pixlar, för att minska risken för felklick (”Rule of thumb”)
  • Se till att ha större marginal mellan fälten (mer luft), och speciellt då runt klickbara element

OBS: Passa er även från att använda Apples standard för dropdowns i mobilen, här blir det väldigt svårt att få översikt över vilka alternativ som finns.
jam_choiceparalysis

Hur vet du om du har ett problem med dina formulär?

För att kunna analysera VAR i ditt formulär som just dina användare droppar av är formulärspårning något vi starkt rekommenderar. Detta kan du göra med hjälp av olika verktyg som t.ex Formisimo eller Hotjar men även med hjälp av mätning i Google Analytics och GTM.

form analytics

Den typen av mätning kommer att svara på VAD som händer.
Men inte varför.

För att komplettera din kvantitativa data med insikter om varför datan ser ut som den gör, behöver du addera kvalitativ data. Du kan använda dig av screen recordings, där du kan se hur användarna agerar innan och i samband med att de lämnar formuläret. Letar de t.ex. efter mer information nånstans där den inte finns?

Poll HotjarFler kvalitativa metoder kan vara att köra en exit intent poll som helt enkelt frågar användarna varför de lämnar utan att slutföra formuläret. Du kan även fråga kundtjänst vilka vanliga frågor de får in från användarna i detta steg.

Om du har frågor kring spårning av formulär, eller formulär i allmänhet, svarar vi gärna! Droppa en kommentar nedan.


Kajsa Hedqvist Om Kajsa

Kajsa har akademisk bakgrund inom Medieteknik, och har under de senaste åren jobbat inom digital marknadsföring i form av Sök, Facebook och Display och har även erfarenhet från kundsidan. Kajsa är en riktig tävlingsmänniska som brinner för konvertering, analys och att driva resultat.

  • Thomas Krajewski

    Alltid lika intressant och det stämmer med korta formulär. Nu önskar jag att bildexempel blev synliga.

    • Sarah Hoof

      Tack, fixat! Det var safari som inte kunde hantera å, ä, ö i filnamnen. Du kan ha sidan cachad i browsern dock, öppna inkognito om du fortfarande inte ser bilderna.

    • Kajsa Hedqvist

      Hej Olof, tack för input! Absolut kan det bero på olika faktorer som t.ex. vilken typ av formulär det är. Vi har sett flera fall där konverteringen ökat av att korta ner formuläret, men det finns alldeles säkert exempel på där det inte fungerat lika bra. Det kan ju t.ex. vara så att ett fält som leder till att besökare hoppar av inte nödvändigtvis behöver plockas bort, utan snarare kanske formuleras om eller motiveras tydligare. Det viktiga är att hela tiden testa, mäta och utgå från sin egen data när man optimerar sitt formulär.

  • Rebecca Maor

    Själv är jag så innerligt trött på alla dessa spamfilter som man måste fylla i. Klicka på bildrutor, räkna ut en summa och så vidare. Många gånger så hoppar jag att kontakta när dessa filter dyker upp och väljer en annan tjänst. Jag har valt att inte ha den här typen av filter på min kontaktsida (http://loyalwriter.info/contact/) just för att jag inser att man faktiskt kan missa viktiga kontakter på grund av dem.

    • Kajsa Hedqvist

      Hej Rebecca, tack för input! Absolut kan det vara så att spamfilter leder till friktion, men beroende på sajt kan det vara nödvändigt om man utan dem får in mycket spam. Sen finns det ju olika typer av spamfilter som är olika ”jobbiga” tex allt från att skriva i svårlästa bokstäver till att klicka i en ruta att man inte är en robot (Googles reCAPTCHA som vi använder). Man får väga för- och nackdelar beroende på hur mycket spam man får in på sin egen sajt, och testa sig fram.

      • Rebecca Maor

        Ja, och så beror det ju också lite på hur gärna man vill ta kontakt. Men jag tror att man ska undvika alltför besvärliga spamfilter om man ens ska ha dem med.

        • Kajsa Hedqvist

          Ja precis, är motivationen tillräckligt hög kan friktion ha mindre inverkan. Men ja, har man en sajt som annars får in mycket spam och behöver ett spamfilter så kan det nog i de flesta fall vara en bra idé att ha ett så ”enkelt” filter som möjligt.

Få gratis konverteringstips

Anmäl dig till vårt nyhetsbrev

Nyhetsbrev

Lär av…

Kundcase Mathem ✻ Guldkorn
✻ Mallar och metoder
✻ A/B-tester och resultat
Lär av case

Kan du göra lika?

Se kundcase Se kundcase✔︎ Analys & webbpsykologi
✔︎ A/B-tester & resultat
Se alla case

Få platser kvar till flera seminarier

Anmäl dig till seminarium ✔︎ Webbpsykologi & verktyg
✔︎ A/B-testning & Google 360
✔︎ Snacka med experterna

Flera tillfällen i vinter

Säkra din plats

Spara 1000 kr

Conversion Jam 2017

Missade du?

Världens största CRO-event

Spara 1000 kr på din biljett till CJAM8

Du, kontakta oss!

Kontakta oss
Gitte eller hennes awesome kollegor hjälper dig.