Öka konvertering genom att uppgradera dina webbformulär till HTML5

Den här bloggposten är en översättning av Tom Bowen’s ursprungliga inlägg på websiteoptimizers.com.

När du letar efter sätt att förbättra din webbplats, främst för att öka antalet konverteringar, kommer du utan tvekan att komma på en rad idéer och hypoteser att testa. De förändringar du vill göra kan vara stora eller små både i komplexitet och kostnad. Men det finns några riktigt enkla förbättringar som kan implementeras på de flesta webbplatser. En av dom är att uppgradera dina formulär så att de drar fördel av HTML5-funktionalitet.

Varför ska jag göra det här?

Varför är det självklart att du ska dra nytta av de nya egenskaper som följer med HTML5? Till att börja med är dom enkla att implementera. Till och med det längsta formuläret kan ändras på ett par minuter så att det drar nytta av fördelarna hos HTML5. Nästan allt som du eller din utvecklare behöver veta finns med i den här bloggposten.

För det andra, så finns det stöd för de här egenskaperna i majoriteten av webbläsare idag, men för de användare som sitter på äldre webbläsare så kommer dina formulär att se exakt likadana ut som de gjorde förut. Det här är fullständigt bakåt-kompatibelt. Så det är riskfritt att göra de här förändringarna.

Och för det tredje så innebär de här förändringarna störst förbättring för mobila användare. Om din chef inte har pratat med dig på ett tag om att göra er sajt “mobilvänlig” så har någon av er inte varit tillräckligt uppmärksam! Att införa HTML5-formulär är ett mycket bra första steg mot att göra det lättare för era mobila användare.

Mobila tangentbord och HTML5

Så, när vi ändå pratar om mobil webb, låt oss börja där. Har du någonsin använt din mobil på en webbplats eller i en app där den ber om din epost, och har du då märkt att @-tecknet finns där på tangentbordet bland de andra tecknen? Om du är som jag så har du antagligen tänkt “åh, smart, för dom vet att jag ska skriva in en epost”. Du är glad för att dom inte gör saker och ting svårare än dom behöver vara för dig.

Och så, några dagar senare, så minns du plötsligt allt mycket tydligt, för du är på en annan sajt som frågar efter din epost, men den här gången får du ett vanligt tangentbord. Så nu behöver du trycka ner shift och @ och sen shift igen för att komma tillbaka. Verkar ju trivialt, men det kan vara irriterande.

Det här är en av dom situationer där HTML5 kommer till undsättning. Det finns en rad nya typer av inmatningsfält som kan tala om för mobila webbläsare vilket slags tangentbord som ska visas. Att hjälpa dina användare på det här sättet kan göra en köpprocess eller någon annan form av konvertering smärtfri. Det kan till och med ibland vara den skillnad som gör att konverteringen blir av eller inte. Men ännu vanligare är att det kan vara det som gör skillnaden mellan en positiv upplevelse där användaren kommer tillbaka, kontra en negativ som gör att dom aldrig återvänder.

Här är några av de nya typerna av inmatningsfält.

Type=”email”

Eftersom vi började med att prata om email, låt oss avsluta exemplet. Idag, om du frågar efter epost i ditt formulär, så har du antagligen en kodrad som ser ut ungefär så här:

<input type=”text” name=”custemail” />

Din kanske har några ytterligare attribut, och den kanske inte har “type=’text’” eftersom text är standard. Den här lilla kodsnutten placerar en liten textruta på skärmen som din användare kan mata in sin epost i (eller vilken annan slags text dom väljer). När du klickar i rutan på en smartphone, som t.ex. en iPhone, så får du upp ett vanligt tangentbord.

Men med HTML5 så skulle du kunna skriva din kod så här:

<input type="email" name="custemail" />

För de flesta webbläsare så kommer det inte se annorlunda ut. Men på en iPhone (och de flesta andra smartphones), så kommer användaren att få ett annat tangentbord när dom klickar i fältet – ett med ett @-tecken och en punkt, som gör att du inte behöver använda Shift-tangenten.

Nu är din kund mycket lyckligare!

Type=”URL”

Den här varianten är väldigt lik email. De flesta webbläsare kommer att visa den som ett vanligt textfält. Men i en smartphone, när du klickar i fältet så kommer du att få ett URL-tangentbord, som har en punkt, ett snedstreck och ofta en .com-tangent.

Type=”number”

Den här har lite mer funktionalitet än type=email eller type=url, men i sin enklaste form, den gör det du förväntar dig. Den visar ett numeriskt tangentbord när användaren klickar i den på sin smartphone.

Koden kan vara så här enkel:

<input type="number" name="quantity" />

Det numeriska inmatningsfältet har några ytterligare attribut som du kan använda: max, min och step. Dessa används främst för validering, men i några webbläsare (t.ex. Chrome), så kommer inmatningsfältet att få små pilar på höger sida som gör att du kan minska eller öka värdet genom att klicka på dom.

Så till exempel:

<input type="number" name="quantity" min="12" max="144" step="12" value="24" />

kommer att visa ett fält som gör det möjligt för användaren att snabb öka/minska mängden, ett dussin i taget, genom att klicka, upp till 144.

Type=”tel”

