Du gør alt hvad du kan oprette et websted som vil føre besøgende til konvertering. Når du studerer analyserne, er du begejstret for at se, at den brugerrejse, du har oprettet, støttes af de besøgende, gang på gang. Der er dog noget, der forhindrer dem i at blive omvendt.

Le Kontaktformular er en væsentlig del af dine besøgendes rejse. Selvom du faktisk har næsten alt, hvad en hjemmeside kan tilbyde, en Kontaktformular kan ødelægge oplevelsen, hvis den ikke bruges korrekt. "Knuste" knapper, forvirrende felter, for mange trin, en uorganiseret grænseflade... selv placeringen af Kontaktformular kunne forstyrre brugeroplevelsen.

Der er mange ting, der kan gå galt.

5 regler for opbygning af den perfekte kontaktformular

En Google eye tracking-undersøgelse offentliggjort i 2014 viste, at man fulgte de mest grundlæggende brugsretningslinjer for design formularer vil forbedre brugeroplevelsen markant. Specifikt, når en kontaktformular opfylder alle reglerne, kan 78 % af brugerne udfylde dem og indsende dem i et enkelt forsøg. Når en kontaktformular overtræder disse regler, er det dog kun 42 %, der er i stand til at gøre det i ét forsøg.

Er du nysgerrig efter, hvad disse regler er? Så fortsæt med at læse.

Regel nr. 1: Fokus på tilpasning

Som du vil se i andre regler her, er folk ofte bekymrede over længden af formularer af kontakt, hvilket ofte fører til dårlige designvalg. Tag for eksempel spørgsmålet om tilpasning.

Du kan muligvis se en form som denne på webstedet BrainTraffic og tænke: Hmmm ... men er det ikke lidt for længe at udfylde?

udfyld form.png

En måde at tænke på at løse dette "problem" er at flytte etiketterne til venstre og placere svarfelterne til højre. UX-eksperter vil dog fortælle dig, at dette er et stort nej-nej, da det kompromitterer muligheden for at scanne formularen. Det samme gælder, hvis du tænkte på at placere felterne ved siden af ​​hinanden vandret.

Hvis du vil have din formularer kontakter opfylder tilpasningsstandarden, her er hvad du skal gøre:

  • Venstrejuster alle etiketter, formularfelter og den primære opfordring til handling-knap.
  • Juster aldrig relaterede felter vandret. Du kan strukturere formularen logisk, men hvert spørgsmål eller felt skal stables lodret.
  • Ethvert felt med multiple-choice-spørgsmål (med færre end seks indstillinger) skal vises i en lodret liste over punkter eller afkrydsningsfelter, ikke i en rullemenu.

Regel 2: Medtag alle relevante felter

Når det kommer til at designe kontaktformularer, tror du måske, at jo kortere jo bedre, ikke? Det er ikke altid tilfældet. Det, der betyder mest, er, at du giver brugerne alle de nødvendige og relevante felter.

Det gjorde Michael Aagaard, Senior Conversion Optimizer for Unbounce en præsentation i 2015, som behandlede dette spørgsmål. Han og hans team ønskede at vide, hvad der ville ske, hvis de forkortede denne kontaktformular:

Eksempel på kontaktformular domstol.png

Som du kan se, fjernede de, hvad de mente var unødvendige felter for at strømline processen med at udfylde formularen. Efter testens afslutning fandt de imidlertid et fald på 14% i konverteringer med den kortere form.

Regel # 3: Forenkle felter

Det betyder ikke noget, om dine brugere interagerer med din kontaktformular ved hjælp af en stationær eller mobilenhed, eller hvis de har brug for hjælpende teknologi til at hjælpe dem, skal formularen være udstyret. for at forenkle indgangsprocessen.

Her er nogle teknikker, du skal vide:

tabulering
For desktopbrugere og dem med tilgængelighedsproblemer skal du sørge for, at din kontaktformular har logisk fanebestilling aktiveret.

