Je bezoeker scant je formulier in twee seconden voordat hij ook maar één teken typt. Hij leest de veldgroottes, de ruimte en de indeling. Een postcodeveld zo breed als het hele formulier schreeuwt om verwarring. Een tekstvak van één regel voor uitgebreide feedback zegt dat je niet veel verwacht.
De breedte van je invoerveld vertelt de gebruiker hoeveel tekst je verwacht. Een klein tekstvak zegt "geef me je naam". Een hoog tekstvak zegt "vertel me je verhaal". Doe je dit fout, dan vraag je om verwarring, typewerk en afhakers.
Je formulier bevat twee soorten tekstvelden: het invoerveld van één regel en het tekstvak (textarea) met meerdere regels. Ze zien er anders uit, gedragen zich anders en lossen andere problemen op. De juiste kiezen is niet ingewikkeld, maar het bepaalt wel hoe gebruikers je formulier zien en of ze het invullen.
Wat is een tekstveld
Een tekstveld is een vak van één regel waarin gebruikers korte tekst typen. Het gaat niet naar een nieuwe regel als je de rand bereikt. Het ondersteunt geen meerdere alinea's. Druk je op Enter, dan wordt het formulier verzonden (of gaat het naar het volgende veld). Het is bedoeld voor beperkte, korte gegevens.
Een tekstveld sluit een mentaal contract met de gebruiker. Je vraagt om iets kleins. Een naam. Een e-mailadres. Een postcode. Een datum. Eén stukje informatie.
Wat is een tekstvak
Een tekstvak (textarea) is een tekstvak met meerdere regels dat groeit terwijl gebruikers typen. Druk je op Enter, dan krijg je een nieuwe regel. Het scrolt verticaal als de inhoud groter is dan het zichtbare gebied. Het laat de gebruiker weten dat je meer dan een paar woorden verwacht. Alinea's zijn hier welkom. Uitgebreide gedachten worden verwacht.
Een tekstvak haalt de beperking weg. De gebruiker weet dat hij zoveel mag schrijven als nodig is, zonder zijn antwoord in één regel te proppen.
Wanneer je een tekstveld van één regel gebruikt
Gebruik een tekstveld als het verwachte antwoord op één regel past en de gebruiker in een paar woorden of minder kan antwoorden.
Contactgegevens
Naam, e-mailadres, telefoonnummer. Deze velden zijn altijd tekstvelden van één regel. De gebruiker verwacht een naam te typen en door te gaan, niet een teksteditor te openen voor zijn telefoonnummer.
Korte identificatiegegevens
Gebruikersnaam, rekeningnummer, postcode, wachtwoord. Deze hebben een vaste lengte of zijn kort. Een tekstveld van één regel is logisch.
Locatie- en logistieke velden
Plaats, staat, land, straatadres (eerste regel). Dit zijn meestal invoeren van één regel. Je kunt een adres beter opdelen in meerdere velden van één regel dan in één groot tekstvak.
Zoeken en filteren
Zoekvelden. Productfilters. Datumbereiken. Hier verwacht je een snelle invoer, geen alinea. Tekstvelden van één regel voelen juist.
Datums en getallen
Elk veld waarin de gebruiker een specifieke datum, tijd, hoeveelheid of prijs invoert. Eén regel. Soms wil je een gespecialiseerd invoertype voor datums (zoals een datumkiezer), maar het gebruiksmodel blijft één regel.
Wanneer je een tekstvak gebruikt
Gebruik een tekstvak als je verwacht dat de gebruiker meer dan één zin schrijft of als het antwoord vanzelf langer is dan één regel.
Opmerkingen en feedback
Als je vraagt "Welke feedback heb je?", denkt de gebruiker in alinea's, niet in losse woorden. Een tekstvak laat zien dat er ruimte is voor zijn hele gedachte. Hij voelt zich niet beperkt.
Bericht- en aanvraagformulieren
Als een bezoeker een contactformulier met een berichtveld invult, heeft hij ruimte nodig om zijn situatie uit te leggen. De hoeveelheid tekst verschilt sterk. Een tekstvak past bij zowel een snelle vraag van twee zinnen als bij een gedetailleerde aanvraag van twee alinea's.
Beschrijvings- en detailvelden
Productbeschrijvingen, projectbriefings, servicevereisten. Elk veld dat de gebruiker vraagt om context of details te geven. Een tekstvak nodigt uit tot die details.
Notities en speciale instructies
Een veld dat zegt "Voeg speciale verzoeken toe" of "Opmerkingen voor de bezorging" heeft vaak een tekstvak nodig, omdat je niet kunt voorspellen of de gebruiker twee woorden of twee alinea's wil toevoegen.
Het groottebeginsel: de breedte van het veld wijst op de verwachte lengte
De grootte van je veld stuurt een boodschap voordat de gebruiker een teken typt. Een postcodeveld dat de hele formulierbreedte beslaat, zorgt voor verwarring. De gebruiker ziet al die ruimte en denkt: "heb ik niet goed begrepen wat je vraagt?"
Gebruik deze regel: de visuele grootte van het veld moet passen bij de verwachte lengte van het antwoord.
Korte tekstvelden
Maak het invoerveld voor een postcode smal. Misschien 80 tot 120 pixels breed op desktop. Dit visuele signaal zegt de gebruiker: "typ vijf cijfers, geen alinea".
Gebruik voor een naamveld een gemiddelde breedte. Misschien 200 tot 300 pixels. Lang genoeg voor "Alexander Thompson", maar niet zo breed dat het uitnodigt tot een levensverhaal.
Tekstvakken
Tekstvakken groeien zowel horizontaal als verticaal. Een tekstvak van vier regels hoog wijst op een groter antwoord dan een tekstvak van twee regels hoog. Laat je tekstvak passen bij de verwachte inspanning.
Verwacht je een paar zinnen, begin dan met drie tot vijf zichtbare regels. Vraag je om uitgebreide feedback, begin dan met zes tot acht regels. Gebruikers kunnen het veld vergroten als ze meer ruimte nodig hebben, maar de beginmaat bepaalt hun verwachting.
Ontwerpregels voor tekstvelden
Combineer altijd met een label
Gebruik placeholdertekst nooit als vervanging van een zichtbaar label. Placeholdertekst verdwijnt als de gebruiker begint te typen, schaadt de toegankelijkheid en laat de gebruiker raden wat het veld wilde. Gebruik een duidelijk label boven of naast het veld en gebruik placeholdertekst alleen als zachte hint.
Slecht voorbeeld: een veld zonder label, alleen grijze placeholdertekst met "Vul je naam in".
Goed voorbeeld: een label "Naam" boven het veld, met eventueel placeholdertekst zoals "Jan de Vries".
Geef verplichte velden duidelijk aan
Markeer verplichte velden met een sterretje (*) of het woord "(verplicht)" tussen haakjes. Laat gebruikers niet raden of een veld optioneel is.
Valideer vroeg, herstel netjes
Als een gebruiker een ongeldig e-mailadres of een verkeerd opgemaakt telefoonnummer invoert, wis dan zijn invoer niet. Toon een foutmelding die het probleem specifiek uitlegt en bewaar zijn gedeeltelijke invoer, zodat hij die kan herstellen in plaats van helemaal opnieuw te typen.
Ondersteun het verwachte invoertype
Gebruik voor e-mail type="email", zodat mobiele gebruikers een toetsenbord krijgen dat voor e-mail is geoptimaliseerd. Gebruik voor telefoon type="tel". Gebruik voor getallen type="number". Deze gespecialiseerde invoertypes verbeteren de mobiele ervaring zonder extra werk voor jou.
Ontwerpregels voor tekstvakken
Laat het tekstvak meegroeien met de inhoud
Als een gebruiker een lang bericht typt en het tekstvak blijft even groot, moet hij tijdens het typen binnen het veld scrollen. Dat breekt de schrijfervaring. Gebruik CSS of JavaScript zodat het tekstvak automatisch groeit als de gebruiker meer regels toevoegt. Hij typt natuurlijk, het veld groeit, geen scrollen binnen het veld zelf.
Toon de beginmaat duidelijk
Een tekstvak moet genoeg zichtbare hoogte hebben om te laten zien dat je meer dan één regel verwacht. Toon minstens drie tot vijf regels lege ruimte, zodat gebruikers begrijpen dat dit geen veld van één regel is.
Stel zo nodig een redelijke tekenlimiet in
Sommige tekstvakken hebben limieten. Een klantenservice-formulier kan feedback beperken tot 5.000 tekens. Heb je een limiet, toon dan het resterende aantal tekens terwijl de gebruiker typt. Laat ze zien hoeveel ruimte ze nog hebben, zonder dat ze het ontdekken als ze tegen de grens aan lopen.
Gebruik een monospace-lettertype voor code of technische invoer
Is het tekstvak voor codefragmenten of technische data, gebruik dan een monospace-lettertype, zodat spaties en uitlijning visueel meetellen. Gebruik voor gewone tekst, zoals berichten of feedback, het standaard schreefloze lettertype dat bij je merk past.
Veelgemaakte fouten bij tekstvelden
Alle tekstvelden even breed maken
Als elk invoerveld in je formulier even breed is, verlies je het visuele signaal over de verwachte lengte. Een postcodeveld moet niet zo breed zijn als een naamveld. Laat de grootte de verwachting overbrengen.
Placeholdertekst gebruiken in plaats van labels
Dit staat hierboven al, maar het is cruciaal. Placeholdertekst is nuttig als hint, niet als label. Een gebruiker met een schermlezer ziet placeholdertekst niet. Een gebruiker die een paar velden heeft ingevuld en terugkomt, vergeet wat het veld wilde.
Validatiefouten niet in context tonen
Als de gebruiker een ongeldig e-mailadres typt en de foutmelding bovenaan het formulier verschijnt terwijl het e-mailveld onderaan staat, moet hij scrollen om het probleem te vinden. Houd foutmeldingen dicht bij het veld dat ze veroorzaakte, in kleur (rood of oranje) en met een icoon dat laat zien dat er iets mis is.
Geen ongedaan maken toestaan bij wissen
Als de gebruiker per ongeluk een veld wist of het formulier een knop "Wissen" heeft die alles weghaalt, zorg dan dat hij die actie ongedaan kan maken. Eén tik op een knop mag geen vijf minuten invulwerk vernietigen.
Veelgemaakte fouten bij tekstvakken
Tekstvakken met vaste grootte die niet meegroeien
Een tekstvak dat even groot blijft terwijl de inhoud overloopt en scrollen vereist, dwingt de gebruiker in een klein venster te typen. Zijn ervaring voelt kapot. Laat het tekstvak meegroeien met de inhoud.
Geen duidelijke aanduiding van een tekenlimiet
Heeft je tekstvak een maximale lengte, dan moet de gebruiker dat weten voordat hij die bereikt. Toon een tekenteller die meegaat terwijl hij typt. "Nog 500 tekens" of "2 van 5000 tekens" vertelt direct hoeveel ruimte hij heeft.
Te klein beginnen
Een tekstvak van maar één regel hoog zegt niet "ik wil je uitgebreide feedback". Het ziet eruit als een veld van één regel. Begin met minstens drie tot vier zichtbare regels, zodat de gebruiker begrijpt dat hij meer mag schrijven.
Voorbeelden: tekstveld of tekstvak in context
Een contactformulier
Naamveld: tekstveld van één regel. Breed genoeg voor een lange naam, maar smal genoeg om te zeggen: "alleen je naam".
E-mailveld: tekstveld van één regel met type="email".
Telefoonveld: tekstveld van één regel met type="tel".
Berichtveld: tekstvak, hoog genoeg voor een paar alinea's.
Een productreviewformulier
Je naam: tekstveld van één regel.
Je e-mailadres: tekstveld van één regel met type="email".
Beoordeling (1 tot 5 sterren): een gespecialiseerd invoertype, maar geen tekstvak.
Je review: tekstvak.
Zou je aan anderen aanbevelen: een selectievakje, geen tekstveld.
Een afrekenformulier
Voornaam, achternaam, e-mailadres, telefoonnummer: allemaal tekstvelden van één regel.
Verzendadres (straat, plaats, staat, postcode): meestal meerdere tekstvelden van één regel, niet één tekstvak voor het hele adres.
Speciale bezorginstructies: tekstvak. De gebruiker heeft misschien één zin of drie zinnen, afhankelijk van wat hij nodig heeft.
WEMASY-formulieren: tekstvelden en tekstvakken bouwen
De formulierenbouwer van WEMASY heeft zowel tekstvelden als tekstvakken. Als je een veld aan je formulier toevoegt, kies je het veldtype op basis van waar je naar vraagt.
Voor een contactformulier in WEMASY voeg je een tekstveld toe voor de naam en het e-mailadres van de bezoeker en daarna een tekstvak voor zijn bericht. WEMASY regelt de opmaak automatisch, zodat je tekstvelden en tekstvakken passen bij de kleuren en typografie van je merk. Jij richt je op het stellen van de juiste vragen. De formulierenbouwer regelt de indeling en het gedrag van de velden.
Heb je een gespecialiseerd invoerveld nodig (zoals een datumkiezer of e-mailvalidatie), dan ondersteunt WEMASY dat ook. De veldgrootte, het gedrag en de validatie werken samen om de gebruiker naar het einde te leiden.