Invoeren van een geboortedatum

An article, posted about 12 years ago filed in design, usability, interaction, internet, behaviour, date, input & invoer.

Sommige problemen zijn complexer dan ze op het eerste gezicht lijken. Geboorte datum invoeren bijvoorbeeld. Geboortedatum is van het type datum... dus geven we een datepicker, zo'n klein kalendertje waar je door kunt bladeren om een datum aan te wijzen. Dom. Blijkt toch niet echt te werken. Als je moet bladeren vanaf nu tot zeg in de jaren 70... dan heb je een lamme wijsvinger. Toch tekstinvoer dan maar? Het probleem is dat computers toch graag gestructureerde input krijgen. Mogelijk dat we binnenkort een standaard component hebben om alle mogelijke invoeren te ondersteunen, maar helaas, tijd is te kort. Dus wat is een goede oplossing. Een verslag van wat iteraties. Beperken van de input zodat de gebruiker niets anders in kan voeren dan verwacht wordt... mensen zijn geen machines!

Iteratie 1: naamloze tekst invoer velden

Het oorpsronkelijke design bevatte drie velden, ongelabeld, waar een datum ingevoerd moest worden. Er was verder ook geen toelichting, behalve dat het ging om de geboortedatum. Nu kun je als Nederlander wel gokken wat er ingevuld moet worden, nl. dag, maand jaar... maar zeker kun je hiet niet weten... onnodige kans op fouten dus, en daarom niet acceptabel (tenzij je het formulier gewoon toestaat om foute input te accepteren, net zoals in de fysieke wereld vaak gebeurd)

Iteratie 2: dropdowns

Kwam voort uit de standaard Ruby on Rails oplossing, en dus gedreven door techniek. Nu kent Ruby on Rails redelijk goede defaults, maar drie dropdowns is niet wenselijk omdat deze relatief lastig in te vullen zijn, zie deze bookmarks.

Iteratie 3: datepicker achter het tekstveld

Een 'normaal' tekstveld (dat ook als zodanig reageerd zonder javascript) dat verrijkt wordt met de standaard jQuery datepicker.


Nadeel is dus dat als je 3 februari 1967 wilt in voeren, en de datepicker staat standaard op de dag van vandaag dat je lang bezig bent deze datum in te voeren. En tekst invoer werkt niet. En is een datepicker eigenlijk ook geen dropdown menu op zich? Inderdaad. Lastig.

Iteratie 4: tekst invoer met datepicker en hint

De laatste iteratie was een datepicker achter het normale tekstveld. Zo konden geavanceerde gebruikers gewoon de datum intypen, en beginnende gebruikers, hoe omslachtig misschien in eerste instantie, een datum selecteren uit de kalender. Om het nog iets beter te maken hebben we voorbeeld input gegeven, die verdwijnt zodra je er op klikt (en in ieder geval niet zal valideren). Tevens zorgde de jQuery datepicker er voor dat er niets anders dan getallen ingevoerd kon worden.

Conclusie.

Soms ga je te snel voorbij aan kleine dingen, die zo voor de hand liggend lijken. Vooral wanneer je design enkel 'test' op het oog, of met verzonnen data (naam: "asdfasdf", achternaam "asdfasdf", geboortedatum "{vandaag}"). Pas als je echte data gaat invoeren (of in ieder geval data die er op lijkt) kun je pas claimen dat je een pagina getest hebt.

Niet ieder datum invoerveld is hetzelfde. En niet iedere site stelt dezelfde eisen aan iets als een 'leeftijd'. Alternatief voor een datum invoerveld zou voor een 'leeftijd' ook simpelweg de vraag kunnen zijn 'Wat is uw leeftijd?'. Niet zo precies, maar mogelijk goed genoeg voor de toepassing. Deze klant in kwestie wilde het echter wel exact weten. Ik denk dat we met iteratie 4 dicht bij de, gegeven de middelen, ideale input zitten. Het kan natuurlijk altijd nog beter :)

Links

Op de hoogte blijven?

Maandelijks maak ik een selectie artikelen en zorg ik voor wat extra context bij de meer technische stukken. Schrijf je hieronder in:

Mailfrequentie = 1x per maand. Je privacy wordt serieus genomen: de mailinglijst bestaat alleen op onze servers.