Input masker
I stedet for at tvinge brugerne til at gætte, hvordan du ønsker, at visse felter skal formateres, kan du tilføje dem med inputmasker, der automatisk formaterer dem.

formatering felter html.png

Google Autocomplettering
I stedet for at kode hvert felt, så det er formiat automatisk i henhold til de standarder, der skal respekteres, skal du aktivere autofyld ved hjælp af plugin-modulet autofyld til Google-adresser. Dette sparer ikke kun dig for at skulle håndtere stavefejl og forkert udfyldte adresser, det sparer dine besøgende fra at indtaste det meste af denne information.

Regel # 4: Afslut alle

Mens jeg er klar over, at denne regel vil være i modstrid med grundlæggende principper for minimalisme, er det en regel, du skal være meget opmærksom på for at undgå unødigt frustrerende dine besøgende.

Lad mig forklare: Du har en kontaktformular, der ser ret ligetil ud. Dine brugere udfylder det ud fra, hvad etiketterne foreslår, og de klikker på knappen Send. Så får de denne forfærdelige røde besked: ”Du gjorde det ikke rigtigt! Gå tilbage, ret formularen og send den tilbage! " 

Du har sandsynligvis stødt på det som bruger, og du ved, hvor frustrerende det kan være, især hvis nogle af de oplysninger, du indtastede, bliver slettet, når fejlen smides. Så i stedet for at lade brugerne gætte, hvad der skal rettes, og hvordan, lad det ikke komme til dette punkt. Stave alt undervejs:

  • Giv et fokus i marken (især på mobil), så brugerne ved nøjagtigt, hvor de udfylder en formular.
  • Skriv alle formateringskrav, hvis du ikke bruger inputmasker til automatisk at formatere felter.
  • Angiv eksplicit, hvornår et felt er "Valgfrit" (brug ordet, ikke den røde stjerne).
  • Giv brugerne mulighed for at vise eller skjule adgangskodefeltet, når de indtaster det.
  • Vis en fejlmeddelelse, så snart brugeren er engageret i et felt. Vent ikke til slutningen for at gøre det.

form wordpress.png fejl

Regel nr. 5: Skjul ikke råd

Boardteksten i en kontaktformular ser sådan ud:

felt med tips.png

Se hvordan Target placerer etiketterne i marken? I nogle kontaktformularer forsvinder disse etiketter / indikationer simpelthen, når en bruger klikker på et felt. Målet håndterer dette lidt anderledes og flytter etiketten til toppen af ​​feltfeltet (se "e-mail-adresse").

Uanset hvordan dette håndteres, bruges eksperter som brugervenlighed som gruppen Nielsen Norman, vil fortælle dig, at dette er dårlig designpraksis, fordi:

  • Dette er problematisk for multitasking, distraherede eller for hurtige brugere i det næste felt. Når ledetråden forsvinder, skal brugerne forlade feltet for at genopdage, hvad de har brug for.
  • Tip, der forsvinder, forhindrer også brugere i at vende tilbage til en formular for at kontrollere deres arbejde eller rette en fejl uden helt at slette svaret for at se, hvad der er nedenfor.
  • Den lysere grå tekst, der bruges til pladsholdertip, er ikke ideel til nem læsning.
  • Felter med tipstekst kan forveksles med felter, der allerede har udfyldt data, hvilket efterlader brugere at ignorere dem, indsende formularen og modtage en fejlmeddelelse.
  • Nogle skærmlæsningsværktøjer er ikke i stand til at læse tipstekst.

Ifølge NNG finder brugerne tomme felter mere attraktive end dem, der indeholder ledetrådstekst. Selvom dine formularer synes længere at placere disse etiketter eller deskriptorer over marken, vil det forbedre brugervenligheden.

Det er det for disse tip. Jeg håber, de vil hjælpe dig med at opbygge bedre kontaktformularer.