Formulieren 101: 5 UX best practices voor gebruiksvriendelijke labels in formulieren

Laten we eerlijk zijn, formulieren zijn niet leuk. Al word ik blij van goede formulieren. En best chagrijnig van slechte formulieren.

Zo vulde ik bij het doorgeven van de waterstand per ongeluk 20.115 m3 in, in plaats van 20 m3(!). Oeps. Gelukkig kon ik het met een foto oplossen, maar het zorgde wel voor extra werk bij het waterbedrijf.

Had ik deze fout gemaakt als het formulier duidelijker was? Goede formulieren op je website zorgen ervoor dat je bezoekers en klanten soepel met jouw bedrijf of organisatie kunnen communiceren, zonder frustraties of verrassingen.

Bereid je voor op een uitgebreide verkenning van labels in formulieren – en vergeet niet dit longread-artikel op te slaan! 🙃

In het kort

We beginnen bij de belangrijkste vraag: Wat is de beste plaatsing van labels? Het korte antwoord: het hangt af van de context van het formulier en je doel. 

Top 5 learnings uit dit artikel:

  1. Labels boven invoervelden zijn de snelste en meest effectieve vormen van labels.

  2. Gebruik geen inline labels als je een goede gebruikerservaring wilt bieden.

  3. Er is weinig onderzoek gedaan naar het effect van floating labels.

  4. Links uitgelijnde labels zijn nuttig bij complexe formulieren op desktop/grote schermen.

  5. Het gebruik van de juiste lettergrootte en kleurcontrast verbetert de leesbaarheid van labels.

In een reeks van artikelen onthul ik de geheimen van gebruiksvriendelijke en conversieverhogende formulieren en geef ik je praktische voorbeelden om deze inzichten vandaag nog toe te passen op je eigen formulier.

Ik trap af met 5 best practices voor de juiste plaatsing van labels. Ik zal alvast iets verklappen, er zijn maar 4 best practices, en 1 worst practice. Lees snel verder!

Lees ook deel twee van deze reeks over hoe je een toegankelijk formulier kunt ontwerpen.

Wat zijn labels en waarom zijn ze belangrijk?

Labels zijn de vragen die je stelt aan je gebruikers om noodzakelijke informatie te verzamelen. Een label geeft aan wat voor informatie je moet invullen in een tekstbox of invoerveld. Het is een manier om een gesprek te starten met je gebruiker. 

Een goed ontworpen formulier vermindert frustratie, twijfels en onzekerheden bij de gebruiker. En, als het ook nog gebruiksvriendelijk is, leidt het sneller tot een conversie.

Er zijn verschillende manieren om de labels te plaatsen. Even op een rijtje, waar kan je het label plaatsen? 

De 5 verschillende plaatsingen van labels in formulieren
De 5 verschillende plaatsingen van labels in formulieren

Een label plaatsen is toch niet zo moeilijk? 

Nou, er zijn genoeg formulieren te vinden die tot frustratie leiden. En laat dat een dooddoener voor je conversie/interactie zijn...

Voorbeeld van irritatiemomenten in formulieren
Voorbeeld van irritatiemomenten in formulieren

5 best practices: De uitlijning van je label

Wil je dat gebruikers zo snel mogelijk het formulier invullen? Of wil je dat de gebruiker de tijd neemt om de inputvelden rustig door te nemen? De plaatsing van het label kan daar invloed op hebben.

De meest gebruikte manier van labelling vandaag, anno 2023, is labels boven invoervelden en floating labels. Naast deze twee vormen kun je ook labels links of rechts uitlijnen voor de invoervelden of inline. 

In deze gids maak ik een verschil tussen inline labels en floating labels. Floating labels beginnen als inline labels, maar die verplaatsen zich boven de tekst als de gebruiker het veld activeert. Inline labels zijn labels waar het label verdwijnt als de gebruiker het veld activeert en begint te typen.  

Rond 2010 ging de discussie over labels vooral over de uitlijning van labels links voor, rechts voor of boven invoervelden. Nu gaan de meeste discussies over labels boven invoervelden versus floating labels.

Zijn links uitgelijnde en rechts uitgelijnde labels voor het invoerveld dan verouderd? Nee, we gebruiken ze alleen niet zo vaak meer. Links uitgelijnde labels zie je nu terug in je belastingaangifte op desktop bijvoorbeeld:

Belastingdienst formulieren UX best practices links uitgelijnde labels
In het formulier van de Belastingdienst gebruiken ze links uitgelijnde labels op desktop. Op mobiel zijn de labels verplaatst naar boven het invoerveld

Maar welke plaatsing is nou het beste? Boven, inline, floating, links of rechts? Laten we bij elke plaatsing van het label kijken wat de voor- en nadelen zijn, en in welke context je het beste de labels kunt gebruiken voor je formulier.

1. Label boven het invoerveld

De eerste kandidaat is het label boven het invoerveld.

