Du gjør alt du kan opprette et nettsted som vil lede besøkende til konvertering. Når du studerer analysene, er du begeistret for å se at brukerreisen du har laget støttes av besøkende, gang på gang. Det er imidlertid noe som hindrer dem i å bli omvendt.
Le Kontaktskjema er en viktig del av de besøkendes reise. Selv om du faktisk har nesten alt en nettside kan tilby, en Kontaktskjema kan ødelegge opplevelsen hvis den ikke brukes riktig. "Knuste" knapper, forvirrende felt, for mange trinn, et uorganisert grensesnitt ... til og med plasseringen av Kontaktskjema kan forstyrre brukeropplevelsen.
Det er mange ting som kan gå galt.
5 regler for å bygge det perfekte kontaktskjemaet
En Google øyesporingsstudie publisert i 2014 viste at å følge de mest grunnleggende bruksretningslinjene for design skjemaer vil forbedre brukeropplevelsen betydelig. Nærmere bestemt, når et kontaktskjema oppfyller alle reglene, kan 78 % av brukerne fylle dem ut og sende dem i ett enkelt forsøk. Når et kontaktskjema bryter disse reglene, er det imidlertid bare 42 % som kan gjøre det i ett forsøk.
Nysgjerrig på hva disse reglene er? Så fortsett å lese.
Regel nr. 1: Fokuser på justering
Som du vil se i andre regler her, er folk ofte bekymret for lengden på skjemaer av kontakt, noe som ofte fører til dårlige designvalg. Ta for eksempel spørsmålet om justering.
Du ser kanskje et skjema som dette på BrainTraffic-nettstedet og tenker: Hmmm ... men er det ikke litt for lenge å fullføre?
En måte å tenke på å løse dette "problemet" er å flytte etikettene til venstre og plassere svarfeltene til høyre. UX-eksperter vil imidlertid fortelle deg at dette er et stort nei-nei, da det kompromitterer muligheten til å skanne skjemaet. Det samme gjelder hvis du tenkte å plassere feltene ved siden av hverandre horisontalt.
Hvis du vil ha din skjemaer kontakter oppfyller justeringsstandarden, her er hva du må gjøre:
- Venstrejuster alle etiketter, skjemafelt og den primære oppfordringsknappen.
- Juster aldri relaterte felt horisontalt. Du kan strukturere skjemaet logisk, men hvert spørsmål eller felt skal stables vertikalt.
- Ethvert felt med flervalgsspørsmål (med færre enn seks alternativer) må vises i en vertikal liste over punkter eller avmerkingsbokser, ikke i en rullegardinmeny.
Regel 2: Inkluder alle relevante felt
Når det gjelder utforming av kontaktskjemaer, kan du kanskje tro at jo kortere jo bedre, ikke sant? Det er ikke alltid tilfelle. Det som betyr mest er at du gir brukerne alle nødvendige og relevante felt.
Michael Aagaard, Senior Conversion Optimizer for Unbounce, gjorde det en presentasjon i 2015 som tok for seg dette problemet. Han og teamet hans ønsket å vite hva som ville skje hvis de forkortet dette kontaktskjemaet:
Som du ser, fjernet de det de mente var unødvendige felt for å effektivisere prosessen med å fylle ut skjemaet. Imidlertid, etter avsluttet test, fant de et 14% fall i konverteringer med kortere form.
Regel # 3: Forenkle felt
Det spiller ingen rolle om brukerne kommuniserer med kontaktskjemaet ditt ved hjelp av en stasjonær eller mobil enhet, eller om de trenger hjelpeteknologi for å hjelpe dem, skjemaet skal være utstyrt. for å forenkle inngangsprosessen.
Her er noen teknikker du bør vite:
Tabulation
For stasjonære brukere og de med tilgjengelighetsproblemer, sørg for at kontaktskjemaet ditt har logisk bestilling av faner aktivert.
Inndatamask
I stedet for å tvinge brukere til å gjette hvordan du vil at visse felt skal formateres, kan du legge dem til med inndatamasker som automatisk formaterer dem.
Google Autofullføring
Snarere enn å kode hvert felt slik at det er det dannet automatisk i samsvar med standardene som skal respekteres, aktiver autofyll ved hjelp av plugin-modulen Google Addresses Autofill. Ikke bare vil dette spare deg for å måtte håndtere stavefeil og feilfylte adresser, men det vil også spare besøkende fra å skrive inn det meste av denne informasjonen.
Regel # 4: Avslutt alle
Selv om jeg innser at denne regelen vil være i strid med det grunnleggende om minimalisme, er det en regel du bør være nøye med for å unngå å unødvendig frustrere de besøkende.
La meg forklare: Du har et kontaktskjema som ser ganske greit ut. Brukerne dine fyller ut det basert på hva etikettene foreslår, og de klikker på send-knappen. Så får de denne forferdelige røde meldingen: “Du gjorde ikke det riktig! Gå tilbake, korriger skjemaet og send det tilbake! "
Du har sannsynligvis møtt det som bruker, og du vet hvor frustrerende det kan være, spesielt hvis noe av informasjonen du skrev inn blir slettet når feilen blir kastet. Så i stedet for å la brukerne gjette hva som må løses og hvordan, ikke la det komme til dette punktet. Stave alt på vei:
- Gi et fokus i feltet (spesielt på mobil) slik at brukerne vet nøyaktig hvor de fyller ut et skjema.
- Skriv ned alle formateringskrav hvis du ikke bruker inngangsmasker til å automatisk formatere felt.
- Angi eksplisitt når et felt er "Valgfritt" (bruk ordet, ikke den røde stjernen).
- Gi brukerne muligheten til å vise eller skjule passordfeltet når de skriver inn det.
- Vis en feilmelding så snart brukeren har engasjert seg i et felt. Ikke vent til slutten med å gjøre det.
Regel # 5: Ikke skjul råd
Brettteksten i et kontaktskjema ser slik ut:
Se hvordan Target plasserer etikettene i feltet? I noen kontaktskjemaer forsvinner disse merkelappene / indikasjonene ganske enkelt når en bruker klikker på et felt. Målet håndterer dette litt annerledes og flytter etiketten til toppen av feltboksen (se "e-postadresse").
Uansett hvordan dette håndteres, liker brukervennlige eksperter, som gruppen Nielsen Norman, vil fortelle deg at dette er dårlig designpraksis fordi:
- Dette er problematisk for multitasking, distrahert eller for fartsfylt brukere i neste felt. Når ledetråden forsvinner, må brukerne forlate feltet for å gjenoppdage det de trenger.
- Tips som forsvinner hindrer også brukere i å gå tilbake til et skjema for å sjekke arbeidet sitt eller rette en feil uten å slette svaret fullstendig for å se hva som er nedenfor.
- Den lysere grå teksten som brukes til plassholdertips, er ikke ideell for enkel lesing.
- Felt med hinttekst kan forveksles med felt som allerede har fylt ut data, slik at brukerne kan ignorere dem, sende inn skjemaet og motta en feilmelding.
- Noen skjermlesingsverktøy kan ikke lese hinttekst.
Ifølge NNG finner brukere tomme felt mer attraktive enn de som inneholder ledetrådstekst. Selv om skjemaene dine virker lenger å plassere disse etikettene eller beskrivelsene over feltet, vil det forbedre brukervennligheten.
Det er det for disse tipsene. Jeg håper de vil hjelpe deg med å bygge bedre kontaktskjemaer.
