Styrk konverteringen med bedre formularer

Du kan styrke konverteringen betragteligt ved at gennemtænke din formular. Brug vores 6 steps til at gavne brugeroplevelsen på dit site.

Det er hurtigt at smække en standardformular sammen, som kan det mest basale. Men ønsker man en gennemtænkt og brugervenlig løsning, som skaber resultater, skal der nogle flere designovervejelser til.

I artiklen guider vi dig gennem forskellige overvejelser, når du skal designe formularer, der visuelt kan løfte sitet, men vigtigst af alt kan styrke konverteringen og bringe dig tættere dine mål.

De 3 små ord

Du er sikkert på et tidspunkt blevet bombarderet af et monstrum af en formular, som er svær at tyde, og som fortsætter i uendeligheder. Chancen for, at du rent faktisk udfylder denne formular, er lille - medmindre du virkelig har et brændende ønske om at tilmelde dig ydelsen eller købe produktet. Andre gange sker det, at en formular bliver overset, eller at folk begynder at udfylde, men falder fra undervejs. Alt dette findes der råd for.

Når du skal optimere din formular, kan du starte med at tjekke, om du har følgende tre områder tilstrækkeligt integreret i din løsning. Allerede dér er du kommet langt:

  1. Overblik: Lav en klar struktur. Vis tydeligt, hvad der hører til hvor, og hvad du ønsker af brugeren.
     
  2. Vejledning: Giv klar feedback på både fejl og korrekte oplysninger (hjælpetekster)
     
  3. Enkelthed: Hold det enkelt, hold fokus og lad brugeren skrive mindst muligt.

Det er helt overordnet, hvad det kan koges ned til. De tre områder er gode at have i baghovedet, når en formular skal designes. Men lad os for de interesserede dykke lidt dybere ned i formularens forskellige dele og se på nogle eksempler.

Gå fra begynder til pro på 6 steps

Hvordan en formular er opbygget, afhænger naturligvis af formålet med den – oprettelse af profil, login, tilmelding til nyhedsbrev, køb af et produkt osv. Hvert formål kræver en tilpasset formular, men lykkes du med at løfte formularen fra en standardløsning til en velovervejet løsning, kan du flytte konverteringen i den rigtige retning.

Vi har taget udgangspunkt i følgende 6 elementer, der kendetegner en formular. Se elementerne som steps imod at videreudvikle din formular og skabe den bedste brugeroplevelse. Det er ikke nødvendigvis alt, der er relevant for netop din formular, så vurdér grundigt hver mulighed ud fra dine kunder, dine behov og din løsning.

  1. Input-felter og struktur
  2. Labels
  3. Selection
  4. Call-to-action knapper
  5. Optimeret indtastning
  6. Feedback

Step 1 - Input-felter og struktur

Skær ind til benet

Lad brugeren forholde sig til så få input-felter som muligt, så vejen til ”Tilmelding” er kort og ligetil. Overvej fx, om det giver mening at dele ”Navn” op i fornavn og efternavn (og endda nogle steder mellemnavn!). Måske er det gode detaljer i databasen, men prøv at veje det op imod, at brugeren slet ikke får udfyldt formularen. Det handler om at skære ind til benet og kun beholde det mest centrale. Lad systemet gøre arbejdet med at opdele navnene i databasen - ikke brugeren. Og du kan jo altid få flere oplysninger senere i forløbet.

Længden på felter

Det kan hjælpe på 'skanbarheden' at begrænse et felts længde til det ønskede indhold. Fx behøver et telefonnummer eller et postnummer ikke at være samme længde som et helt navn. Her kommer du nok til at lægge det æstetiske lidt på hylden, hvis du har trang til orden og lige kanter :-)

Kolonner

Lad formularen forblive i én kolonne, så vidt det er muligt. Her handler det igen om skanbarheden og overblikket for brugeren.

Gruppér relateret indhold

Det er altid en god idé at gruppere relateret indhold under logiske navne, som hjælper brugeren med at overskue fx en længere formular.