Best Practice 1: Label boven het invoerveld
Best Practice 1: Label boven het invoerveld

Snelste manier om een formulier te scannen

Het meest geciteerde onderzoek naar de plaatsing van labels werd gedaan door Matteo Penzo in 2006. Op basis van een eyetrack-onderzoek met verschillende testen van de plaatsing van labels kwam hij tot de volgende conclusie:

Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field.
Matteo Penzo, 2006

Matteo Penzo, 2006

UX expert

In andere woorden, door het label boven het invoerveld te plaatsen zien gebruikers het label en het invoerveld in één keer. Ze hoeven niet met hun ogen te bewegen om het label en het invoerveld te zien. 

Van de vier verschillende onderzoeken, vulden de gebruikers het formulier het snelste in en met de minste cognitieve belasting als het label boven het invoerveld stond. 

De onderzochte plaatsingen waren*:

Labels boven het invoerveld

Dikgedrukte labels boven het invoerveld

Links uitgelijnd voor het invoerveld

Rechts uitgelijnd voor het invoerveld

In 50ms bewoog de gebruiker zijn ogen van het label boven naar het invoerveld. Wat 10x sneller was dan links uitgelijnde labels.

Het kost de gebruiker minder cognitieve inspanning om de twee elementen, label en het invoerveld, te waarnemen omdat ze dichter bij elkaar staan dan een label voor het invoerveld. 

Ook hoeft de gebruiker zijn ogen alleen in één richting te bewegen: naar beneden (Luke Wroblewski, 2008, pg.59). Wat zorgt voor een duidelijk pad naar het afronden van het formulier. 

Eyetrack-onderzoek met labels boven het invoerveld. Afbeelding uit het onderzoek van Matteo Penzo, 2006
Eyetrack-onderzoek met labels boven het invoerveld. Afbeelding uit het onderzoek van Matteo Penzo, 2006

* Dit onderzoek is gedaan voordat floating labels bestonden. Het kan interessant zijn om een vergelijkbaar onderzoek te herhalen waarin men kijkt naar labels boven het invoerveld versus floating labels.

Extra ruimte voor uitleg en vertalingen

In vergelijking met andere plaatsingen van labels, zijn de labels boven invoervelden niet beperkt tot 1-2 woorden. Zoals onderzoeksinstituut Baymard terecht aangeeft is er meer ruimte om labels duidelijk te omschrijven, en je kunt bijvoorbeeld instructies toevoegen in of onder het label. Denk aan ‘DD/MM/JJJJ’ achter de vraag ‘Geboortedatum’.

Voorbeeld: Label boven invoerveld met hint in het label
Voorbeeld: Label boven invoerveld met hint in het label

Bij meertalige formulieren is het label boven invoervelden de meest gunstige oplossing. Want dan heb je genoeg ruimte om teksten te vertalen naar langere zinnen die meer ruimte vragen.

Voorbeeld: Label boven het invoerveld vertaald naar het Duits
Voorbeeld: Label boven het invoerveld vertaald naar het Duits

Nadelen van labels boven invoervelden

Een label boven het invoerveld heeft een groot nadeel: bij veel vragen moet een gebruiker langer scrollen om het formulier in te vullen. Dit komt door de witruimte die je nodig hebt tussen elke vraag. 

Dit kun je oplossen door een formulier op te splitsen in secties op meerdere pagina’s. Zodat je na het invullen van een sectie met vragen doorgaat naar een nieuwe pagina of sectie. Het verdelen in stapjes maakt een lang formulier behapbaar voor de gebruiker

De blog UX Movement stelt dat je extra witruimte nodig heb om labels en velden te groeperen. Zo maak je het formulier extra lang, en ontstaan er onnodige onderbrekingen in de scanflow van de gebruiker

Echter is er hier geen onderzoek of bewijs voor. Dus is het maar de vraag of dit daadwerkelijk gebruikers stoort. 

Verder is er nog geen bewijs dat scrollen in een formulier een negatief effect heeft op de gebruikerservaring. Vooral als het duidelijk is voor de gebruiker is dat hij of zij zijn doel behaalt (het afrondend van het formulier) door het formulier volledig in te vullen. 

Ook beweert Quickmark in een blog dat je met labels boven invoervelden meer elementen hebt om te scannen voor je ogen, waardoor het aantalvisuele fixaties toeneemt. Maar in dit artikel is er geen feitelijk bewijs voor de aannames.

TL;DR: Labels boven het invoerveld samengevat

Voordelen

  • Het biedt gebruikers de snelste manier om een formulier te scannen en invullen.

  • De gebruikers hoeven hun ogen alleen in een richting te bewegen, wat minder cognitief belastend is dan links en rechts uitgelijnde labels.

  • Je hebt meer ruimte voor tekst en aanvullende tekst zodat je invoervelden goed kan omschrijven.

Nadelen

