Waarom ik besloot af te wijken van de standaard methode om labels en input velden onder elkaar te zetten.

Ik besloot af te wijken van de conventie om labels en input velden onder elkaar te zetten. In dit artikel leg ik uit waarom.

Leesrichting en scrollen

Voor een portaal ben ik bezig met het ontwerp van de digitale formulieren. Van de gebruiker wordt veel informatie gevraagd en dat betekent veel input velden. De verschillende onderdelen op de pagina’s kunnen daardoor vrij lang worden. Lange pagina’s vind ik ietwat beangstigend want het betekent ook veel scrollen.. SCROLLEN MOET ALTIJD WORDEN VOORKOMEN, althans, dat dacht ik ooit. Scrollen loste ik in eerste instantie op door input velden naast elkaar te plaatsen, (zie voorbeeld 1). Velden en labels naast elkaar zetten vind ik verre van ideaal. De leesbaarheid spreekt niet voor zich en de task completion tijd kan daardoor omhoog schieten. Door de velden naast elkaar te plaatsen is de gebruiker langer bezig met het invullen, de wisseling van leesstijlen maakt het daarnaast niet erg vriendelijk.

Inmiddels heb ik geleerd dat het eigenlijk niet heel erg hoeft te zijn om lang te scrollen, dit is afhankelijk van de situatie en de context. In dit specifieke geval gaat het om een formulier in een portaal. Op een e-commerce website is het belangrijk om de gebruiker zo snel mogelijk te helpen, immers zodra deze zijn aandacht kwijt is of er niet uitkomt staan er meer websites te wachten die dezelfde producten aanbieden. Veel scrollen is in dit geval onderdeel van de werkzaamheden omdat er veel informatie ingevuld moet worden. Om de ervaring toch wat plezieriger te maken zoek ik naar de beste manier om het formulier te ontwerpen. Dat komt neer op; scrollen en iets langer lezen.

Drie voorbeelden

Voorbeeld 1 is het eerste concept wat ik als eerste in elkaar draaide. Het duurde niet lang om tot de conclusie te komen dat het een beetje een rommeltje is. Er is geen automatisch leesrichting. In een oogopslag begrijpen wat er gevraagd wordt is niet mogelijk doordat de input naast elkaar staat. Door gebrek aan en onhandig geplaatste witruimte voelt het ontwerp verkrampt en onlogisch aan.

Voorbeeld 1 – Input van links naar rechts en van onder naar beneden geplaatst

In voorbeeld 2 is de leesbaarheid verbeterd door de labels en de input velden onder elkaar te zetten. De leesrichting is direct duidelijk, het gaat van boven naar beneden. Doordat de labels boven de input velden zijn geplaatst is het mogelijk in een oogopslag te zien welke informatie er gevraagd wordt. Een probleem vind ik de hoeveelheid aan witruimte rechts van de velden. Het leidt teveel af van de taak doordat het veel aandacht vraagt.

Voorbeeld 2 – De labels en input velden staan onder elkaar, rechts is veel witruimte

Voorbeeld 3 toont een ontwerp waarbij de labels en de input velden naast elkaar staan. Het is hierdoor niet mogelijk om in een oogopslag te registreren wat er in het veld moet komen te staan. De gebruiker moet meer moeite doen door het label te lezen en dan naar rechts te kijken om input te leveren.

Voorbeeld 3 – labels en input velden staan naast elkaar

Conclusie

Door de context mee te laten wegen waarin om input gevraagd wordt heb ik besloten om voorbeeld 3 te kiezen. Ik vind het heel belangrijk om complexe formulieren te versimpelen zodat de taken sneller vervuld kunnen worden. Het zou om die reden logischer zijn om de labels en de input velden boven elkaar te zetten. Helaas zag die oplossing er binnen dit portaal niet ideaal uit. Met in het hoofd de functie van het portaal en de kennis van de gebruiker heb ik besloten om de input labels en de input velden naast elkaar te plaatsen. De input die gevraagd wordt is immers niet gemakkelijk te vullen, ook al stonden de labels boven de input velden. Het invullen vergt kennis en tijd van de gebruiker.

Auteur: Sabrina Doornekamp

Ik heb een achtergrond in grafische vormgeving en heb media en cultuur gestuurd aan de Universiteit van Amsterdam. Mijn specialisatie richtte zich op digitale media. Samen vormen deze studies de basis voor mijn interesse in digitale systemen en hun gebruikers. Ik geloof dat samenwerking en communicatie belangrijke onderdelen zijn van het ontwerpproces.