Waar plaats je een label bij een invoerveldje?

Waar plaats je een label bij een invoerveldje?

  • Er is geen 'beste' plaats voor een label. Het is afhankelijk van de aard en de doelen van het formulier.
  • Wanneer conversie je ultieme doel is, plaats het label boven het invoerveldje.
  • Wanneer de juistheid van de gegevens het belangrijkste is, lijn het label dan links uit.
Cover van het e-book 'Mindf*ck de bezoekers van je website'

Verhoog je omzet, leer hoe mensen denken

Alle invulformulieren op een website tellen minstens 3 basiszaken:

  • Labels
  • Invoerveldjes
  • Actieknoppen

De labels geven aan wat er ingevoerd moet worden in de invoerveldjes. De actieknoppen (zoals ‘Verstuur’, ‘Zoek’, ...) zorgen dat de ingevoerde gegevens worden verwerkt door de website.

Labels horen vriendelijk te zijn, niet-bevelend en de bezoeker uit te nodigen om de vraag te beantwoorden. Maar hoe de mensen je vragen beantwoorden wordt ook bepaald door de plaatsing en uitlijning van deze labels.

Waar plaats je dit label nu het beste?

Waar plaats je dit label nu het beste?

Boven het invoerveld

Boven het invoerveld

Doorgaans is dit de beste methode. Dit soort formulieren zijn eenvoudig, de gebruiker hoeft maar één spoor te volgen naar de onderkant.

Schermvoorbeeld van een invulformulier met de labels boven het invoerveldje

Een label boven het invoervakje plaatsen is meestal de beste optie.

Doordat het label zeer dicht bij het invoerveldje staat, is er maar één oogfixatie nodig, waardoor de cognitieve verwerking en het uiteindelijke invullen zeer snel gaat.

Toch zijn ze minder geschikt bij lange invulformulieren. Je verkrijgt er immers een soort optisch bedrog door, waardoor de gebruiker het idee kan krijgen dat het toch wel een heel lang invulformulier blijkt te zijn en de afhaakkans net vergroot.

Nadelen

Voordelen

  • Het invulformulier kan veel plaats innemen in de verticale ruimte.
  • Minder geschikt bij langere formulieren.
  • Correlatie tussen label en invoerveld is hoog.
  • De gebruiker kan deze lay-out het snelst verwerken.
  • Conversie is bij korte formulieren ongeveer 10% hoger t.o.v. andere lay-out stijlen.
  • Zorgen voor veel horizontale ruimte waardoor lange labels en/of invoerveldjes mogelijk zijn. Handig bij vertalingen bijvoorbeeld.

Nadelen

  • Het invulformulier kan veel plaats innemen in de verticale ruimte.
  • Minder geschikt bij langere formulieren.

Voordelen

  • Correlatie tussen label en invoerveld is hoog.
  • De gebruiker kan deze lay-out het snelst verwerken.
  • Conversie is bij korte formulieren ongeveer 10% hoger t.o.v. andere lay-out stijlen.
  • Zorgen voor veel horizontale ruimte waardoor lange labels en/of invoerveldjes mogelijk zijn. Handig bij vertalingen bijvoorbeeld.

Links naast het invoerveld, label links uitgelijnd

Links naast het invoerveld, label links uitgelijnd

Deze lay-out is zeer geschikt voor invulformulieren waarbij je ongewone of lastig te verwerken gegevens wil gebruiken.

Schermvoorbeeld van een invulformulier labels links uitgelijnd naast het invoerveld

Ideaal wanneer de correctheid van de ingevoerde gegevens een prioriteit is.

Mensen kunnen gemakkelijk de labels scannen, zonder onderbroken worden door de invoervelden. Doch de afstand tussen de labels en invoeren velden kan soms hoog zijn waardoor het verwerken van het formulier trager verloopt. Gebruikers moeten springen van label naar invoerveld om de correcte correlatie te vinden, alvorens ze de gegevens kunnen invullen.

Dit is niet altijd een nadeel. Bij het verkrijgen van belangrijke informatie kan het zeker geen kwaad dat de gebruiker zijn tijd moet nemen om het formulier in te vullen.

Minder mensen zullen het formulier invullen, maar wat ze invoeren zal accurater zijn.

Nadelen

Voordelen

  • Correlatie tussen label en invoerveld is lastiger.
  • Verwerking is trager.
  • Minder conversie.
  • Weinig horizontale ruimte.
  • Eenvoudiger om de labels te scannen.
  • Accuraatheid van de ingevoerde gegevens is hoger.
  • Neemt minder verticale ruimte in