Je hebt meer elementen en neemt daardoor ook meer witruimte in beslag waardoor formulieren langer zijn en gebruikers verder moeten scrollen.

2. Inline Labels / Labels als placeholders

Ik val direct met de deur in huis, inline labels of labels als placeholders zijn een ‘no-go’ in de UX-wereld! 

Toch zie ik dat designers deze labels nog steeds gebruiken:

Praktijkvoorbeeld van een bekende Nederlandse website.
Praktijkvoorbeeld van een bekende Nederlandse website.

Inline labels besparen ruimte op het scherm, maar gaan ten koste van de algehele gebruikerservaring. Want als de hint of het label verdwijnt zodra je op het veld klikt, is het makkelijk om te vergeten wat de vraag was. 

Er zijn altijd uitzonderingen op de regel. Bij formulieren waar je bijvoorbeeld alleen een emailadres vraagt is de kans dat de gebruiker de vraag vergeet erg klein. Of denk aan een zoekveld waarbij je een veld hebt die een zoek-icoontje bevat.

Waarom zijn inline labels een no-go?

Lastig context te achterhalen en kan twijfels veroorzaken

Verwarring met ingevulde velden

Verwarrende foutmeldingen

Niet geschikt voor drop-downs

Lastig context te achterhalen

Het grootste probleem is dat het label verdwijnt zodra je begint te typen of het veld activeert. De enige context die je had om het veld in te vullen is weg. Luke Wroblewski onderstreept dat er hierdoor voor gebruikers onduidelijk is wat ze moeten invullen (Web Form Design 2009, pg. 100).

Voorbeeld van een actief inline label invoerveld waar het label weg is als je op het invoerveld klikt
Voorbeeld van een actief inline label invoerveld waar het label weg is als je op het invoerveld klikt

Gebruikers moeten moeite doen om de labels te onthouden tijdens het typen. Dit kan tot extra cognitieve belasting en frustratie leiden, wat de gebruikerservaring stoort.

Verwarring met ingevulde velden

Inline labels kunnen gebruikers het idee geven dat het veld al ingevuld is. Hierdoor is er een kans dat de gebruiker het invoerveld skipt, en een foutmelding krijgt.

Verwarrende foutmeldingen

Omdat de gebruiker geen context meer heeft na het invullen van velden is hij of zij afhankelijk van goed geformuleerde foutmeldingen om zijn input aan te passen. 

Als de foutmeldingen niet goed zijn ingericht en een standaard bericht toont zoals: “Dit veld is verkeerd ingevuld”, weet de gebruiker niet waarom het verkeerd ingevuld is.

Voorbeeld van inline label die ingevuld is met een fout maar je weet niet meer wat er fout is, want je ziet de context van het invoerveld niet meer.
Voorbeeld van inline label die ingevuld is met een fout maar je weet niet meer wat er fout is, want je ziet de context van het invoerveld niet meer.

Zo liet Baymard Institute in een van hun studies over mobiele formulieren zien dat meerdere gebruikers gefrustreerd raakten door een cryptische foutmelding die ze zonder context niet konden plaatsen. 

Uit de foutmelding konden de gebruikers niet herleiden wat ze fout hadden gedaan, en moesten ze hun input verwijderen.

Niet geschikt voor drop-downs of andere selectievakken

Voor andere soorten invoervelden dan tekstvelden zijn inline labels ook minder goed geschikt. Bij drop-down opties veranderen de inline labels in een label boven het vak. Waardoor het ontwerp van je formulier niet meer consistent is.

Verder kunnen gebruikers bijvoorbeeld denken dat de drop-down al ingevuld is. In het bovenstaande onderzoek van Baymard naar mobiele formulieren zagen ze dat gebruikers in de war raakten. 

Voorbeeld van een inline label als placeholder bij een drop-down.
Voorbeeld van een inline label als placeholder bij een drop-down.

Just don’t do it

Hoewel inline labels ruimtebesparend lijken, wegen de nadelen zwaarder dan de voordelen. Ze zorgen voor meer onduidelijkheid dan duidelijkheid, en dat wil je juist voorkomen als je formulier het belangrijkste interactiemiddel is met je klanten. 

Daarom: gebruik geen inline labels, behalve als je maar één of twee invoervelden hebt, zoals een inlogformulier of zoekveld.

3. Floating labels

Laten we verdergaan naar kandidaat nummer drie. Een sterke kandidaat, daar is geen twijfel over mogelijk volgens de grote fanclub. 

Sinds een paar jaar heeft namelijk Google deze stijl overgenomen voor al zijn formulieren in Material Design. Maar wat zijn Floating Labels? 

Floating labels
Floating labels

Floating Labels, of Infield top aligned labels, zijn labels die beginnen als een soort ‘placeholder’ in het invoerveld om ‘ruimte te besparen’. Bij het activeren van het invoerveld beweegt het label zich naar boven met een korte animatie. Nielsen Norman Group (NNGroup) noemt de floating label een ‘Adaptive placeholder’.