Det här fälttypen påminner om den numeriska. Men där den numeriska varianten ger ett numeriskt tangentbord, så får du med den här typen ett telefontangentbord. Det här begränsar användaren till de tio siffrorna 0-9, plus-tecken (+), asterisk (*) och hash-tecken (#).

Kom ihåg! Det är bara på smartphones (och inte alla av dom) som användaren är begränsad till dessa tecken. De flesta webbläsare i datorn kommer att visa ett vanligt textfält, som det går att mata in vilket tecken som helst i. Även på en smartphone kan användaren mata in vilket tecken som helst, begränsningen gäller bara för vilket tangentbord som visas.

Inmatningstypen Tel är också användbar i de fall som bara positiva heltal ska matas in, som t.ex. postnummer, och så klart telefonnummer.

Autofokus

Att placera markören i det första fältet i ett formulär, kan vara ett sätt att göra livet mycket enklare för användaren – speciellt för de användare som gillar att hoppa från fält till fält med tab-tangenten (och det finns många sådana användare). Genom att sätta fokus automatiskt gör att de inte behöver lyfta handen från tangentbordet för att använda musen.

Tyvärr så fungerar inte de flesta formulär så här. Och de som gör det, väntar med att sätta fokus tills hela sidan har laddat klart, och då har användaren ofta redan börjat fylla i formuläret. När ett JavaScript i detta läge flyttar tillbaka fokus till det första fältet, blir användaren i bästa fall irriterad. I värsta fall får du in felaktig information.

Med HTML5 får du möjligheten att sätta fokus i ett fält utan att blanda in något kladdigt JavaScript, och den sätter den åt dig på en gång. Dina användare kommer inte att hinna fylla i formuläret innan det aktiveras. Och det är enkelt. Lägg bara till “autofocus” i ditt input-element så här:

<input name="username" autofocus />

Om dina formulär för närvarande inte använder JavaScript för att sätta fokus, så rekommenderar jag dig att lägga till detta ord – autofocus – i det första fältet i formuläret. Dina användare kommer att bli lyckligare. Äldre icke-HTML5 webbläsare kommer inte att stödja detta, men åter igen, formuläret kommer att uppföra sig på exakt samma sätt som det gör idag för dessa användare. Och andelen av dessa webbläsare krymper för varje dag som går.

Om du har JavaScript-kod som sätter fokus, så rekommenderar jag dig att titta på din webbdata och ta reda på hur stor andel av dina användare som använder äldre, icke-HTML5-kompatibla webbläsare. Om denna andel är låg, överväg att ersätta javascriptet med HTML5-attributet “autofocus”. Om du har en hög andel användare med äldre webbläsare, så bör du överväga att modifiera ditt javascript så det känner av om webbläsaren har stöd för autofocus, men det är utanför ramen för detta blogginlägg.

Lättare med formulärvalidering

Förhoppningsvis så har dina formulär någon form av validering idag. Formulärvalidering handlar om att säkerställa att obligatoriska fält har fyllts i, men också att vissa fält uppfyller vissa kriterier. Till exempel, att ett postnummer-fält bara innehåller siffror, eller att ett epost-fält ser ut ungefär så här [email protected].

Du bör verkligen kolla att fälten uppfyller dessa krav på webbservern där formuläret tas emot. Men du bör också kolla i webbläsaren så att dålig data inte skickas till servern till att börja med.

Men i många fall så brukar utvecklare bara kolla att obligatoriska fält har fyllts i, och lämna över till webbservern att kolla att den inskickade datan är valid.

Nu kommer HTML5 till undsättning igen för vissa formulärfält. De inmatningsalternativ vi nämnde ovan (epost, url, numerisk och telefon) skeppas med inbyggd validering. Så om du matar in conversionista.se i ett epost-fält så kommer ett HTML5-kompatibel webbläsare att generera ett felmeddelande istället för att skicka formuläret. Du behöver mata in något i stil med [email protected]/

Det samma gäller för de andra typer av inmatningsfält som vi nämnde ovan. Den numeriska varianten kommer också att validera att talet håller sig innanför det du satt min och max-attributen till.

Om du redan har någon förträfflig javascript-funktion på plats som fungerar tillfredställande, så är det jättebra. Du bör fortfarande använda dessa nya typer av inmatningsfält. Skriv bara in “novalidate” (utan citationstecken) i din <form>-tagg så att den kör din javascript-validering istället.

<form action="formsub.php" method="post" novalidate>

Om du idag inte använder någon validering på klient-sidan, utan bara ser till att de obligatoriska fälten har fyllts i, så kommer de här nya inmatningsfälten att förbättra ifyllandet av dina formulär, och göra saker enklare för många av dina användare.

Positiv Upplevelse = Lyckliga Användare = Fler Konverteringar

Dessa förändringar kan du med lätthet implementera nu, på en gång. Till skillnad från andra förändringar, så behöver du inte köra något A/B-test på dom för att veta att dom innebär positiva förbättringar. Dom är verkligen no-brainers.

Kommer dom att öka din konverteringsgrad med 10% för din genomsnittliga köporder? Antagligen inte. En av anledningarna till att du inte behöver testa dom är att dom inte innebär någon markant skillnad – särskilt inte på en gång. Men dom kommer att ge dig lyckligare besökare på din webbplats, även om dom inte inser det på en gång. Och att skapa lyckligare besökare är en investering i sig – en investering som tenderar att betala av sig på lång sikt.

Gör din sajt så enkel att använda som möjligt, så kommer de som använder sig av den att tycka om den mer. De kommer att komma tillbaka oftare. De kommer att rekommendera den till sina vänner. Och de kommer att konvertera mer över tid.