Ett formulärfält känns inte som något litet när du fyller i ett. Det är ögonblicket då du bestämmer dig för att fortsätta eller gå därifrån. Och det ögonblicket beror helt på om själva fältet är tydligt, om instruktionerna är lätta att följa och om felmeddelandena är begripliga när något går fel.
Studier visar att 67 % av människorna lämnar formulär för att de är svåra att ta sig fram i. Det mesta av svårigheten handlar inte om att man frågar efter för mycket information. Det handlar om hur informationen presenteras på fältnivå. En enda oklar etikett, en förvirrande hjälptext eller ett vagt valideringsfel kan hindra någon från att slutföra ett formulär som hen faktiskt vill fylla i.
Den här artikeln går igenom praktiska regler, utan teori, som gör formulärfält från friktionspunkter till verktyg för konvertering. Du lär dig hur etiketter ska fungera, varför hjälptext inuti fältet fallerar när designers förlitar sig på den och hur valideringsmeddelanden avgör om användare litar på ditt formulär eller lämnar det. Behärska de här detaljerna så förstår du varför vissa varumärken får 80 % som slutför formulär medan andra kämpar för att nå 50 %.
Vad som gör att ett formulärfält känns enkelt eller överväldigande
Ett formulärfält är mer än en inmatningsruta. Det är ett samtal mellan ditt varumärke och besökaren. Fältet ställer en fråga, etiketten förklarar vad du vill ha och hjälptexten ger en vink. Valideringsmeddelandet svarar när något inte stämmer riktigt. Varje del samverkar för att skapa en känsla.
Den känslan kan vara "Jag vet exakt vad jag ska göra och jag litar på det här" eller "Jag vet inte vad som ska stå här och formuläret verkar trasigt." Skillnaden är inte tur. Den är struktur.
När fälten är enkla känns de lätta. Etiketten talar om vilken information som hör hemma i fältet innan du klickar. Själva fältet har gott om plats att skriva i. Om du gör ett misstag talar felmeddelandet om exakt vad som gick fel och hur du rättar det. Du tar dig igenom formuläret med självförtroende.
När fälten är svåra skapar de friktion. Etiketten kan saknas eller vara oklar. Du börjar skriva och hjälptexten försvinner, så du glömmer vad du skulle skriva. Ett fel dyker upp utan att säga vad problemet är, och du får gissa. Varje fält blir ett litet pussel att lösa. Efter tre eller fyra sådana pussel går folk.
Etiketter i formulär: gör dem tydliga och alltid synliga
En etikett är ingen dekoration. Den är instruktionen som talar om vilken information som hör hemma i ett fält. De bästa etiketterna är tydliga, beskrivande och alltid synliga. Inte dolda. Inte försvinnande. Alltid där.
Så här visar forskningen. När en etikett sitter direkt ovanför ett fält och förblir synlig medan användaren skriver ökar andelen som slutför. När etiketter ersätts av hjälptext som försvinner så fort någon börjar skriva sjunker andelen. Orsaken är enkel. Människor behöver komma ihåg vad de skrivit, leta efter stavfel och kontrollera sitt arbete innan de skickar. Om etiketten försvinner kan de inte göra något av det.
Etiketten ska beskriva fältet så att den besvarar en fråga. Vilken information hör hemma här? "E-postadress" gör mer jobb än "E-post". "Telefonnummer" är tydligare än "Telefon". "Företagsnamn" slår "Företag". De här små skillnaderna i precision avgör om det blir omedelbar klarhet eller ett ögonblicks tvekan.
Undvik etiketter som döljer information. Använd inte vaga etiketter som "Övrigt", "Mer information" eller "Detaljer". De tvingar användaren att klicka eller hovra för att förstå vad fältet är till för. En specifik etikett som "Hur hörde du talas om oss?" eller "Vad är din största utmaning?" gör jobbet direkt och håller folk i rörelse.
Obligatoriska och valfria fält behöver en visuell skillnad, men ingen förklaring i ord. De flesta formulär säger "Obligatoriska fält är markerade med en asterisk" och väntar sig sedan att folk ska minnas regeln. Markera i stället obligatoriska fält synligt (en asterisk eller en punkt) och gör valfria fält tydliga med en liten etikett "(valfritt)". Då ser man med en blick vad som krävs och inte.
Långa eller komplexa formulär tjänar på en kort hjälptext under etiketten. Det är inte instruktioner för livet. Det är en enda mening som förtydligar vid behov. Frågar du efter ett telefonnummer och behöver ett särskilt format, lägg till en rad under etiketten: "Ange riktnummer. Vi använder det inte för att ringa dig utan att fråga först." Den raden förhindrar formatfel och bygger förtroende. Men håll den kort. Stycken med hjälptext under varje fält får formuläret att kännas överväldigande.
För en djupare titt på hur layoutval påverkar hur formulär upplevs, se vår guide om principer för formulärdesign: layout, avstånd och visuell hierarki.
Därför fallerar hjälptext i fältet och vad du ska använda i stället
Hjälptext i fältet är text inuti ett formulärfält som försvinner så fort någon klickar på det. Den ser hjälpsam ut. Den känns som en vink. I praktiken är det det vanligaste misstaget i formulärdesign.
Så här går det när någon förlitar sig på hjälptext i fältet i stället för etiketter. En besökare kommer till formuläret. Hjälptexten säger "john@example.com" för att visa vilket format som förväntas. Hen klickar på e-postfältet och börjar skriva. Hjälptexten försvinner. Nu ser hen inte vilket format som förväntades och undrar om hen gör rätt. Hen skriver klart. Hen tabbar till nästa fält. Nu minns hen inte om e-postadressen blev rätt, men kan inte gå tillbaka och kontrollera eftersom fältet inte längre visar hjälptexten. Så hen raderar och skriver om. Det upprepas för varje fält som bara har instruktion i fältet. Andelen som slutför rasar.
Forskningen är överväldigande. Hjälptext i fältet skadar slutförandet, försämrar tillgängligheten (skärmläsare har svårt med den) och skapar friktion för personer med kognitiva funktionsnedsättningar eller för den som fyller i ett formulär snabbt och distraherat. Att ta bort hjälptext i fältet som huvudinstruktion och lägga till synliga etiketter ökar andelen som slutför mätbart.
Så här fungerar det: använd etiketter för instruktion och hjälptext i fältet bara för exempel. Ett fält med etiketten "E-postadress" och hjälptexten "ditt.namn@foretag.se" fungerar utmärkt. Etiketten talar om för användaren vad som ska stå i fältet. Hjälptexten visar formatet utan att dölja instruktionen. När användaren klickar och hjälptexten försvinner vet hen redan vad fältet är till för eftersom en synlig etikett säger det.
Inte varje fält behöver hjälptext. Enkla fält som "Förnamn" eller "Företagsnamn" behöver bara en etikett. Hjälptexten är användbar för fält där formatet spelar roll (telefonnummer, datum, webbadresser) eller där användaren kanske inte vet vilka exempeldata som ska anges (användarnamn på sociala medier, hänvisningskod).
Frestas du att använda hjälptext i fältet i stället för en etikett för att spara plats, bygg formuläret med etiketter ändå och låt dem staplas. Ett formulär med synliga etiketter och utan hjälptext i fältet slår alltid ett formulär med flytande etiketter och dold hjälptext. Användare slutför formulär snabbare, gör färre fel och litar mer på formuläret.
Valideringsmeddelanden: gör fel till vägledning
Validering är det som händer när någon fyller i ett fält fel. Ett felmeddelande visas. I det ögonblicket känner användaren något. Antingen känner hen att formuläret är trasigt och förvirrande, eller att formuläret hjälper hen att göra rätt.
Dåliga valideringsmeddelanden är vaga. De säger "Ogiltig inmatning" eller "Fel" och inget mer. Användaren vet inte vad som gick fel. Var formatet fel? Var inmatningen för kort? Användes ett tecken som inte är tillåtet? Hen måste gissa och försöka igen.
Bra valideringsmeddelanden är specifika och går att agera på. I stället för "Ogiltigt", skriv "Lösenordet måste vara minst 8 tecken och innehålla en stor bokstav och en siffra." Det talar om för användaren exakt vad som gick fel och vad hen ska göra. Formuläret känns inte längre trasigt. Det känns som att det hjälper.
Tidpunkten spelar också roll. Validering kan ske på två sätt. Validering i realtid kontrollerar fältet när användaren skrivit klart och visar ett fel direkt. Det känns responsivt och hjälper till att fånga misstag före inskick. Validering av hela formuläret sker när någon klickar på skicka, och alla fel visas på en gång. Det känns mindre responsivt men fungerar bra för enkla formulär. Kombinera båda när du kan. Validering i realtid för kritiska fält (e-post, lösenord, telefonnummer) och validering av hela formuläret vid inskick för allt annat.
Var felmeddelandena placeras påverkar om folk kan rätta dem. Feltexten ska visas direkt under fältet som orsakade problemet, inte högst upp i formuläret i en sammanfattande lista. När felet står under fältet kan användaren läsa felet och fältet samtidigt. Hen kan se vad hen skrev, förstå vad som gick fel och rätta det direkt. När felet står högst upp i en lista måste hen scrolla tillbaka upp, hitta fältet och minnas vad felet var.
Enbart färg räcker inte för att signalera ett fel. Förlita dig inte bara på en röd kant eller röd text. Vissa användare kan inte skilja på färger. Lägg till en ikon (ett kryss, en varningssymbol) och stödjande text så att felet är tydligt för alla. Skärmläsare behöver också text för att läsa upp felet, inte bara en färgändring.
Tonen i felmeddelanden påverkar hur folk känner inför ditt formulär. Ett hårt meddelande som "Du angav en ogiltig e-postadress" får folk att känna att de gjort fel. Ett hjälpsamt meddelande som "Vi kände inte igen formatet på e-postadressen. Kontrollera om det finns stavfel och försök igen" får dem att känna sig hjälpta. Det andra meddelandet gör samma jobb men får upplevelsen att kännas mer som samarbete än dom.
För vägledning om att bygga formulär som känns tillgängliga för alla användare, läs vår artikel om tillgänglig formulärdesign.
Hur avståndet mellan fälten påverkar om ett formulär känns inbjudande
Ett formulär är en visuell miljö. Utrymmet kring varje fält, avståndet mellan etiketter och fält och luckorna mellan fältgrupper signalerar alla om formuläret är hanterbart eller överväldigande.
Tätt avstånd får tio fält att se ut som trettio. Varje fält konkurrerar om den visuella uppmärksamheten. Användaren vet inte vilka fält som hör ihop. Etiketter sitter nära fälten under dem, och nästa etikett sitter bara några pixlar längre ner. Hela formuläret känns trångt och överväldigande. Avhoppen sker innan det första fältet är ifyllt.
Generöst avstånd mellan relaterade fält och större luckor mellan fältgrupper får samma tio fält att kännas som en kort, ordnad process. Först fyller du i faktureringsuppgifter. Sedan en tydlig lucka. Sedan leveransuppgifter. Sedan en lucka till. Betaluppgifter. Formuläret känns strukturerat, inte kaotiskt. Det är inte bortkastad vit yta. Det är informationsarkitektur som leder användaren genom processen.
Mobilformulär kräver särskild uppmärksamhet på avstånd. På en mobilskärm är ett trångt formulär oanvändbart. Varje fält behöver tillräckligt lodrätt utrymme för att ett finger ska kunna trycka på det utan att träffa ett intilliggande fält. Ett mobilformulär med generöst lodrätt avstånd och tydligt åtskilda avsnitt konverterar märkbart bättre än ett som utformats för dator och krympts till mobil. Utrymmet är inte bortslösat. Det är funktionellt.
Etikettens placering påverkar också hur avståndet uppfattas. Etiketter ska sitta direkt ovanför fälten, inte bredvid. När etiketter sitter till vänster blir avståndet mellan etikett och fält större, vilket skapar förvirring om vilket fält som hör till vilken etikett. Det gäller särskilt på mobil där etiketter till vänster tvingar texten att brytas eller krympa till oläsliga storlekar. Etiketter ovanför förblir kopplade till sitt fält och känns renare.
Markeringar för obligatoriska och valfria fält som faktiskt fungerar
Varje fält är antingen obligatoriskt (måste fyllas i) eller valfritt (kan hoppas över). Användaren behöver veta vilket som är vilket med en blick, utan att läsa hjälptext eller instruktioner.
Det traditionella sättet markerar obligatoriska fält med en asterisk och säger "Obligatoriska fält är markerade med en asterisk". Det fungerar bara om användarna minns regeln. Många gör det inte. De skummar formuläret och ser asterisker utan att förstå vad de betyder.
Ett bättre sätt markerar obligatoriska fält synligt (asterisk eller färgad punkt) och märker valfria fält uttryckligen med "(valfritt)" bredvid etiketten. Nu visar en snabb blick användaren om varje fält är nödvändigt. Obligatoriska fält ser normala ut med en markering. Valfria fält har en tydlig etikett. Det tar bort behovet av att minnas en regel.
Vissa formulär använder färg för att skilja obligatoriska från valfria fält. Det kan fungera, men det kräver hög kontrast och bör kombineras med textetiketter, inte användas ensamt. En röd asterisk bredvid etiketten fungerar bättre än en röd fältbakgrund eftersom fältbakgrunden kan göra inmatningen mindre synlig.
Villkorliga fält och att bara visa det som behövs
Vissa fält ska bara visas efter att användaren gjort ett val i ett tidigare fält. En kryssruta för "Jag bor i USA" kan visa en rullgardinsmeny för delstat. Att välja "Företag" i ett fält för kontotyp kan visa ett fält för företagsnamn. De här villkorliga fälten minskar den mentala belastningen genom att bara visa de fält som användaren faktiskt behöver fylla i.
När villkorliga fält visas ska de visas mjukt och tydligt. Ett plötsligt framträdande utan animation kan skrämma. En tonad eller nedrullande effekt gör ändringen tydlig. Det nya fältet ska ha egen etikett och validering precis som ett vanligt fält. Anta inte att användaren förstår vad hen ska göra bara för att fältet dök upp.
Villkorliga fält fungerar bäst när de visas under det fält som utlöser dem, inte ovanför eller vid sidan. Användaren gör ett val och direkt under det valet visas nya fält som hör till valet. Det håller den mentala vägen rak och minskar förvirring.
Så hjälper WEMASY med utformningen av formulärfält
WEMASY:s formulärbyggare har anpassningsbara fältalternativ, valideringsregler och felmeddelanden i realtid. Du kan ställa in obligatoriska och valfria fält, sätta särskilda valideringsregler för olika fälttyper och styra exakt vilka felmeddelanden som visas och när. Det betyder att du kan bygga formulär som följer varje bästa praxis i den här artikeln utan att kunna koda.
Du kan också styra layout, avstånd och etikettplacering med WEMASY:s verktyg för formulärdesign. Bygg formulär som känns tydliga, professionella och lätta att slutföra.
Se vilka funktioner som ingår i varje WEMASY-abonnemang.