Crisp's blog

Onlangs las ik een interessant artikel op A List Apart over de gebruiks(on)vriendelijkheid van formulieren op webpagina's, en hoe de gebruikerservaring verbeterd kan worden door inline validatie toe te passen. Zelf liep ik al langer met een dergelijk idee rond en ik had daarbij al een specifiek formulier op Tweakers.net op het oog; namelijk ons registratieformulier. Naar aanleiding van het artikel op ALA heb ik besloten om dit eindelijk eens te realiseren

De kans bestaat dat je al geregistreerd bent op Tweakers.net en allang vergeten bent hoe je het aanmelden op Tweakers.net 'ervaren' hebt, maar ook voor degenen die nog niet geregistreerd hebben is hier een screenshot van de terugkoppeling van eventuele fouten of problemen bij de verwerking van de aanmeldgegevens:


Dat verdient natuurlijk geen schoonheidsprijs Niet alleen de manier waarop de meldingen getoond worden is behoorlijk gebruiksonvriendelijk, maar ook het feit dat achteraf - na het versturen van de gegevens - pas melding wordt gemaakt van eventuele problemen, en deze vervolgens ook nog eens in één blok getoond worden.

Zeker het kiezen van een gebruikersnaam kan nog wel eens lastig zijn; met meer dan 250.000 geregistreerde gebruikers is de kans groot dat de naam die je voor ogen had al bezet is. De kans is zelfs aanwezig dat een ter plekke verzonnen alternatief ook bezet is. Hieruit volgt dan al gauw een heel typ- en klikfestijn totdat het 'stomme formulier' eindelijk verwerkt kan worden.

Dat kan dus beter, en wel zo:


Wat we nu doen is tijdens het intypen van de verschillende verplichte velden al op de achtergrond validatie toepassen en het resultaat daarvan naast het invoerveld laten zien. Op het moment dat er in plaats van een rood uitroepteken met foutmelding een groen vinkje verschijnt is voor de gebruiker meteen duidelijk dat de invoer in orde is en hij of zij rustig verder kan gaan met het invoeren van het volgende veld zonder bang te hoeven zijn achteraf invoer te moeten verbeteren of aanpassen.

Het meerendeel van de validatie kan volledig binnen de browser worden afgehandeld, maar voor die gevallen dat een check op de server noodzakelijk is (bijvoorbeeld om te kijken of een gebruikersnaam al bestaat) wordt er gebruik gemaakt van Ajax. Tijdens deze checks is tijdelijk een throbber te zien naast het invoerveld zodat de gebruiker op dat moment ziet dat er een check plaatsvind. Dit zijn kleine requests die in zeer korte tijd een resultaat terug kunnen geven.

We hopen dat deze methode onze website weer een stukje vriendelijker en toegankelijker heeft gemaakt en veel navolging krijgt