Dé gids voor gebruiksvriendelijke webformulieren | 3. Het uiterlijk

Aspect 3: Het uiterlijk

Het uiterlijk, of de user interface (UI), is cruciaal voor de gebruiksvriendelijkheid van een webformulier. En ook hiervoor zijn er diverse richtlijnen die we kunnen groeperen conform de zes eerder besproken componenten.

1. Labels

Woorden versus zinnen

Als het doel van een label eenvoudig is, zoals het vragen om een naam of telefoonnummer, kunnen een of twee woorden voldoende zijn. Maar in sommige gevallen is een hele zin nodig om onduidelijkheden te voorkomen.

Gebruik van hoofdletters

Moet het zijn: ‘Naam en voornaam’ of ‘Naam en Voornaam’? Het is voor de gebruiker makkelijker om de inhoud te begrijpen wanneer het hoofdlettergebruik wordt beperkt tot de eerste letter van het eerste woord in een zin. Schrijf nooit alle woorden in hoofdletters; dit ziet er onprofessioneel uit en maakt het formulier lastig scanbaar.    

Dubbele punt aan het eind van een label

UI richtlijnen voor sommige desktopapplicaties en besturingssystemen, zoals Windows, adviseren labels in formulieren af te sluiten met een dubbele punt. Sommige ontwerpers van digitale formulieren houden zich hier aan, voornamelijk omdat oudere schermlezers op die manier een label identificeren. Moderne schermlezers hebben voldoende aan de opmaak (de label tab). De dubbele punt is vooral een kwestie van voorkeur en heeft geen aantoonbaar effect op het gebruikersgemak van een formulier zolang de stijl consistent is.

Plaatsing van labels: boven vs links vs rechts

In tegenstelling tot de meeste adviezen is het niet altijd logisch om een label boven het invoerveld te plaatsen. Het is ideaal als het gewenst is dat gebruikers zo snel mogelijk een formulier invullen. Maar er zijn gevallen waarbij het juist gewenst is om gebruikers af te remmen zodat zij de labels zorgvuldig doorlezen. Ook is het beter om een lang formulier in één kolom te houden en gebruikers te laten scrollen in plaats van het formulier op te delen om alle informatie op ooghoogte te krijgen. De verschillende manieren voor het plaatsen van labels hebben zowel voor- als nadelen:

Bovenstaande gegevens komen uit “Label Placement in Forms” van Matteo Penzo

2. Invoervelden

Type invoerveld

Zorg voor het juiste invoerveld op basis van wat er wordt gevraagd. Het is vrijwel nooit een goed idee om een formulier met meerdere kolommen te maken. De rechterkolom in dit voorbeeld wordt teveel genegeerd.

Elk type invoerveld heeft eigenschappen waar gebruikers aan gewend zijn. Zo worden radio buttons gebruikt als slechts één keus mogelijk is en keuzevakjes als er meerdere antwoorden mogelijk zijn.

Aanpassen van invoervelden

Het is onnodig om nieuwe invoervelden uit te vinden. Dit was gebruikelijk in de begindagen van Flash websites en lijkt een comeback te maken, maar uiteindelijk werkt een simpele opzet het beste. Hou de invoervelden daarom zo dicht mogelijk bij de standaard HTML weergave.

Beperkingen bij invoervelden

Bij het instellen van beperkingen op invoervelden is het belangrijk om te zorgen dat gebruikers hier niet door geïrriteerd raken. Gebruik bijvoorbeeld in plaats van ‘MM/DD/YYYY’ naast het tekstveld drie dropdown-velden of, beter nog, een kalendercontrole.

Verplichte velden versus optionele velden

Maak duidelijk welke velden niet leeg gelaten mogen worden door de gebruiker. Het is gebruikelijk om deze velden te markeren met een asterisk (*). Ieder symbool is in principe bruikbaar zolang er een legenda is om aan te geven wat de symbolen inhouden (zelfs als het gaat om een asterisk).

3. Acties

Primaire versus secundaire acties

Primaire acties zijn links en buttons in een formulier die een ‘finale’ functionaliteit activeren zoals ‘Bewaar’ of ‘Verstuur’. Secundaire acties, zoals ‘Terug’ of ‘Annuleer’, stelt gebruikers in staat om ingevoerde data terug te trekken. Secundaire acties hebben vaak ongewenste gevolgen dus is het raadzaam om alleen primaire acties te gebruiken. Als het noodzakelijk is om secundaire acties te gebruiken, is het goed om deze minder visueel te maken dan primaire acties.

