Varje fält du lägger till i ett formulär är ett beslut. Forskning visar att varje extra obligatoriskt fält sänker andelen som slutför med 10-15 %. Men att fråga efter mindre data betyder också att du får mindre data. Nyckeln till att flytta konverteringen är inte att ta bort fält helt. Det är att vara strategisk med vilka fält du markerar som obligatoriska, vilka du markerar som valfria och vilka du döljer tills de blir relevanta.
Vad obligatoriska fält faktiskt gör med konverteringen
När någon landar på ditt formulär skannar hen det på några sekunder. Inte ord för ord. Hen ser hur många fält det är, hur mycket hen behöver scrolla och om frågorna känns rimliga.
Obligatoriska fält skickar en signal. Varje fält säger "jag behöver det här av dig". Två eller tre obligatoriska fält känns hanterbart. Sju obligatoriska fält känns som en jobbansökan. Skillnaden i avhopp är inte liten.
Ta vilken kassa som helst i e-handel så ser du det i praktiken. Om postnummerfältet är markerat som valfritt men leveransadressen är markerad som obligatorisk stannar kunderna. Om båda är obligatoriska och inte tydligt markerade rusar övergivna varukorgar i höjden. Psykologin är enkel. Osäkra besökare lämnar.
Regeln om att markera minoriteten: när du markerar obligatoriskt och när valfritt
De flesta formulär är obalanserade. Ett kontaktformulär kan ha fem obligatoriska fält och ett valfritt. Ett registreringsformulär kan ha åtta obligatoriska fält och två valfria. I de fallen slösar du utrymme och mental energi på att markera varje obligatoriskt fält.
Det bättre sättet är att bara markera minoriteten. Om 80 % av dina fält är obligatoriska, markera bara de valfria med ordet "(valfritt)" bredvid etiketten. Omarkerade fält antas vara obligatoriska. Det minskar visuellt brus och får formuläret att kännas kortare.
Titta å andra sidan på komplexa formulär där obligatoriska fält är utspridda. Försäkringsansökningar, låneformulär och enkäter över flera sidor har ofta obligatoriska och valfria fält blandade. När det är så, markera båda. Använd en asterisk (*) för obligatoriska fält och "(valfritt)" för valfria fält. Tydlig märkning slår underförstådda konventioner.
Regeln är enkel. Markera minoriteten, vad den nu är.
Så märker du obligatoriska fält så att folk faktiskt ser dem
En asterisk ensam räcker inte. Användare av skärmläsare kan inte höra en asterisk. De som inte har svenska som modersmål känner kanske inte igen konventionen. Användare som scrollar snabbt kan missa en liten symbol helt.
Lösningen är märkning i flera lager. Du behöver asterisken, ordet "obligatoriskt" och båda måste vara både synliga och tydliga i koden.
Använd en asterisk och para ihop den med ordet obligatoriskt
Forskning visar att en röd asterisk (*) tillsammans med texten "obligatoriskt" i etiketten tar bort förvirring. Asterisken fångar blicken. Ordet "obligatoriskt" bekräftar vad den betyder. Tillsammans fungerar de för seende användare, användare av skärmläsare och personer med kognitiva funktionsnedsättningar.
Prova E-postadress * (Obligatoriskt) eller Telefonnummer * följt av text som säger "Fält markerade med asterisk är obligatoriska." Det formatet fungerar bra.
Lägg till en förklaring av vad obligatoriskt betyder
Innan formulärfälten börjar, ta med en enkel rad som säger "* = obligatoriskt fält" eller "Fält markerade med asterisk (*) är obligatoriska." Meningen är kort och gör att användare slipper tolka symbolen själva.
Kombinera detta med HTML-attribut i koden. Lägg till required eller aria-required="true" på varje obligatoriskt inmatningsfält. Det talar om för webbläsaren och skärmläsaren att fältet är obligatoriskt utan att enbart förlita sig på visuell design.
Färg spelar mindre roll än kontrast och position
Röda asterisker är konventionen, men den verkliga frågan är kontrast. Om din asterisk är svagt grå eller smälter in i etiketten missar användare med nedsatt syn den. Gör asterisken fet och se till att den har stark kontrast mot bakgrunden.
Positionen spelar också roll. Placera asterisken direkt efter etikettens text, inte svävande för sig. Det håller signalen "obligatoriskt" visuellt kopplad till fältets namn och lätt att skanna från vänster till höger.
När det är bättre att dölja valfria fält än att markera dem
Vissa formulär tjänar på ett annat sätt som kallas progressiv visning. Dölj valfria fält tills de blir relevanta. Det fungerar när ditt formulär har en tydlig huvudväg och valfria fält bara gäller vissa användare.
Ta ett bokningsformulär. "Varumärkesnamn" kan vara obligatoriskt för företagskunder men valfritt för privatpersoner. I stället för att markera det som valfritt och belamra huvudvägen, visa det först när användaren väljer "bokningstyp" som "företag". De ser aldrig fältet om det inte gäller dem.
Progressiv visning får formulär att kännas kortare
Formulär som döljer valfria fält tills de behövs konverterar bättre än formulär som visar allt på en gång. Skälet är upplevelsen. Ett formulär som visar 12 fält (även om 3 är valfria) känns längre än ett som visar 9 fält och avslöjar 3 till utifrån användarens svar.
Villkorsstyrd logik visar fält utifrån tidigare svar
Moderna formulärbyggare stöder detta inbyggt. När en användare väljer ett visst alternativ dyker ett nytt fält upp. När hen ändrar alternativet försvinner fältet. Formuläret anpassar sig efter användarens behov i realtid.
Här kommer WEMASY:s villkorsstyrda logik till sin rätt. Du kan ställa in regler som "om branschen är vård, visa fältet för HIPAA-efterlevnad" eller "om budgeten är under $1000, visa betalningsalternativ för små planer". Användaren ser bara frågor som är relevanta för hen.
Villkorligt obligatoriska fält: obligatoriska bara när det är rimligt
Avancerad formulärdesign tar det ett steg längre. Vissa fält är valfria som standard men blir obligatoriska utifrån en användares tidigare svar. Det är den bästa balansen mellan datainsamling och användarupplevelse.
Anta att "Berätta om ditt varumärke" är valfritt vid en gratis registrering. Men om användaren väljer "Jag äger ett varumärke" i en rullgardinsmeny blir samma fält obligatoriskt. Formuläret ändrar kravet direkt.
Visa övergången tydligt
När ett fält ändras från valfritt till obligatoriskt måste användaren få veta det. Det bästa sättet är att lägga till asterisken och etiketten "(Obligatoriskt)" direkt när fältet blir obligatoriskt. Vissa formulärbyggare markerar ändringen med en diskret animation eller färgskiftning. Det signalerar att något har ändrats utan att vara störande.
Misstag som tyst förstör andelen som slutför
Även med rätt regler på plats växer avhoppen av små misstag. Se upp för dessa.
Blanda symboler utan förklaring
Att använda asterisk på vissa fält och texten "(obligatoriskt)" på andra skapar förvirring. Välj ett sätt och håll dig till det. Enhetlighet i hela ditt varumärke spelar större roll än vilken symbol du väljer.
Markera valfria fält som obligatoriska av misstag
Det är vanligt i formulär som flyttats från gamla system eller när kraven ändras mitt i ett projekt. Ett fält märks som valfritt men backend kräver det, eller tvärtom. Användare fyller i ett fält de trodde var valfritt, skickar formuläret och får ett fel. De hoppar av.
Dölja information som användare behöver se
Progressiv visning fungerar när det dolda fältet verkligen är valfritt eller verkligen villkorligt. Det slår tillbaka när du döljer obligatoriska fält bakom komplex logik. Om ett fält är nödvändigt, visa det. Låt inte användare undra om de behöver fylla i det.
Använda asterisker utan förklarande text
En asterisk ensam är ett mysterium för personer som aldrig har sett konventionen. Utan förklaring hoppar vissa användare över fältet i tron att det är valfritt. Lägg till förklaringen. En rad högst upp. Fem ord. Det förebygger avhopp.
Ändra obligatoriskt-status mitt i formuläret
Om ett fält är obligatoriskt, behåll det så. Om du behöver göra det valfritt senare på grund av ändrade behov i varumärket, gör en fullständig genomgång. Ändra inte tyst ett fält från obligatoriskt till valfritt och hoppas att ingen märker det. Användare märker det, och de blir förvirrade.
Så hjälper WEMASY dig med obligatoriska och valfria fält
WEMASY:s formulärbyggare ger dig full kontroll över krav på fält utan att röra kod. Ställ in vilket fält som helst som obligatoriskt eller valfritt i editorn. Lägg till villkorsstyrd logik som gör ett fält obligatoriskt bara när specifika villkor är uppfyllda. Lägg till egna förklaringar för symbolerna för obligatoriska fält.
Du kan också se data i realtid om vilka fält som orsakar flest avhopp. Om ett visst valfritt fält bromsar din konvertering kan du dölja det med progressiv visning. Om användare blir förvirrade av ett obligatoriskt fält kan du i stället byta till att bara markera valfria fält och se vilket sätt som konverterar bäst.