Din besøgende skimmer din formular på to sekunder, før de skriver et eneste tegn. De læser feltstørrelserne, mellemrummene, layoutet. Et postnummerfelt, der er lige så bredt som hele formularen, skriger forvirring. Et tekstområde på én linje til detaljeret feedback sender det budskab, at du ikke forventer meget.
Bredden på dit inputfelt fortæller brugeren, hvor meget tekst du forventer, at de skriver. En lille tekstboks signalerer "giv mig dit navn". Et højt tekstområde signalerer "fortæl din historie". Får du det forkert, beder du om forvirring, skrivearbejde og frafald.
Din formular har to typer tekstfelter: inputfeltet på én linje og tekstområdet på flere linjer. De ser forskellige ud, opfører sig forskelligt og løser forskellige problemer. Det er ikke svært at vælge det rigtige, men det betyder noget for, hvordan brugerne opfatter din formular, og om de udfylder den.
Hvad er et tekstfelt
Et tekstfelt er en boks på én linje, hvor brugerne skriver kort tekst. Det ombrydes ikke til en ny linje, når du når kanten. Det understøtter ikke flere afsnit. Tryk på Enter, og formularen sendes (eller går videre til næste felt). Det er lavet til afgrænsede, korte data.
Et tekstfelt indgår en mental kontrakt med brugeren. Du beder om noget hurtigt. Et navn. En e-mail. Et postnummer. En dato. Én oplysning.
Hvad er et tekstområde
Et tekstområde er en tekstboks med flere linjer, der vokser, mens brugerne skriver. Tryk på Enter, og du får en ny tekstlinje. Det ruller lodret, når indholdet er større end det synlige område. Det signalerer til brugeren, at du forventer mere end et par ord. Afsnit er velkomne her. Uddybende tanker er forventet.
Et tekstområde fjerner begrænsningen. Brugeren ved, at de kan skrive så meget, de har brug for, uden at skulle presse svaret ind på én linje.
Hvornår du bruger et tekstfelt på én linje
Brug et tekstfelt, når det forventede svar er på én linje, og brugeren kan svare med få ord eller færre.
Kontaktoplysninger
Navn, e-mail, telefonnummer. De felter er altid inputfelter på én linje. Brugeren forventer at skrive et navn og gå videre, ikke at åbne en teksteditor til sit telefonnummer.
Korte identifikatorer
Brugernavn, kontonummer, postnummer, adgangskode. De har faste længder eller forventes at være korte. Et inputfelt på én linje giver mening.
Felter om sted og logistik
By, region, land, gadeadresse (første linje). De er typisk indtastninger på én linje. Du kan dele adressen op i flere felter på én linje i stedet for ét stort tekstområde.
Søgning og filtrering
Søgebokse. Produktfiltre. Datointervaller. De forventer en hurtig indtastning, ikke et afsnit. Inputfelter på én linje føles rigtige.
Datoer og tal
Ethvert felt, hvor brugeren skriver en bestemt dato, tid, mængde eller pris. Input på én linje. Nogle gange vil du have en særlig felttype til datoer (som en datovælger), men interaktionsmodellen er stadig på én linje.
Hvornår du bruger et tekstområde
Brug et tekstområde, når du forventer, at brugeren skriver mere end én sætning, eller når svaret naturligt er længere end én linje.
Kommentarer og feedback
Hvis du spørger "Hvilken feedback har du?", tænker brugeren i afsnit, ikke enkeltord. Et tekstområde signalerer, at der er plads til hele deres tanke. De føler sig ikke trængt.
Beskeder og forespørgselsformularer
Når en besøgende udfylder en kontaktformular med et beskedfelt, har de brug for plads til at forklare deres situation. Mængden af tekst varierer meget. Et tekstområde rummer både et hurtigt spørgsmål på to sætninger og en detaljeret forespørgsel på to afsnit.
Felter til beskrivelse og detaljer
Produktbeskrivelser, projektbeskrivelser, krav til ydelser. Ethvert felt, der beder brugeren give sammenhæng eller detaljer. Et tekstområde inviterer til de detaljer.
Noter og særlige ønsker
Et felt, der siger "Tilføj eventuelle særlige ønsker" eller "Eventuelle noter til levering", har ofte brug for et tekstområde, fordi du ikke kan forudsige, om brugeren har to ord eller to afsnit at tilføje.
Størrelsesprincippet: feltets bredde antyder den forventede længde
Dit felts størrelse sender et budskab, før brugeren skriver et eneste tegn. Et postnummerfelt, der spænder over hele formularens bredde, skaber forvirring. Brugeren ser al den plads og tænker "har jeg misforstået, hvad I spørger om?"
Brug denne regel: Feltets visuelle størrelse skal passe til svarets forventede længde.
Korte tekstfelter
Til et postnummer skal du gøre inputfeltet smalt. Måske 80 til 120 pixel bredt på computer. Det visuelle signal fortæller brugeren "skriv fem cifre, ikke et afsnit".
Til et navnefelt bruger du middel bredde. Måske 200 til 300 pixel. Langt nok til "Alexander Thompson", men ikke så bredt, at det inviterer til en biografi.
Tekstområder
Tekstområder udvider sig både vandret og lodret. Et tekstområde på fire linjers højde signalerer et større svar end et på to linjers højde. Lad dit tekstområde passe til den forventede indsats.
Hvis du forventer et par sætninger, så start med tre til fem synlige linjer. Hvis du beder om detaljeret feedback, så start med seks til otte linjer. Brugerne kan ændre størrelsen på feltet, hvis de har brug for mere plads, men startstørrelsen sætter deres forventning.
Designregler for tekstfelter
Par altid med en label
Brug aldrig pladsholdertekst som erstatning for en synlig label. Pladsholdertekst forsvinder, når brugeren begynder at skrive, hvilket ødelægger tilgængeligheden og får dem til at gætte, hvad feltet ville have. Brug en tydelig label over eller ved siden af feltet, og brug kun pladsholdertekst som et blidt hint.
Dårligt eksempel: Et felt uden label, kun grå pladsholdertekst, der siger "Skriv dit navn".
Godt eksempel: En label, der siger "Navn", over feltet, med valgfri pladsholdertekst som "Peter Jensen".
Vis tydeligt, hvilke felter der er obligatoriske
Marker obligatoriske felter med en stjerne (*) eller ordet "(obligatorisk)" i parentes. Lad ikke brugerne gætte, om et felt er valgfrit.
Valider tidligt, og hjælp brugeren videre
Hvis en bruger skriver en ugyldig e-mailadresse eller et telefonnummer i forkert format, så ryd ikke deres indtastning. Vis en fejlbesked, der forklarer problemet konkret, og behold deres delvise indtastning, så de kan rette den i stedet for at skrive helt forfra.
Understøt den forventede inputtype
Til e-mail skal du bruge type="email", så mobilbrugere får et e-mailtilpasset tastatur. Til telefon bruger du type="tel". Til tal bruger du type="number". De særlige inputtyper forbedrer mobiloplevelsen uden at give dig mere arbejde.
Designregler for tekstområder
Lad tekstområdet vokse med indholdet
Hvis en bruger skriver en lang besked, og tekstområdet bliver ved med at have fast størrelse, må de rulle inde i feltet, mens de skriver. Det ødelægger skriveoplevelsen. Brug CSS eller JavaScript, så tekstområdet automatisk udvider sig, når brugeren tilføjer flere linjer. De skriver naturligt, feltet vokser, og der er ingen rulning inde i selve feltet.
Vis startstørrelsen tydeligt
Et tekstområde skal have nok synlig højde til at signalere, at du forventer mere end én linje. Vis mindst tre til fem linjers tom plads, så brugerne forstår, at det ikke er et felt på én linje.
Sæt en rimelig tegngrænse, hvis det er nødvendigt
Nogle tekstområder har grænser. En kundesupportformular kan begrænse feedback til 5.000 tegn. Hvis du har en grænse, så vis det resterende antal tegn, mens brugeren skriver. Lad dem se, hvor meget plads de har tilbage, i stedet for at opdage det, når de støder ind i væggen.
Brug skrifttype med fast bredde til kode eller teknisk input
Hvis tekstområdet er til kodestumper eller tekniske data, så brug en skrifttype med fast bredde (monospace), så mellemrum og justering tæller visuelt. Til almindelig tekst som beskeder eller feedback skal du bruge standardskrifttypen uden seriffer, der passer til dit brand.
Almindelige fejl med tekstfelter
Du gør alle tekstfelter lige brede
Hvis alle inputfelter i din formular har samme bredde, mister du det visuelle signal om forventet længde. Et postnummerfelt skal ikke være lige så bredt som et navnefelt. Lad størrelsen vise forventningen.
Du bruger pladsholdertekst i stedet for labels
Det er nævnt ovenfor, men det er afgørende. Pladsholdertekst er en hjælp som hint, ikke som label. En bruger med skærmlæser ser ikke pladsholdertekst. En bruger, der har udfyldt nogle felter og kommer tilbage, glemmer, hvad feltet ville have.
Du viser ikke valideringsfejl i sammenhængen
Hvis brugeren skriver en ugyldig e-mail, og fejlbeskeden vises øverst i formularen, mens e-mailfeltet er nederst, må de rulle for at finde problemet. Hold fejlbeskeder tæt på det felt, der udløste dem, i farve (rød eller orange) med et ikon, der signalerer "noget er galt".
Du tillader ikke fortryd ved ryd
Hvis brugeren ved et uheld rydder et felt, eller formularen har en "Ryd"-knap, der sletter alt, så sørg for, at de kan fortryde handlingen. Ét tryk på en knap bør ikke ødelægge fem minutters udfyldelse.
Almindelige fejl med tekstområder
Tekstområder med fast størrelse, der ikke udvider sig
Et tekstområde, der forbliver i samme størrelse, mens indholdet løber over og kræver rulning, tvinger brugeren til at skrive i et lille vindue. Oplevelsen føles ødelagt. Få tekstområdet til at udvide sig med indholdet.
Ingen tydelig angivelse af en tegngrænse
Hvis dit tekstområde har en maksimal længde, skal brugeren vide det, før de rammer den. Vis en tegntæller, der opdaterer, mens de skriver. "500 tegn tilbage" eller "2 af 5000 tegn" fortæller dem straks, hvor meget plads de har.
Du starter for småt
Et tekstområde, der kun er én linje højt, siger ikke "jeg vil gerne have din detaljerede feedback". Det ligner stadig et felt på én linje. Start med mindst tre til fire synlige linjer, så brugeren forstår, at de kan skrive mere.
Eksempler: tekstfelt eller tekstområde i sammenhæng
En kontaktformular
Navnefelt: tekstfelt på én linje. Bredt nok til et langt navn, men smalt nok til at signalere "bare dit navn".
E-mailfelt: tekstfelt på én linje med type="email".
Telefonfelt: tekstfelt på én linje med type="tel".
Beskedfelt: tekstområde, højt nok til et par afsnit.
En formular til produktanmeldelse
Dit navn: input på én linje.
Din e-mail: input på én linje med type="email".
Vurdering (1 til 5 stjerner): en særlig inputtype, men ikke et tekstområde.
Din anmeldelse: tekstområde.
Vil anbefale til andre: et afkrydsningsfelt, ikke et tekstinput.
En betalingsformular
Fornavn, efternavn, e-mail, telefon: alle inputfelter på én linje.
Leveringsadresse (gade, by, region, postnummer): typisk flere inputfelter på én linje, ikke ét tekstområde til hele adressen.
Særlige leveringsinstruktioner: tekstområde. Brugeren har måske én sætning eller tre sætninger alt efter behov.
WEMASY-formularer: sådan bygger du tekstfelter og tekstområder
WEMASY's formularbygger har både tekstfelter og tekstområder. Når du tilføjer et felt til din formular, vælger du felttypen ud fra det, du spørger om.
Til en kontaktformular i WEMASY tilføjer du et tekstfelt til den besøgendes navn og e-mail og derefter et tekstområde til deres besked. WEMASY klarer automatisk stylingen, så dine tekstfelter og tekstområder passer til dit brands farver og typografi. Du fokuserer på at stille de rigtige spørgsmål. Formularbyggeren tager sig af layout og feltadfærd.
Hvis du har brug for et særligt input (som en datovælger eller e-mailvalidering), understøtter WEMASY også det. Feltstørrelse, adfærd og validering arbejder sammen om at guide brugeren hen mod at gøre formularen færdig.