13 Praktische tips voor ontwerp van empirisch gestuurde formulieren

11 min


124

Als u de praktische tips voor het ontwerpen van formulieren niet volgt, kunt u mogelijk een aanzienlijk bedrag op tafel leggen.

Hoewel formulieren niet het meest sexy deel van conversie-optimalisatie zijn, zijn ze meestal het dichtst bij het geld, de macro-conversies. Tijd besteden aan het optimaliseren van formulieren kan een van de belangrijkste optimalisatiewerkzaamheden zijn die u kunt doen.

Uiteraard werken best practices niet op alle sites hetzelfde. Het is contextueel. Maar over het algemeen is het implementeren van vormgevingsmethoden die vaker werken dan niet, een goede manier om te beginnen.

Gelukkig is er geen gebrek aan gegevens, casestudy’s, onderzoek en voorbeelden van best practices voor het ontwerpen van formulieren. Het komt overal vandaan: business case-studies, blogposts, A / B-testvoorbeelden , usability-onderzoek, eye-trackingstudies en meer.

In dit bericht worden enkele van de meest voorkomende praktische tips voor het ontwerpen van formules beschreven. Als u net begint met optimaliseren, gebruikt u deze als basislijn.

Als u aan uw formulieren werkt, zullen deze richtlijnen hopelijk u helpen om snel een aantal snelle overwinningen te behalen.

Beste praktijkvoorbeelden van formulieren

1. Minder is meer (formuliervelden verwijderen)

Elk veld dat u gebruikers vraagt ​​in te vullen verhoogt de wrijving. Het beste dat u kunt doen om de voltooiing van de vorm te verbeteren, is om zoveel mogelijk velden te verwijderen.

In één case study werd een 11-velds contactformulier vervangen door een 4-velds versie en de vormvoltooiingen met 160% verhoogd, waarbij de kwaliteit van de inzendingen hetzelfde bleef.

In een andere test presteerde een 5-veld-formulier beter dan een 9-veld-formulier met 34%. Ook hierin zagen ze geen daling van de gegevenskwaliteit of de kwaliteit van de leads.

De meeste vormen zijn te lang. Het is ‘hebberig marketeersyndroom’ waarbij we denken dat we alle gegevens nodig hebben.

Baymard Institute vond dat de gemiddelde kassa 14.88 formuliervelden bevat. Maar hun checkout-gebruikstest toonde ook aan dat de meeste sites een vermindering van 20-60% van het aantal formuliervelden kunnen realiseren dat standaard wordt weergegeven.

In wezen geeft de gemiddelde uitbetaling tweemaal zoveel formuliervelden weer als nodig.

Afbeeldingsbron

Dus de reductie van het formulierveld is ground zero voor de optimalisatie van de onderkant van de trechterconversie. Hier kun je enkele van je snelste overwinningen behalen. De benodigde inspanning en middelen zijn super laag en de potentiële voordelen zijn enorm, vooral op schaal (hoeveel formulieren heb je? Hoeveel mensen ervaren ze? Wat betekent een toename van 10% van elke vorm voor jou?)

Nu zijn er zeker zorgen over de gegevens. Vooral als je een B2B-bedrijf bent dat leads genereert en leads doorgeeft aan een verkoopteam, wil je zeker weten dat het gekwalificeerde leads zijn – anders zullen meer leads een externaliteit worden , die zijn eigen kosten in verspilde productiviteit oplopen.

Een voorbeeld hiervan is het toevoegen van een trapsgewijs systeem van toegewezen budgetten. Kortom, hoeveel is de hoofdrol bereid om te betalen? Stel de laagste balk in op het laagste niveau waarvan je denkt dat een waardevolle lead de moeite waard is, en je zult veel band-kickers uitbannen . Een voorbeeld van onze agentschapspagina :

Wanneer u formuliervelden optimaliseert, vraagt ​​u naar de gegevens: heeft u het echt nodig?

