Basisprincipes: mobiele formulieren ontwerpen
Wat je leert
Leer de 6 basisprincipes voor het ontwerpen van aanmeldingsformulieren voor mobiele apparaten.
Waarom is het ontwerp van mobiele formulieren belangrijk?
Online shoppers gebruiken steeds vaker hun mobiele apparaten om nieuwe winkels te ontdekken, producten te bekijken en aankopen te doen. Alleen al in de VS werd bij 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 aanmeldingsformulieren er op mobiel net zo goed uitzien als op desktop.
De 6 basisprincipes van het ontwerpen van mobiele formulieren
- Houd het formulier kort en to-the-point
- Structureer je formulier zodat het aansluit op de verwachtingen van gebruikers
- Help gebruikers je formulier te navigeren
- Kies contentblokken die goed werken op mobiel
- Zorg dat je formulier op mobiele apparaten makkelijk te openen, te lezen en in te vullen is
- Denk na over je kleuren en het contrast
Houd het formulier kort en to-the-point
Bij mobiele formulieren geldt: minder is altijd meer. Hoewel het verleidelijk kan zijn om in één keer alles te weten te komen over een abonnee (naam, e-mailadres, verjaardag, enz.), kunnen lange mobiele formulieren leiden tot een lager voltooiingspercentage.
Beperk het aantal formulierelementen of velden dat iemand moet invullen zo veel mogelijk.
- Aanbevolen aantal invoervelden: 1–3 per pagina
- Aanbevolen aantal call-to-action-knoppen: 1–2 per pagina
Wat moet ik doen als ik meer dan 3 velden nodig heb?
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 meerstapsformulier 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 abonnees door ze later opnieuw te targeten in het klanttraject. Misschien vraag je naar de verjaardag van je huidige abonnees door ze na 30 dagen een ander formulier te tonen, of misschien vraag je het als onderdeel van je welkomstserie.
Structureer je formulier zodat het aansluit op de verwachtingen van gebruikers
Mensen verwachten dat formulieren een bepaalde logica volgen, en het kan frustrerend (of gewoon ronduit vreemd) zijn als een formulier dat niet doet.
Hieronder vind je tips voor het structureren van een formulier voor mobiel.
Vraag eerst om de minst persoonlijke informatie
Zelfs als alle velden op een formulier verplicht zijn, is het nog steeds vreemd om iemands verjaardag te vragen voordat je om hun naam vraagt.
Vraag over het algemeen om informatie van minst tot meest persoonlijk. Bijvoorbeeld:
- Naam
- E-mailadres of telefoonnummer
- Verjaardag
Gebruik een structuur met één kolom op mobiel
Een indeling met één kolom betekent dat alle invoervelden en knoppen één lijn volgen in het formulier. Hoewel indelingen met meerdere kolommen prima zijn om op desktop te gebruiken, kunnen ze mobiele formulieren rommelig of druk maken. Formulieren met één kolom zijn ook makkelijker te scannen op mobiel.
Formulier met één kolom | Formulier met meerdere kolommen |
 |  |
