Acties op een formulier

Op een website loopt het contact tussen een bedrijf en zijn klant vaak via een formulier. Dat is opgemaakt uit veldnamen, invulvakken en (meestal) twee knoppen: ‘volgende’ of ‘verzenden’ en ‘vorige’ of ‘annuleren’. Zou er voor het gebruiksgemak mogelijk zijn een standaardpositie voor deze elementen te bepalen zijn?

Er is een grote variatie in de positie van deze elementen en niet alle oplossingen ondersteunen de taak van de gebruiker even goed. Naast de vraag waarom de gebruiker een bepaald veld in moet vullen, is zijn belangrijkst vragen: “Wat is het volgende veld dat ik in moet vullen?”, of “Wat is de volgende stap in de interactie?”. Dat zijn de vragen waarop het formulier al antwoord moet geven vóórdat de gebruiker zich er bewust van is.



Om het antwoord op de eerste vraag te vergemakkelijken, zetten we alle in te vullen vakken van een formulier onder elkaar, ook links uitgelijnd. Daardoor vinden de ogen van de gebruiker recht onder het ingevulde vak het volgende, lege, vak. Dit is een efficiënte manier voor het invullen van formulieren (Jarrett).

In lijn daarmee is het antwoord op de tweede vraag ook makkelijk te geven: de knop die de meest logische actie uitvoert, moet uitgelijnd staan onder deze invulvakken - als volgt:

De veldnamen staan het beste links van de vakken. Door ze links uit te lijnen wordt de lijst makkelijker te scannen, mits de lengte van de veldnamen niet erg groot is (Wroblewski).

Maar waar laat je dan de andere knop? Vaak is er immers nog een tweede actie, waarmee de gebruiker terug kan naar de situatie vóór de klik naar het formulier. Hoewel de ‘back button’ daar nog heel vaak voor gebruikt wordt, is het wel duidelijk om een dergelijke actie ook in het formulier zelf aan te bieden, vooral bij formulieren die uit meerdere pagina’s bestaan.

In het algemeen ging ik er vanuit dat er op basis van onze leesrichting een logische reden is om de knop voor de stap vooruit aan de rechterkant te zetten, en de knop voor de stap achteruit aan de linkerkant. Maar twee artikelen van Luke Wroblewski (bron en bron) brachten mij aan het twijfelen. Hij noemt namelijk het feit dat er in een formulier zelden een ‘heen-en-weer’ navigatie nodig is – vaker is er onderaan het formulier een ‘primary action’ en een ‘secondary action’. Die ‘primary action’ is dan actie die voor de gebruiker het meest voor de hand ligt. En om die reden kan de weergave van die actie anders zijn dan de andere actie. De knop ‘annuleren’ is in dit geval niet zozeer een actie als wel een link naar de vorige pagina, en kan dus als zodanig worden getoond. Daarbij blijft de knop voor de ‘primary action’ wel uitgelijnd aan de invulvakken, zodat het ‘in the line of fire’ voor de gebruiker blijft:

Wanneer er wel een echte ‘heen-en-weer’ navigatie nodig is (bijvoorbeeld in een wizard), moeten de knoppen wel als gelijke waarden getoond worden:

Zoals vaker is het dus afhankelijk van de context welke oplossing de beste is. En gelukkig maar: wanneer er één de beste was, zou het ontwerpen van een user interface maar een saaie baan zijn!