Wat zou het Web zijn zonder formulieren? Online formulieren zijn een van de meest voorkomende paginatypen. Zo zijn er voor bepaalde sitegenres bestel- en transactieformulieren (commercieel) en registratie-, inlog- en reactieformulieren (sociaal). Daarnaast worden voor online lezers- en marktonderzoek vragenformulieren, enquetes en 'surveys' ingezet.

Jammergenoeg is formulierontwerp lang niet zo populair als vormgeving met CSS, sociale software of 'user-generated content'. De zoekterm 'formulierontwerp' levert in Google net ruim duizend resultaten op.

Toch bepalen formulieren voor een belangrijk deel de user experience van een website of -applicatie. De geringe bruikbaarheid van een website of -applicatie hangt meestal direct samen met slecht ontworpen formulieren. Wat kun je doen om betere formulieren te ontwerpen?

Een denkmodel voor formulieren

Caroline Jarrett (Forms that Work) hanteert een drielagenmodel voor het ontwerp van (online) formulieren. Dit model kijkt vanuit drie perspectieven naar formulieren: de verschijningsvorm, de volgorde van vraag-en-antwoord en de onderliggende taakstructuur. Alhoewel de eerste indruk van een formulier belangrijk is is de laag van vraag-en-antwoord het meest voor de handliggende. Toch blijkt een formulier met een goede taakstructuur het meest bruikbare. Een korte toelichting op de lagen.

1. Perceptie: De pagina heeft ook daadwerkelijk het uiterlijk van een formulier. Het is iemand direct duidelijk dat het een formulier is en niet iets anders, zoals een mengeling van een productpagina en een bestelformulier. Een heldere, inzichtelijke en ondersteunende vormgeving is daarom erg belangrijk.
2. Conversatie: Een formulier voert een conversatie met iemand. De reeks van vraag-en-antwoord tussen het formulier als vertegenwoordiger van een organisatie en een persoon voltrekt zich in de tijd als een gesprek. Allerlei kwaliteiten van een gesprek met duidelijke vragen en antwoorden komen dus ook terug in een formulier, zoals respect, vertrouwen en een zekere intimiteit.
3. Relatie: Elk formulier is een onderdeel in de relatie tussen een organisatie en een persoon die het formulier gebruikt en iets wil bereiken. De onderliggende taakstructuur in het formulier bepaalt de werkverdeling tussen aanbieder en gebruiker. Is de relatie tussen een organisatie en persoon gespannen of eenzijdig (bijvoorbeeld met de Belastingdienst of uitkeringsinstantie) dan zullen bij het gebruik van een formulier dergelijke gevoelens altijd meespelen.

Hoe herken je krakkemikkige formulieren?

In de regel weten ontwerpers en vormgevers niet genoeg van formulieren. De goede niet te na gesproken. Velen richten zich vooral op de presentationele dimensie en minder op de conversationele en relationele. Een paar voorbeelden van hindernissen in formulieren op een rijtje.

A - De dictatuur van het grid

Voor de vormgeving is een 'grid' belangrijk. Het geeft rust, stabiliteit en een solide fundament. Maar soms slaat de visuele symmetrie van een grid door en gaat het dictatoriale neigingen vertonen. Dat is herkenbaar als alle invoervelden of meerkeuzelijsten in een formulier even breed zijn. Tussen hun grootte en de structuur en inhoud van de gevraagde informatie bestaat dan nauwelijks een relatie. Zo is bij een dictatoriale grid het invoerveld voor een postcode of telefoonnummer even breed als die voor een familienaam of woonplaats. Uitgangspunt in de vormgeving is dan dat alle invoervelden rechts uitlijnen, zodat er een symmetrisch beeld ontstaat. Vormgevers houden niet zo van onrustige, inspringende en onregelmatige randen.

B - De opeenstapeling van gegevenselementen

Een ontwerper positioneert de vragen, toelichtingen, hints, gegevenselementen en keuzecomponenten op een pagina. Zowel verticaal als horizontaal nemen ze positie in. Bij opeenstapeling van componenten heeft een ontwerper alles netjes onder elkaar gezet. Onafhankelijk van hun grootte is de horizontale dimensie van het canvas ongebruikt gebleven. Het begrip 'compact' is dan niet direct van toepassing op zo'n formulier. Wat de grootte van de elementen ook is of hoe bepaalde elementen ook bij elkaar horen, de ontwerper kent voornamelijk de verticale ordening. Het gevaar bestaat dat een formulier daarmee onnodig lang wordt en dat waardevolle ruimte onbenut blijft. De rationalisering van deze beslissing dat als mensen hun venster sterk verkleinen de inhoud van het formulier nog zichtbaar blijft is op zijn zachtst gezegd discutabel.

C - Een gebrek aan visuele ordening

De vormgeving bepaalt de zichtbaarheid van de identiteit en structuur van een formulier. Een evenwichtige presentatie van delen en gehelen maakt het inzichtelijk, begrijpelijk en bruikbaar. Een logische compositie van een formulier geeft houvast als deze ook in de vormgeving terugkomt. Maar jammergenoeg zijn het vaak de esthetische, kunstzinnige of creatieve aspecten in de vormgeving die voorrang krijgen. De rol, functie en betekenis die vormgeving van een formulier in feite moet hebben zijn dan ondergeschikt hieraan. Ontwerper Luke Wroblewski laat regelmatig in zijn columns over de principes van visuele communicatie zien hoe vormgeving structuur en inhoud kan versterken en zo het gebruik verbetert. Binnenkort publiceert hij een boek over dit ontwerp.

D - Verkeerde opsommingen en indelingen

Veel formulieren bevatten onduidelijke, inconsistente en slecht gecategoriseerde of geformuleerde vragen, labels en opties. Kan iemand uit meerdere mogelijkheden kiezen dan is het belangrijk deze ook logisch, helder en begrijpelijk te omschrijven. In het ontwerpproces worden vaak bij aanduidingen categoriefouten gemaakt. Een indeling als Appel, Peer en Zwart is een duidelijk voorbeeld van een categoriefout. Het is wat minder duidelijk bij Geregistreerd, Ongeregistreerd en Bezoeker. Een ander voorbeeld van onnodig ingewikkelde, onduidelijke en moeilijk te begrijpen sorteeropties is een omvangrijke meerkeuzelijst met 'Relevantie (aflopend)', Relevantie (oplopend), Titel (aflopend), Titel (oplopend), Creatie datum (aflopend), Creatie datum (oplopend), Modificatie datum (aflopend), Modificatie datum (oplopend), Bron (aflopend) en Bron (oplopend). Behalve dat de waarde van sommige opties twijfelachtig is zou de op- of aflopende volgorde beter als gedrag van een kolom kunnen worden ontwikkeld dan als keuzevariant in deze lijst.

E - Zoveel mogelijk verplichtingen

Formulieren bestaan uit verplichte en optionele onderdelen. Heel wat frustraties worden veroorzaakt door verkeerde, irrelevante of onlogische aanduidingen en keuzen hierin. Hoe vaak komt het niet voor dat onderdelen verplicht zijn die geen relatie hebben met de context van het formulier of het gebruiksdoel. Zo willen vooral verkopers maar al te graag dat een telefoonnummer verplicht wordt opgegeven terwijl de context noch iemands intentie dat nodig maken. Een overdaad aan verplichte onderdelen verbetert de relatie tussen organisatie en doelgroep zeker niet.

F - Verkeerd gekozen interactiecomponenten

Bepaalde informatie vereist bijbehorende keuzeobjecten of antwoordformaten. Specifieke keuzen of gegevens leiden tot daarop toegesneden componenten in een formulier. Zo is voor een binaire keuze met twee elkaar uitsluitende mogelijkheden ('Ja' of 'Nee') een aankruisvakje of een 'radio button set' met twee opties voor de hand liggend. In zo'n geval een meerkeuzelijst met twee keuzes gebruiken is fout. Een ander voorbeeld van een foutieve ontwerpkeuze is voor een datum meerkeuzelijsten gebruiken. Lijsten met dertig of eenendertig dagen, één met twaalf maanden en één met tien of meer jaren zijn ongepast. In zo'n geval liggen invoervelden met twee posities voor de dagen en de maanden en vier voor het jaar meer voor de hand. Een hint zoals 'DDMMJJJJ' kan daarbij ondersteunend zijn. Per datum een gehele kalendertoepassing aanbieden lijkt al helemaal 'overkill'.

G - Onvoorspelbaar gedrag van componenten

Door bijna uitsluitend andere sites te bezoeken menen mensen het gedrag van formuliercomponenten te kunnen voorspellen. Het interactieve gedrag van keuzelijsten, aankruisvakjes of knoppen is bekend en voorspelbaar. Zo staat een aankruisvakje 'Aan' of 'Uit' en begint een keuzelijst zo mogelijk met een hint ('Kies een land...') en bevat het een beperkt aantal logische waarden waaruit er één te kiezen. Het feitelijke gedrag van een component moet daarom geheel in lijn zijn met iemands verwachtingen. Zo is het heel normaal te verwachten dat een 'radio button' het wisselen tussen opties mogelijk maakt. Jammergenoeg is dat niet altijd het geval. Als er na selectie van een 'radio button' onmiddellijk een nieuwe pagina verschijnt dan voldoet het gedrag totaal niet aan de verwachting. Ligt dit gedrag niet in lijn met de verwachtingen dan breken deze. Frustratie, verwarring en irritatie zijn dan het onmiddellijke gevolg.

Dit zijn slechts enkele (triviale) problemen met formulieren. Wil het gebruik van formulieren bijdragen aan positieve user experiences dan zullen Jarrett's conversationele en relationele dimensies meer aandacht moeten krijgen. Maar eerst deze problemen oplossen.