| Home > Usability Tips > Label locatie in formulieren |
Labels kunnen onder andere gebruikt worden om een omschrijving te duiden bij bijvoorbeeld een invoerveld. Ze worden dan ook veel gebruikt bij invulformulieren.
Je kan deze op verschillende manieren positioneren:
- Bovenaan het invoerveld
- Aan de linkerkant van het invoerveld en links uitgelijnd
- Aan de linkerkant van het invoerveld en rechts uitgelijnd
- Aan de rechterkant van het invoerveld
- In het invoerveld zelf
- ...
Het internet bevat honderden links over dit onderwerp en algemeen wordt aangenomen dat men best deze labels bovenaan het tekstveld plaatst.
Veel van die websites baseren zich doorgaans op een eye-track studie van Matteo Penzo.
Doch wanneer ik met een kritische blik naar die studie kijk dan vallen mij een aantal zaken op:
- Het test formulier is kort, slechts 5 items.
- Matteo gebruikt in zijn studie, niet voor elke label dezelfde omschrijving, wat eigenlijk de studie onderuit haalt
Het gebruik van een verschillende label omschrijvingen beïnvloed het testresultaat.
| Wat is dan wel de beste locatie voor die labels? |
Er is geen algemene ‘beste’ locatie. Het hangt een beetje af van de situatie. De lengte van de labels, de lengte van het invulformulier, het aantal verplichte velden en zelfs de belangrijkheid van het formulier hebben allemaal invloed op het beste ontwerp.
| Bovenaan het invoerveld |
 | ||||
| ||||
| Opmerking | ||||
Het ondersteunt tal van Gestalt principes zoals enkele treffend zijn beschreven door Stefan Wobben in zijn artikel over Gestaltpsychologie en webdesign. Je kan deze vorm best niet gebruiken bij grote invulformulieren. Gebruikers gaan immers de indruk hebben dat het invulformulier wel heel lang is en de kans is groot dat ze de motivatie niet kunnen opbrengen om het allemaal daadwerkelijk in te vullen. Het is ook aan te raden om het vet attribuut te gebruiken voor de labels. Dit verhoogt het visueel gewicht en brengt ze naar de voorgrond. Wanneer deze niet vet zijn, dan zullen de labels in competitie treden, qua aandacht (bekijk ook Cognitieve Bronnen), met de invoervelden, omdat deze bijna hetzelfde visueel gewicht bezitten. |
| Aan de linkerkant van het invoerveld en links uitgelijnd |
 | ||||
| ||||
| Opmerking | ||||
Deze lay-out is zeer geschikt voor invulformulieren met ongewone invoervelden of bij gegevens groepen die niet zo eenvoudig te verwerken zijn. Gebruikers 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. |
| Aan de linkerkant van het invoerveld en rechts uitgelijnd |
 | ||||
| ||||
| Opmerking | ||||
Dit is een variant op de vorige lay-out. De verwerking is iets sneller, maar de gebruikers gaan meer fouten maken. Dit komt omdat de leesbaarheid aan de label zijde iets minder is. Dit kan men voorkomen door te zorgen dat de labels allemaal ongeveer dezelfde lengte bezitten. |
| Aan de rechterkant van het invoerveld |
 | ||||
| ||||
| Opmerking | ||||
In de Westerse wereld lezen we van links naar rechts. Deze ongebruikelijke lay-out resulteert dan ook in een tragere verwerking en lagere leesbaarheid. Doch kan men deze lay-out uitzonderlijk wel eens toepassen in bijvoorbeeld artistieke omgevingen. Let er dan wel op dat de lengte van het invulformulier zeer kort is en dat je geen gelijkaardige informatie vraagt in hetzelfde invulformulier zoals het mobiel nummer en het telefoonnummer van uw vaste lijn. |
| In het invoerveld zelf |
 | ||||
