Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

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.

Kontaktformuläret är en viktig del av dina besökares resa. Även om du faktiskt har nästan allt a webbplats kan erbjuda kan ett kontaktformulär förstöra upplevelsen om det inte används på rätt sätt. "Trasiga" knappar, förvirrande fält, för många steg, ett oorganiserat gränssnitt ... även placeringen av kontaktformuläret 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 Googles ögonspårningsstudie som publicerades 2014 visade att det att följa de mest grundläggande riktlinjerna för formulärdesign kommer att förbättra användarupplevelsen avsevärt. När ett kontaktformulär uppfyller alla regler kan 78% av användarna fylla i dem och skicka dem i ett försök. När ett kontaktformulär bryter mot dessa regler är det dock bara 42% som kan göra det i 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 människor ofta oroliga över längden på kontaktformulär, vilket ofta leder till dåliga designval. Ta till exempel frågan om anpassning.

Du kanske ser ett formulär som detta på webbplats från BrainTraffic och tänker: Hmmm...men är det inte lite för långt att fylla i?

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 att dina kontaktformulär ska uppfylla anpassningsstandarden är det här du behöver göra:

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

  • 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.

Vill du sälja dina produkter på internet?

Ladda ner WooCommerce gratis, de bästa plugins för e-handel för att sälja dina fysiska och digitala produkter på WordPress och enkelt skapa din onlinebutik. Perfekt för nybörjare.

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.
  • några outils skärmläsare kan inte läsa tipstext.

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.

%d bloggare gillar denna sida: