Ik had onlangs een pittige discussie met P. (lees trouwens zijn
zeer interessante site Usersense) over de uitlijning van
webformulieren.
Een webformulier bestaat typisch uit een linkerkolom met labels
(Naam, Adres...) en een rechterkolom met invulvelden.
Moeten die labels links uitgelijnd worden (zodat er ongelijke gaten
ontstaan tussen label en invulveld) of moeten ze rechts uitgelijnd
worden, tegen het bijhorende invulveld?
Zoals altijd in usability, is het juiste antwoord: het hangt er van
af. Meer specifiek, het hangt af van het gedrag van de bezoeker, en
de taak die hij wil uitoefenen. (Pas op! Buzzword!
Behavioural.)
Als het formulier slechts één maal of zeer beperkt
door de bezoeker moet ingevuld worden (de meeste webformulieren
vallen hieronder, bv. een contactformulier), dan ga ik voor linkse
uitlijning.
De gebruiker moet dan elke regel volledig lezen, omdat hij niet met
het formulier vertrouwd is. Zijn eerste aandacht gaat dan naar het
label, pas daarna naar het invulveld. Bij het verderlezen naar de
volgende regel, zoeken zijn ogen het beginpunt weer op, met het
volgende label.
Dan is een linkse uitlijning het meest geschikt.
Als het formulier bij wijze van spreken dagelijks door de bezoeker
gebruikt wordt (bij een veelgebruikte webapplicatie), dan kent hij
de plaats van de invulvelden. De focus in het gebruik moet dan op
de data (de invulvelden) liggen, niet op de labels. Door de labels
rechts uit te lijnen, en de invulvelden er links tegenaan, ligt die
focus op het begin van het invulveld.
Rechtse uitlijning lijkt hier het beste.
Het grote nadeel bij een rechtse uitlijning van de labels is dat je
een zeer onrustig pagina-beeld creëert. De linkerkant van de
pagina 'danst' nogal.
Wat is jullie overtuiging? Links of rechts?
Volg de Netlash-blog
Schrijf je in op onze maandelijkse e-mail nieuwsbrief.
Door Roel 11/04/06 (5 jaren geleden)
Re: Usability van webforms
Voor een gebruiker die schermgroting gebruikt, zijn rechts uigelijnde labels minder geschikt: als je met een schermvergroting van pakweg 16x werkt, zie je maar één of twee woorden van een tekstregel tegelijk op het scherm. Als je dan het formulier wil 'scannen' met je ogen (door er doorheen te scrollen), dan moet je een stuk vaker ook van links naar rechts scrollen om de inhoud van het label te kunnen lezen (en in een oogopslag te begrijpen). Je kan de 'viewport' van je schermvergrotingsprogramma natuurlijk ook rechts positioneren, zodat je steeds het laatste stukje van het label in beeld hebt, maar dat is in de praktijk een stuk vervelender. Dat komt (uiteraard) doordat wij, 'Westerlingen', van links naar rechts lezen. Om het verschil helemaal te begrijpen, zou je het eens moeten proberen.
Voor wie schermvergroting gebruikt, is een formulier waarbij de velden onder de labels gepostioneerd zijn, eigenlijk nog het handigst van al. Ook formulieren waarbij de velden meteen aan de labels geplakt worden (zonder nette kolommen dus), wordt door gebruikers van schermvergroting als handiger ervaren.
Maar je moet natuurlijk een compromis vinden waar alle gebruikers goed bij varen. Vanuit usability-standpunt, vind ik dat je labels daarom liefst links uitlijnt, maar daarnaast ook voor een 'oogliniaal' zorgt (bijvoorbeeld een alternerende grijze/witte achtegrond) zodat je ogen naar het bijbehorende invoerelement geleid worden als de afstand tussen het laatste woord in het label en het invoerveld nogal ver is. Dat is ook een niet te onderschatten hulp voor gebruikers van schermvergroting.
Over checkboxes en radiobuttions: naar analogie met formulieren op papier, vind ik het beter om labels rechts van deze formulierelementen te plaatsen. Zo kan je in de linkerkolom bijvoorbeeld de instructietekst 'Geslacht' plaatsen, en rechts een groep met radiobuttons die er zo uitziet.
() Man
() Vrouw
Mijn gedacht.
Door Vincent 11/04/06 (5 jaren geleden)
Re: Usability van webforms
LukeW heeft daar een tijdje geleden al iets over geschreven: http://www.lukew.com/ff/entry.asp?144
Met een even degelijke follow-up hier: http://www.lukew.com/ff/entry.asp?155
Er zijn nog geen tweets over dit artikel.