Her er et eksempel fra Cykelpartner.dk’s checkout-flow, hvor felterne er delt op i overskrifterne 1. Kundeinformation og 2. Leveringsvalg. Tilmed er der visuelt arbejdet med baggrundsskift for at styrke opdelingen yderligere.

Step-baseret

Har du en længere formular, kan det være en idé at bryde den op i mindre bidder, som brugeren lettere kan overskue. Du kan fx fjerne de andre felter, indtil den første gruppe af felter er udfyldt, og brugeren trykker “Næste”.

Den step-baserede formular bruges ofte til at overskueliggøre checkout-flows på en webshop. Det dog vigtigt at visualisere eller forklare flowets længde for brugeren, så de ikke klikker i blinde!

Struktur viser brugeren felter afhængigt af, hvad der er svaret tidligere. Dette ses ofte i spørgeskemaer, så man undgår spørgsmål som ”Hvis nej, ...” og ”Hvis ja, ...”.

Hav i mente, at den type formularer kan tage længere tid at udfylde.

Her ses checkout-flowet hos Kabelmix.dk, som benytter en step-baseret formular. Brugeren har fire overskuelige steps at gennemgå, og det er let at afkode formålet.

Step 2 - Labels

Loven om grafisk nærhed

Det er en stor fordel, at man håndhæver nærheden, så en label altid er tættere på sit input-felt end på det overliggende felt. Og her er vi virkelig nede i detaljen! På den måde bliver brugeren ikke forvirret og ved straks, hvad der hører sammen. Det virker som en lille ting, men alligevel betyder det alverden for den samlede oplevelse. Det er samtidig ikke en ting, der tager adskillige timer at udvikle - så det er bare om at få det gjort.

Brug af versaler

Som omtalt i noten ”7 tips til readable content” (i punkt 1 om fontvalg) er versaler altid lidt sværere at læse end små bogstaver. Overvej derfor grundigt, om det er nødvendigt at bruge versaler i dine labels.

Placeholders

Selvom det er fristende at spare plads ved at bruge placeholder-tekst som labels (at felt-navnet er skrevet indeni feltet), kan det skabe bøvl for brugeren, når man begynder at skrive og ikke kan huske, hvad der stod? Derfor er det i mange tilfælde bedst for brugeroplevelsen alligevel at tilføje en label.

Læsbarheden i placeholders kan som standard være dårlig, da kontrasten typisk er lavere. Det er muligt at ændre dette, men ikke 100% ens på alle browsers. Desuden kan brugen af placeholders få et input-felt til at se ud, som om det allerede er udfyldt.

Floating labels

Hvis pladsen er trang (som fx på mobilen), eller du alligevel er glad for placeholder-logikken, kan du overveje, om der evt. kan leges med en blanding af placeholder og label: Floating labels lader placeholderen 'slide op' og blive til en label efter klik i feltet.

Floating labels er brugt hos Cykelpartner.dk. Her ændres placeholderen til en synlig label, mens man er i gang med at foretage sin indtastning.

Forklarende overskrifter og hjælpetekster

Det er ikke kun labels, der skal være beskrivende. Det er lige så vigtigt at give hele formularen en forklarende overskrift og/eller en linje med uddybende tekst, som beskriver, hvorfor du skal udfylde formularen. Om det så handler om kort at forklare fordelene ved et nyhedsbrev, eller at de underliggende betalingsmuligheder er sikre og krypterede, giver det brugeren en tryghed, en forventning og en motivation for at gøre, hvad du ønsker.

Du kan med fordel placere forklaringen eller hjælpeteksten lige under et input-felt, eventuelt i kursiv. Husk dog igen at tage højde for nærhedsprincippet.

Kigger vi på Krifa.dk, er formålet med formularen beskrevet i toppen, og der indsat ekstra forklaring til CPR-nummeret, så brugeren ikke bliver utryg ved at afgive den information.

Step 3 - Selection

Vis valgmulighederne

Dropdowns er meget normale i en formular. Problemet er, at brugeren skal klikke én gang for at få de skjulte valgmuligheder vist og igen for at vælge. For at komme de to klik til livs er et alternativ at vise valgmulighederne som select-knapper fra starten, når der fx er mindre end seks muligheder. Dette sparer brugeren for et klik, samtidig med at man forventningsafstemmer bedre end med de skjulte elementer.