Naamgevingen

Vermijd generieke woorden zoals ‘Verzend’, omdat deze snel de indruk kunnen wekken dat het formulier zelf erg algemeen is. Beschrijvende woorden en zinnen zoals ‘Aanmelden op Linkedin’ genieten de voorkeur.

4. Help link

Begeleidende tekst bij een formulier

Zodra het nodig wordt een gebruiker uit te leggen hoe een formulier werkt, is het noodzakelijk deze opnieuw te ontwerpen. Een begeleidende tekst moet alleen gebruikt worden waar nodig, bijvoorbeeld om toe te lichten waarom een credit card nodig is, hoe een geboortedatum gebruikt wordt of waar de ‘Algemene Voorwaarden’ te vinden zijn. Dergelijke teksten worden vaak genegeerd, dus is het belangrijk om deze bondig en makkelijk leesbaar te maken. Houd hierbij de vuistregel aan dat de toelichting niet langer dan 100 woorden mag zijn.

Dynamische hulptekste geactiveerd door de gebruiker

In plaats van hulpteksten naast ieder invoerveld is het raadzaam deze alleen te tonen waar nodig. Het beste is om een icoon te tonen naast het invoerveld waar de gebruiker op kan klikken als er hulp nodig is. Beter nog is het om een dynamische hulptekst te tonen wanneer de gebruiker in een invoerveld klikt om data in te voeren. Dergelijke oplossingen worden steeds vaker gebruikt en zijn makkelijk te implementeren met JavaScript oplossingen zoals jQuery.

5. Berichtgevingen

Foutmelding

Deze melding waarschuwt gebruikers dat er een fout heeft plaatsgevonden en voorkomt dat de gebruiker het formulier verder kan invullen. Benadruk foutmeldingen middels kleurgebruik (meestal rood), bekende symbolen (zoals een waarschuwingsteken), een prominente positie (boven een formulier of naast het veld waar de fout voorkomt), een groter font of een combinatie hiervan.

Succesmelding

Zet dit in om gebruikers te notificeren dat zij een belangrijke mijlpaal hebben bereikt in het webformulier. Bij een lang formulier moedigt een succesmelding de gebruiker aan om het formulier volledig in te vullen. Evenals foutmeldingen verdienen ook succesmeldingen een prominente plaats in het formulier, maar mogen de gebruiker niet in de weg staan.

6. Validatie

Alleen waar nodig

Een overdaad aan validatie is even slecht als het compleet ontbreken ervan, omdat dit gebruikers zal frustreren. Beperk daarom de validatie tot sleutelpunten (zoals de beschikbaarheid van een gebruikersnaam) waarbij alleen realistische antwoorden mogelijk zijn (dus geen leeftijden hoger dan 130 jaar).  Suggereer daarbij een respons als de range van mogelijke data te lang is om in een drop-down menu op te nemen (bijvoorbeeld een kengetal van een land).

Slimme defaults

Gebruik slimme defaults om te zorgen dat de gebruiker sneller en accuraat een formulier kan invullen. Bijvoorbeeld door het land van de gebruiker vooraf te tonen op basis van het IP adres. Maar ga hier slim mee om aangezien gebruikers de neiging hebben om voorgeselecteerde velden niet na te kijken.

Conclusie Het begin

Het woord ‘conclusie’ is hier niet echt op zijn plaats. Het is meer een startpunt om de besproken richtlijnen toe te passen in jouw eigen formulieren. Het goede nieuws is dat er nog veel meer te vertellen is. Zo zijn er voor de starters twee boeken beschikbaar die de inspiratie vormden voor dit artikel;

•  Web Form Design: Filling in the Blanks  – Luke Wroblewski
• Eyetracking Web Usability – Jakob Nielsen & Kara Pernice
• Form Design: UX Strategies and Best Practices – Orlee Gillis

Onthoud dat het niet voldoende is om alleen de User Interface te tweaken. Echte gebruiksvriendelijke formulieren bereik je met de richtlijnen beschreven in dit artikel. De rest is aan jou, succes en veel plezier!