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!
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)
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.
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.
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 :)
Vond je dit leuk, volg me op Mastodon, voeg die RSS, euh ATOM feed toe aan je feedreader, of schrijf je hieronder in op mijn nieuwsbrief.
Dit artikel van murblog van Maarten Brouwers (murb) is in licentie gegeven volgens een Creative Commons Naamsvermelding 3.0 Nederland licentie .