Nadelen

  • Correlatie tussen label en invoerveld is lastiger.
  • Verwerking is trager.
  • Minder conversie.
  • Weinig horizontale ruimte.

Voordelen

  • Eenvoudiger om de labels te scannen.
  • Accuraatheid van de ingevoerde gegevens is hoger.
  • Neemt minder verticale ruimte in.

Links naast het invoerveld, label rechts uitgelijnd

Links naast het invoerveld, label rechts uitgelijnd

De oogverwerking is ongeveer dubbel zo snel t.o.v. formulieren waarbij de labels links zijn uitgelijnd. Helaas zullen de mensen wel meer fouten maken.

Schermvoorbeeld van een invulformulier labels rechts uitgelijnd naast het invoerveld

Deze kan je overwegen wanneer performantie je doel is.

Door de uitlijning op rechts is de leesbaarheid van het label iets minder.

Men kan dit voorkomen door te zorgen dat de labels allemaal ongeveer dezelfde lengte bezitten.

Nadelen

Voordelen

  • De leesbaarheid van de labels is lastiger waardoor de mensen meer fouten zullen maken.
  • Correlatie tussen label en invoerveld is hoog.
  • Snellere verwerking van het formulier.
  • Neemt minder verticale ruimte in.

Nadelen

  • De leesbaarheid van de labels is lastiger waardoor de mensen meer fouten zullen maken.

Voordelen

  • Eenvoudiger om de labels te scannen.
  • Accuraatheid van de ingevoerde gegevens is hoger.
  • Neemt minder verticale ruimte in.

In het invoerveld

In het invoerveld

Ook al heeft deze lay-out best wel wat nadelen, soms heb je geen andere keuze. Gebruikers gaan significant meer fouten maken en ze kunnen deze moeilijker herstellen, omdat na hun invoer er geen correlatie meer is tussen het (verdwenen) label en met wat hoorde ingevoerd te worden.

Schermvoorbeeld van een invulformulier met labels in het invoerveld

Dit soort formulieren nemen weinig plaats in en da's wellicht hun enige voordeel.

Veel mensen gebruiken functionaliteit waarbij een invulformulier automatisch wordt ingevuld. Het komt wel eens voor dat de verkeerde informatie wordt ingevuld en dan is het lastiger te controleren waar de foutieve info staat.

Niet alleen zullen mensen meer fouten maken, door frustratie kunnen ze het invoerproces voortijdig afbreken.

Absoluut af te raden wanneer je meer dan één invoerveldje wil gebruiken.

Wanneer je weinig schermruimte hebt dan kan deze vorm alsnog nuttig zijn.

Nadelen

Voordelen

  • Quasi onbruikbaar bij gebruik van meerdere invoervelden.
  • Gebruikers zullen meer fouten maken en het is lastiger voor hen om deze te herstellen.
  • Neemt zeer weinig schermruimte in.

Nadelen

  • Quasi onbruikbaar bij gebruik van meerdere invoervelden.
  • Gebruikers zullen meer fouten maken en het is lastiger voor hen om deze te herstellen.

Voordelen

  • Neemt zeer weinig schermruimte in.

Conclusie

Conclusie

Er is geen beste plaats voor een label bij een invoerveldje. Het is afhankelijk van het doel en de context.

Edwin Waelbers

Ik ben een usability professional en zaakvoerder van Perita. Ik geef al bijna 30 jaar advies over het gebruiksvriendelijk maken van o.a. websites en software.

Praat gerust even met mij, ik ben een toegankelijke mens.

Edwin Waelbers, CEO van Perita

Of bel mij op +32 (0) 15 46 06 68

Deel dit artikel

Beoordeel dit artikel

40 bezoekers deelden gemiddeld 4.2 sterren uit

Wees de eerste om dit artikel te beoordelen!

Sorry dat het artikel niet voldeed aan je verwachtingen

Laten we het beter maken!

Kan je mij vertellen wat er beter kan?

Bekijk ook

Elke maand een extra tip in je bus

Elke maand een extra tip in je bus

Elke maand een extra tip in je bus

  • Mis geen enkel artikel meer.
  • Bevat extra tips die nog niet op de website zijn verschenen.
  • Je kan je gebruiksvriendelijk uitschrijven.

Niet twijfelen, gewoon doen

Megafoon