Je herkent ze vast van je Google Inlog.

Voorbeeld floating labels
Voorbeeld floating labels

Floating labels zijn sexy, maar zijn ze ook goed?

In 2013 toen de floating labels nog nieuw waren werden ze gezien als dé oplossing voor alle problemen die inline labels met zich meebrachten. Waar een gebruiker bij inline labels geen geheugensteuntje meer heeft na het activeren van het invoerveld, blijft het label zichtbaar bij een floating label.

Verder zorgen floating labels voor een duidelijk en scanbaar ontwerp. In 2013 gingen fans zelfs zo ver dat ze dit nieuwe ontwerp sexy noemde. Misschien kunnen we even discussiëren in hoeverre een formulier sexy kan zijn 👀. 

Ruimte besparen met floating labels

Floating labels besparen ruimte omdat er minder verticale ruimte nodig is voor het label. 

En zoals UX Movement claimt, heeft de gebruiker minder elementen om naar te kijken. Dit komt doordat het label vaak binnen in het invoerveld staat waardoor gebruikers deze elementen als één geheel ervaren. Zo kunnen gebruikers zich beter focussen op de invoervelden. Echter zijn er geen onderzoeken gedaan om dit te bewijzen. 

Voorbeeld van invoervelden van Google Material Design. 1. Het invoerveld en label heeft een licht-donker achtergrond om het invoerveld aan te geven. 2 Het invoerveld heeft een gelijnd kader
Voorbeeld van invoervelden van Google Material Design. 1. Het invoerveld en label heeft een licht-donker achtergrond om het invoerveld aan te geven. 2 Het invoerveld heeft een gelijnd kader

Hoe ontwerp je een floating label?

Vanaf 2017 werkt Google Material Design standaard met floating labels in hun invoervelden. Google heeft meerdere gebruikersonderzoeken gedaan om tot het ultieme ontwerp van floating labels te komen.

In het oorspronkelijke ontwerp van Google Material Design was het voor gebruikers niet duidelijk dat ze er op kunnen klikken: 

  • Door de lijn werd het niet herkend als een invoerveld. 

  • Het leek op een leeg veld.

  • Het nodigde niet uit tot interactie.

De eerste versie van een floating label van Google bestond uit een grijs lijn met daarboven tekst
De eerste versie van een floating label van Google bestond uit een grijs lijn met daarboven tekst
Nieuwe versies van Floating labels op basis van Google’s Material Design
Nieuwe versies van Floating labels op basis van Google’s Material Design

Een kanttekening is dat Google in hun gebruikersonderzoeken alleen verschillende ontwerpen van floating labels met elkaar heeft vergeleken. Ze hebben niet gekeken naar een label boven het invoerveld versus een floating label. Daarom kunnen we niets zeggen over het effect van floating labels.

Het doel van de onderzoeken was om gebruikers een formulier aan te bieden dat ze foutloos en snel kunnen invullen. 

Voor elke variatie keek Google naar de volgende factoren:

Herkenbaarheid - het aantal kliks op de juiste invoervelden versus de verkeerde

Scanbaarheid - de tijd die een deelnemer nodig had om het gevraagde element te vinden

Voorkeur - de persoonlijke voorkeur van elke deelnemer

Verder heeft Google gekeken naar verschillende design elementen:

De stijl van de box voor het invoerveld

De plaatsing van het label*

Het Contrast

De stijl van de rand. 

*Plaatsing van het label gaat om waar het label zich verplaatst nadat het veld geactiveerd is.

Voorbeeld witruimte binnen het invoerveld en de label van Material Design
Voorbeeld witruimte binnen het invoerveld en de label van Material Design

De belangrijkste uitkomsten uit het onderzoek:

  • Omsloten invoervelden met een ‘box’-vorm werkt beter dan alleen een lijn

  • Het invoerveld met een semi-transparante vulling en een lijn of een transparant invoerveld met een dikke lijn werkt het beste

  • De elementen van invoervelden moeten een minimale contrastverhouding hebben van 3:1 met de achtergrond*

  • Labeltekst binnen het invoerveld

  • Invoervelden met afgeronde hoeken

Voorbeeld van het ultieme floating label element volgens Google Material Design
Voorbeeld van het ultieme floating label element volgens Google Material Design

*Volgens de WCAG-richtlijnen moeten elementen een contrastwaarde van minimaal 4,5:1 hebben om goed leesbaar te zijn.

Voor een uitgebreide ontwerpgids voor floating labels kun je kijken naar Google Material Design. Zij leggen uit hoe je floating labels kunt inzetten, alles van ontwerptips tot waar je hints plaatst en foutmeldingen weergeeft. 

Ook leggen zij uit hoe je floating labels kunt ontwerpen die voldoen aan de WCAG-richtlijnen voor toegankelijkheid.

Kritiek op Floating Labels: Is er een betere optie?