Heeft u de telefoon, fax of het adres van mensen echt nodig? Heeft u de bedrijfsnaam van iemand nodig als u kaarsen verkoopt? Vraag alleen wat relevant is. Expedia verwijderde het veld ‘Bedrijf’ uit hun boekingsformulier en zag een winststijging van $ 12 miljoen per jaar.

Weet ook dat er, vooral voor B2B, dataverrijkingsbedrijven zoals Clearbitbestaan. Als u een e-mail en misschien een voornaam verzamelt, kunnen deze over het algemeen de rest van de gegevens verrijken (bedrijfsnaam, grootte, Twitter-handle, enz.) En is deze meestal behoorlijk nauwkeurig.

Denk er zo over na: elke extra velden zorgt ervoor dat u een aantal potentiële klanten verliest. Ontvangt de extra informatie die u wint uit het veld WAARD die mensen te verliezen? Verlies je iets als je niet meteen alle gegevens krijgt?

De meeste vormen zijn veel te lang ( Image Source )

Het beste inschrijvingsformulier is kort:

Afbeeldingsbron

Zoals altijd moet ik de uitzonderingen noemen – het verminderen van formuliervelden leidt natuurlijk niet altijd tot meer conversies .

Er zijn ook gegevensoverwegingen. Hoe meer informatie u over een gebruiker verzamelt, hoe effectiever marketing en targeting u (meestal) kunt gebruiken.

In het algemeen is het echter veilig om de volgende heuristiek te volgen: verwijder nutteloze of overtollige formuliervelden.

2. Enkelkoloms Beats-formulieren met meerdere kolommen

Dit is goed onderzocht in eye-tracking-onderzoeken (inclusief die van ons) en business case-studies en A / B-tests. Wanneer u tussen een enkele kolom en een kolom met meerdere kolommen kiest, standaard naar de enkele kolom.

In een onderzoek uitgevoerd door CXL Institute , vonden we dat de vorm met één kolom sneller was om te voltooien.

Deelnemers aan het onderzoek voltooiden de lineaire vorm met één kolom (n = 356) gemiddeld 15,4 seconden sneller dan de vorm met meerdere kolommen (n = 346). Dit was aanzienlijk sneller met een betrouwbaarheidsniveau van 95%.

Deze richtlijn is niet nieuw . Sterker nog, het bestaat al jaren, maar tot onze studie was er niet veel kwantitatief bewijs voor. Toch zullen degenen die conversie-optimalisatie hebben, ongetwijfeld tientallen overtuigende gebruikerstests hebben gezien, evenals A / B-tests, die afzonderlijke kolommen meer bruikbaar tonen.

Ik weet zeker dat er uitzonderingen zijn op deze regel (zoals bij alle andere), maar ik heb niets gevonden dat empirisch is gepubliceerd. Als u weet dat er conflicterende bronnen zijn, kunt u ze gerust sturen.

3. Communiceer fouten duidelijk

Gebruikers zullen fouten maken. Het is onvermijdelijk. Zelfs als u alle praktische tips voor het ontwerpen van formulieren heeft gebruikt, krijgt u nog steeds gebruikers de foutmeldingen laten horen.

Hoe u met foutmeldingen omgaat , kan de gebruikerservaring aanzienlijk beïnvloeden.

Afbeeldingsbron

Het ontwerpen van foutmeldingen gaat allemaal over het beperken van de hoeveelheid frustratie die gebruikers voelen met uw formulier.

Wanneer gebruikers zich gefrustreerd voelen, raken ze gestresst en begint cortisol zich op te bouwen. Als het een bepaalde drempelwaarde bereikt, geven gebruikers het op en gaan ze naar de site van uw concurrent. Het leven is te kort om gek te worden en te proberen om te gaan met waardeloos formulierontwerp en een onbehulpzame foutafhandeling.

Dus, ja, onderzoek usability zelf, maar begin met deze best practices voor foutmeldingen:

  • Geef de gebruiker niet de schuld.
  • Schrijf als een mens, geen robot.
  • Zorg ervoor dat fouten duidelijk zijn en de berichten op een intuïtieve plaats zijn geplaatst.
  • Zorg ervoor dat gebruikers weten hoe ze deze fouten kunnen herstellen.
  • Noteer niet alle fouten bovenaan de pagina. Inline-validatie is een goede oplossing.

