Tips for online skjemaer som skaper bedre brukeropplevelse

Høres dette ut som et typisk online samspill du har hatt tidligere? Jeg begynner å fylle ut et betalingsskjema for å sende inn min månedlige regning, som skal betales for et bestemt kabelselskap, all informasjon er lagt inn, og så når jeg trykker på "Send inn", sitter den der og tapper bort ... omtrent fem minutter senere resulterer i en feilmelding, og jeg har ingen måte å vite om betalingen min ble akseptert. Dette er bare en av flere mislykkede innsendingsopplevelser jeg har hatt den siste tiden. Jeg er sikker på at du kan dele lignende historier om online-form FAIL! Som interessent i organisasjonen din bør du være klar over brukeropplevelsen (UX) og akseptnivået som dine online skjemaer har med hensyn til hvordan kundene dine samhandler med dine online skjemaer. Denne artikkelen vil gjennomgå flere tips for å sikre at skjemaene dine gir den beste UX for kundene dine.

Velg menyer

Har du noen gang kommet over en valgt meny som har bare fem eller færre alternativer, eller kanskje over femten alternativer? I begge tilfeller vil det ikke gi deg poeng for effektive brukeropplevelser. Hvis du har mindre enn fem alternativer, kan det være lurt å velge et sett med radioknapper, som lar brukerne gjøre valgene raskere; alt de trenger å gjøre er å se på de få alternativene og klikke en gang i stedet for å måtte klikke på valgmenyen og deretter klikke på valget. Figur A viser den fornærmende to alternativvelgeren, og Figur B viser de foretrukne alternativknappene.

Figur A

Figur B

Og på den andre siden av spekteret når du har mer enn femten alternativer i en valgt meny, blir det en byrde å bla gjennom en så lang liste med alternativer; brukeren blir forkjørt med for mange valg som i denne typiske menyen for valg av måned, dag og år i figur C.

Jeg vet at du har sett og antagelig opprettet lignende datovalgte menyer på nettsteder, så i dette eksemplet, hvordan gir du et alternativ for brukere å oppgi datoen uten en så stor nedtrekksmeny? Hold ned rullegardinmenyen for å velge valg, men sett deretter dagen og året som tekstfelt som vist i figur D.

Alt brukeren trenger å gjøre er å velge måned, deretter bla over og skrive inn dagen og deretter året og de omfattende nedtrekksvelgerne blir eliminert.

etiketter

Du vil gi brukerne dine de enkleste måtene å legge inn dataene sine på, og en av de beste fremgangsmåtene inkluderer å ha etikettene dine toppjustert i forhold til de tilknyttede skjemafeltene. Du kan se eksempler på dette i hvert av de fire foregående figurene ovenfor. Identifiseringsetiketten er plassert over de faktiske skjemafeltene eller topplinjert, slik at det er lettere for brukerne å gjenkjenne og behandle de tilknyttede inputfeltene. Toppjusterte etiketter er også bedre egnet for mobile enheter som er avhengige av komprimerte og mindre skjermer.

boksene

Jeg er sikker på at du har fylt ut et skjema og klikket på Send bare for å lure på om du husket å fjerne merket for boksen som ble automatisk merket, noe som betyr at du ville bli registrert på en månedlig kredittrapport, eller et lignende krenkende utvalg. Som en vanlig høflighet til kundene og brukerne dine, vennligst la det være opp til dem å ta beslutningen om å velge en avkrysningsrute, selv om det er for et gratis nyhetsbrev. Jeg kan ikke huske hvor mange nyhetsbrev som havnet i innboksen min fordi jeg glemte å fjerne merket for en avkrysningsrute.

Alternativer til captcha

Mange online-skjemaer i dag ender med en captcha-frase, slik at du kan gi dem beskjed om at du ikke er en robot. Selv om dette er en effektiv måte å redusere spamen din, er det du gjør å fortelle verden at du har et SPAM-problem, og at du slipper å laste arbeidet med å forhindre at SPAM på kundene og brukerne dine. Alternativer til captcha-teknikken er å bruke det som er kjent som en honeypot captcha, som egentlig er en usynlig captcha som roboter og roboter kan se, men folk ikke kan, og robotene kan ikke fortelle forskjellen mellom de virkelige formfeltene og det skjulte honningpotfeltet. Det er en del kontroverser med muligheten for at skjermlesere oppdager det skjulte feltet, men bruker skjerm: ingen vil sannsynligvis forhindre at de fleste skjermlesere kan velge de skjulte feltene. Et annet alternativ er å bruke den jQuery-baserte løsningen for å lage sikrere kontaktskjemaer uten CAPTCHAs, som bruker en enkel metode for å legge et lag med sikkerhet til ethvert kontaktskjema ved bruk av Ajax og jQuery.

Utelat valgfrie felt

Du vil holde skjemaene til et minimalt nivå, og store, langviklinger er bare dårlige. Du vil kun konsentrere deg om viktig informasjon. Hvis informasjonen skal brukes, må den være et påkrevd felt, nok sagt.

Hvorfor tilbakestill-knappen?

Hvorfor trenger vi en tilbakestilling eller avbryt-knapp likevel? Det har vi ikke! I det overveldende flertallet av tilfeller er det ikke nødvendig å tilbakestille eller avbryte. Hvorfor legge til en knapp til, spesielt en som tømmer hele formen, for godhetens skyld. Hvorfor vil du at brukerne dine skal tømme verdifulle data?

Skjemavalidering

Husk å legge til skjemavalidering i alle obligatoriske felt; Dette kan være en enkel valideringsteknikk på klientsiden ved hjelp av JavaScript. Og selv om det er vanskelig å forhindre at alle brukerfeil når du fyller ut skjemaene, vil god formvalidering også gi brukerne et forsprang for å se hva som kan være galt eller mangler mens de fortsatt skriver inn i skjemafelt.

Skjema-tipsene som er beskrevet i denne artikkelen, vil bidra til å øke skjemaets ytelse og forbedre brukeropplevelsene samtidig. Har du noen andre raske skjema tips som du bruker til skjemaene dine på nettet?

© Copyright 2021 | pepebotifarra.com