Tag en hvilken som helst formular, der beder besøgende vælge fra en liste, og du vil lægge mærke til noget. Formularen fejler ikke, fordi den stiller for mange spørgsmål. Den fejler, fordi nogen har valgt den forkerte felttype til spørgsmålet. En dropdown, hvor radioknapper ville gå hurtigere. Afkrydsningsfelter, hvor kun ét svar giver mening. Radioknapper, hvor en dropdown ville spare halvdelen af pladsen på skærmen.
Det er ikke små detaljer. Forskning viser, at valget af felttype er en af de største grunde til, at besøgende dropper formularer. Ét forkert valg mellem dropdown, radioknap og afkrydsningsfelt kan få din frafaldsrate til at stige med 15 % eller mere. Den besøgende er ikke forvirret, fordi de ikke kan træffe en beslutning. De er forvirrede, fordi den felttype, du har valgt, sender det forkerte signal om, hvad formularen forventer.
Her gennemgår vi de praktiske regler for at vælge mellem dropdowns, radioknapper og afkrydsningsfelter. Du lærer, hvilken felttype der passer bedst til hvilke situationer, hvad hver af dem fortæller din besøgende, og hvordan du undgår de fejl, der får besøgende til at droppe formularer. Når du mestrer de valg, forstår du, hvorfor nogle brands får markant højere udfyldelsesrate på den samme formular, bare ved at skifte én felttype.
Derfor betyder felttypen mere for udfyldelsen, end de fleste tror
Et dropdownfelt, en radioknap og et afkrydsningsfelt indsamler alle et valg fra en liste. På overfladen ligner de hinanden. Forskellene er små. Effekten er det ikke.
Når en besøgende ser en dropdown, ved de, at de skal klikke for at se mulighederne. Mulighederne er skjult, indtil de klikker. Det koster et ekstra skridt. Når de ser radioknapper, er mulighederne synlige med det samme. De kan se alle på én gang og vælge uden at klikke først. Når de ser et afkrydsningsfelt, forstår de, at de kan vælge flere ting, ikke kun én.
De forskelle ændrer, hvordan besøgende bruger din formular. De ændrer den mentale belastning. De ændrer, hvor hurtigt nogen kan træffe deres valg. De ændrer, om formularen føles enkel eller overvældende. Når du får det rigtigt, dropper færre din formular. Når du får det forkert, klikker besøgende væk, fordi formularen ikke føles intuitiv, selv om den teknisk set virker.
Den værste fejl er at bruge den forkerte felttype til situationen. En dropdown til to valg føles som overkill. Radioknapper til 15 muligheder føles rodet og overvældende. Afkrydsningsfelter, hvor man kun skal vælge én mulighed, skaber forvirring om, hvad man kan vælge. Hvert forkert valg koster dig konverteringer.
Dropdowns passer bedst til lange lister, hvor standardværdien er ligegyldig
En dropdown er et felt, der skjuler mulighederne, indtil nogen klikker for at folde det ud. Valget ligger gemt bag et klik. Det gør dropdowns oplagte i én bestemt situation: Du har mange muligheder, og pladsen på skærmen er knap.
Brug en dropdown, når du har mere end syv muligheder. Så gør det formularen rodet at vise alle muligheder som radioknapper eller afkrydsningsfelter. En dropdown folder alle mulighederne sammen i ét felt, der næsten ikke fylder i højden. Det er derfor, dropdowns er standard i mobilformularer. En telefonskærm er smal. Dropdowns sparer plads.
Dropdowns virker også godt, når valget er oplagt, og den besøgende har et klart svar i hovedet. Tænk på at vælge land eller region. De fleste ved med det samme, hvilket de vil have. De kan skrive det første bogstav for at hoppe til muligheden, eller de kan klikke og scrolle for at finde den. Det går hurtigt, fordi spørgsmålet er let.
Men her fejler dropdowns. De fejler, når besøgende skal sammenligne muligheder, før de beslutter sig. De fejler, når listen er sorteret på en måde, besøgende ikke forventer. De fejler, når der ikke er nogen standardværdi, og den besøgende må klikke bare for at se, hvilke muligheder der findes.
Et eksempel: En formular beder besøgende vælge en madpræference i en dropdown. Mulighederne står i tilfældig rækkefølge (skaldyr, vegetar, kylling, oksekød, vegansk, glutenfri). Den besøgende ved ikke, hvilke muligheder der findes, uden at klikke. Når de klikker og ser listen, må de gennemgå alle for at beslutte sig. De kan ikke se dem alle på én gang og sammenligne. Det tager længere tid, end hvis mulighederne var synlige som radioknapper. Forskning fra en kendt UX-forskningsgruppe viser, at dropdowns gør beslutninger langsommere, når brugere skal vurdere flere muligheder.
Brug dropdowns, når besøgende ved, hvad de leder efter, og der er mange muligheder. Undgå dem, når besøgende skal sammenligne muligheder, eller når der er færre end syv valg.
Radioknapper giver mening, når du har mellem to og fem muligheder
En radioknap viser en rund cirkel ved siden af hver mulighed. Når nogen klikker på én, bliver de andre fravalgt automatisk. Kun én mulighed kan være valgt ad gangen. Derfor hedder de "radio"-knapper, ligesom på gamle bilradioer, hvor et tryk på en ny stationsknap slap den forrige.
Radioknapper fungerer fint, når besøgende har et klart, lille udvalg. Hvis din formular beder besøgende vælge en abonnementsplan, og du har tre niveauer, er radioknapper det perfekte valg. Den besøgende ser alle tre på én gang. De kan sammenligne pris, funktioner og fordele i hovedet med det samme. De klikker på én. Færdig. Ingen skjulte muligheder. Ingen forvirring.
Radioknapper virker også godt, når én mulighed tydeligvis er standarden eller det mest populære valg. Forestil dig en formular, der spørger, hvordan besøgende hørte om dit brand. Du tilbyder fem muligheder, og de fleste vælger "Google-søgning". Når radioknapperne er synlige, kan besøgende, der søgte på Google, se deres svar med det samme og klikke på det. De behøver ikke åbne en dropdown og undre sig over, om deres svar står på listen.
Forskningen er tydelig. Når mulighederne er synlige, træffer folk beslutninger hurtigere. Når folk kan se alle valg uden et ekstra klik, stiger udfyldelsesraten. Derfor slår radioknapper dropdowns, når listen er kort.
Radioknapper begynder at føles rodede omkring fem eller seks muligheder. Med mere end syv ser formularen overvældende ud. Hver radioknap fylder i højden. En formular med otte radioknapper til "Hvad er din primære interesse?" ser meget længere ud end nødvendigt. Så giver en dropdown mere mening.
Brug radioknapper, når du har to til fem muligheder, og besøgende har gavn af at sammenligne dem. Undgå dem ved mere end syv muligheder.
Afkrydsningsfelter er til valg, hvor flere svar er rigtige
Et afkrydsningsfelt ligner en lille firkant. Når man klikker, kommer der et flueben. I modsætning til radioknapper kan flere afkrydsningsfelter i samme gruppe være afkrydset samtidig. Det er den vigtigste forskel. Afkrydsningsfelter er ikke alternativer til hinanden. De er uafhængige valg.
Afkrydsningsfelter bruges, når spørgsmålet tillader mere end ét svar. En formular, der spørger "Hvilke af disse funktioner interesserer dig?", bruger afkrydsningsfelter, fordi en besøgende måske vælger produktanalyse, kundefeedback og automatisering på én gang. Hvert afkrydsningsfelt er sit eget uafhængige valg og ikke et alternativ til de andre.
Afkrydsningsfelter bruges også til samtykke. "Jeg accepterer vilkårene og betingelserne" er et afkrydsningsfelt, fordi det er en ja-eller-nej-erklæring. Den besøgende er enten enig eller ikke. På samme måde er "Send mig e-mailopdateringer" ét afkrydsningsfelt, fordi det er ét valg.
Forvirringen opstår, når man bruger afkrydsningsfelter, hvor man skulle bruge radioknapper, eller omvendt. En formular, der spørger "Hvilken plan vil du have?", skal ikke bruge afkrydsningsfelter. Man kan ikke ønske alle tre planer. Valgene udelukker hinanden. Her er radioknapper rigtige.
Afkrydsningsfelter har også samme problem med klumper som radioknapper. Mere end syv eller otte afkrydsningsfelter i en gruppe gør formularen overvældende. Mange afkrydsningsfelter ligner meget arbejde, selv om den besøgende kun skal vælge en eller to ting.
Brug kun afkrydsningsfelter, når besøgende reelt kan vælge flere muligheder på én gang. Undgå dem til spørgsmål med ét svar, og del mange afkrydsningsfelter op i mindre, beslægtede kategorier.
Sådan beslutter du, når du er i tvivl om, hvilken felttype du skal bruge
Valget er ofte klart. Men nogle gange ligger et spørgsmål i en gråzone. Du har fem muligheder og er ikke sikker på, om radioknapper eller en dropdown føles rigtigst. Her er beslutningstræet, der virker.
Trin 1. Kan den besøgende vælge mere end ét svar? Hvis ja, brug afkrydsningsfelter. Hvis nej, gå til trin to.
Trin 2. Hvor mange muligheder er der? Færre end seks muligheder: gå til trin tre. Mere end syv muligheder: brug en dropdown.
Trin 3. Har besøgende brug for at sammenligne mulighederne for at beslutte sig? Hvis ja, brug radioknapper, så alle muligheder er synlige på én gang. Hvis nej, og svaret er oplagt, virker både radioknapper og en dropdown, men radioknapper er en tand hurtigere.
Det enkle beslutningstræ løser 90 % af de spørgsmål om felttype, der dukker op, når du designer formularer. I de tilfælde, hvor du stadig er i tvivl, kan du teste begge muligheder med rigtige besøgende. Kør din formular med radioknapper i en uge, og mål udfyldelsesraten. Skift til en dropdown, kør den en uge til, og sammenlign. Rigtige data fra dine besøgende slår enhver designregel, for det er dine besøgende, der udfylder dine formularer.
Almindelige fejl, der sænker udfyldelsen, uden at nogen kan se hvorfor
Den første fejl er at bruge en dropdown til to eller tre muligheder. Det sker oftere, end du tror. En formular spørger "Hvordan fandt du os?", og mulighederne er "Søgemaskine", "Sociale medier" og "Anbefaling". En dropdown skjuler dem. Den besøgende må klikke på dropdownen for at se mulighederne. De ved ikke, hvilke der findes, uden at klikke. Det giver gnidning uden grund. Her er radioknapper hurtigere og føles mere intuitive.
Den anden fejl er at vise otte eller ni radioknapper, når en dropdown ville fylde en tiendedel af skærmen. En formular beder besøgende vælge deres land fra en liste med 195 lande. Radioknapper ville scrolle i det uendelige. En dropdown med søgning og autofuldførelse løser det med det samme. Nogle designere holder fast i radioknapper, fordi de føles mere intuitive, uden at se, at det intuitive forsvinder, når man skal scrolle gennem 50 muligheder.
Den tredje fejl er at bruge afkrydsningsfelter til et spørgsmål med ét svar. En formular spørger "Hvilket abonnementsniveau har du?" og viser tre afkrydsningsfelter, ét for hver plan. Besøgende bliver forvirrede. Kan de vælge alle tre? Afkrydsningsfeltet sender det forkerte signal. Radioknapper er klarere, fordi de visuelt viser, at kun ét kan vælges.
Den fjerde fejl er ikke at give tydelige instruktioner om, hvad et felt betyder. En gruppe afkrydsningsfelter dukker op med labelen "Interesser" og ingen forklaring. Den besøgende ved ikke, om de kun skal vælge ét eller så mange, som passer. Når der er tvivl, falder udfyldelsesraten. Tydelige labels løser det. "Vælg alle, der passer" eller "Vælg ét" fortæller den besøgende præcis, hvad feltet forventer.
Den femte fejl er at bruge standardværdier forkert. En dropdown, der starter med "Vælg en mulighed" som standard, føles ødelagt. En dropdown, der starter med "Danmark" som standard, føles hjælpsom, hvis det er der, de fleste besøgende kommer fra. Radioknapper, der starter uden noget valgt, tvinger den besøgende til at klikke på én. Radioknapper, der starter med det mest almindelige svar forvalgt, sparer den besøgende et klik. Små standardværdier som disse lægger sig sammen igennem en hel formular.
Hensyn til mobil, der ændrer valget af felttype
Mobiltelefoner er mindre. Det ændrer valget af felttype på vigtige punkter.
På en computer føles tre radioknapper til et enkelt valg naturlige og hurtige. På mobil står de samme tre radioknapper stablet lodret og fylder mere på skærmen end en dropdown. Så kan valget vende.
Mobilbesøgende bruger også formularen anderledes. De bruger tommelfingre til at trykke, ikke præcise museklik. Et afkrydsningsfelt på 44 gange 44 pixel er den mindste behagelige størrelse. Alt mindre bliver svært at ramme præcist. Radioknapper og afkrydsningsfelter skal have nok luft omkring sig, så et tryk ikke ved et uheld rammer en nabomulighed.
Dropdowns på mobil håndteres som regel af enhedens egen valgmenu. Når en besøgende klikker på en dropdown på en smartphone, ser de en vælger, der er lavet til mobil. Det er ofte hurtigere og mere behageligt end at scrolle gennem en lang liste på selve siden.
I mobilformularer bliver dropdowns mere attraktive, i takt med at pladsen på skærmen bliver dyrebar. Radioknapper er stadig gode til to til fire valg, fordi de er hurtige at trykke på. Men seks muligheder som radioknapper føles som scrolling. De samme seks muligheder i en dropdown føles renere og hurtigere på en telefon.
Test dine formularer på mobil. Det valg, der føltes rigtigt på computeren, kan føles anderledes, når nogen udfylder din formular på en lille telefonskærm.
Krav til tilgængelighed, som alle felttyper skal leve op til
Dropdowns, radioknapper og afkrydsningsfelter skal alle opfylde standarder for tilgængelighed, så folk, der bruger skærmlæsere eller tastaturnavigation, kan udfylde din formular.
Hver gruppe af radioknapper eller afkrydsningsfelter skal have en fieldset-label, der forklarer, hvad gruppen er til. Når en skærmlæserbruger tabber ind i gruppen, hører de labelen og forstår, hvad de vælger imellem. Uden den hører de bare "Radioknap et, radioknap to" uden sammenhæng.
Hver enkelt mulighed skal have en synlig label, man kan klikke på, ikke kun en lille radioknap eller et lille afkrydsningsfelt. Hvis en besøgende kun kan klikke præcis på firkanten for at vælge, har folk med mindre præcis motorik svært ved det. Når de kan klikke på labelen ved siden af afkrydsningsfeltet, bliver det lettere for alle. Det er ikke en tilgængelighedsfunktion kun for folk med handicap. Det gør formularer lettere for alle.
Dropdowns skal også have tydelig label. Labelen skal stå over eller til venstre for dropdownfeltet. Den valgte mulighed skal altid være synlig i den lukkede dropdown. Når en dropdown lukker efter et valg og viser den valgte værdi, ved den besøgende, at valget er registreret.
Tastaturbrugere skal kunne navigere i formularer med tabulator og piletaster. Radioknapper skal tillade navigation mellem mulighederne med piletaster. Afkrydsningsfelter skal kunne vælges med mellemrumstasten. Dropdowns skal kunne åbnes og lukkes med tastaturkommandoer. Hvis din formular kræver et museklik til noget af det, er tastaturbrugere blokeret.
Farve alene kan ikke vise, hvad der er valgt. En dropdown med en fremhævet mulighed bruger farve til at vise, hvad der er valgt. Det er en hjælp. Men brugere, der ikke kan se farver, skal også kunne se, hvad der er valgt, med et flueben, et ikon eller en visuel markering, der ikke kun afhænger af farve.
Sådan påvirker felttyperne opfattelsen af dit brand
Den felttype, du vælger, fortæller din besøgende noget om, hvor godt du forstår dem.
En dropdown til to eller tre muligheder signalerer, at den, der designede formularen, ikke tænkte meget over brugeroplevelsen. Den tilføjer et unødvendigt klik. Besøgende lægger mærke til det. Det føles som gnidning.
En radioknap, hvor en dropdown ville spare halvdelen af formularens længde, signalerer det samme. Formularen føles dårligt designet.
Men en formular, hvor man tydeligt har tænkt på brugeroplevelsen, hvor hurtige valg føles oplagte, og flere valg føles klare, signalerer noget andet. Den signalerer, at brandet respekterer den besøgendes tid. Den signalerer, at nogen har tænkt formularen grundigt igennem. Det er ikke bare bedre brugervenlighed. Det er et bedre brandindtryk.
Små valg som disse lægger sig sammen. En besøgende udfylder din formular, og hvert felt føles intuitivt. De bliver færdige hurtigere end forventet. De får en god fornemmelse af oplevelsen. Den fornemmelse følger med, når de tænker på dit brand.