10. Verzorg je Labels en fields
- Plaats het label boven het invoerveld
- Linker alignering verhoogt de scanbaarheid en doet het formulier ordelijker ogen
- Rechter alignering maakt snel duidelijk welk label bij welk veld hoort en verhoogt daardoor de invulsnelheid tegenover linker alignering
- Denk goed na over verplichte velden
- Duid verplichte velden aan met een vet label en een *
- Vermijd optionele velden
- Plaats alle verplichte velden samen
- Maakt het label van een gewoon veld niet vet
- Als alle labels vet zijn, is het verschil met verplichte velden minder duidelijk
- Vet vermindert de leesbaarheid en dus de snelheid waarmee het formulier wordt ingevuld
- Plaats geen dubbelpunt achter het label
Men vult een formulier immers van boven naar onder in. Het label boven het veld plaatsen is dus in lijn met de normale ‘leesflow’, wat scannen vergemakkelijkt (meer over scannen in guideline 1: “Maak tekst scanbaar”).
Bovendien is er bij top-alignment maar één oogfixatie nodig om zowel het label als het invoerveld te zien, waardoor een gebruiker een formulier sneller kan invullen.
Tenslotte lost topalignment het eeuwige left-align vs. right-align probleem op:
Een nadeel van top labels is dat ze het formulier langer maken. Mensen zien er sowieso al tegenop om een formulier in te vullen, dus je wilt hen zeker niet de indruk geven dat het een làng formulier is.
In mijn ervaring scannen mensen echter het aantal invoervelden wanneer ze snel de lengte van een formulier willen inschatten en niet de fysieke lengte van de pagina. Het feit dat het formulier wat langer wordt is volgens mij dus niet zo’n probleem.
Een betere methode om een lang formulier korter te doen lijken, is het opdelen van de invoerdata in blokken. Niemand heeft zin om aan één lange blok van invoervelden te beginnen, kleine logische groepjes invullen is veel minder erg.
Onderzoek naar verschillende manieren om verplichte velden aan te duiden, heeft immers uitgewezen dat de meest gekende methode het gebruik van een vet label in combinatie met een ‘*’ is (waarbij onderaan de pagina wordt uitgelegd dat het sterretje ‘verplicht veld’ betekent).
Eyetracking onderzoek waarbij werd nagegaan wat de fixatie op het ‘sterretje’ was, toonde dan weer aan dat mensen dit sterretje meestal gewoon negeren. Als je mensen een formulier voorschotelt nemen ze aan dat ze àlle velden moeten invullen, waarom zou je het vragen als het niet echt nodig is?
Inderdaad, waarom zou je zoiets doen? Zoals ik al eerder zei hebben jij en ik een hekel aan het invullen van formulieren. Val ons dus niet lastig met vragen naar informatie die niet essentieel is. Zorg ervoor dat alle velden absoluut nodig en dus verplicht zijn.
Het is natuurlijk niet altijd mogelijk optionele velden te vermijden, vooral in applicaties. In dat geval is de raad de verplichte velden bovenaan te groeperen met daaronder een sectie ‘optioneel’. Zo is meteen duidelijk wat wel en wat niet ingevuld moet worden. Bovendien worden de gebruikers dan niet ontmoedigd door het zien van een lang formulier (waarvan uiteindelijk maar enkele velden verplicht blijken te zijn).
Let hierbij wel op dat de sectietitels duidelijk opvallen. Hoewel mensen de informatie graag in blokjes zien, negeert men de titels van die blokjes (wat meestal niet zo erg is, maar in dit geval wel). Zorg ervoor dat de titels eruit springen door ze b.v. een andere achtergrondkleur te geven.
Gebruikers hebben niets tegen vette labels. Als je mensen vraagt wat ze verkiezen: vet of niet vet, zullen ze zelfs vaak voor het vette gaan.
Maar:
Dus ik gebruik niet-vette labels
Eigenlijk maakt het niet uit of je wel of niet een dubbelpunt achter het label plaatst, mensen merken het ‘:’ toch niet op.
Geloof je me niet? Had je soms gemerkt welke van de 3 alignment voorbeelden bovenaan deze pagina dubbelpunten gebruikt en welke niet? Point proven.
Aangezien het dus niet uitmaakt, vind ik het het handigst geen dubbelpunt te gebruiken. Dit vermijdt nodeloze bugs waarbij men hier en daar het dubbelpunt vergeten is.
Tenslotte nog even totaal afwijken voor wat interessante quizvragen bij de 3 alignment-voorbeelden van in het begin:
Quizvraag 1: Wie heeft bij het eerste voorbeeld de tekst “Please type your credentials for authentication” opgemerkt? Niemand?
Deze tekst is onnodige ruis. Geen kat merkt hem op (zelfs al hebben ze hem in het rood gezet). Bovendien brengt deze tekst niets nuttigs bij en is het dus maar goed dat men hem negeert. Less is more people, less is more (zie guideline 1: “Maak tekst scanbaar”).
Quizvraag 2: Wie zag in het derde voorbeeld de link voor ‘patrons’? Niemand?
De tekst is heel klein en niet onderlijnd, waardoor hij minder in het oog springt als link (zie guideline 8: “Houd je aan de eigenschappen van Links”). De gebruiker focust zich enkel op de task-at-hand: de grote inlogbox. Deze toch wel belangrijke link zou veel opvallender moeten zijn.
Quizvraag 3: Wie zag de onnodige tekst bij het tweede voorbeeld? Niemand?
Goed gedaan van de netbank-mannen.
En nog nu we toch bezig zijn: nog even verder afwijken. Mijn quizvragen zijn eigenlijk niet eerlijk. Toen je de voorbeelden bekeek, was je gefocust op de alignering en merkte je andere zaken sowieso niet op. Dit maar even om aan te geven hoe voorzichtig je moet zijn bij usability testen. Afhankelijk van de taak die je mensen geeft, kunnen de resultaten vervormd worden.