Labels, leesbaarheid, wachtwoord invoer, knoppen, errors en andere regels bij het ontwerpen van een formulier

Ik lees Form Design Patterns van Adam Silver. Een boek dat komt met duidelijke en handige oplossingen voor form design problemen.

Na het lezen van hoofdstuk 1 uit ‘Form design patterns’ van Adam Silver, kan ik wel stellen dat bepaalde regels nu nog dieper in mijn hersenen zijn ingesleten. Over het algemeen vind ik wat Adam schrijft over forms vanuit mijn UX perspectief niet ontzettend vernieuwend. Wat een geruststelling is omdat ik ander misschien zou moeten gaan twijfelen aan mijn eigen kennis.

Daarnaast heb ik nieuwe kennis opgedaan over het bouwen van een formulier in html/css en Javascript. Adam geeft voorbeeld in code die ik begrijpelijk vond. Wat ik ook goed vind is dat de code snippets vanuit een inclusieve motivatie worden beschreven. Dat wil zeggen; iedereen moet het formulier dat jij bouwt kunnen gebruiken. In deze beschrijving richt ik mij vooral op de regels die ik nuttig vond voor UX design. Niet voor Front-end. Dus geen code van mijn hand.

Een aantal regels uit het boek vond ik erg nuttig en wil ik hier delen. Het toepassen van deze regels bij het ontwerpen van een formulier kan het formulier naar mijn mening alleen maar ten goede komen. Voor meer verdieping raad ik aan het boek te lezen want ik ga niet uitleggen waarom een regel is zoals deze is. Uiteraard zijn deze regels niet allesomvattend. Er is nog veel veel meer geschreven over goed formulier ontwerp. Bovendien is dit nog maar hoofdstuk 1. Zoveel te lezen!

Labels en leesbaarheid

  • Een label is het beste leesbaar boven het input veld
  • Reserveer genoeg ruimte om het label heen voor de selectie
  • Misbruik de placeholder niet als label
  • Gebruik de placeholder ook niet voor hint teksten
  • Een leeg input veld nodigt uit tot invullen
  • Vraag jezelf af of je sommige informatie ook later kan vragen. Zo ja, doe dat dan ook
  • gebruik minimaal 16px voor een label
  • Gebruik een touch tap doelwit van 44px
  • Stijl de focus state

Wachtwoord invoer

  • Wachtwoordzinnen zijn moeilijker te kraken dan wachtwoorden met complexe tekens, cijfers, minimum of maximum aantal aan karakters etc.
  • Maak ALTIJD zichtbaar welke karakters verplicht zijn bij het aanmaken van een wachtwoord.
  • In plaats van een extra wachtwoord bevestiging veld geef de gebruiker de mogelijkheid om het wachtwoord te controleren door het (tijdelijk) te onthullen.
  • Een magic link in plaats van een wachtwoord forceert de gebruiker zijn e-mail te openen. Denk goed na of dit een betere oplossing is dan het vragen een wachtwoord te kiezen.

Knoppen

  • Knoppen moeten er niet uitzien als links.
  • Plaats de verzend (submit) button links onder het laatst ingevulde veld, als het gaat om een formulier in een taal met een leesrichting van links naar rechts.
  • Gebruik werkwoorden om de button actie te beschrijven
  • Maak verzendbuttons niet disabled bij ontbrekende invoer, vertel de gebruiker liever welke informatie er mist bij het versturen

Errors

  • Bij een error vertel de gebruiker wat er mis is gegaan en vermijd het woordje ‘error
  • Vertrouw niet alleen op kleur bij het weergeven van errors, gebruik ook iconen
  • Als het kan, gebruik dan directe feedback bij het aanmaken van een wachtwoord. Laat zien aan welke voorwaarden het wachtwoord (al) voldoet
  • Gebruik geen ‘lollig’ taalgebruik bij het formuleren van error berichten
  • Hanteer extreem heldere en precies taalgebruik bij het formuleren van de fout

Nog wat checklist items van Adam over microcopy

  • Wees beknopt
  • Wees consistent
  • Wees specifiek
  • Hanteer een menselijke toon en vermijd jargon
  • Hanteer eenvoudig taalgebruik
  • Gebruik een actief toon
  • Geef de gebruiker nooit de schuld

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.