We hebben een heel artikel geschreven over foutmeldingen die u hier kunt bekijken voor meer informatie.

4. Gebruik inline formulierveldvalidatie

Ook gerelateerd aan foutmeldingen is hoe u aan een gebruiker communiceert of zijn inzending in orde is of dat ze iets moeten wijzigen. Formuliervalidatie is een heel apart onderwerp, maar we kunnen hier enkele snelle aspecten behandelen.

Inline-validatie is een mooie manier om fouten in realtime te vinden, te signaleren en te corrigeren. In plaats van te wachten totdat je op ‘submit’ drukt om je fouten te achterhalen, krijg je meteen te horen wat er mis ging.

Hier is een goed voorbeeld van inline validatie:

Afbeeldingsbron

Er is veel empirische ondersteuning voor inline-validatie. In 2009 testte Luke Wroblewski inline-validatie tegen een controle (validatie na bevestiging) en hoewel de steekproef klein was, vonden ze de volgende resultaten met de inline-versie:

  • een stijging van het succespercentage met 22%,
  • een daling van 22% van de gemaakte fouten,
  • een stijging van 31% in tevredenheidsclassificatie,
  • een afname van 42% in voltooiingstijden, en
  • een afname van 47% van het aantal oogfixaties.
  • 22% meer mensen die je formulieren verdienen, is de moeite waard – en dat zorgt voor een meer bevredigende ervaring voor iedereen die het formulier invult.

Ik neem die resultaten. Ik heb vergelijkbare resultaten gezien van A / B-tests die op veel e-commercesites worden uitgevoerd.

Als we een stap achteruit zetten en er een heuristiek op baseren, is het logisch: het gaat allemaal om transparante en duidelijke verwachtingen en communicatie. Een gebruiker moet niet raden wat wel werkt en wat niet. Hoe gemakkelijker u het kunt maken om te begrijpen wat de verwachtingen op een formulier zijn, hoe minder fouten mensen zullen maken en hoe meer vormaanvullingen u zult behalen.

Het is een win-win. Kijk inline-validatie voor uw formulieren.

5. Velden moeten worden besteld van de gemakkelijkste tot de moeilijkste om in te vullen

Dr. Robert Cialdini’s principe van toewijding en consistentie vertelt dat wanneer iemand een kleine actie onderneemt of ergens naartoe gaat, ze zich meer gedwongen voelen om te eindigen. Om deze reden is het een best practice om het eenvoudigste nieuws als eerste te plaatsen.

Wacht tot later om wrijvingsinducerende formuliervelden zoals factuurgegevens of iets te persoonlijk in te voeren. Kortom, u kunt dit in actie brengen door mensen toe te staan ​​verzendinformatie in te vullen voordat ze worden gefactureerd (ze zijn hoe dan ook vaak hetzelfde, dus hoeven ze niet opnieuw te typen).

Begin eerst met de eenvoudige dingen (zoals naam) en eindig met het creditcardnummer.

Doe dit niet:

6. Maak typen eenvoudig: automatisch formatteren, kopiëren / plakken ondersteunen, suggesties doen (niet altijd!), Etc.

De algemene leidraad voor praktische tips voor het ontwerpen van formulieren blijft opduiken: dingen gemakkelijk maken voor de gebruiker.

Vooral op mobiele apparaten betekent dit dat je minder fysiek hoeft te typen om het formulier in te vullen. Een bijzonder effectieve manier om de benodigde hoeveelheid te versoepelen, is om zoveel mogelijk te automatiseren.

Gebruik Automatisch aanvullen:

Afbeeldingsbron

Bij het ontwerpen van formulieren en het kiezen van autofills zijn hier enkele goede vragen om over na te denken:

  • Heb je goede standaardinstellingen voor dit veld?
  • Wat is de geschiedenis beschikbaar?
  • Hebben we veelgebruikte waarden?
  • Kun je de browser met mobiele functies of instellingen gebruiken om het veld te vullen?
  • Kun je het veld berekenen? (bijv. vul de status automatisch aan op basis van de postcode)

Autoformattering is ook ongelooflijk belangrijk (en frustrerend genoeg onderbenut). Sta gebruikers toe gegevens in te voeren (met name velden zoals postcode, telefoonnummers en creditcards) op elke gewenste manier. Er zijn enkele regels code nodig om de opmaak te corrigeren nadat ze zijn ingevoerd. Sta niet toe dat je luiheid de gebruikerservaring verpest.

Dus doe dit niet:

7. Geef aan of elk veld verplicht of optioneel is, tenzij alles verplicht is

Vraag uzelf eerst af of u die optionele velden eigenlijk wel moet opnemen. Als je echt diep graaft, zul je je realiseren dat ze meestal helemaal niet nodig zijn. Bijvoorbeeld, LL Bean niet echt mijn titel of mijn middelste naam nodig. Wat hen vier velden opleverde, kon in één geheel worden gerealiseerd:

Richt u in eerste instantie op welke informatie nodig is om de bezoekers te laten starten. Het aantal is niet zo belangrijk. Wat belangrijk is, is dat uw bezoekers niet thuis zitten en denken: “Waarom hebben ze dit nodig ?!”

Geef aan of elk veld verplicht of optioneel is, tenzij alles verplicht is.

8. Naam- en telefoonnummervelden moeten uit één veld bestaan ​​en niet uit meerdere velden

In plaats van een voornaam en een achternaamveld, kunt u gewoon een veld hebben met de naam ‘volledige naam’. In plaats van een veldinvoer van 3 of 4 voor een telefoonnummer, kunt u slechts één veld hebben.

Afbeeldingsbron

Het grootste probleem met meerdere velden is interactieproblemen. Over het algemeen is een best practice voor het ontwerpen van formulieren ‘hoe minder velden, hoe beter.’

Stel je voor dat je mobiele apparaat vijf velden moet doorlopen voor naam en nummer (twee voor naam, drie voor nummer) in plaats van slechts twee? Onnodige wrijving.

9. Formulieren moeten keuzerondjes bieden via de vervolgkeuzelijst

UXmovements.com heeft een artikel gepubliceerd dat onze nieuwsgierigheid naar het gebruik van meervoudig geselecteerde formuliervelden heeft gewekt, wanneer een ander formulierveldtype zou werken. In hun stuk: ‘ Waarom gebruikers formulieren verlaten met bepaalde menu ‘s ‘, beweren ze dat formulieren met bepaalde menu’s vaak worden verlaten omdat ze ‘meer tijd en moeite vergen om ze te voltooien’.

Meer specifiek zeggen ze dat ze gebruikers vertragen door de gebruikersstroom te onderbreken, moeilijk leesbaar zijn en handig muismanoeuvreren vereisen.

Maar ze bieden geen gegevens om dit te ondersteunen.

Nou, het is gemakkelijk genoeg om te testen. Dus dat deden we . We lanceerden net een grote enquête over online vertrouwensperceptie, dus we hadden een goede gelegenheid om eenvoudig een enquêteformulier te manipuleren en verschillende groepen mensen dezelfde vragen te stellen in verschillende indelingen (multi-select vs. keuzerondjes) om te zien hoe vormvoltooiing tijd vergeleken.

De resultaten? Het formulier met keuzerondje was sneller om te voltooien.

Deelnemers aan het onderzoek voltooiden het keuzerondje (n = 354) gemiddeld 2,5 seconden sneller dan het formulier met multiselectieknoppen (n = 354). Dit was aanzienlijk sneller op een niveau van 95%.

10. Maak couponcodevelden niet prominent

Wanneer mensen het veld ‘Voer couponcode hier’ zien, voelen ze zich minder speciaal . “Waarom heb ik er geen?” Denken ze. Ze krijgen FOMO .

Velen gaan naar Google om een ​​kortingsbon te zoeken. Sommigen vinden kortingsbonnen op sites van derden zoals RetailMeNot , waardoor u winst maakt. Velen keren nooit terug .

