Ga naar inhoud. | Ga naar navigatie

DISCLAIMER: DdUX.org werkt optimaal met 'standards compliant' browsers (zoals Firefox, Camino, Opera en Safari). Er wordt hard gewerkt om de site ook in recente versies van Internet Explorer bruikbaar te maken.

DdUX: Design for digital User eXperience

Onderdelen
Persoonlijke hulpmiddelen
U bent hier: Home Artikelen Archief 2010 Februari 23 Boekbespreking: Web Form Design

Boekbespreking: Web Form Design

Bas Evers, 23-02-2010

Luke Wroblewski heeft als user interface designer gewerkt bij Yahoo! en eBay. In 2008 verscheen bij uitgeverij Rosenfeld Media Web Form Design: Filling in the Blanks. Hierin beschrijft hij de ontwerpprincipes voor effectieve en aantrekkelijke formulieren. "Als ik een exemplaar van Web Form Design zou sturen naar de ontwerper van elk online formulier waar ik me over frustreer, dan ga ik failliet, alleen al aan de verzendkosten", schrijft een enthousiaste lezer. Is het inderdaad zo'n nuttig boek?

Forms Suck

Luke Wroblewski (@lukewdesign) draagt zijn boek op aan iedereen die ooit een formulier moest invullen. Niemand vindt dat namelijk leuk. Ze staan in de weg van wat we willen doen. Ter illustratie hiervan beschrijft hij het verschil tussen afrekenen in een winkel (service met een glimlach) en een willekeurig bestelformulier. In zijn eigen woorden: "Forms suck". En daar moet het ontwerp rekening mee houden.

Van binnen naar buiten

Veel formulieren worden ingestoken vanuit de informatie die in de database terecht moet komen, constateert de auteur. Van binnen naar buiten dus. Maar het moet andersom. Zorg dat mensen zo snel en gemakkelijk mogelijk door het formulier heen komen. Of nog beter, maak formulieren onzichtbaar en zorg dat organisaties op andere manieren aan de informatie komen die zij nodig hebben en de klanten krijgen wat ze willen.

Ontwerpprincipes

Als je besluit dat een formulier de manier moet zijn om aan informatie te komen, dan heeft Wroblewski vier leidende ontwerpprincipes:

  1. Minimaliseer de pijn en moeite.
  2. Maak de weg naar het einde inzichtelijk.
  3. Houd rekening met de context.
  4. Wees consistent in je communicatie.

Basiselementen

Om met de laatste twee principes te beginnen - elk webformulier bestaat uit drie basiselementen die elk volgens Luke Wroblewski hun eigen regels kennen:

  • Labels moeten het zo makkelijk mogelijk maken de vraag te beantwoorden. Ze moeten ook duidelijk te onderscheiden zijn van wat wordt ingevoerd.
  • Probeer optionele invoervelden te vermijden. Als ze er toch zijn en de meeste zijn verplicht, markeer dan alleen de aanvullende. Geef feedback over wat er wordt ingevoerd: was het antwoord juist? Zo nee, geef een suggestie.
  • Onderscheid primaire acties (verzenden, opslaan, doorgaan) van secundaire (annuleren, wissen, terug). Zorg dat secundaire acties visueel minder aanwezig zijn.

Weinig moeite

Bij elk webformulier is verwachtingenmanagement het sleutelwoord. Geef het een titel die weergeeft wat je er als klant mee bereikt. Leg uit waarom je bepaalde informatie vraagt en wat je precies wil weten. En omdat niemand formulieren voor zijn hobby invult raadt Wroblewski aan je jezelf bij elk webformulier af te vragen:

  • Moet ik deze vraag echt stellen?
  • Kan ik op een geautomatiseerde manier aan deze informatie komen?
  • Is er een betere tijd of plek denkbaar om een antwoord te krijgen?

Voortgang

Iedereen wil zo snel mogelijk door een formulier heen komen. Laat de gebruiker daarom weten hoe ver ze verwijderd is van haar doel. Maar wees wel eerlijk. Formulieren die meerdere pagina's beslaan hebben soms een voortgangsbalkje dat niet correct weergeeft uit hoeveel pagina's het formulier bestaat. Reden voor frustratie.

Een oplossing is volgens de auteur om helemaal geen voortgangsbalk weer te geven en de gebruiker zo snel mogelijk door het formulier te leiden. Een andere is een voortgangsindicatie te geven op een wat hoger niveau, zonder dat er expliciete verwachtingen worden gewekt.

Slimme formulieren

Formulieren kunnen slimmer gemaakt worden door uitgangswaarden voor je te berekenen. PayPal leidt bijvoorbeeld uit de begincijfers van je creditcard af wat voor soort kaart het is. De gebruiker is er verder bij geholpen als aanvullende invoervelden die niet voor iedereen relevant zijn of invoervelden die voortvloeien uit een eerdere selectie onzichtbaar zijn totdat ze relevant worden.

Gradual Engagement

Over de toekomst is Luke Wroblewski heel duidelijk: registratieformulieren moeten dood. De toekomst zit volgens hem in gradual engagement. Je maakt mensen eerst vertrouwd met de dienst die je biedt en pas als ze iets doen waar extra gegevens voor nodig zijn, vraag je die. Op termijn ziet hij formulieren helemaal verdwijnen. Initiatieven als LiveID en OpenID omarmt hij ook, al ziet hij hier liever snel een standaard voor ontstaan.

Input voor herontwerp

Mocht je enthousiast zijn geraakt door de tips en wil je direct aan de slag, dan hoef je het wiel gelukkig niet opnieuw uit te vinden. Wroblewski geeft een mooi lijstje van input die je kunt gebruiken bij het herontwerp van een webformulier:

  • Bruikbaarheidstesten.
  • Observatie van gebruikers op locatie.
  • Analyse van helpdeskgegevens (waar wordt het meeste over geklaagd?).
  • Analyse van webstatistieken: hoe vaak wordt een formulier compleet ingevuld?
  • Eyetracking-onderzoek.
  • Conventies op het web ('Best Practices').

Oordeel

Web Form Design is bedoeld voor iedereen die op enige manier bij het ontwerpen van een webformulier is betrokken. Dat maakt Wroblewski in mijn ogen waar. Ik ben geen ontwerper van gebruikersinterfaces, maar ik kan er toch zat nuttige zaken uithalen. Het is een praktisch en toegankelijk boek met veel voorbeelden en illustraties. Neem één zo'n praktische tip: houd er rekening mee dat veel mensen de Tab-toets gebruiken om door een formulier heen te komen.

Mooi aan het boek is ook dat de auteur allerlei onderzoek aanhaalt om zijn adviezen te ondersteunen. Bijvoorbeeld eyetracking-studies waaruit blijkt dat mensen onmiddellijk naar het eerste invulveld kijken om zo snel mogelijk door het formulier heen te komen. Jammer van die uitgebreide instructieteksten die erboven staan: die worden genegeerd. Kijk, dankzij zulke informatie hoef je die fout zelf niet nog eens te maken.

Trackback

De URI om een Trackback naar dit bericht te sturen is: http://www.ddux.org/artikelen/archive/2010/02/23/boekbespreking-web-form-design/trackback

Powered by Plone CMS, het Open Source Content Management Systeem

Deze site voldoet aan de volgende standaarden: