Autofyll och förifyllda fält är två sätt att minska hur mycket besökare behöver skriva. Autofyll fungerar från webbläsarens sida. Förifyllda fält fungerar från din backend. Tillsammans höjer de andelen ifyllda formulär avsevärt.
Det här kapitlet går igenom vad båda gör, hur de fungerar, när du ska använda var och en och hur du sätter upp dem korrekt.
De mätbara fördelarna med autofyll och förifyllda fält
En studie från Chrome Developers följde tusentals formulär i USA. När besökare använder webbläsarens autofyll fyller de i formulär ungefär 35 % snabbare. Avhoppen minskar med ungefär 75 %, även när autofyll bara fyller i en del av formuläret. Användarna måste fortfarande granska och bekräfta det webbläsaren fyllde i, men det är det minskade skrivandet som gör skillnaden.
I ett dataunderlag över flera formulärtyper utlöste 23 % av användarna autofyll under sin väg genom formuläret. De användarna slutförde formuläret i 71 % av fallen. För besökare som inte använde autofyll var andelen som slutförde 59 %. Det glappet på 12 procentenheter växer snabbt när du kör formulär i stor skala.
Förifyllda fält visar liknande utslag. När ett formulär ser delvis ifyllt ut är användare mer benägna att slutföra det än när de ser ett tomt formulär. Det fungerar eftersom det känns enklare att slutföra något som redan är på gång än att börja från ett tomt blad.
Så fungerar autofyll och vad du behöver göra för att stödja det
De flesta besökare använder i dag en webbläsare med autofyll. Chrome och alla andra större webbläsare har det. Många använder lösenordshanterare, som utökar autofyll ännu mer. Men autofyll fungerar bara om ditt formulär är uppsatt för att ta emot det.
Webbläsaren tittar på namnet på varje inmatningsfält och attributet type. Om ditt fält heter något generiskt som "field1" eller "input2" har webbläsaren ingen aning om vad den ska fylla i. Om du kallar det "email" och sätter type till "email" vet webbläsaren. Om du kallar det "shipping_address_line_1" och sätter attributet autocomplete till "address-line1" vet webbläsaren exakt vad den ska lägga där.
Din HTML måste matcha det webbläsare förväntar sig. Använd standardnamn på fält. Sätt rätt type-attribut (email, tel, number, text). Lägg till attributet autocomplete med rätt värde för varje fält. De vanligaste fälten som användare förväntar sig att autofyll hanterar är e-postfält (type="email" och autocomplete="email"), telefonfält (type="tel" och autocomplete="tel"), adressfält (specifika autocomplete-värden som autocomplete="address-line1" för gatuadress, autocomplete="address-level1" för delstat och autocomplete="postal-code" för postnummer) och namnfält (type="text" och antingen autocomplete="given-name" för förnamn eller autocomplete="family-name" för efternamn).
Om ditt formulär helt hoppar över attributet autocomplete försöker webbläsare ändå gissa utifrån fältnamnen. Men uttryckliga autocomplete-värden fungerar bättre. Insatsen att sätta de här attributen rätt betalar sig varje gång någons webbläsare fyller i adressen utan att hen skriver den.
Så fungerar förifyllda fält och när de faktiskt hjälper
Förifyllda fält fungerar bäst när användaren vet att du har informationen. Om någon har loggat in på sitt konto förväntar hen sig att telefonnummer och namn redan finns där. Om hen klickade på en länk i ett mejl som sa "Bekräfta din adress" förväntar hen sig att adressen visas förifylld. Uppgifterna är ingen överraskning.
Förifyll vanliga fält som användare redan har gett dig. E-post om de registrerade sig med e-post. Företagsnamn om de registrerade sig med ett företag. Alla adresser du redan har frågat efter. Lämna fält tomma som frågar efter ny information. En besökare vill se att du kom ihåg vad hen sa, men vill också ha kontroll över vad som hamnar i ett formulär som hen är på väg att skicka.
Öppenhet spelar roll här. Gör det tydligt varför fälten är förifyllda. "Vi har ditt företagsnamn sparat" eller "Det här är adressen du angav förra gången" tar två sekunder att lägga till som en liten notering ovanför formuläret och tar bort förvirring. Friktionen uppstår när fält känns som att de fylls i utan samtycke.
När du ska avstå från att förifylla och vad som kan gå fel
Förifyllda fält fungerar bara när uppgifterna är korrekta och aktuella. Om en besökare har uppdaterat sitt telefonnummer men formuläret hämtar från en gammal databas ser hen fel uppgifter och måste rätta dem. Den friktionen förstör syftet. Ge alltid användare möjlighet att redigera och rätta förifyllda uppgifter. Lås aldrig ett fält och tvinga dem att kontakta supporten för att ändra det.
Om du inte är säker på att uppgifterna stämmer, förifyll bara de fält du uppdaterar regelbundet och lämna de andra tomma. I reglerade branscher som finansiella tjänster eller hälso- och sjukvård, hoppa över förifyllning av känsliga fält även om du har uppgifterna. Förifyll inte betalningssätt i kassan om inte besökaren uttryckligen har sparat det. Målet är att minska friktionen för besökare, inte att skapa en illusion av ett färdigt formulär.
Använd autofyll och förifyllda fält tillsammans för störst effekt
Det starkaste sättet använder båda samtidigt. För besökare som har loggat in, förifyll de uppgifter ditt system har. För besökare som använder en ny webbläsare eller enhet, se till att dina autocomplete-attribut är rätt satta så att webbläsarens autofyll kan fungera. Vissa besökare ser förifyllda uppgifter. Vissa använder webbläsarens autofyll. Vissa gör båda. Hur som helst kräver formuläret mindre skrivande och andelen som slutför ökar.
Olika besökare kommer i olika lägen. En återkommande kund som har loggat in är ett scenario. En ny besökare vid sin första interaktion är ett annat. En återkommande besökare på en ny enhet är ett tredje. Var och en har nytta av den ena mekanismen eller den andra. Tillsammans skapar de en formulärupplevelse som känns effektiv oavsett vilken väg besökaren tar.
Vad som lämpar sig att förifylla och vad som ska lämnas tomt
Autofyll och förifyllning är mest effektiva för allmän information. E-post, telefon, namn, adress, företagsnamn, postnummer. De här fälten finns i många formulär, så både besökare och webbläsare tjänar på att de kommer ihåg dem.
För känslig information, var selektiv. Finansiella formulär bör inte förifylla betalningssätt om inte besökaren uttryckligen har sparat ett. Formulär inom vården bör inte förifylla sjukdomshistorik. Säkerhetsfält som lösenord ska aldrig förifyllas manuellt (lösenordshanterare sköter det automatiskt). Om din bransch har krav på efterlevnad, följ dem oavsett fördelarna med bekvämlighet.
Så mäter du effekten på andelen som slutför
Du kan inte se i dina formulärinskick om en besökare använde autofyll eller inte. Men du kan mäta effekten genom att jämföra andelen som slutför före och efter att du har infört stöd för autofyll. Om du inte har autofyllvänlig kod i dag, sätt upp dina autocomplete-attribut rätt. Mät andelen som slutför under en vecka och jämför den sedan med veckan efter. En mätbar förbättring bör synas.
För förifyllda fält är testet liknande. Om du kan segmentera din målgrupp, visa förifyllda uppgifter för vissa besökare och tomma fält för andra. Andelen som slutför bör vara högre för den förifyllda gruppen. Om den inte är det är antingen dina uppgifter felaktiga eller så skapar antalet förifyllda fält förvirring i stället för fart.
Vanliga frågor
Fungerar autofyll på samma sätt på mobil som på dator?
Är det säkert att använda autofyll för lösenordsfält?
Kan jag förifylla ett formulär med en URL-parameter?
Vad händer om autofylld data är fel?
Försämrar förifyllning datakvaliteten eller ger den inaktuell information?
Vilka formulärtyper tjänar mest på autofyll och förifyllning?
Autofyll och förifyllda fält ger mätbara resultat. En hastighetsökning på 35 % och en minskning av avhoppen med 75 % gäller de besökare som använder dem. De fungerar bäst tillsammans med ett kort formulär och tydliga etiketter. Tillsammans förstärker de här tre delarna ökningen av andelen som slutför avsevärt.
Läs mer om att korta ner formulär i den kompletta guiden om ideal formulärlängd. För teknisk implementering, se hur du förifyller formulär med användardata. För den bredare optimeringsstrategin, utforska guiden om konverteringsoptimering av formulär.