Plaats call-to-action-knoppen (CTA) onderaan een formulier
De CTA-knop moet aan het einde van de scanreis van de lezer staan, zodat het het laatste is wat ze zien. Je wilt niet dat ze omhoog moeten scrollen om het formulier in te vullen of naar de knop moeten zoeken.
Meestal staat de CTA-knop in het midden of aan de linkerkant.
Plaats de knop Sluiten in de rechterbovenhoek.
De reden dat de sluitknop rechtsboven moet staan, is simpelweg omdat gebruikers verwachten dat hij daar staat.
Als je het ergens anders plaatst, zoals linksboven of bijna onderaan, kunnen je gebruikers tijd kwijt zijn aan het zoeken naar een manier om het formulier te sluiten, en gefrustreerd raken tijdens het zoeken. Dit kan ervoor zorgen dat ze vertrekken met een negatieve impressie van je merk, waardoor de kans kleiner is dat ze je site in de toekomst bezoeken of klanten worden.
Help gebruikers je formulier te navigeren
Op mobiel wil je zo duidelijk mogelijk zijn over wat iemand moet doen, hoe dat moet en wat diegene al heeft gedaan.
Plaats beknopte labels boven (en dicht bij) elk veld
Plaats direct boven elk veld in je formulier een label dat duidelijk beschrijft welke informatie ze moeten invullen.
Zet ook labels dicht bij de velden die ze beschrijven, zodat duidelijk is dat de twee bij elkaar horen.
Elk label moet bij weergave op elk mobiel apparaat minder dan één regel innemen, dus beknopt zijn is essentieel.
Gebruik placeholders in elk invoerveld
Voeg in elk veld waar gebruikers tekst of cijfers moeten invoeren placeholders toe om je doelgroep te laten zien hoe hun invoer eruit moet zien (bijv. een voorbeeld-e-mailadres, naam, datumnotatie, enz.).
Dit helpt het aantal fouten dat iemand kan maken te verminderen. Samen met labels en tijdelijke aanduidingen kunnen gebruikers eenvoudig door je formulier navigeren.
Gebruik een beschrijvende call-to-action voor knoppen
Pro-tip: knoppen moeten ook labels hebben. Door meer beschrijvend te zijn in de knoptekst help je de gebruiker ook.
In plaats van een eenvoudige call-to-action zoals “Verzenden” geeft “Aanmelden voor nieuwsbrief” of “Aanmelden voor sms” bijvoorbeeld een duidelijker beeld van wat de knop doet. Bovendien kan dit je helpen kostbare ruimte te besparen in het kleinere formulier.
Geef aan welke velden verplicht zijn en welke optioneel zijn
Door je klanten te vertellen welke velden ze moeten invullen en welke niet, stroomlijn je de gebruikerservaring. Je kunt bepaalde formulierelementen verplicht maken en andere optioneel,
Voeg een succesbericht toe
Voeg een succesbericht toe nadat iemand het formulier heeft verzonden, zodat de gebruiker weet dat het is gelukt.
Kies contentblokken die goed werken op mobiel
Bepaalde typen formulierblokken zijn mobielvriendelijker dan andere. Hieronder zetten we op een rij wat je op mobiel wel en niet moet gebruiken.
Goed om te gebruiken op mobiel | Slecht om te gebruiken op mobiel |
Tekst- of cijferinvoer (e-mail, telefoon, datum) | Meerdere selectievakjes |
Keuzerondjes | Dropdownmenu’s |
Tik-om-te-sms'en-knoppen (voor sms-toestemming) |
Zorg dat je formulier op mobiele apparaten makkelijk te openen, te lezen en in te vullen is
Over het algemeen moet je formulier gemakkelijk te gebruiken zijn op mobiele apparaten. Mensen hoeven niet te worstelen om de tekst te lezen of op een specifieke knop te klikken. Als dit gebeurt, kunnen ze gefrustreerd raken en het formulier of je site helemaal verlaten.
Er zijn verschillende best practices bij het ontwerpen voor mobiel.
Maak de lettergrootte minimaal 16 pixels
Een lettergrootte van 16 pixels of meer helpt ervoor te zorgen dat de tekst leesbaar is. Zo hoeven gebruikers niet in te zoomen om te kunnen lezen.
16 pixels is de minimaal aanbevolen lettergrootte voor tekst in je mobiele formulier, inclusief labels, placeholders en knoptekst.
Voeg minimaal 8 pixels ruimte toe tussen velden, knoppen, enz.
Laat voldoende ruimte tussen individuele acties in je formulier, zodat gebruikers niet moeite hebben om in het veld te klikken dat ze willen. Anders kunnen ze besluiten om weg te gaan in plaats van te blijven proberen.
Terwijl je je formulier bouwt, probeer je het zo moeilijk mogelijk te maken voor gebruikers om een fout te maken. Test de gebruikerservaring op verschillende soorten apparaten.
Maak aanraakdoelen minimaal 48 pixels groot
Alle 'touch targets', zoals invoervelden of knoppen, moeten groot zijn en makkelijk om op te klikken.
De gemiddelde volwassen vinger is 11 middenbedrijf, wat ongeveer 41,6 pixels is. Om hiermee rekening te houden, is het een best practice om aanraakdoelen minimaal 48 pixels te maken.
Een formulierteaser gebruiken
Gebruik een teaser zodat mobiele bezoekers het formulier naar wens kunnen openen en sluiten terwijl ze browsen, en zodat het formulier de content van je site niet afdekt.
Houd er rekening mee dat Google een straf oplegt aan sites met opdringerige interstitials. teaser helpen deze straf te voorkomen, maar je moet ook een lange tijdsvertraging gebruiken met formulieren.
Denk na over je kleuren en het contrast
Je wilt altijd dat je formulierkleuren bij je merk passen, zodat het je merk weerspiegelt.
Het is echter net zo belangrijk om de kleurcombinaties voor alle gebruikers toegankelijk te maken. Anders loop je het risico potentiële abonnees of klanten van je te vervreemden.
Bij het kiezen van je kleuren zijn er 2 belangrijke overwegingen.
Kies kleuren met een hoog contrast
Kleurcontrast is het verschil in licht tussen tekst of objecten op de voorgrond en de achtergrond. Goed kleurcontrast verbetert de leesbaarheid van je formulier en is een belangrijk onderdeel van toegankelijkheid. Gebruik een kleurcontrastchecker 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 hoogste contrast dat beschikbaar is, 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, belangrijke visuele elementen, enz.
Kies kleuren die vriendelijk zijn voor kleurenblinden
Het is belangrijk dat iedereen de content kan waarderen waar je zo hard aan hebt gewerkt. Het gebruik van bepaalde kleurencombinaties kan het formulier voor sommige groepen moeilijk of zelfs onmogelijk te lezen maken.
Combinaties die geschikt zijn voor kleurenblindheid | |||
Blauw en oranje |   | Blauw en geel |  |
Blauw en rood |  | Oranje en geel | |
Blauw en bruin |  | ||
Wat betreft welke je niet moet gebruiken: houd er rekening mee dat er veel soorten kleurenblindheid zijn (het is niet alleen rood en groen).
Kleurcombinaties om te vermijden | |||
Groen en rood |  | Blauw en paars |  |
Rood en oranje | | Blauw en grijs |  |
Groen en oranje | | Paars en rood | |
Rood en bruin | | Blauwgroen en roze |   |
Groen en bruin | | Blauwgroen en grijs | |
Groen en blauw | | Geel en roze | |
Lichtgroen en geel |  | Roze en grijs | |
Groen en grijs | | Grijs en bruin | |
Groen en zwart |  | Oranje en bruin | |
Rood en zwart | | ||