Toch is er enige kritiek op de floating labels. Het is niet allemaal rozengeur en maneschijn. 

Volgens Jessica Enders in het boek Designing UX Forms (2016) en interactieontwerper Adam Silver hebben floating labels nog te veel problemen. Beide designers raden aan om floating labels te vermijden.

De problemen zijn als volgt:

  1. Verwarring met ingevulde velden

  2. Ze zijn moeilijk te lezen

  3. Minder ruimte besparing

  4. Animatieproblemen

  5. Beperkt contrast en leesbaarheid

  6. Geen lange labels mogelijk

  7. Inconsistente invoervelden

  8. Weinig ruimte voor hints

  9. Autofill

  10. Toegankelijkheidsproblemen

Forms are not a source of entertainment. The floating label won’t make users enjoy using forms. Users don’t care. They just want the outcome.
Adam Silver

Adam Silver

Interactieontwerper

1. Verwarring met ingevulde velden

Een van de voornaamste punten van kritiek is dat een invoerveld met placeholder tekst niet opvalt als interactief veld. Hierdoor kan de gebruiker het idee krijgen dat het invoerveld al ingevuld is. Wat kan leiden tot het overslaan van het veld of het laten staan van de placeholder. Zo krijgt hij onnodige foutmeldingen omdat hij het veld niet (juist) heeft ingevuld.

Door het ontwerp kan het voor de gebruiker lijken alsof dit veld al ingevuld is.
Door het ontwerp kan het voor de gebruiker lijken alsof dit veld al ingevuld is.

2. Ze zijn moeilijk te lezen

Floating labels zijn lastig te lezen omdat de fontgrootte vaak te klein is. Dit kan leiden tot fouten en frustratie bij het invullen van het formulier. 

Google gebruikt zelf fontgrootte 12px voor hun floating labels wanneer ze actief zijn. Als je iets scanbaar wilt maken is het raadzaam om grotere lettergroottes te gebruiken. In ontwerpen van Concept7 gebruiken we minimum 18px als standaard voor teksten.

De floating labels van Google hebben lettergrootte 12px wanneer ze actief zijn.
De floating labels van Google hebben lettergrootte 12px wanneer ze actief zijn.

3. Je bespaart minder ruimte dan je denkt

De labels hebben ruimte nodig om omhoog te verplaatsen wanneer de gebruiker begint te typen. Dit zorgt ervoor dat er extra witruimte nodig is rond het invoerveld. Als dit niet goed geïmplementeerd is, verspringt de pagina als het veld geactiveerd is.

De ruimtebesparing in invoervelden hangt af van de fontgrootte. Als je wilt dat de labels leesbaar zijn, moet er ook meer witruimte komen in het invoerveld. Als voorbeeld heb ik het inlogformulier van Gmail gebruikt:

Door het lettertype van het label te vergroten naar 16px in plaats van 12px dan vergroot je het veld met ongeveer 15px.
Door het lettertype van het label te vergroten naar 16px in plaats van 12px dan vergroot je het veld met ongeveer 15px.

4. Animatieproblemen

Floating labels hebben animatie nodig om van positie te veranderen. Dit kan de paginagrootte en laadtijd beïnvloeden. Ook kunnen animaties soms niet goed werken op alle apparaten of in alle browsers. 

5. Beperkte contrast en leesbaarheid

Omdat floating labels beginnen als placeholder hebben ze vaak een lichtgrijze kleur die niet opvalt. Als de grijze kleur niet voldoet aan de minimale WCAG contrastwaarden, is het moeilijk voor gebruikers om de tekst überhaupt te kunnen lezen.

Bij deze grote webwinkel van ons allemaal voldoet het contrastwaarde van de placeholders (2,09) niet aan de WCAG-richtlijnen, minimum 4,5:1.
Bij deze grote webwinkel van ons allemaal voldoet het contrastwaarde van de placeholders (2,09) niet aan de WCAG-richtlijnen, minimum 4,5:1.

6. Geen lange labels mogelijk

De floating labels zijn beperkt tot de lengte van het invoerveld, en het liefst heb je ook wat witruimte voor en achter het label. Hierdoor is het niet mogelijk om langere vragen te gebruiken als label. Dit kapt je label af.

De floating labels zijn beperkt tot de lengte van het invoerveld
De floating labels zijn beperkt tot de lengte van het invoerveld

7. Inconsistente invoervelden

Floating labels zijn gemaakt voor invoervelden waar je tekst invult. 

Andere velden zoals checkboxes, radio buttons en drop-down’s passen niet in het stramien van floating labels omdat er geen placeholder tekst is. Dit zorgt voor een inconsistent ontwerp met een mix van labels boven het veld en floating labels.

Floating labels zijn niet gemaakt voor andere invoervelden dan tekst
Floating labels zijn niet gemaakt voor andere invoervelden dan tekst

8. Weinig ruimte voor hints

Een belangrijke USP voor floating labels is dat ze ruimte kunnen besparen. Hierdoor is de ruimte voor hints of aanwijzingen beperkt. En kunnen gebruikers belangrijke context of instructies missen. 

Volgens het World Wide Web Consortium (W3C), een organisatie die de webstandaarden voor het wereldwijde web ontwerpt, is het voor toegankelijkheid goed om hints in het label te plaatsen, zoals:

voorbeeld-hints-in-label-van-w3c.png

Ook volgt floating labels niet de standaard dat je placeholders en hints niet als labels moet gebruiken. 

9. Autofill

Een van de problemen die gebruikers vaak tegenkom is dat autofill en floating labels soms niet goed samen gaan. De automatisch gevulde tekst komt bovenop de placeholder omdat het invoerveld niet juist geactiveerd is.

Voorbeeld van formulieren van Smashing Magazine voordat ze zijn overgestapt op labels boven invoervelden.
Voorbeeld van formulieren van Smashing Magazine voordat ze zijn overgestapt op labels boven invoervelden.

10. Niet toegankelijk

Ook zijn er een aantal kritieke toegankelijkheidsproblemen om rekening mee te houden. Volgens het World Wide Web Consortium (W3C) zien hulptechnologieën zoals schermlezers tekst in een invoerveld (placeholders) niet als labels

Ook is placeholder-tekst niet breed ondersteund door hulptechnologie en door sommige browsers.

Zijn floating labels nou echt zo slecht?

De bedenker en designer van floating labels, Matt D Smith (MDS) is het niet eens met de kritiek:

  • Hints kun je makkelijk toevoegen onder het invoerveld, dit betekent wel dat er meer witruimte nodig is.

  • Kleine tekstgrootte heeft te maken met de ontwerper, niet floating labels. Het is geen probleem om floating labels even groot te maken als een standaard label.

  • MDS is het er wel mee eens dat floating labels weinig witruimte spaart.

  • Laag contrast heeft weinig te maken met floating labels, maar alles te maken met grootte en kleur.

  • Ingekorte labels is volgens MDS niet het probleem, het probleem is waarom je een lange label nodig hebt. Als jij echt een lange vraag moet stellen, en het geen slechte vraagstelling is, stelt hij voor dat je geen floating labels gebruikt maar een andere type.

Conclusie: Floating labels of niet?

Whatever floats your boat!

Er zijn op dit moment geen diepgaande usability testen beschikbaar over de prestaties of werkingen van floating labels. De voordelen die Google benoemen zijn voornamelijk esthetisch en niet functioneel. 

Seems like a lot of effort when you could simply put labels above inputs & get all the benefits/none of the issues.
Luke Wroblewski

Luke Wroblewski

UX expert

Maar, wie zegt dat floating labels niet zouden werken voor jouw formulier? 

De bedenker van Floating Labels, MDS staat achter zijn ontwerp en geeft aan dat er een goede reden moet zijn waarom Google dit als standaardontwerp gebruikt.

A user who is entertained is much more likely to remember their experience with your product.
MDS

MDS

Designer

Ik zou zeggen ga ervoor. Het belangrijkste is om te testen wat werkt en niet werkt, met bijvoorbeeld gebruikersonderzoek of een A/B-test. Pas dan kun je harde conclusies trekken. Uiteindelijk is het ook een kwestie van welk soort formulier de meeste conversies oplevert.

4. Label links uitgelijnd vóór je invoerveld

Zo’n 15+ jaar geleden kwamen links uitgelijnde labels vaker voor. Nu zie je ze bijna niet meer. Behalve als je je belastingaangifte wilt invullen.

Links uitgelijnde labels
Links uitgelijnde labels

Betekent dit dat links uitgelijnde labels slecht zijn en niet goed werken?
Het korte antwoord is nee

Links uitgelijnde labels hebben z’n voordelen, en kan in sommige situaties goed werken. Want deze labels zorgen voor:

  • Duidelijkheid

  • Minder verticale ruimte 

  • Het efficiënt scannen van labels

Echter zijn links uitgelijnde labels niet altijd praktisch. De vuistregel van UX-ontwerper Jessica Enders is: bij grote schermen zijn links uitgelijnde labels prima, maar op mobiel horen de labels boven de invoervelden.

When the screen is larger, labels should go to the left of fields; when the screen is smaller, labels should go above fields.
Jessica Enders

Jessica Enders

UX expert

Links uitgelijnde labels zijn duidelijk

Met links uitgelijnde labels is het voor gebruikers duidelijk welk invoerveld bij welk label hoort. De tijd dat je hersen over doet om het te registreren duurt wel langer dan bij labels boven invoervelden. 500 ms vergeleken met 50ms.

Voorbeeld uit eyetrack-onderzoek van Matteo Penzo waar hij onderzocht hoe lang mensen doen over het invullen van invoervelden met links uitgelijnde labels.
Voorbeeld uit eyetrack-onderzoek van Matteo Penzo waar hij onderzocht hoe lang mensen doen over het invullen van invoervelden met links uitgelijnde labels.

De witruimte tussen het label en het invoerveld stuurt gebruikers gestuurd naar het invoerveld. Uit het onderzoek van Matteo Penzo is duidelijk dat mensen niet afgeleid raken door de witruimte.

Om de visuele verbinding tussen de labels en de vragen te versterken kun je secties kleuren geven om de relatie tussen labels en velden te benadrukken. Dit noemt Jessica Enders “zebra striping”.

Belastingdienst formulieren UX best practices links uitgelijnde labels
Bij de belasting dienst maken ze gebruik van gekleurde achtergronden achter de vragen, zodat vragen die gerelateerd aan elkaar dezelfde kleur krijgen.

Minder verticale ruimte met links uitgelijnde labels

Links uitgelijnde labels nemen minder verticale ruimte in beslag vergeleken met labels boven het invoerveld of floating labels. Dit betekent dat formulieren compacter zijn en minder verticale schermruimte innemen. 

Let op, dit is alleen op desktop van toepassing, want in de mobiele versie van je formulier is het beter om de labels boven de invoervelden te plaatsen.

Scanbare formulieren

Voor onbekende formulieren of bij niet-standaard vragen, helpen links uitgelijnde labels gebruikers het formulier rustig door te scannen (Luke Wroblewski, Web Form Design 2008). Zo begrijpen ze makkelijker wat je vraagt en wanneer voordat ze het formulier invullen. Het kost ze misschien meer tijd, maar gebruikers hebben geen moeite om het formulier in te vullen door deze uitlijning.

Hierdoor is het eigenlijk niet zo gek dat vragen in het formulier van de Belastingdienst links uitgelijnd staan. Het is wel een formulier dat je elk jaar opnieuw invult, maar het zijn geen vragen waar je elke dag tegenkomt. Behalve als je misschien een belastingadviseur bent. 🙃

Ontwerpoverwegingen

We gebruiken links uitgelijnde labels niet voor niets minder de afgelopen jaren. Bij de introductie van de smartphone en responsive design was het snel duidelijk dat links uitgelijnde labels niet toepasbaar zijn op kleine schermen. 

Nadelen op een rijtje:

Beperkte ruimte voor lange labels

Langere invultijd

Niet geschikt voor mobiel

Beperkte ruimte voor lange labels

Links uitgelijnde labels zijn niet bedoeld voor lange vragen. Bij te lange vragen is de witruimte tussen het label & het invoerveld klein. Zo is het lastiger voor gebruikers om de labels te scannen. 

Te lange vragen worden verdeeld over twee regels als de vraag te lang is. Dit maakt het label lastiger te scannen.

lange-labels-links-uitgelijnd-voor-het-invoerveld.png

Langere invultijd

UX-onderzoeker Matteo Penzo ontdekte dat de gebruikers in zijn onderzoek hoge cognitieve belasting ervaren bij het invullen van formulieren met links uitgelijnde labels. 

Ook duurt het langer voor gebruikers om het formulier in te vullen vergeleken met formulieren met labels boven invoervelden. 

Luke Wroblewski (2008) geeft ook aan dat mensen langer doen over de formulieren invullen omdat er meer punten zijn om voor je ogen te verwerken. 

In essentie hebben gebruikers geen moeite om de labels te begrijpen, het kost alleen meer tijd. En dat hoeft niet altijd negatief te zijn. Soms wil je dat gebruikers net wat meer tijd nemen om het formulier in te vullen. Net zoals met je belastingaangifte.

Er zijn dus twee keer zo veel visuele haakjes voor gebruikers om te verwerken.

Voorbeeld uit artikel van UX movement waar je ziet dat links uitgelijnde labels 10 haakjes hebt en 2 kijkrichtingen, vergeleken met 5 visuele haakjes en 1 kijkrichting bij labels boven het invoerveld.
Voorbeeld uit artikel van UX movement waar je ziet dat links uitgelijnde labels 10 haakjes hebt en 2 kijkrichtingen, vergeleken met 5 visuele haakjes en 1 kijkrichting bij labels boven het invoerveld.

Links uitgelijnde labels zijn niet geschikt voor mobiel

Op kleinere schermen is er onvoldoende ruimte om het label links naast het invoerveld te plaatsen. Als je toch het label er naast plaatst kan dit leiden tot een negatieve gebruikerservaring. Invoervelden zijn te klein voor de input en zijn niet goed zichtbaar. Dit verhoogt de kans op fouten.

Of zijn de invoervelden niet meer netjes op een rij, maar verspringen zij, zoals in het voorbeeld hieronder.

Uit onderzoek van Baymard bleek dat gebruikers zelfs moeite hadden om deze fouten te herstellen omdat ze niet hun input goed konden inzien.

Het mobiele formulier van een grote cadeauwebshop in Nederland
Het mobiele formulier van een grote cadeauwebshop in Nederland