Het verlaten van de site om te zoeken naar kortingsbonnen is een veel voorkomende reden voor verlaten van winkelwagen.

Dit is dus geen goed idee:

Heb in plaats daarvan een tekstlink met de tekst ‘Heb je een kortingsbon?’ Of iets dergelijks en als je op de link klikt, verschijnt een invoerveld – zoals het bovenstaande -. Tekstlinks zijn niet erg visueel prominent, dus minder mensen zullen er aandacht aan besteden.

Klanten die al een kortingsboncode hebben, zoeken naar een manier om deze in te voeren. Dus tenzij je het echt goed verbergt, zullen ze het vinden en kunnen ze hun kortingscode toepassen. En als een klant een kortingsbon heeft ontvangen (via e-mail), moet deze automatisch worden toegepast op het totaal en de korting weergeven.

11. Vermijd de knop voor het wissen van velden

Niemand die je formulier invult, wil de velden vrijmaken. Als ze het niet willen invullen, kunnen ze gewoon vertrekken.

Als ze het formulier invullen en de velden per ongeluk wissen, is de kans groot dat ze niet opnieuw beginnen.

Best practices voor mobiel specifiek formulierontwerp

Hoewel het grootste deel van het bovenstaande ook op mobiel kan worden toegepast, zijn er enkele specifieke problemen waarmee u rekening moet houden bij kleinere schermen. Over het algemeen wilt u inspanningen besparen waar u kunt. Mobiele gebruikers zijn minder geduldig en het gebruik van een smartphone is moeilijker dan het gebruik van een desktop.

Volg dus deze richtlijnen voor de beste praktijken voor het ontwerpen van mobiele apparaten.

1. Bied veldfocus aan

Als u een formulier met meerdere velden hebt, wilt u niet dat gebruikers het formulier kwijtraken. Vooral op mobiel is dit belangrijk, omdat het kleinere scherm zorgt voor minder visuele controle over het hele formulier.

Maak daarom het invoerveld dat momenteel wordt bewerkt prominent en gericht.

Afbeeldingsbron

2. Maskeer geen wachtwoorden

Hoewel het een beveiligingsprobleem lijkt te zijn om het wachtwoord te laten zien terwijl de gebruiker het intypt, is het veel beter voor de gebruikerservaring.

Zoals NN / g samenvatte , “Bruikbaarheid lijdt wanneer gebruikers wachtwoorden intypen en de enige feedback die ze krijgen is een rij kogels. Meestal verhoogt het maskeren van wachtwoorden de beveiliging niet, maar het kost u wel zaken vanwege mislukte aanmeldingen. “

Afbeeldingsbron

Waarschuwing: voer uw eigen experimenten uit

Dat iets een ‘best practice’ is, betekent nog niet dat het altijd de optimale oplossing is. Soms mislukken best practices .

Websites zijn contextueel. Wat op de ene site werkt, werkt misschien niet op een andere.

Bovendien kan uw bedrijfscontext anders zijn. Wie weet, misschien heb je die tweede naam echt nodig als een gegeven. Wie ben ik om te oordelen?

Dus neem alles met een korrel zout. Weet dat alles getest en bestudeerd is, maar uiteindelijk gaat het er alleen om hoe het werkt op uw site en in uw zakelijke context.

Laat dit een richtlijn zijn, geen mandaat.

Conclusie

Best practices voor het ontwerpen van formulieren kunnen vaker wel dan niet werken, maar ze zijn niet universeel. Het zijn beslist geen oplossingen voor zilveren kogels: je moet dit spul voor jezelf testen.

Maar in het geval dat u helemaal opnieuw begint of net begint met het optimaliseren van uw website, krijgt u met deze praktische tips voor het ontwerpen van formulieren een goede basis. Ze zijn een goed startpunt, niet waar je uiteindelijk terechtkomt.

Alle richtlijnen in dit artikel zijn empirisch onderbouwd en hebben de test van bruikbaarheidsonderzoek en veel A / B-tests doorstaan. Ze zijn niet op meningen gebaseerd. Dus om te beginnen is dit een veilig punt om te beginnen.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format