Det er især fordelagtigt at undlade dropdowns ved ”Antal”, når du vil lægge en vare i kurven på en webshop. Vil det ikke øge brugervenligheden, hvis der i stedet blev brugt to knapper med plus og minus? Specielt på de mindre touch-enheder, er det værd at overveje, om der er et alternativ til en dropdown.

Kan du se forskellen? Selvfølgelig kan du det. Det er en del nemmere at overskue, og du slipper også for at skulle tjekke i dropdown’en, om den ønskede størrelse overhovedet er tilgængelig. Det kan lette processen betydeligt.

Radio Buttons

Arbejder du i stedet med Radio Buttons, så placer dem under hinanden i stedet for på linje. Dette øger skanbarheden for brugeren, og gør det generelt bare nemmere at adskille dine Radio Buttons fra hinanden.

Step 4 – Call-to-action knapper

Beskrivende CTA

Lad din CTA-tekst være beskrivende. Det siger måske sig selv, men ikke desto mindre sker det en gang imellem, at den smutter. Lad den sige ”Tilmeld dig nyhedsbrev” i stedet for bare ”Send” eller ”Submit”. Brugeren får på den måde en mere præcis forventning om, hvad der vil ske, når der klikkes på knappen.

To knapper

Har du en sekundær CTA, er det en god idé at fremhæve den primære knap. Det er egentlig en meget fin tommelfingerregel i alt arbejde med digitalt design.

Hos silvan.dk er det ret nemt at skille den primære knap fra de sekundære. Derudover er det også positivt, at både den primære og sekundære knap leder dig i en retning - både på placering, men også med den lille pil i knapperne. På samme måde er det en fordel at knapperne er placeret både i toppen og bunden af skærmen - specielt, hvis du har mange produkter i kurven.

CTA’ernes tekster er godt uddybet, og sidst men ikke mindst bruges der plus og minus til at regulere “Antal”, som vi nævnte tidligere.

Step 5 - Optimeret indtastning

Input masking

Førhen var der en del gætværk involveret i at udfylde en formular. Skal jeg skrive mit telefonnummer med +45 foran? Skal jeg skrive datoen 08.09.16 eller 08-09-2016? Mangler jeg et tal i det lange kortnummer, jeg lige har udfyldt? Heldigvis kan vi i dag fjerne nogle af de overvejelser for brugeren og skabe en mere intuitiv oplevelse.

Input masking er en metode, der giver os mulighed for at forudbestemme elementer i input-feltet. Det kan fx være ved at placere bestemte tegn på forhånd, sætte en begrænsning på antal karakter eller automatisk generere et mellemrum efter x antal tegn. De forudbestemte tegn kan minde om placeholder-tekst, men det er de langt fra. Disse tegn forsvinder nemlig ikke og er med til at hjælpe brugeren med at overskue fx lange kortnumre eller telefonnumre. Det kan være noget så simpelt som at indsætte forudbestemte bindestreger, der kan optimere brugerens oplevelse betydeligt.

HTML attributter

I dag har vi muligheden for at hjælpe brugeren på vej med forskellige HTML attributter, som vi kan tildele input-felterne. Du kender AutoCorrect, specielt fra din telefon, som retter ord, der virker til at være stavet forkert. AutoComplete kender du sikkert fra browseren, hvor den viser en liste af tidligere indtastede søgeord. AutoCapitalize gør, at dine ord begynder med et stort bogstav, hvilket giver mening i fx input-felter til navne, men ikke til fx brugernavn og adgangskode.

Vi kan endda styre, hvilket keyboard brugeren får vist på mobiltelefonen, når der skal skrives i et input-felt. Standardkeyboardet (med bogstaver, tegn og tal) skal selvfølgelig frem, når der skal skrives. Men er det udelukkende tal, der skal indtastes, er der ingen grund til at vise standardkeyboardet, hvor tallene ikke er i fokus. Derimod giver det mening her at vise keyboardet udelukkende med tal, som når du skal ringe op fra din telefon (brug ”tel” i type value eller attributten pattern=”[0-9]”). Det er velegnet til felter med postnummer, kortnummer, telefonnummer osv.

