Webdanmark.com hedder nu IMPACT


Læs mere
Guide: Formulardesign og validering

Guide: Formulardesign og validering

1 kommentar 18. oktober 2016

Vil du have dine brugere til at købe noget på din shop, tilmelde sig dit nyhedsbrev eller lignende, så skal de udfylde en formular for at nå målet. Derfor er det en rigtig god idé at gøre det nemt og smertefrit for brugerne at udfylde din formular, så de ikke kaster håndklædet i ringen undervejs. Vi har skrevet den ultimative guide til korrekt formular-design, så du kan undgå, at dine formularer bliver conversion killers, og du dermed går glip af salg og leads.

Det er sjældent super sjovt at udfylde en formular på nettet og slet ikke de formularer, der tager en krig at udfylde. Jo flere felter du beder brugeren om at udfylde, jo større er risikoen for, at de lukker dit site og springer over til konkurrenten. Derfor bør du kun efterspørge de informationer, som du virkelig har brug for – tænk need-to-have, fremfor nice-to-have og overvej grundigt, hvilken information du kan få via andre veje eller på et andet tidspunkt.

Blot et enkelt felt for meget kan koste dig millioner:
(http://www.zdnet.com/article/expedia-on-how-one-extra-data-field-can-cost-12m/).

Gør din formular overskuelig

Betragt gerne dine formularer som en samtale, og forsøg så vidt muligt at skabe et naturligt flow. Det er vigtigt, at du spørger efter ting i den rigtige rækkefølge f.eks. navn, før du spørger efter adressen. Sørg også for at gruppere felter, der har en naturlig sammenhæng eller emne, og gør brug af whitespace for at gøre din formular overskuelig.

Brug kun en kolonne

Designer du dine formularer i to kolonner, kan der opstå tvivl hos dine brugere, om hvilken rækkefølge felterne bør udfyldes i. Skal jeg udfylde en række eller en kolonne af gangen? Derfor bør du altid kun have en kolonne i dine formularer.

Design dine formularer i en kolonne.
Design dine formularer i en kolonne.

Enkelte felter, som for eksempel postnummer og by, der hænger naturligt sammen, kan dog godt stå på samme linje.

Skjul aldrig labels

Labels fortæller brugerne, hvad det tilhørende felt indeholder, og er derfor en af de primære elementer til at gøre en formular overskuelig. Sørg for at holde dem korte men beskrivende for, hvad der skal være i feltet.

Placerer du et label inde i input-feltet, så det skjules, når feltet aktiveres, så gør du ikke dine brugere en tjeneste. Brugerne bliver ofte forstyrrede, mens de er ved at udfylde en formular, så der er ingen grund til at udfordre deres korttidshukommelse ved at skjule en label. Det gør det også svært for brugerne at skimte deres data igennem, når de er færdige med at udfylde formularen.

Får din designer en idé om, at labels skal være inde i input-feltet, så sørg for, at de stadig er synlige, når man aktiverer feltet. Dette kan gøres ved at flytte labelen op i toppen af input feltet – en teknik, der ofte omtales som “floating labels”.

Skjul aldrig dine labels.
Skjul aldrig dine labels.

Flere undersøgelser viser, at det er hurtigst for brugeren at scanne en formular, hvis labelen står over feltet fremfor ved siden af feltet.

Put dine labels over inputfeltet.
Put dine labels over inputfeltet.

Korrekt brug af whitespace til at samle elementer, der hører sammen, gør formularen nem at overskue og afkode.

Sørg også for, at det er tydeligt, hvilket felt de enkelte labels hører til.
Sørg også for, at det er tydeligt, hvilket felt de enkelte labels hører til.

Knapper

Gør det tydeligt, hvor man skal trykke, når man er færdig med at taste, og sørg gerne for at skabe en klar forventning om, hvad der sker, når man trykker på submit. Teksten på knappen bør fortælle brugeren, hvad der sker, når man trykker på den – og sørg for knappen ligner en knap.

Lav også tydelig forskel mellem primære og sekundære call-to-actions, og placér den primære call-to-action længst til højre, ellers risikerer du, at dine brugere trykker forkert.

Brug beskrivende tekster på knapper, og hav synlig forskel på sekundær og primær CTA.
Brug beskrivende tekster på knapper, og hav synlig forskel på sekundær og primær CTA.

Eksempler på tekst til knapper:

  • Opret konto
  • Gå til kassen
  • Send besked
  • Tilmeld nu

Drop med fordel ”fortryd” eller ”nulstil” knappen. Det er sjældent, at en bruger har brug for at starte en formular helt forfra – intet er mere irriterende end at skulle starte forfra, fordi man kommer til at trykke på den forkerte knap.

INPUT FELTER

Brug den rigtige input type

Du kan hjælpe dine brugere på vej ved at sørge for, at dine inputfelter har den rigtige type. For eksempel skal dit felt til telefonnummer i din mark-up sættes til type=”tel”, så får brugeren præsenteret det rigtige tastatur på touch-devices, og browserens auto-complete funktion kan finde ud af, hvilken data der skal i feltet.

Autocomplete på mobilen virker desværre ikke lige godt på alle felter. Overvej derfor, om det skal slås fra på felter, hvor det kan forventes, at brugeren indtaster noget, der ikke er i mobilens ordbog. Eksempelvis felter som e-mail, navn og adresse. Autocapitalize bør du slå fra på felter, hvor funktionen gør mere skade end gavn. På blandt andet e-mail feltet vil brugere være tilbøjelig til at stoppe op og rette deres e-mailadresse, hvis første bogstav automatisk er blevet stort.

Brug den rigtige felttype.
Brug den rigtige felttype.

TIP: Se Baymards cheatsheet for touch-keyboard-types: http://baymard.com/labs/touch-keyboard-types

Gør det tydeligt, hvilke felter der skal udfyldes

Selvom du kun bør efterspørge information, der er nødvendig, kan der opstå en situation, hvor et eller flere felter kun er relevant for nogle af dine brugere. Derfor bør det altid være tydeligt, hvilke felter der skal udfyldes, og hvilke man kan springe over. Det er endnu vigtigere på mobile enheder at være tydelig omkring det, da brugeren kun kan se få felter af gangen, og derfor bør det være tydeligt på hvert felt, om det er påkrævet eller valgfrit.

Gør det tydeligt, hvilke felter der skal udfyldes, og hvilke der er valgfri. Enten via tekst eller (*).
Gør det tydeligt, hvilke felter der skal udfyldes, og hvilke der er valgfri. Enten via tekst eller (*).

Vis også kun de felter, der er relevante netop nu. Ofte er nogle felter afhængige af andre felter, som for eksempel i et checkout forløb, hvor din faktureringsadresse måske er magen til din leveringsadresse.
Her kan det være en fordel ikke at vise felterne til leveringsadressen, med mindre brugeren vælger at leveringsadressen skal være anderledes.

Skjul ikke vigtig information

Har du felter, som kræver, at brugeren indtaster et specielt format eller overholder nogle regler – som eksempelvis kodeordsfelter – så gør gerne brugeren opmærksom på reglerne, inden de taster noget forkert ind.

Vis nyttig information såsom password krav på forhånd.
Vis nyttig information såsom password krav på forhånd.

Har du flere felter, der kræver en forklaring, kan det være nyttigt at vise forklaringen i et tooltip, når de aktiverer det pågældende felt for at undgå, at formularen bliver proppet med for meget information. Undgå også at lave for mange hjælpetekster. Brug kun hjælpetekster, der giver værdi, og vær kort og præcis.

Giv dine felter den rigtige størrelse

Dine inputfelter bør være fat-finger-proof, så det er muligt at ramme dem på et touch-device. Apples anbefaling er 44×44 pixels. Brug også en tekststørrelse, der er til at læse, så brugeren slipper for at skulle zoome ind.

Dine inputfelters længde bør også afspejle den data, der skal indtastes, så det bliver lettere for dine brugere at forstå, hvad der skal indtastes. Der er eksempelvis forskel på længden af et telefonnummer og et postnummer.

Har du flere felter, der kræver en forklaring, kan det være nyttigt at vise forklaringen i et tooltip, når de aktiverer det pågældende felt for at undgå, at formularen bliver proppet med for meget information. Undgå også at lave for mange hjælpetekster. Brug kun hjælpetekster, der giver værdi, og vær kort og præcis.

Validering

Når du har styr på udformningen og placeringen af dine labels, inputfelter og knapper, er det tid til at forholde sig til den data, som dine brugere taster ind i din formular. Valideringen bør foregå på det rette tidspunkt, det rette sted, i det rette sprog og rette farve.

Inline validering

I stedet for først at give brugeren feedback efter de har udfyldt hele formularen, bør du gøre det i real-tid. Det gør det langt hurtigere for brugeren at udfylde din formular korrekt, men det skal gøres på det rigtige tidspunkt.

Lad dine brugere tale ud

Det er ikke særligt høfligt at afbryde folk, derfor bør du først lave din inline validering, når de er færdige med at udfylde et felt. Fortæl ikke brugeren, at e-mailadressen er ugyldig, før man er færdige med at taste den, eller før man overhovedet er begyndt.

Valider f.eks. ikke e-mailfeltet, inden brugeren er færdig med at taste.
Valider f.eks. ikke e-mailfeltet, inden brugeren er færdig med at taste.

Enkelte typer felter giver mening at validere, mens brugeren stadig er ved at taste. Eksempelvis kan du oplyse om, at et password er stærkt nok i forbindelse med en brugeroprettelse.

Positiv validering

Det kan have en positiv effekt at belønne brugeren for korrekt udfyldelse med et flueben ved siden af feltet. Det kan give tryghed og fjerne tvivl, om feltet er korrekt udfyldt, samtidig med at det giver en følelse af fremgang. Husk at teste, om det virker på din formular, eller om det blot er forstyrrende, hvis du viser et flueben ud for deres navn, blot fordi de har skrevet x antal tegn – er navnet så korrekt udfyldt?

Skriv brugbare fejlmeddelser

Når dine brugere ikke indtaster det, du ønsker, er det vigtigste at fortælle dem, hvor fejlen er, hvad fejlen er, og hvordan de kan rette fejlen. Du kan bruge fejlmeddelelserne til at gøre brugeroplevelsen unik ved at tilpasse sproget til din virksomheds tone of voice.

Negative beskeder:

  • E-mail er forkert.
  • Fejl i adresse.
  • Telefonnummer er forkert.
  • Login fejlede.
  • E-mail eller password er forkert.

Bedre beskeder:

  • E-mailen indeholder ikke et @
  • E-mailen findes allerede.
  • Adressen indeholder ikke et husnummer. Skriv dit husnummer.
  • Telefonnummer indeholder bogstaver, hvilket ikke er tilladt. Telefonnummer må kun indeholde tal.
  • Brugernavnet findes, men det indtastede password er ikke korrekt.

Alternative beskeder:

  • Hovsa, din e-mail mangler vist et @
  • Pokkers, der er allerede en, der har snuppet det brugernavn.

PlacÉr fejlmeddelser, hvor de er relevante

Når dine brugere fejler, kan du gøre det lettere for dem at rette fejlen ved at sørge for at markere, hvilke felter der er fejl i, og hvad fejlen er. Du kan også overveje at bringe det felt, der er en fejl i, i fokus og scrolle til det. Er der flere felter med fejl, kan du overveje at have både en generel meddelelse i toppen af formularen og ved hvert felt, da det ikke er sikkert, at alle felter med fejl er synlige i brugers viewport – især på mobile enheder.

Vis fejlmeddelelsen ved det aktuelle felt.
Vis fejlmeddelelsen ved det aktuelle felt.

Benyt de farver, der hænger sammen med meddelelsens natur.
Benyt de farver, der hænger sammen med meddelelsens natur.

Hjælp brugeren, og vær overbærende

Sidst men ikke mindst, så lad systemet bære noget af byrden i stedet for brugeren. Accepter for eksempel at telefonnummeret kan skrives både med og uden mellemrum, eller at et CPR.nr. kan indeholde en bindestreg. Tving heller ikke dine brugere til at vælge, hvilken type deres kreditkort er, hvis du kan se det ud fra de fire første cifre.

Mål og test

Følger du disse guidelines, er du godt på vej, men du kan stadig gøre mere. Der er forskel på brancher og målgrupper, derfor bør du altid sætte tracking op på dine formularer, så du kan se på, hvilke felter folk hopper fra. Du kan også forsøge at optimere dine formularer via værktøjer som a/b splittest.

User Experience Consultant Morten Qvistgaard er UX-specialist hos IMPACT. Udover intuitive brugeroplevelser og konverteringsoptimering, så interesserer han sig for iværksætteri og landevejscykling.

Kontakt Morten

Send min besked

1 kommentar

  1. Pingback: Fem fejl du skal undgå i dit checkout flow

Knyt en kommentar til indlægget