| ||||
| Opmerking | ||||
Deze lay-out vorm is doorgaans af te raden. Gebruikers gaan significant meer fouten maken en ze kunnen deze moeilijker zelf herstellen, omdat na hun invoer er geen correlatie meer is met wat hoorde ingevoerd te worden. Hierdoor loop je niet alleen het risico dat ze meer fouten maken, door frustratie kunnen ze het invoer proces voortijdig afbreken. Bovendien is deze vorm dikwijls niet juist geïmplementeerd:
In bepaalde situaties kan het echter wel, bijvoorbeeld wanneer je "formulier" bestaat uit exact één veld zoals bij het zoek invulveld op veel websites. Gebruikers gaan niet veel problemen hebben om de intentie te verwerken. Bovendien kennen ze dit ook van veel andere websites.  Bij gebruik van één invoerveld, dan kan een label in een invoerveld wel. Zeker als dit een permanente functie heeft en verder ondersteund wordt met een icoon. |
Bekijk Ook:
Vond je dit artikel interessant? Doe dan het volgende:
- Plaats een reactie
- Volg Usability Vlaanderen op Facebook of Twitter
- Schrijf je in op de E-mail nieuwsbrief of RSS feed
- Deel dit artikel met vrienden en collega's
2 reacties
Ik volg je wel in de theorie dat zo'n label binnen het invulveld "kan", op voorwaarde dat het aantal velden beperkt is (twee), zodat gebruikers eenvoudig kunnen onthouden wat er diende ingevuld te worden. Dit pas ik soms toe bij bv de inschrijving voor een nieuwsbrief:
* 2 velden: naam en email
* wanneer er weinig plaats is in het design
* het label verdwijnt bij focus en verschijnt weer wanneer de focus wegvalt en er niets werd ingevuld
* zulke functionaliteiten (nieuwsbrief) zijn zo vaak gebruikt dat gebruikers bijna blindelings weten wat er ingevuld moet worden.
Voor de zoekfunctie blijf ik wel liever bij mijn vast stramien dat een "formulier" een duidelijke submit-knop moet hebben. In dit geval dus een invulveld, en een knop met het label "Zoek". Een afbeelding van een vergrootglas, dat alles behalve op een knop lijkt, is naar mijn mening niet voldoende ter vervanging van deze knop.
De tekst die in het veld verschijnt ("zoeken op deze website") stoort mij op zch niet echt, alleen vind ik hem dan weer een beetje overbodig wanneer je een knop met het label "zoek" plaatst.
Dag Jonathan,
Ik ben er toch voorzichtig mee om die laatste methode bij meer dan 1 invulveld te gebruiken. Ik zou het ook alleen maar toepassen bij een invulveld dat ze veel zien: een zoekfunctie, een inschrijving op een nieuwsbrief waarbij het veld permanent zichtbaar is op quasi alle pagina's, etc...
Als het in een apart scherm staat, dan hebben ze zichzelf niet voldoende aangeleerd voor wat het staat.
Je zou er ook rekening mee kunnen houden, dat gebruikers om allerlei redenen hun invoer tijdelijk moeten staken (de telefoon gaat over, de kinderen of het huisdiertje eisen aandacht, een collega vraagt iets, etc...)
Daarna keren ze terug en weten ze soms niet meer de betekenis van het invoerveld.
Toegeven, het is nu ook niet hét usability probleem dat de conversie significant gaat laten dalen.
Maar waarom heb je die naam nodig hebt bij het inschrijven op een nieuwsbrief?
Beter is het om één ding te vragen: het e-mail adres. Je weet zelf ook wel, dat hoe minder je vraagt, hoe meer kans je hebt dat ze het willen invullen.
Als je wil personaliseren (wat effectief wel voordeel heeft), pas dan reciprociteit toe en vraag later om die bijkomende gegevens (naam, geslacht, leeftijd, ...).
Geef de mensen na het inschrijven een 'geschenk' (pdf-boekje, een cadeau cheque van 5 Euro, ...), daarna stuur je ze een mail en herhaal je nog eens dat je dat gegeven hebt en of ze zo vriendelijk willen zijn om even op het linkje te klikken om meer gegevens vrij te geven om HUN van dienst te kunnen zijn natuurlijk. ;)
Voordeel is, meer inschrijvingen (er is maar één veld), en omdat jij dat cadeautje hebt gegeven vullen de meeste mensen die gegevens wel in. Wat ook belangrijk is om te weten, is dat de kwaliteit van die bijkomende gegevens doorgaans een stuk hoger ligt dan anders.
Reciprociteit werkt écht héél héél goed. Dit heb ik al bij een aantal klanten uitgeprobeerd met veel succes.
Over dat vergrootglas deel ik je mening hoor. Een 'zoeken' button werkt gewoon beter.
'Zoeken' i.p.v. 'Zoeken op deze website' is wellicht ook beter. Dat één woord is duidelijk genoeg, de rest is ballast.