Zijn links uitgelijnde labels nog van toepassing?

Ja, ze zijn nog relevant. Zolang je ze in de juiste context inzet. Heb je een complex formulier waar je geen standaard vragen stelt? Dan kan het interessant zijn om met deze labels te werken. 

Volgens UX-expert Janet M. Six zijn er 2 vragen om te stellen bij het kiezen voor links uitgelijnde of rechts uitgelijnde labels:

Wil je dat gebruikers eerst snel de labels in je formulier kunnen scannen? Gebruik dan links uitgelijnde labels.

Wil je dat gebruikers gemakkelijk begrijpen welk label bij welk invoerveld hoort? Gebruik dan rechts uitgelijnde labels. (Zie hoofdstuk hieronder over rechts uitgelijnde labels

Uiteindelijk is het een kwestie van testen en experimenteren en uitzoeken wat voor jouw formulier werkt.

5. Label rechts uitgelijnd voor je input veld

Als ik afscheid moet nemen van een van de verschillende plaatsingen van labels, dan zwaai ik graag de rechts uitgelijnde labels uit. Niet omdat ze heel slecht zijn, maar omdat je al een aantal betere opties hebt.

rechts-uitgelijnde-labels-formulieren-ux.png

Labels rechts voor je invoerveld hebben veel van dezelfde voordelen en nadelen als links uitgelijnde labels. Ze zijn wel makkelijker te verwerken voor gebruikers dan links uitgelijnde labels. Tussen 170 ms en 240 ms vergeleken met 500ms voor links uitgelijnde labels. En zorgen ze voor minder cognitieve belasting. 

Volgens Luke Wroblewski is het voordeel van deze plaatsing dat de labels dichtbij de invoervelden staan. Echter lezen wij in westerse landen van links naar rechts, en hebben we een voorkeur voor teksten die links uitgelijnd zijn (Web Form Design 2008, pg 94).

Ook heeft deze plaatsing van de labels weinig flexibiliteit qua lengte omdat je geen ruimte hebt tussen het label en het invoerveld. Als je vraag over twee regels tekst staat, is het label moeilijker te scannen.

Leuk weetje: Wist je dat er vroeger een ISO standaard voor het 'correct ontwerpen van formulieren' bestond? In deze norm van 1998, ISO 9241-17:1998, moest je labels rechts uitgelijnen. Maar als de labels dezelfde lengte hebben, kun je ze links uitlijnen.

Wat is nou de juiste plaatsing van labels in formulieren?

De plaatsing van labels heeft direct invloed op de gebruikerservaring en daarmee ook indirect op je conversie. Labels geven gebruikers aan welke informatie ze moeten invullen. Op dit moment is er geen universele manier om labels te plaatsen. 

De keuze hangt af van je context en het doel van het formulier. Zijn de vragen kort of lang? Zijn ze complex? Is er veel ruimte om te scrollen? Of komen de meeste bezoekers via mobiel?

De 5 labels samengevat

Zo zagen we dat labels boven invoervelden en floating labels snel en effectief zijn, terwijl links uitgelijnde labels vooral nuttig zijn bij complexe formulieren.

  • Labels boven invoervelden lijken de snelste en effectiefste manier voor gebruikers om een formulier te scannen en invullen. Echter zorgen ze voor langere formulieren.

  • Floating labels zijn esthetisch aantrekkelijk, maar kunnen problemen veroorzaken. Zoals beperkte leesbaarheid en kan voor verwarring zorgen omdat het veld al ‘gevuld’ is.

  • Links-uitgelijnde labels gebruik je minder vaak. Ze zijn duidelijk voor gebruikers en nemen minder verticale ruimte in. Vooral voor complexe vragen is deze plaatsing ideaal. Echter is deze plaatsing niet geschikt voor mobiel.

  • Rechts-uitgelijnde labels vragen niet veel mentale inspanning voor gebruikers, maar zijn volgens onze leesconventies in het westen niet de norm. Ook is er geen ruimte voor lange vragen of uitleg.

  • Inline labels, of labels als placeholder in een invoerveld raad ik af. Het is lastig voor gebruikers om context te begrijpen en kan leiden tot verwarring en fouten.

Door je formulier te testen kom je pas erachter welke plaatsing het beste werkt voor jouw gebruikers.

Bij Concept7 gebruiken wij standaard labels boven invoervelden voor de beste gebruikerservaring. En splitsen we lange formulieren op in secties/pagina’s om de cognitieve belasting te verminderen. Als vervolgstap op dit artikel wil ik experimenten uitvoeren met Floating Labels versus labels boven invoervelden.

Online groei begint bij kennis

Meld je aan voor onze nieuwsbrief en ontvang maandelijks praktische inzichten, tips en tricks om je op weg te helpen naar online groei!

Vul hieronder jouw e-mail in en ontvang direct een handig weetje 🙂

Voorkeur