Webformulieren

Uit Usability

Ga naar: navigatie, zoeken

Inhoud

Algemene principes

Vraag niet om meer gegevens dan noodzakelijk is voor het doel van het formulier.
  • Houdt formulieren zo kort mogelijk (19). Minimaliseer het aantal invoervelden (1).
  • Beperk het verplicht invullen van gegevens (19).
Vraag niet aan gebruikers om meer dan één keer dezelfde informatie te geven (1).
Vermeld bij het opvragen van gegevens altijd in elke geval de volgende zaken
  • waarom de gegevens worden gevraagd;
  • welke gegevens worden vastgelegd;
  • wat er met de gegevens gebeurt (21).
Geef de gebruiker maximale vrijheid en controle.
  • Geef gebruikers de mogelijkheid om hun invoer te verwijderen (undo) of opnieuw te doen (redo) (17)(33). De gebruiker hoeft het dan niet in één keer goed te doen. Dit versnelt de leercurve van de gebruiker (door middel van learning by doing) aanzienlijk (10).
  • Geef de gebruiker de mogelijkheid om zijn reactie te archiveren (19).
Gebruik zoveel mogelijk dezelfde soort invoermethode.
  • Het kost gebruikers veel tijd wanneer ze voortdurend moeten wisselen tussen toetsenbord en muis (1).
Gebruik interactieve elementen die al bekend zijn bij de meeste gebruikers, en gebruik ze op een conventionele manier.
  • Wees voorzichtig met het introduceren van nieuwe elementen (zoals widgets). De voordelen wegen maar zelden op tegen de kosten voor de gebruiker (leren omgaan met het nieuwe element) (10).
  • Sommige gebruikers, met name oudere gebruikers, weten bijvoorbeeld niet hoe ze een drop-down list moeten gebruiken (1).
Gebruik de computer om fouten te ontdekken die (vaak) worden gemaakt door gebruikers (1).
Zorg dat webformulieren (ook) volledig kunnen werken zonder gebruik van client-side scripts (zoals JavaScript) (21).
Zet labels altijd dicht bij invoervelden (1).
  • Gebruikers moeten in één oogopslag kunnen zien welke label bij welk invoervak hoort.
    • Als de lengtes van de verschillende labels binnen een formulier sterk variëren, kies er dan voor de labels rechts uit te lijnen.



Interface

Een bedieningselement dat op een bepaald moment geen functie voor de gebruiker heeft is gedimd (‘disabled’, ‘unavailable’).
Voeg geen <Reset> knop toe aan een formulier (19).
  • De kans dat mensen na het invullen alles willen wissen is vele malen kleiner dan de kans dat ze per ongeluk op de <Reset> knop klikken (2).
Geef, bij een foutmelding als gevolg van het versturen van een formulier, de gebruiker de mogelijkheid om onmiddellijk de fout in het formulier te kunnen herstellen (19).
  • Laat de gebruiker niet afhankelijk zijn van de <Terug> knop.
Vermijd het 'lege vel-syndroom' bij gebruikers die de eerste keer gebruik maken van een formulier.
  • Onervaren gebruikers weten vaak (nog) niet goed wat zinnige waarden zijn voor parameters. Voorzie velden en opties daarom van slimme standaard default waarden. In een later stadium kan de gebruiker die waarden dan aanpassen aan zijn specifieke persoonlijke profiel (10).
Geef ervaren gebruikers de mogelijkheid om veelgebruikte routines te versnellen of te automatiseren (17).
  • Een veelgebruikte methode door ervaren gebruikers om snel van veld naar veld te springen is met behulp van de <Tab> toets (1). Schakel die functie dan ook niet uit. Idem voor de focus retangle rondom een link (19).



Invoer van gegevens

Maak een duidelijk verschil tussen verplichte en optionele velden (1)(19).
Laat gebruikers altijd de gegevens zien die ze hebben ingevoerd.
  • Zorg ervoor dat ingevulde gegevens tijdens het invulproces niet verdwijnen (2).
  • Gebruikers moeten altijd in één oogopslag de hele reeks gegevens kunnen zien die ze hebben ingevoerd. Invoervelden moeten tenminste 35 tot 40 karakters lang zijn (1).
    • Verdeel lange gegevensitems (zoals familienamen) over meerdere invoervelden (1).
  • Geef gebruikers feedback over de status van de dataverwerking (3).
Gebruik het juiste type element voor de juiste soort keuzemogelijkheid.
  • Gebruik tekstvelden als de snelheid van invoer van belang is.
    • Het invoeren van teksten werkt sneller dan alle andere methodes (1).
    • Nota bene: de snelheid gaat ten koste van de precisie. Text entry levert meer fouten op dan andere methoden (1).
  • Gebruik stemrondjes (radio buttons) voor opties die elkaar uitsluiten (1).
    • Gebruik geen stemrondjes als er maar één optie is (1).
  • Gebruik vinkjes (check boxes) wanneer er meerdere opties tegelijkertijd kunnen worden geselecteerd (1).
    • Gebruikers moeten zowel door op het hokje zelf als op het label te klikken het vinkje kunnen (de)activeren (1).
  • Gebruik open lijsten om één optie uit vele opties te kiezen (1).
    • Gebruik liever open lijsten dan drop-down lijsten (1). Een uitzondering zijn extreem lange lijsten -- een drop-down lijst werkt dan beter (1).
    • Wanneer open lijsten worden gebruikt, toon dan zoveel mogelijk opties (1).
  • Sorteer keuzeknoppen en opties binnen lijsten op volgorde van belangrijkheid. Zet de belangrijkste en/of meest gebruikte bovenaan (1).
Plaats (automatisch) een knipperende cursor aan het begin van het eerste invoerveld wanneer het formulier op de pagina verschijnt (1).
Minimaliseer de invoer van speciale tekens.
  • Vermeldt eenheden altijd op of bij de labels van invoervelden zodat de gebruiker ze niet in het veld zelf hoeft in te vullen (1).
  • Idem voor speciale tekens (%, valuta-aanduidingen). Dit voorkomt het veelvuldig gebruik van de <Shift> knop %, valuta-aanduidingen) (1).
Laat altijd een gevestigingsbericht zien nadat een formulier is opgestuurd (submitted) (33).




Externe links

Tips en trucs voor begrijpelijke formulieren in het algemeen:
http://www.begrijpelijkeformulieren.nl/

Proces
Randvoorwaarden