Een formulier is misschien wel één van de belangrijkste elementen van een website. Met behulp van een formulier bestel je immers een product, plaats je een reservering of neem je contact op met een bedrijf. Het is daarom belangrijk dat een formulier gebruiksvriendelijk is. Ik kom nog te vaak formulieren tegen met een hoog ‘erger’ niveau. In deze blog een vijftal tips voor de weg naar een perfect formulier.
Tip 1: Maak een formulier zo kort en bondig mogelijk
De belangrijkste tip van de 5. Bij het ontwerpen van een formulier ben je snel geneigd om zoveel mogelijk informatie te vragen. Doe dit niet. Probeer alleen vragen te stellen die echt noodzakelijk zijn. Een goed voorbeeld van een kort en bondig formulier is het aanmeld formulier van LinkedIn. Hierbij wordt in eerste instantie alleen de echt noodzakelijke informatie gevraagd, namelijk: naam, email adres en wachtwoord. Een gebruiker zal zich daardoor sneller aanmelden voor deze service.
In bepaalde gevallen ben je genoodzaakt om toch extra informatie te vragen. Verberg hierbij dan de optionele velden. Het maakt het formulier overzichtelijker en gebruiksvriendelijker.
Tip 2: Geef duidelijke feedback
Wanneer de gebruiker een veld onjuist of een verplicht veld niet ingevuld heeft geef hiervan een duidelijke melding. Treden er meerdere fouten op, geef dan ook direct feedback op al deze fouten en niet één voor één.
Er is niks vervelender als wanneer je een formulier hebt ingevuld er een error optreed en je vervolgens al je ingevulde data kwijt bent. Zorg ervoor dat deze data bewaard blijft. Bij uitgebreidere formulieren zou ik zelfs willen aanbevelen om de data automatisch op te slaan. In de nieuwe versie van ons CMS, Orbis wordt elk artikel om de minuut automatisch opgeslagen.
Tip 3: Besteed extra aandacht aan labels
Een label zou in één oogopslag moeten zeggen waar het invulveld over gaat. Vergt een veld meer informatie, vermeld dit er dan bij in een soort van notitie. Over het algemeen worden alleen korte en scanbare toelichtingen gelezen. Vermijdt daarom lange labels en toelichtingen.
Uit onderzoek is gebleken dat een label boven het invuldveld als meest gebruiksvriendelijk wordt ervaren.
Binnen HTML heeft een label het doel informatie te koppelen een invulveld. Bij een goed formulier zijn deze elementen ook daadwerkelijk gekoppeld. Als je op het label klikt zou je de focus moeten krijgen op het desbetreffende invulveld.
Tip 4: Vergeet het tabindex attribuut niet
De tabindex is een HTML attribuut waarmee de ’tab volgorde’ voor de verschillende elementen van een formulier bepaald kunnen worden. De tabindex definieert de volgorde waarop invulvelden een focus krijgen als de tab-toets op het toetsenbord ingedrukt wordt. Onlangs kwam ik nog een website tegen waarbij ik niet gemakkelijk met de tab-toets naar het volgende gewenste invulveld kon gaan. In onderstaand voorbeeld verwacht je dat, wanneer je de voorletters hebt ingevuld en je op de TAB-toets drukt je naar het voorvoegsel invuldveld gaat. Echter doordat er niet gebruik is gemaakt van de TAB-index gaat de focus naar de geboorteplaats, erg onhandig.
De tabindex werkt overigens niet alleen voor elementen van formulier maar ook bij gewone tekstlinks.
Tip 5: Gebruik hover en focus pseudo-class selectors
Hover en focus pseudo-class selectors, een hele mond vol. Het zijn niets meer dan CSS selectors waarmee je de visuele weergave van tekstvelden kunt veranderen. De hover pseudo-class selector bepaalt de stijl van een tekstveld op het moment dat de gebruiker met de muisaanwijzer over een tekstveld gaat. De focus selector bepaalt de stijl van een tekstveld waarin de gebruiker geklikt heeft. Deze pseudo-klassen zorgen er dus voor dat de stijl van de tekstvelden wijzigen op het moment dat de gebruiker een actie uitvoert.
Internet Explorer ondersteunt deze selector helaas niet, maar andere populaire browsers als Opera, Firefox, Google Chrome en Safari wel. Het reactie formulier hieronder is een goed voorbeeld waarbij deze pseudeo-klassen zijn toegepast.
