Ta vilket formulär som helst som ber besökare välja bland alternativ, så märker du något. Formuläret misslyckas inte för att det ställer för många frågor. Det misslyckas för att någon valde fel fälttyp för frågan. En rullgardinslista där radioknappar hade gått snabbare. Kryssrutor där bara ett svar är rimligt. Radioknappar där en rullgardinslista hade sparat halva skärmytan.
Det här är inga små detaljer. Forskning visar att valet av fälttyp är en av de vanligaste orsakerna till att besökare överger formulär. Ett enda felaktigt val mellan rullgardinslista, radioknapp och kryssruta kan få andelen som överger formuläret att öka med 15 % eller mer. Besökaren är inte förvirrad för att hen inte kan bestämma sig. Hen är förvirrad för att fälttypen du valde skickar fel signal om vad formuläret förväntar sig.
Den här artikeln går igenom de praktiska reglerna för att välja mellan rullgardinslistor, radioknappar och kryssrutor. Du får veta vilken fälttyp som passar bäst i olika situationer, vad var och en signalerar till besökaren och hur du undviker misstagen som får besökare att överge formulär. Behärskar du de här besluten förstår du varför vissa varumärken får dramatiskt högre andel som fyller i samma formulär, bara genom att byta en fälttyp.
Därför påverkar fälttypen hur många som fyller i formuläret mer än de flesta tror
En rullgardinslista, en radioknapp och en kryssruta samlar alla in ett val ur en lista. På ytan verkar de utbytbara. Skillnaderna är subtila. Effekten är det inte.
När en besökare ser en rullgardinslista vet hen att hen måste klicka för att se alternativen. Alternativen är dolda tills hen klickar. Det kräver ett extra steg. När hen ser radioknappar syns alternativen direkt. Hen kan skanna alla på en gång och välja utan att klicka först. När hen ser en kryssruta förstår hen att hen kan välja flera alternativ, inte bara ett.
De här skillnaderna ändrar hur besökare använder formuläret. De ändrar den mentala belastningen. De ändrar hur snabbt någon kan fatta sitt beslut. De ändrar om formuläret känns enkelt eller överväldigande. Gör du rätt är det färre som överger formuläret. Gör du fel klickar besökare bort sig för att formuläret inte känns intuitivt, även om det tekniskt fungerar.
Det värsta misstaget är att använda fel fälttyp för situationen. En rullgardinslista för två val känns som överdrift. Radioknappar för 15 alternativ känns plottrigt och överväldigande. Kryssrutor när någon bara ska välja ett alternativ skapar förvirring om vad som går att välja. Varje felval kostar konverteringar.
Rullgardinslistor passar bäst för långa listor där förvalet inte spelar roll
En rullgardinslista är ett fält som döljer alternativen tills någon klickar för att fälla ut det. Valet ligger bakom ett klick. Därför passar rullgardinslistor perfekt i en särskild situation. Du har många alternativ och lite skärmyta.
Använd en rullgardinslista när du har fler än sju alternativ. Då känns det plottrigt att visa alla alternativ som radioknappar eller kryssrutor. En rullgardinslista packar ihop alla alternativ i ett enda fält som tar nästan ingen höjd. Därför är rullgardinslistor standard i mobilformulär. En telefonskärm är smal. Rullgardinslistor sparar skärmyta.
Rullgardinslistor fungerar också bra när valet är självklart och besökaren har ett tydligt svar i huvudet. Tänk på att välja land eller delstat. De flesta vet direkt vilket de vill ha. De kan skriva första bokstaven för att hoppa till alternativet, eller klicka och scrolla tills de hittar det. Interaktionen går fort eftersom frågan är lätt.
Men här misslyckas rullgardinslistor. De misslyckas när besökare behöver jämföra alternativ innan de väljer. De misslyckas när listan är sorterad på ett sätt som besökare inte förväntar sig. De misslyckas när det saknas förvalt värde och besökaren måste klicka bara för att se vilka alternativ som finns.
Ett exempel: ett formulär ber besökare välja kostpreferens i en rullgardinslista. Alternativen står i slumpmässig ordning (fisk och skaldjur, vegetarisk, kyckling, nötkött, vegansk, glutenfri). Besökaren vet inte vilka alternativ som finns utan att klicka. När hen klickar och ser listan måste hen ta in alla för att kunna välja. Hen kan inte se dem alla på en gång för att jämföra. Det tar längre tid än om alternativen visades som radioknappar. Forskning från Nielsen Norman Group visar att rullgardinslistor gör beslut långsammare när användare behöver utvärdera flera alternativ.
Använd rullgardinslistor när besökare vet vad de letar efter och alternativen är många. Undvik dem när besökare behöver jämföra alternativ eller när det finns färre än sju val.
Radioknappar passar när du har mellan två och fem alternativ
En radioknapp visar en rund ruta bredvid varje alternativ. När någon klickar på en avmarkeras de andra automatiskt. Bara ett alternativ kan vara valt åt gången. Därför heter de "radio"-knappar, som gamla bilradior där ett tryck på en ny stationsknapp släppte den förra.
Radioknappar fungerar utmärkt när besökare har en tydlig, liten uppsättning val. Om ditt formulär ber besökare välja prenumerationsplan och du erbjuder tre nivåer är radioknappar det perfekta valet. Besökaren ser alla tre på en gång. Hen kan jämföra pris, funktioner och fördelar i huvudet direkt. Hen klickar på en. Klart. Inga dolda alternativ. Ingen förvirring.
Radioknappar fungerar också bra när ett alternativ tydligt är förvalet eller det populäraste. Tänk dig ett formulär som frågar hur besökare hörde talas om ditt varumärke. Du erbjuder fem alternativ och de flesta väljer "Google-sökning". När radioknapparna syns kan besökare som sökte på Google se sitt svar direkt och klicka på det. De behöver inte öppna en rullgardinslista och undra om deras svar finns med.
Användbarhetsforskningen är tydlig. När alternativen syns fattar människor beslut snabbare. När människor ser alla val utan ett extra klick ökar andelen som fyller i formuläret. Därför slår radioknappar rullgardinslistor för kortare listor.
Radioknappar börjar kännas plottriga vid fem eller sex alternativ. Lägg till fler än sju så ser formuläret överväldigande ut. Varje radioknapp tar höjd. Ett formulär med åtta radioknappsalternativ för "Vad är ditt främsta intresse?" ser mycket längre ut än nödvändigt. Då är en rullgardinslista rimligare.
Använd radioknappar när du har två till fem alternativ och besökare tjänar på att jämföra dem. Undvik dem för fler än sju alternativ.
Kryssrutor är till för val där flera svar är rätt
En kryssruta ser ut som en liten fyrkant. När man klickar visas en bockmarkering. Till skillnad från radioknappar kan flera kryssrutor i samma grupp vara ikryssade samtidigt. Det är den viktiga skillnaden. Kryssrutor är inte alternativ till varandra. De är oberoende val.
Kryssrutor passar när frågan tillåter fler än ett svar. Ett formulär som frågar "Vilka av de här funktionerna intresserar dig?" använder kryssrutor, eftersom en besökare kan välja produktanalys, kundåterkoppling och automationsintegration på en gång. Varje kryssruta är ett eget, oberoende val och inte ett alternativ till de andra.
Kryssrutor passar också för godkännanden. "Jag godkänner villkoren" är en kryssruta eftersom det är ett ja-eller-nej-påstående. Besökaren godkänner eller inte. På samma sätt är "Skicka mig e-postuppdateringar" en enda kryssruta eftersom det är ett enda val.
Förvirringen uppstår när man använder kryssrutor där man borde använda radioknappar, eller tvärtom. Ett formulär som frågar "Vilken plan vill du ha?" ska inte använda kryssrutor. Ingen kan vilja ha alla tre planerna. Valen utesluter varandra. Radioknappar är rätt här.
Kryssrutor har samma problem med packning som radioknappar. Fler än sju eller åtta kryssrutor i en grupp får formuläret att kännas överväldigande. Visuellt ser många kryssrutor ut som mycket jobb, även om besökaren bara behöver välja en eller två.
Använd kryssrutor bara när besökare med rätta kan välja flera alternativ samtidigt. Undvik dem för frågor med ett enda val, och dela upp stora mängder kryssrutor i mindre, närliggande kategorier.
Så bestämmer du dig när du är osäker på vilken fälttyp du ska använda
Beslutet är ofta tydligt. Men ibland ligger en fråga i en gråzon. Du har fem alternativ och är osäker på om radioknappar eller en rullgardinslista känns rätt. Här är beslutsträdet som fungerar.
Steg 1. Kan besökaren välja mer än ett svar? Om ja, använd kryssrutor. Om nej, gå till steg två.
Steg 2. Hur många alternativ finns det? Färre än sex alternativ, gå till steg tre. Fler än sju alternativ, använd en rullgardinslista.
Steg 3. Behöver besökare jämföra alternativen för att välja? Om ja, använd radioknappar så att alla alternativ syns på en gång. Om nej och svaret är självklart fungerar antingen radioknappar eller en rullgardinslista, men radioknappar går lite snabbare.
Det här enkla beslutsträdet löser 90 % av frågorna om fälttyp som dyker upp när man utformar formulär. I de fall du fortfarande är osäker kan du testa båda alternativen med riktiga besökare. Kör formuläret med radioknappar i en vecka och mät hur många som fyller i. Byt till en rullgardinslista, kör en vecka till och jämför. Verkliga data från dina besökare slår alla designregler, eftersom det är dina besökare som fyller i dina formulär.
Vanliga misstag som sänker andelen som fyller i, utan att någon förstår varför
Det första misstaget är att använda en rullgardinslista för två eller tre alternativ. Det händer oftare än man tror. Ett formulär frågar "Hur hittade du oss?" och alternativen är "Sökmotor", "Sociala medier" och "Rekommendation". En rullgardinslista döljer de här alternativen. Besökaren måste klicka på listan för att se dem. Hen vet inte vilka alternativ som finns utan att klicka. Det skapar friktion helt i onödan. Radioknappar är snabbare här och känns mer intuitiva.
Det andra misstaget är att visa åtta eller nio radioknappar när en rullgardinslista hade tagit en tiondel av skärmytan. Ett formulär ber besökare välja land bland 195 länder. Radioknappar skulle scrolla i evighet. En rullgardinslista med sökning och autokomplettering löser det direkt. Vissa designers håller fast vid radioknappar för att de känns mer intuitiva, utan att inse att det intuitiva försvinner när man måste scrolla genom 50 alternativ.
Det tredje misstaget är att använda kryssrutor för en fråga med ett enda val. Ett formulär frågar "Vilken prenumerationsnivå har du?" och visar tre kryssrutor, en för varje plan. Besökare blir förvirrade. Kan de välja alla tre? Kryssrutan skickar fel signal. Radioknappar är tydligare eftersom de visuellt visar att bara en kan väljas.
Det fjärde misstaget är att inte ge tydliga instruktioner om vad ett fält betyder. En grupp kryssrutor visas med etiketten "Intressen" och ingen förklaring. Besökaren vet inte om hen ska välja bara en eller så många som passar. När det finns oklarhet sjunker andelen som fyller i. Tydliga etiketter löser det. "Välj alla som passar" eller "Välj ett" talar om exakt vad fältet förväntar sig.
Det femte misstaget är att använda förvalda värden fel. En rullgardinslista som börjar med "Välj ett alternativ" som förval känns trasig. En rullgardinslista som börjar med "Sverige" som förval känns hjälpsam om det är där de flesta besökare finns. Radioknappar utan något förvalt alternativ tvingar besökaren att klicka på ett. Radioknappar med det vanligaste svaret förvalt sparar besökaren ett klick. De här små förvalen ger stor effekt över ett helt formulär.
Mobilaspekter som ändrar valet av fälttyp
Mobiltelefoner är mindre. Det ändrar valet av fälttyp på viktiga sätt.
På datorn känns tre radioknappar för ett enkelt val naturligt och snabbt. På mobilen staplas samma tre radioknappar lodrätt och tar mer skärmyta än en rullgardinslista skulle göra. Beslutet kan bli ett annat.
Mobilbesökare interagerar också annorlunda. De använder tummarna för att trycka, inte exakta musklick. En kryssruta på 44 gånger 44 pixlar är den minsta bekväma storleken. Allt mindre blir svårt att träffa. Radioknappar och kryssrutor behöver tillräckligt med utrymme runt sig så att man inte råkar trycka på ett angränsande alternativ.
Rullgardinslistor på mobilen hanteras oftast av enhetens egen valmeny. När en besökare klickar på en rullgardinslista på en smartphone visas en mobilanpassad väljare. Det går ofta snabbare och är bekvämare än att scrolla genom en lång lista på själva sidan.
I mobilformulär blir rullgardinslistor mer attraktiva när skärmytan blir dyrbar. Radioknappar är fortfarande bra för två till fyra val eftersom de är snabba att trycka på. Men sex alternativ som radioknappar känns som scrollande. Samma sex alternativ i en rullgardinslista känns renare och snabbare på en telefon.
Testa dina formulär på mobilen. Beslutet som kändes rätt på datorn kan kännas annorlunda när någon fyller i formuläret på en telefonskärm på tio centimeter.
Tillgänglighetskrav som varje fälttyp måste uppfylla
Rullgardinslistor, radioknappar och kryssrutor måste alla uppfylla tillgänglighetsstandarder så att personer som använder skärmläsare eller tangentbordsnavigering kan fylla i ditt formulär.
Varje grupp av radioknappar eller kryssrutor behöver en fieldset-etikett som förklarar vad gruppen gäller. När en skärmläsaranvändare tabbar in i gruppen hör hen etiketten och förstår vad hen väljer bland. Utan den hör hen bara "Radioknapp ett, Radioknapp två" utan sammanhang.
Varje enskilt alternativ behöver en synlig, klickbar etikett, inte bara en liten radioknapp eller kryssruta. När en besökare måste klicka exakt på kryssrutans fyrkant för att välja den har personer med sämre finmotorik svårt. När hen kan klicka på etiketten bredvid kryssrutan blir valet enklare för alla. Det här är ingen tillgänglighetsfunktion bara för personer med funktionsnedsättning. Det gör formulär enklare för alla.
Rullgardinslistor behöver också tydliga etiketter. Etiketten ska ligga ovanför eller till vänster om fältet. Det valda alternativet ska alltid synas i den stängda listan. När en lista stängs efter valet och visar det valda värdet vet besökaren att valet registrerades.
Tangentbordsanvändare behöver navigera genom formulär med tabb- och piltangenter. Radioknappar ska gå att växla mellan med piltangenterna. Kryssrutor ska gå att välja med mellanslag. Rullgardinslistor ska gå att öppna och stänga med tangentbordet. Om ditt formulär kräver ett musklick för något av detta stängs tangentbordsanvändare ute.
Enbart färg kan inte visa det valda läget. En rullgardinslista med ett markerat alternativ använder färg för att visa vad som är valt. Det är hjälpsamt. Men användare som inte ser färg ska också kunna se vad som är valt, genom en bockmarkering, en ikon eller en visuell markering som inte bara beror på färg.
Så påverkar fälttyperna uppfattningen av ditt varumärke
Fälttypen du väljer säger något till besökaren om hur väl du förstår hen.
En rullgardinslista för två eller tre alternativ signalerar att den som utformade formuläret inte tänkte särskilt mycket på användarupplevelsen. Den lägger till ett onödigt klick. Besökaren märker det. Det känns som friktion.
En radioknapp där en rullgardinslista hade sparat halva formulärets längd signalerar samma sak. Formuläret känns dåligt utformat.
Men ett formulär där någon tydligt har tänkt på användarupplevelsen, där snabba val känns självklara och flera val känns tydliga, signalerar något annat. Det signalerar att varumärket bryr sig om besökarens tid. Det signalerar att någon har tänkt igenom formuläret noga. Det är inte bara bättre användbarhet. Det är en bättre uppfattning av varumärket.
Små beslut som de här läggs ihop. En besökare fyller i ditt formulär och varje fält känns intuitivt. Hen blir klar snabbare än väntat. Hen känner sig nöjd med mötet. Den känslan följer med in i hur hen uppfattar ditt varumärke.