Din besökare skannar formuläret på två sekunder innan hen skriver ett enda tecken. Hen läser fältens storlek, avstånden och layouten. Ett postnummerfält lika brett som hela formuläret skriker förvirring. Ett enradigt textområde för detaljerad feedback signalerar att du inte förväntar dig mycket.
Inmatningsfältets bredd talar om för användaren hur mycket text du förväntar dig. En liten textruta signalerar "ge mig ditt namn". Ett högt textområde signalerar "berätta din historia". Gör du fel här ber du om förvirring, skrivbesvär och att formuläret överges.
Ditt formulär innehåller två typer av textfält: det enradiga textfältet och det flerradiga textområdet. De ser olika ut, beter sig olika och löser olika problem. Att välja rätt är inte svårt, men det spelar roll för hur användare uppfattar formuläret och om de fyller i det.
Vad är ett textfält
Ett textfält är en enradig ruta där användare skriver kort text. Texten bryts inte till en ny rad när du når kanten. Det stöder inte flera stycken. Tryck på Enter och formuläret skickas (eller går vidare till nästa fält). Det är gjort för begränsad, kort data.
Ett textfält skapar ett mentalt avtal med användaren. Du ber om något snabbt. Ett namn. En e-postadress. Ett postnummer. Ett datum. En enda uppgift.
Vad är ett textområde
Ett textområde är en flerradig textruta som växer medan användare skriver. Tryck på Enter och du får en ny textrad. Det scrollar lodrätt när innehållet överstiger det synliga området. Det signalerar till användaren att du förväntar dig mer än några få ord. Stycken är välkomna här. Utförliga tankar förväntas.
Ett textområde tar bort begränsningen. Användaren vet att hen kan skriva så mycket som behövs utan att trycka ihop svaret på en enda rad.
När du ska använda ett enradigt textfält
Använd ett textfält när det förväntade svaret ryms på en rad och användaren kan svara med några få ord eller mindre.
Kontaktuppgifter
Namn, e-post, telefonnummer. De här fälten är alltid enradiga. Användaren förväntar sig att skriva ett namn och gå vidare, inte öppna en textredigerare för sitt telefonnummer.
Korta identifierare
Användarnamn, kontonummer, postnummer, lösenord. De har bestämd längd eller förväntas vara korta. Ett enradigt fält är rimligt.
Plats- och logistikfält
Ort, delstat, land, gatuadress (första raden). De här är oftast enradiga. Du kan dela upp adressen i flera enradiga fält i stället för ett stort textområde.
Sökning och filtrering
Sökrutor. Produktfilter. Datumintervall. De förväntar sig en snabb inmatning, inte ett stycke. Enradiga fält känns rätt.
Datum och tal
Varje fält där användaren anger ett bestämt datum, en tid, ett antal eller ett pris. Enradigt fält. Ibland vill du ha en särskild fälttyp för datum (som en datumväljare), men interaktionsmodellen är fortfarande enradig.
När du ska använda ett textområde
Använd ett textområde när du förväntar dig att användaren skriver mer än en mening eller när svaret naturligt är längre än en rad.
Kommentarer och feedback
Om du frågar "Vilken feedback har du?" tänker användaren i stycken, inte enstaka ord. Ett textområde signalerar att det finns plats för hela tanken. Hen känner sig inte trängd.
Meddelande- och förfrågningsformulär
När en besökare fyller i ett kontaktformulär med ett meddelandefält behöver hen utrymme för att förklara sin situation. Textmängden varierar mycket. Ett textområde rymmer både en snabb fråga på två meningar och en detaljerad förfrågan på två stycken.
Beskrivnings- och detaljfält
Produktbeskrivningar, projektbeskrivningar, tjänstekrav. Varje fält som ber användaren ge sammanhang eller detaljer. Ett textområde bjuder in till de detaljerna.
Anteckningar och särskilda önskemål
Ett fält som säger "Lägg till särskilda önskemål" eller "Några anteckningar för leveransen" behöver ofta ett textområde eftersom du inte kan förutse om användaren har två ord eller två stycken att lägga till.
Storleksprincipen: fältets bredd antyder förväntad längd
Fältets storlek skickar ett budskap innan användaren skrivit ett enda tecken. Ett postnummerfält som sträcker sig över hela formulärets bredd skapar förvirring. Användaren ser allt det utrymmet och tänker "har jag missförstått vad ni frågar efter?"
Använd den här regeln: fältets visuella storlek ska motsvara svarets förväntade längd.
Korta textfält
Gör textfältet smalt för ett postnummer. Kanske 80 till 120 pixlar brett på datorn. Den visuella signalen säger "skriv fem siffror, inte ett stycke".
Använd medelbredd för ett namnfält. Kanske 200 till 300 pixlar. Långt nog för "Alexander Thompson" men inte så brett att det bjuder in till en biografi.
Textområden
Textområden växer både vågrätt och lodrätt. Ett textområde som är fyra rader högt signalerar ett större svar än ett som är två rader högt. Låt textområdet motsvara den förväntade insatsen.
Om du förväntar dig några meningar, börja med tre till fem synliga rader. Om du ber om detaljerad feedback, börja med sex till åtta rader. Användare kan ändra fältets storlek om de behöver mer utrymme, men startstorleken sätter förväntningen.
Designregler för textfält
Para alltid ihop med en etikett
Använd aldrig platshållartext som ersättning för en synlig etikett. Platshållartext försvinner när användaren börjar skriva, vilket försämrar tillgängligheten och lämnar användaren att gissa vad fältet ville ha. Använd en tydlig etikett ovanför eller bredvid fältet, och använd platshållartext bara som en mild vink.
Dåligt exempel: Ett fält utan etikett, bara grå platshållartext som säger "Skriv ditt namn".
Bra exempel: En etikett som säger "Namn" ovanför fältet, med valfri platshållartext som "Anna Svensson".
Markera obligatoriska fält tydligt
Markera obligatoriska fält med en asterisk (*) eller ordet "(obligatoriskt)" inom parentes. Låt inte användarna gissa om ett fält är valfritt.
Validera tidigt, hjälp användaren att rätta sig
Om en användare anger en ogiltig e-postadress eller ett felformaterat telefonnummer, töm inte det hen skrivit. Visa ett felmeddelande som förklarar problemet specifikt, och behåll den delvis ifyllda texten så att hen kan rätta den i stället för att skriva om från början.
Stöd den förväntade fälttypen
Använd type="email" för e-post så att mobilanvändare får ett tangentbord anpassat för e-post. Använd type="tel" för telefon. Använd type="number" för tal. De särskilda fälttyperna förbättrar mobilupplevelsen utan att ge dig extra arbete.
Designregler för textområden
Låt textområdet växa med innehållet
Om en användare skriver ett långt meddelande och textområdet behåller sin fasta storlek måste hen scrolla inuti fältet medan hen skriver. Det förstör skrivupplevelsen. Använd CSS eller JavaScript så att textområdet växer automatiskt när användaren lägger till fler rader. Hen skriver naturligt, fältet växer och ingen scrollning inuti själva fältet behövs.
Visa startstorleken tydligt
Ett textområde ska ha tillräcklig synlig höjd för att signalera att du förväntar dig mer än en enda rad. Visa minst tre till fem rader tomt utrymme så att användare förstår att det inte är ett enradsfält.
Sätt en rimlig teckengräns vid behov
Vissa textområden har gränser. Ett kundsupportformulär kan begränsa feedback till 5 000 tecken. Om du har en gräns, visa antalet tecken som är kvar medan användaren skriver. Låt dem se hur mycket utrymme de har kvar utan att upptäcka det när de stöter i taket.
Använd teckensnitt med fast bredd för kod eller teknisk indata
Om textområdet är för kodavsnitt eller teknisk data, använd ett teckensnitt med fast bredd så att mellanrum och justering syns tydligt. För vanlig text som meddelanden eller feedback, använd standardteckensnittet utan seriffer som passar ditt varumärke.
Vanliga misstag med textfält
Att göra alla textfält lika breda
Om varje inmatningsfält i ditt formulär är lika brett förlorar du den visuella signalen om förväntad längd. Ett postnummerfält ska inte vara lika brett som ett namnfält. Låt storleken förmedla förväntningen.
Att använda platshållartext i stället för etiketter
Det här nämndes ovan, men det är avgörande. Platshållartext är till hjälp som vink, inte som etikett. Den som använder skärmläsare ser inte platshållartext. Den som har fyllt i några fält och kommit tillbaka glömmer vad fältet ville ha.
Att inte visa valideringsfel i sitt sammanhang
Om användaren skriver en ogiltig e-postadress och felmeddelandet visas högst upp i formuläret medan e-postfältet ligger längst ned måste hen scrolla för att hitta problemet. Håll felmeddelanden nära fältet som utlöste dem, i färg (rött eller orange) med en ikon som signalerar "något är fel".
Att inte tillåta ångra efter tömning
Om användaren av misstag tömmer ett fält eller formuläret har en "Rensa"-knapp som raderar allt, se till att hen kan ångra det. Ett enda knapptryck ska inte förstöra fem minuters ifyllande.
Vanliga misstag med textområden
Textområden med fast storlek som inte växer
Ett textområde som behåller samma storlek medan innehållet svämmar över och kräver scrollning tvingar användaren att skriva i ett pyttelitet fönster. Upplevelsen känns trasig. Låt textområdet växa med innehållet.
Ingen tydlig angivelse av teckengräns
Om ditt textområde har en maxlängd ska användaren veta det innan hen når den. Visa en teckenräknare som uppdateras medan hen skriver. "500 tecken kvar" eller "2 av 5 000 tecken" berättar direkt hur mycket utrymme hen har.
Att börja för litet
Ett textområde som bara är en rad högt säger inte "jag vill ha din detaljerade feedback". Det ser fortfarande ut som ett enradsfält. Börja med minst tre till fyra synliga rader så att användaren förstår att hen kan skriva mer.
Exempel: textfält eller textområde i sitt sammanhang
Ett kontaktformulär
Namnfält: enradigt textfält. Brett nog för ett långt namn men smalt nog för att signalera "bara ditt namn".
E-postfält: enradigt textfält med type="email".
Telefonfält: enradigt textfält med type="tel".
Meddelandefält: textområde, högt nog för några stycken.
Ett formulär för produktrecension
Ditt namn: enradigt fält.
Din e-post: enradigt fält med type="email".
Betyg (1 till 5 stjärnor): en särskild fälttyp, men inte ett textområde.
Din recension: textområde.
Skulle rekommendera till andra: en kryssruta, inte ett textfält.
Ett kassaformulär
Förnamn, efternamn, e-post, telefon: alla enradiga fält.
Leveransadress (gata, ort, delstat, postnummer): oftast flera enradiga fält, inte ett textområde för hela adressen.
Särskilda leveransinstruktioner: textområde. Användaren kan ha en eller tre meningar beroende på behov.
WEMASY-formulär: bygg textfält och textområden
WEMASY:s formulärbyggare har både textfält och textområden. När du lägger till ett fält i formuläret väljer du fälttyp utifrån vad du frågar efter.
För ett kontaktformulär i WEMASY lägger du till ett textfält för besökarens namn och e-post och sedan ett textområde för meddelandet. WEMASY sköter stylingen automatiskt så att dina textfält och textområden matchar ditt varumärkes färger och typografi. Du fokuserar på att ställa rätt frågor. Formulärbyggaren sköter layout och fältens beteende.
Om du behöver en särskild fälttyp (som en datumväljare eller e-postvalidering) stöder WEMASY det också. Fältets storlek, beteende och validering samverkar för att leda användaren mot att bli klar.