Je doet er alles aan om maak een website die bezoekers tot conversie zullen leiden. Wanneer je de analyses bestudeert, ben je enthousiast om te zien dat de gebruikersreis die je hebt gemaakt, keer op keer wordt ondersteund door zijn bezoekers. Er is echter iets dat verhindert dat ze worden omgezet.

Le Contact formulier is een essentieel onderdeel van de reis van uw bezoekers. Ook al heb je eigenlijk bijna alles wat een website te bieden heeft, a Contact formulier kan de ervaring verpesten als het niet correct wordt gebruikt. “Gebroken” knoppen, verwarrende velden, te veel stappen, een ongeorganiseerde interface… zelfs de plaatsing van de Contact formulier kan de gebruikerservaring verstoren.

Er kunnen veel dingen fout gaan.

5-regels voor het bouwen van het perfecte contactformulier

Een in 2014 gepubliceerd Google-onderzoek naar eye-tracking toonde aan dat het volgen van de meest elementaire gebruiksrichtlijnen voor ontwerpen vormen zal de gebruikerservaring aanzienlijk verbeteren. Concreet, wanneer een contactformulier aan alle regels voldoet, kan 78% van de gebruikers ze in één keer invullen en verzenden. Wanneer een contactformulier deze regels echter overtreedt, kan slechts 42% dit in één keer doen.

Benieuwd wat deze regels zijn? Dus blijf lezen.

Regel # 1: focus op uitlijning

Zoals je in andere regels hier zult zien, maken mensen zich vaak zorgen over de lengte van vormen van contact, wat vaak leidt tot slechte ontwerpkeuzes. Neem bijvoorbeeld het probleem van afstemming.

Misschien zie je zo'n formulier op de BrainTraffic-website en denk je: Hmmm… maar is dat niet iets te lang om in te vullen?

vul form.png in

Een manier om na te denken over het oplossen van dit "probleem" is door de labels naar links te verplaatsen en de antwoordvelden naar rechts. UX-experts zullen u echter vertellen dat dit een belangrijk nee-nee is, omdat het de mogelijkheid om het formulier te scannen in gevaar brengt. Hetzelfde geldt als je erover nadenkt om de velden horizontaal naast elkaar te plaatsen.

Als je wilt dat je vormen contacten voldoen aan de uitlijningsnorm, dit is wat u moet doen:

  • Lijn alle labels, formuliervelden en de primaire call-to-action-knop links uit.
  • Lijn gerelateerde velden nooit horizontaal uit. U kunt het formulier logisch structureren, maar elke vraag of elk veld moet verticaal worden gestapeld.
  • Elk veld met meerkeuzevragen (met minder dan zes opties) moet worden weergegeven in een verticale lijst met punten of selectievakjes, niet in een vervolgkeuzemenu.

Regel 2: neem alle relevante velden op

Als het gaat om het ontwerpen van contactformulieren, zou je kunnen denken hoe korter hoe beter, toch? Het is niet altijd het geval. Het belangrijkste is dat u gebruikers alle noodzakelijke en relevante velden geeft.

Michael Aagaard, Senior Conversion Optimizer voor Unbounce, deed dat een presentatie in 2015, waarin dit probleem werd aangepakt. Hij en zijn team wilden weten wat er zou gebeuren als ze dit contactformulier zouden inkorten:

voorbeeld van contactformulier court.png

Zoals u kunt zien, hebben ze velden verwijderd die volgens hen onnodige velden waren om het invullen van het formulier te stroomlijnen. Na afloop van de test vonden ze echter een daling van 14% in conversies met de kortere vorm.

Regel # 3: velden vereenvoudigen

Het maakt niet uit of uw gebruikers uw contactformulier gebruiken via een desktop of mobiel apparaat, of dat ze ondersteunende technologie nodig hebben om hen te helpen, het formulier moet uitgerust zijn. om het invoerproces te vereenvoudigen.

Hier zijn enkele technieken die u moet kennen:

Tabel
Voor desktopgebruikers en mensen met toegankelijkheidsproblemen: zorg ervoor dat logische tabvolgorde is ingeschakeld op uw contactformulier.