Det tager bare meget længere tid at udfylde en formular fra sin mobil, hvis man ikke er hjulpet på vej af det mest optimale keyboard til de rette input-typer. Du kan finde meget mere hjælp til de rette indstillinger og muligheder lige her fra Baymard Institutes artikel.

Automatisk indtastning

Adresser og lignende tager tid at udfylde. Her kan det både være land, by, vej og postnummer, der skal udfyldes, og det slider på brugeroplevelsen. Hvis man vil optimere det, kan man arbejde med at dykke ned i en database, som gør arbejdet for din bruger. Fx kan et adresseopslag hos Google gøre, at adressen dukker op i en liste efter få tegn, og så er det bare at klikke på den rigtige adresse.

Du kan også slå adressen op via Krak ud fra et indtastet telefonnummer. I dette eksempel fra AV-cables.dk kan du se, hvor nemt og hurtigt det er at få felterne udfyldt - blot ved at hente oplysningerne fra et telefonnummer.

Et andet eksempel er et opslag i CVR.dk’s register på Clarus.dk. I bunden af sitet finder du en knap med ordene ”Få en Clarus-konto”. Ved klik på denne åbnes en formular, som efter indtastning af CVR-nummer, selv udfylder det meste af formularen. Det er værd at tage med i sine overvejelser om brugervenlighed.

Mulighederne er mange og ekstremt tidsbesparende for dine brugere. Måske tager det længere tid at udvikle og koster lidt mere på den korte bane, men til gengæld er der også gode chancer for, at det lønner sig i længden.

Step 6 - Feedback

Hvor er der fejl og hvorfor?

At give brugeren feedback er én ting, men at give brugeren den nødvendige feedback er en anden. Det er ikke altid nok at skrive i toppen af en formular, at ”3 felter var ikke korrekt udfyldt”. Brugeren kan sidde tilbage og tænke, hvilke felter er den gal med, og hvorfor er der fejl? Så overvej, om du skal skrive ud for hvert enkelt input-felt, hvad fejlen består i, så brugeren kan guides igennem bedst muligt. Tænk desuden meget over, at du ikke får brugeren til at føle sig dum: Husk et positivt sprog og måske endda lidt humor.

Løbende feedback

Det kan motivere brugeren at få godkendt sine korrekte indtastninger visuelt eller blive mindet om, at der er sket en fejl. Dette kan gøres med et grønt flueben for enden af input-feltet eller et rødt kryds. Undgå gerne at vise et fejl-ikon, så snart brugeren træder ind i et input-felt. Vent i stedet til brugeren er færdig med at skrive, eller helt til de bevæger sig til næste felt. Ellers er det forstyrrende.

Det er vigtigt at give brugeren hjælp på forhånd, fx med en medfølgende forklaring på CPR-nummeret eller en mulighed for at åbne en dialogboks med hjælp.

Krav eller valgfrihed

Overvej at droppe stjernen (*) og i stedet tilføje ordet ”valgfri” på de enkelte input-felter, hvor dette gør sig gældende. Men igen... hvis et felt er valgfrit, så tænk lige over, om det overhovedet behøver at være med?

Inkluder en forklarende tekst, der fortæller, hvorfor brugeren bør udfylde dette felt.

Sæt i gang...

Nu er du klar til at kaste dig ud i nye og mere brugervenlige formular, som - forhåbentlig - kan være med til at øge din konvertering! Der findes ikke en endelig opskrift på succesfulde formularer, så husk at have dit eget site og formål for øje, når du overvejer de enkelte punkter. Og test forskellige tilgange af. Men hvis du har fundet lidt inspiration i artiklen, er du sikkert på rette vej.

God fornøjelse. :)

Artiklen er oprindeligt skrevet af Novicells designafdeling, Beneath, og publiceret på Beneaths Facebook-side om digitalt design]