Basisprincipes: ontwerp van mobiele formulieren

Online shoppers gebruiken steeds vaker hun mobiele apparaten om nieuwe zaken te ontdekken, door producten te bladeren en aankopen te doen. Alleen al in de VS werd voor meer dan 35% van de online aankopen een mobiel apparaat gebruikt en dit aantal blijft elk jaar groeien. 

Om ervoor te zorgen dat je deze klanten omzet in abonnees, is het cruciaal dat je aanmeldingsformulier er op mobiel net zo goed uitziet als op desktop. 

Als je meer dan 3 velden nodig hebt, bijvoorbeeld als je tegelijkertijd e-mail en sms-toestemming wilt verzamelen, overweeg dan een formulier met meerdere stappen. 

Met een formulier met meerdere stappen kun je meer informatie verzamelen zonder potentiële abonnees te overweldigen. Bovendien is het hebben van een aparte stap voor sms een compliance best practice bij het verzamelen van meerdere soorten toestemming in 1 formulier. 

Je kunt ook meer te weten komen over je abonnee door ze later in het klanttraject opnieuw te targeten. Misschien vraag je naar de verjaardag van je huidige abonnee door ze na 30 dagen een ander formulier te laten zien, of misschien vraag je ernaar als onderdeel van je welkomstserie.

Zelfs als alle velden op een formulier verplicht zijn, is het nog steeds vreemd om iemands verjaardag te vragen vóór zijn naam. 

Vraag over het algemeen om informatie van minst naar meest persoonlijk. Bijvoorbeeld: 

1. Naam
2. Email of telefoonnummer
3. Verjaardag

Een enkele kolom betekent dat alle invoervelden en knoppen op een enkele regel in het formulier staan. Hoewel formaten met meerdere kolommen prima te gebruiken zijn op desktop, kunnen ze mobiele formulieren er onoverzichtelijk of overvol uit laten zien. Formulieren met één kolom zijn ook gemakkelijker te scannen op mobiele apparaten.

Formulier met één kolom	Formulier met meerdere kolommen

De CTA-knop moet aan het einde van het scantraject van de kijker staan, zodat het het laatste is wat ze zien. Je wilt niet dat ze naar boven moeten scrollen om het formulier in te vullen, of moeten zoeken naar de knop. 

Meestal wordt de CTA knop in het midden of aan de linkerkant geplaatst. 

De reden waarom de sluitknop in de rechterbovenhoek moet staan is simpelweg omdat gebruikers hem daar verwachten te zien. 

Als je het ergens anders plaatst, zoals linksboven of onderaan, kunnen je gebruikers tijd kwijt zijn met zoeken naar een manier om het formulier te sluiten en gefrustreerd raken terwijl ze zoeken. Dit kan ertoe leiden dat ze weggaan met een negatieve indruk van je merk, wat betekent dat ze in de toekomst minder snel je site zullen bezoeken of klant zullen worden.

Plaats een label direct boven elk veld in je formulier dat duidelijk beschrijft welke informatie ze moeten geven. 

Zet labels ook dicht bij de velden die ze beschrijven, zodat het duidelijk is dat ze bij elkaar horen.

Elk label moet minder dan één regel in beslag nemen wanneer het wordt bekeken op een mobiel apparaat, dus beknopt zijn is belangrijk.

Neem in elk veld waar gebruikers tekst of getallen moeten invoeren plaatshouders op om je publiek te laten zien hoe hun invoer eruit moet zien (bijvoorbeeld een voorbeeld e-mail, naam, datumnotatie, etc.).

Dit helpt het aantal fouten dat iemand zou kunnen maken te verminderen. Door samen te werken met labels en plaatsaanduidingen kunnen gebruikers gemakkelijk door je formulier navigeren. 

Pro-tip: knoppen moeten ook labels hebben. Het helpt de gebruiker ook om beschrijvender te zijn in de tekst van de knop. 

Bijvoorbeeld, in plaats van een eenvoudige "Verstuur" call-to-action, kun je ook zeggen "Aanmelden voor nieuwsbrief" of "Aanmelden voor sms", wat een duidelijker idee geeft van wat de knop doet. Bovendien kun je zo kostbare ruimte besparen in de kleinere vorm. 

Door je klant te vertellen welke velden ze moeten invullen en welke niet, stroomlijn je de gebruikerservaring. Je kunt bepaalde formulierelementen verplicht maken en andere optioneel, 

Neem een succesbericht op nadat iemand het formulier heeft verzonden, zodat de gebruiker weet dat het gelukt is. 

Als je een lettergrootte van 16 pixels of meer gebruikt, zorg je ervoor dat de tekst leesbaar is. Op deze manier hoeven gebruikers niet in te zoomen om te lezen.

16 pixels is de minimale lettergrootte die wordt aanbevolen voor alle tekst in je mobiele formulier, inclusief labels, plaatsaanduidingen en tekst op knoppen. 

Laat genoeg ruimte tussen de individuele acties in je formulier zodat gebruikers geen moeite hebben om in het gewenste veld te klikken. Anders kunnen ze besluiten om weg te lopen in plaats van het te blijven proberen. 

Probeer het bij het maken van je formulier zo moeilijk mogelijk te maken voor gebruikers om een fout te maken. Test de gebruikerservaring op verschillende soorten apparaten. 

Alle "aanraakdoelen", zoals invoerveld of knoppen, moeten groot zijn en gemakkelijk aan te klikken. 

De gemiddelde vinger van een volwassene is 11 middenbedrijf, wat ongeveer 41,6 pixels is. Om account hiervoor te gebruiken, is het het beste om de aanraakdoelen minstens 48 pixels te maken. 

Gebruik een formulier teaser zodat mobiele bezoekers het formulier naar wens kunnen openen en sluiten terwijl ze bladeren, en zodat het formulier de inhoud van je site niet bedekt.
Merk op dat Google een straf heeft staan op sites met opdringerige interstitials. teaser helpen deze straf te voorkomen, maar je moet ook een lange tijdvertraging gebruiken bij formulieren. 

Kleurcontrast is het verschil in licht tussen tekst of objecten op de voorgrond en de achtergrond. Een goed kleurcontrast verbetert de leesbaarheid van je formulier en is een belangrijk onderdeel van toegankelijkheid. Gebruik een kleurcontrast checker om je kleurcontrast te controleren.

Het kleinste contrast is 1:1 en is onmogelijk te lezen (denk aan witte tekst op een witte achtergrond). Het hoogst mogelijke contrast is 21:1, of zwarte tekst op een witte achtergrond. Met andere woorden, hoe groter de verhouding, hoe beter het contrast. 

Volgens de Web Content Accessibility Guidelines (WCAG) is het minimale kleurcontrast 4,5:1 voor kleine tekst, afbeeldingen en tekst in afbeeldingen en 3:1 voor grote tekst of belangrijke elementen. 

Idealiter zou het contrast nog groter moeten zijn. Volgens WCAG is een beter minimum:

• 7:1 voor kleinere tekst, afbeeldingen of afbeeldingen van tekst
• 4,5:1 voor grotere tekst, belangrijk visueel element, enz. 

Het is belangrijk dat iedereen de inhoud waar je zo hard aan werkt kan waarderen. Het gebruik van bepaalde kleurencombinaties kan het formulier voor sommige groepen moeilijk of zelfs onmogelijk leesbaar maken. 

Wat betreft welke je niet moet gebruiken, moet je bedenken dat er veel soorten kleurenblindheid zijn (het is niet alleen rood en groen).