Invoermaskers
In plaats van gebruikers te dwingen te raden hoe u bepaalde velden wilt opmaken, kunt u ze toevoegen met invoermaskers die ze automatisch opmaken.

opmaakvelden html.png

Google Autocompletion
In plaats van elk veld zo te coderen dat het zo is formats automatisch volgens de normen die moeten worden gerespecteerd, activeert u automatisch aanvullen met de plug-in Google Addresses Autofill. Dit voorkomt niet alleen dat u te maken krijgt met spelfouten en onjuist ingevulde adressen, maar het voorkomt ook dat uw bezoekers de meeste van deze informatie intypen.

Regel # 4: Exit All

Hoewel ik me realiseer dat deze regel in strijd is met de basisprincipes van minimalisme, is het een regel waar je goed op moet letten om je bezoekers niet onnodig te frustreren.

Laat me het uitleggen: je hebt een contactformulier dat er vrij eenvoudig uitziet. Uw gebruikers vullen het in op basis van wat de labels suggereren en ze klikken op de verzendknop. Dan krijgen ze deze vreselijke rode boodschap: “Je hebt het niet goed gedaan! Ga terug, corrigeer het formulier en stuur het terug! " 

U bent het waarschijnlijk als gebruiker tegengekomen en u weet hoe frustrerend het kan zijn, vooral als een deel van de door u ingevoerde informatie wordt verwijderd wanneer de fout wordt gegenereerd. Dus in plaats van gebruikers te laten raden wat er moet worden opgelost en hoe, laat het niet zover komen. Spel alles onderweg:

  • Zorg voor een focus in het veld (vooral op mobiel) zodat gebruikers precies weten waar ze een formulier invullen.
  • Schrijf alle opmaakvereisten op als u geen invoermaskers gebruikt om velden automatisch op te maken.
  • Geef expliciet aan wanneer een veld "Optioneel" is (gebruik het woord, niet de rode asterisk).
  • Geef gebruikers de mogelijkheid om het wachtwoordveld weer te geven of te verbergen terwijl ze het invoeren.
  • Geef een foutmelding weer zodra de gebruiker een veld heeft betreden. Wacht niet tot het einde om het te doen.

vorm wordpress.png fout

Regel # 5: advies niet verbergen

De bordtekst in een contactformulier ziet er als volgt uit:

veld met tips.png

Zie hoe Target de labels in het veld plaatst? In sommige contactformulieren verdwijnen deze labels / indicaties gewoon als een gebruiker op een veld klikt. Het doelwit behandelt dit een beetje anders en verplaatst het label naar de bovenkant van het veldvak (zie "e-mailadres").

Ongeacht hoe dit wordt afgehandeld, de usability-experts, zoals de groep Nielsen Norman, zal je vertellen dat dit een slechte ontwerppraktijk is omdat:

  • Dit is problematisch voor multitasking, afgeleidde of te snelle gebruikers in het volgende veld. Als de aanwijzing verdwijnt, moeten gebruikers het veld verlaten om te herontdekken wat ze nodig hebben.
  • Tips die verdwijnen, voorkomen ook dat gebruikers terugkeren naar een formulier om hun werk te controleren of een fout te corrigeren zonder het antwoord volledig te verwijderen om te zien wat hieronder staat.
  • De lichtere grijze tekst die wordt gebruikt voor tips voor tijdelijke aanduidingen is niet ideaal om gemakkelijk te lezen.
  • Velden met hinttekst kunnen worden verward met velden waarin al gegevens zijn ingevuld, waardoor gebruikers deze kunnen negeren, het formulier kunnen verzenden en een foutmelding krijgen.
  • Sommige hulpprogramma's voor het lezen van schermen kunnen geen hinttekst lezen.

Volgens de NNG vinden gebruikers lege velden aantrekkelijker dan velden die aanwijzingstekst bevatten. Zelfs als uw formulieren langer lijken om deze labels of descriptors boven het veld te plaatsen, zal dit de bruikbaarheid verbeteren.

Dat is het voor deze tips. Ik hoop dat ze u zullen helpen om betere contactformulieren te bouwen.