5 elementen voor fantastische webformulieren

Er zijn een aantal belangrijke elementen om de betrokkenheid van gebruikers, de toegankelijkheid en de conversie te verhogen, wat zal leiden tot tevreden gebruikers.

Er zijn een aantal belangrijke elementen om de betrokkenheid van gebruikers, de toegankelijkheid en de conversie te verhogen, wat zal leiden tot tevreden gebruikers.

  1. Client-side validaties/foutmeldingen Realtime client-side validaties voor invoervelden geven tijdens het typen fouten in het formulier aan. Doordat dit in realtime gebeurt, wordt de kans kleiner dat gebruikers verkeerde of ongeldige gegevens invoeren. Maak bij het instellen van de foutmeldingen duidelijk dat er iets fout is, bijvoorbeeld met een rood kruisje of een andere achtergrondkleur in het invoerveld. Zet er ook een boodschap bij om de gebruiker uit te leggen wat hij verkeerd gedaan heeft. Als gebruiker is het zeer frustrerend om te zien dat je iets verkeerd gedaan hebt, zonder dat er wordt uitgelegd wat je fout hebt gedaan.
  2. Labels
  3. Labels zijn fundamenteel in het formulierontwerp voor toegankelijkheid, SEO en bruikbaarheid. Hoe weet de gebruiker waarvoor een invoerveld dient als u hem dat niet vertelt? Labels moeten vlakbij het bijhorende veld, waarnaar ze verwijzen, worden geplaatst: ofwel boven, links of rechts van het veld. We zien labels ook steeds vaker in het invoerveld zelf staan, maar dit levert weer andere problemen op voor gebruikers waar nu niet verder op wordt ingegaan.
  4. Velden Zonder invoervelden hebt u natuurlijk geen formulier. Vaak denkt men dat velden zo lang mogelijk moeten zijn, maar uit onderzoeken is gebleken dat dit net niet bevorderlijk is voor de bruikbaarheid. Een gebruiker die tijdens een betalingsproces zijn CVC-code wil invoeren, weet dat die code maar uit 3 cijfers bestaat. Als het invoerveld een stuk langer is, kan de gebruiker gaan twijfelen over het aantal cijfers dat hij moet invullen waardoor het hele proces wordt vertraagd. Maak de velden precies lang genoeg voor de gegevens die moeten worden ingevoerd.
  5. Actie Een duidelijke oproep tot actie is zeer nuttig. De tekst op de actieknop moet beschrijven wat voor actie er met het formulier wordt uitgevoerd. Stel u bijvoorbeeld voor dat u pas verhuisd bent en dat u deze nieuwe adresgegevens wil aanpassen bij het internetbankieren. Onderaan het formulier staat een knop ’Verzenden‘. ’Verzenden‘ is op zich een goede boodschap: de meeste mensen zijn daar bekend mee en begrijpen dat ze hiermee de gegevens in het formulier verzenden. Erg gebruiksvriendelijk is dit echter niet. Beter zou zijn: 'Bijwerken' of 'Opslaan', omdat u immers het nieuwe adres bijwerkt/opslaat.
  6. Hulp Waar zouden we zijn zonder de onmisbare hulptekst? Nergens, natuurlijk! Hoeveel moeite we ook doen om onze formulieren zo duidelijk, gemakkelijk en probleemloos mogelijk te maken, er zullen altijd gebruikers zijn die een uitgebreide handleiding nodig hebben om hun naam in te vullen! Maar nu even serieus: iedereen heeft wel eens hulp nodig, en een hulptekst is een handige manier om de gebruikers te helpen.

Geef de gebruiker (afhankelijk van de ruimte waarover u beschikt) eerst meer informatie over wat hij moet invullen. Leg daarna uit waarom en hoe de gegevens gaan worden gebruikt. Voor de iets ingewikkeldere formulierelementen kunt u ook uitleggen hoe het UI-patroon werkt (als u denkt dat die uitleg nodig is, kunt u wellicht beter afzien van een UI-patroon). U kunt de hulptekst op allerlei manieren verbergen. De tekst hoeft niet altijd getoond te worden, tenzij de gebruiker die wenst te raadplegen.