Du gör allt du kan skapa en webbplats som leder besökarna till konvertering. När du studerar analysen blir du glad över att se att användarresan du har skapat stöds av besökarna, gång på gång. Det finns dock något som hindrar dem från att omvändas.

Le kontakt~~POS=TRUNC formulär~~POS=HEADCOMP är en viktig del av dina besökares resa. Även om du faktiskt har nästan allt en webbplats kan erbjuda, en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP kan förstöra upplevelsen om den inte används på rätt sätt. "Trasiga" knappar, förvirrande fält, för många steg, ett oorganiserat gränssnitt... till och med placeringen av kontakt~~POS=TRUNC formulär~~POS=HEADCOMP kan störa användarupplevelsen.

Det finns många saker som kan gå fel.

5 regler för att skapa det perfekta kontaktformuläret

En Google eye tracking-studie publicerad 2014 visade att man följer de mest grundläggande användningsriktlinjerna för design former kommer att avsevärt förbättra användarupplevelsen. Närmare bestämt, när ett kontaktformulär uppfyller alla regler kan 78 % av användarna fylla i dem och skicka in dem på ett enda försök. När ett kontaktformulär bryter mot dessa regler är det dock endast 42 % som kan göra det på ett försök.

Nyfiken på vad dessa regler är? Så fortsätt läsa.

Regel 1: Fokusera på inriktning

Som du kommer att se i andra regler här är folk ofta oroade över längden på former av kontakt, vilket ofta leder till dåliga designval. Ta till exempel frågan om anpassning.

Du kan se ett sådant formulär på BrainTraffic-webbplatsen och tänka: Hmmm ... men är det inte lite för långt att slutföra?

fyll i formulär.png

Ett sätt att tänka på att lösa detta "problem" är att flytta etiketterna till vänster och placera svarsfältet till höger. UX-experter kommer dock att berätta att detta är ett stort nej-nej eftersom det äventyrar möjligheten att skanna formuläret. Detsamma gäller om du funderade på att placera fälten bredvid varandra horisontellt.

Om du vill ha din former kontakter uppfyller anpassningsstandarden, här är vad du behöver göra:

  • Vänsterjustera alla etiketter, formulärfält och den primära uppmaningsknappen.
  • Rikta aldrig in relaterade fält horisontellt. Du kan strukturera formuläret logiskt, men varje fråga eller fält bör staplas vertikalt.
  • Alla fält med flervalsfrågor (med färre än sex alternativ) måste visas i en vertikal lista med punkter eller kryssrutor, inte i en rullgardinsmeny.

Regel 2: Inkludera alla relevanta fält

När det gäller att utforma kontaktformulär kanske du tycker att ju kortare desto bättre, eller hur? Så är det inte alltid. Det viktigaste är att du ger användarna alla nödvändiga och relevanta fält.

Det gjorde Michael Aagaard, Senior Conversion Optimizer för Unbounce en presentation 2015 som tog upp denna fråga. Han och hans team ville veta vad som skulle hända om de förkortade detta kontaktformulär:

Exempel på kontaktformulär court.png

Som du kan se tog de bort vad de trodde var onödiga fält för att effektivisera processen att fylla i formuläret. När testet avslutats fann de emellertid en minskning med 14% i omvandlingen med den kortare formen.

Regel # 3: Förenkla fält

Det spelar ingen roll om dina användare interagerar med ditt kontaktformulär med hjälp av en stationär eller mobil enhet, eller om de behöver hjälpteknik för att hjälpa dem, ska formuläret vara utrustat. för att förenkla inmatningsprocessen.

Här är några tekniker du bör känna till:

Tabulering
För stationära användare och personer med tillgänglighetsproblem, se till att ditt kontaktformulär har logisk flikbeställning aktiverad.

Inmatningsmaskar
I stället för att tvinga användare att gissa hur du vill att vissa fält ska formateras kan du lägga till dem med inmatningsmasker som automatiskt formaterar dem.

formateringsfält html.png

Google Autocomplettering
Snarare än att koda varje fält så att det är formiat automatiskt enligt de standarder som ska respekteras, aktivera autofyllning med hjälp av plugin-programmet Google Adresses autofyll. Inte bara kommer detta att spara dig från att behöva hantera stavfel och felaktigt ifyllda adresser, det kommer också att spara dina besökare från att skriva in de flesta av denna information.

Regel # 4: Avsluta alla

Även om jag inser att denna regel strider mot grunderna i minimalism, är det en regel som du bör vara noga med för att undvika onödigt frustrerande dina besökare.

Låt mig förklara: Du har ett kontaktformulär som ser ganska enkelt ut. Dina användare fyller i det baserat på vad etiketterna föreslår och de klickar på knappen Skicka. Sedan får de detta hemska röda meddelande: ”Du gjorde inte det rätt! Gå tillbaka, korrigera formuläret och skicka tillbaka det! " 

Du har förmodligen stött på det som en användare och du vet hur frustrerande det kan vara, särskilt om en del av den information du angav raderas när felet kastas. Så snarare än att låta användare gissa vad som behöver fixas och hur, låt det inte komma till den här punkten. Stava allt på vägen:

  • Ge fokus i fältet (särskilt på mobil) så att användarna vet exakt var de fyller i ett formulär.
  • Skriv ner alla formateringskrav om du inte använder inmatningsmasker för att automatiskt formatera fält.
  • Ange uttryckligen när ett fält är "Valfritt" (använd ordet, inte den röda asterisken).
  • Ge användarna möjlighet att visa eller dölja lösenordsfältet när de anger det.
  • Visa ett felmeddelande så snart användaren har engagerat sig i ett fält. Vänta inte till slutet för att göra det.

formulär wordpress.png fel

Regel # 5: Dölj inte råd

Korttexten i ett kontaktformulär ser ut så här:

fält med tips.png

Se hur Target placerar etiketterna i fältet? I vissa kontaktformulär försvinner dessa etiketter / indikationer helt enkelt när en användare klickar på ett fält. Målet hanterar detta lite annorlunda och flyttar etiketten till toppen av fältrutan (se "e-postadress").

Oavsett hur detta hanteras, användbarhetsexperter, som gruppen Nielsen Norman, kommer att berätta att detta är dålig designpraxis eftersom:

  • Detta är problematiskt för multitasking, distraherade eller för snabba användare i nästa fält. När ledtråden försvinner måste användarna lämna fältet för att återupptäcka vad de behöver.
  • Tips som försvinner hindrar också användare från att återvända till ett formulär för att kontrollera sitt arbete eller korrigera ett fel utan att helt radera svaret för att se vad som finns nedan.
  • Den ljusare grå texten som används för platshållartips är inte perfekt för enkel läsning.
  • Fält med antydanstext kan förväxlas med fält som redan har fyllt i data, vilket gör att användarna kan ignorera dem, skicka formuläret och få ett felmeddelande.
  • Vissa skärmläsningsverktyg kan inte läsa tips.

Enligt NNG tycker användarna att tomma fält är mer attraktiva än de som innehåller ledtrådstext. Även om dina formulär verkar längre för att placera dessa etiketter eller beskrivare ovanför fältet kommer det att förbättra användbarheten.

Det är det för dessa tips. Jag hoppas att de hjälper dig att skapa bättre kontaktformulär.