Formulierlay-out op websites

Nieuwsbrief juli 2007

Formulieren op het internet zijn er in veel verschillende vormen. Er zijn variaties in de uitlijning, benamingen van velden en ondersteunende visuele elementen rondom het formulier. 

Lay-out van de formulieren

Het verticaal uitlijnen van een formulier is de beste optie als gebruikers zo snel mogelijk een formulier in moeten vullen. Dit is bijvoorbeeld het geval als de gevraagde gegevens standaard persoonsgegevens zijn. Gegevens die hieronder vallen zijn bijvoorbeeld: naam, adres en bankgegevens.

Bij een verticale uitlijning worden de labels en de invoervelden boven elkaar geplaatst. Dit reduceert het aantal oogbewegingen en de tijd die nodig is om het formulier in te vullen. De gebruikers hoeven maar één kijkrichting aan te houden en dat is naar beneden.

Als labels boven de invoervelden staan is het van belang dat de labels vet gedrukt zijn. Hierdoor vallen de labels beter op en springen ze naar voren. Als de labels niet vet zijn moeten ze concurreren met de invoervelden, en vallen ze te weinig op.

Bij informatie die niet makkelijk in groepen is in te delen of niet standaard is, is het beter om de labels voor de invoervelden te plaatsen. Gebruikers kunnen dan eerst makkelijk scannen welke informatie nodig is, om vervolgens de velden in te vullen die voor hun situatie van belang zijn.

Gebruik van visuele elementen

Labels die links van de invoervelden geplaatst zijn, hebben als nadeel dat de labels en de invoervelden uit elkaar geplaatst zijn. Hierdoor is het lastig om te zien welk label bij welk invoerveld hoort.

Ondersteuning van de gebruiker door achtergrondkleuren en lijnen toe te voegen, is hiervoor een oplossing. Door alle labels dezelfde kleur te geven en alle invoervelden ook, wordt goed het verschil tussen beiden aangegeven. Door het bij elkaar horende label en invoerveld door een horizontale streep te onderscheiden van andere labels en invoervelden krijgt de gebruiker ondersteuning bij het invullen van het formulier.

De achtergrondkleuren en lijnen maken het voor de gebruiker lastig om te focussen op de belangrijkste onderdelen van het formulier: de labels en invoervelden. Kleuren en lijnen moeten daarom alleen gebruikt worden om aan te geven welke groepen bij elkaar horen. Door goed gebruik te maken van kleuren en lijnen kan duidelijk aangeven worden welke onderdelen van het formulier het belangrijkste zijn.

Primaire en secundaire acties

De primaire actie van een formulier, meestal het verzenden ervan, moet visueel meer opvallen dan de secundaire acties. De primaire actie moet in lijn staan met het invulformulier. In de praktijk betekent dit dat een button verticaal uitgelijnd onder het formulier moet staan. Secundaire acties als ‘ga verder’ of ‘ga terug’ moeten minder opvallen. Gebruikers zullen zo minder vaak de verkeerde knop aanklikken.

Bron:


Inhoud:

  1. Verandering vs. stabiliteit in web usability richtlijnen
  2. Valkuilen bij de bouw van sociale webapplicaties (zoals Youtube)
  3. Kernvraag: wie gaat de site gebruiken en hoe?
  4. Een andere blik op ontwerpen
  5. Interview met Steve Krug over usability en webdesign
  6. Formulierlay-out op websites
  7. Kort Nieuws - Kort Nieuws - Kort Nieuws
  8. 2C's online cardsort methodiek