Twee van de drie formulierinzendingen gebeuren inmiddels op een telefoon. Toch ontwerpen de meeste websites hun formulieren op een desktop en proppen ze die daarna op een mobiel scherm. Het resultaat: formulieren die frustrerend zijn om in te vullen, vaker worden verlaten en minder bezoekers omzetten in klanten.
Mobiel formulierontwerp is niet het kleiner maken van desktopformulieren. Het is de hele ervaring opnieuw bedenken voor iemand met een scherm van 6 inch in zijn hand, met zijn duim, in een wiebelende bus of een druk café. Alles verandert. De beschikbare ruimte krimpt. De aanraakdoelen worden dikker. Het toetsenbord verschijnt en verbergt de helft van het formulier. De bezoeker wordt onderbroken en vertrekt.
Mobile-first formulierontwerp betekent elk detail van een formulier optimaliseren voor hoe mensen telefoons echt gebruiken. Dit hoofdstuk behandelt de specifieke aanpassingen die afhakers verminderen, het invullen versnellen en meer mobiele bezoekers omzetten in leads of klanten.
Mobiele formulieren die voor desktop zijn ontworpen, kosten klanten
Kijk wat er gebeurt als iemand een formulier op zijn telefoon opent in plaats van op een desktop. De telefoongebruiker heeft minder schermruimte, minder geduld en meer afleiding. Hij jongleert met context. Zijn aandacht is versnipperd. Eén onhandige interactie en hij vertrekt.
De data bevestigen dit. Bij formulieren met een slecht mobiel ontwerp springt het afhaakpercentage 20-40 procentpunten omhoog ten opzichte van desktop. Eén slecht geplaatst veld kan een golf van afhakers veroorzaken. Een kleine knop die moeilijk aan te tikken is, zorgt voor wrijving die zich over duizenden inzendingen vermenigvuldigt.
Maar dit missen de meeste merken: optimaliseren voor mobiel vertraagt desktopgebruikers niet. Een formulier dat eerst voor mobiel is ontworpen en daarna is uitgebreid voor grotere schermen, werkt eigenlijk voor iedereen beter. Strakkere indelingen. Betere witruimte. Duidelijkere hiërarchie. Dat zijn geen mobiele compromissen, het zijn ontwerpverbeteringen.
De uitdaging van mobiel formulierontwerp: wat is er echt anders
Mobiele formulieren kampen met beperkingen die desktopformulieren niet hebben. Begrijpen wat er verandert helpt je slimmer te ontwerpen:
Schermruimte is beperkt
Een telefoonscherm toont ongeveer 30-40% van de inhoud die een desktopmonitor in één keer kan tonen. Elk element neemt fysieke ruimte in. Extra labels, instructies, tips en formuliervelden strijden allemaal om dezelfde kleine ruimte. Het toetsenbord verschijnt en verkleint de beschikbare ruimte nog verder. Lange alinea's uitlegtekst verdwijnen buiten beeld.
Aanraakdoelen zijn groter en minder nauwkeurig
Een vinger is 40-50 pixels breed. Een muisaanwijzer is 1 pixel. Daarom moeten knoppen, selectievakjes, keuzerondjes en linkdoelen op mobiel aanzienlijk groter zijn om makkelijk aan te tikken te zijn. De standaardformaten die Apple en Google aanbevelen, zijn minimaal 44x44 pixels. Te klein en gebruikers missen het doel, raken gefrustreerd en verlaten het formulier.
Toetsenborden nemen de macht over
Tikt een gebruiker op mobiel op een formulierveld, dan schuift het toetsenbord omhoog en bedekt het de helft van het scherm. Sommige velden roepen andere toetsenborden op: e-mailvelden tonen het @-teken, getalvelden verbergen letters, datumvelden openen een kalenderkiezer. Elk soort toetsenbord verandert wat de gebruiker ziet en hoe hij werkt. Ontwerp voor elk afzonderlijk.
De context blijft verschuiven
Desktopgebruikers gaan zitten en vullen een formulier ononderbroken in. Mobiele gebruikers vullen formulieren in op treinen, in winkels, tussen andere apps door. Ze krijgen een melding, wisselen van app en komen vijf minuten later terug. Scrollen voelt eindeloos. De formuliervelden vloeien in elkaar over. Elke stap die geheugen of wisselen van context vraagt, laat mensen stoppen.
Eén hand bedient het apparaat
De meeste telefoongebruikers houden het apparaat in één hand vast en navigeren met hun duim. Knoppen rechtsonder zijn bereikbaar. Knoppen bovenaan een hoog formulier vragen een tweede hand of een onhandige rek. Labels links van velden zijn moeilijker te lezen terwijl je je duim op positie houdt. Ontwerp voor bediening met één hand.
Regel 1: vraag om minder velden
Elk veld waar je om vraagt is nog een tik, nog een beslissing, nog een kans dat iemand vertrekt. Het formulier heeft niet alles nodig. Het heeft alleen nodig wat je echt gebruikt om op te volgen.
Kijk naar je echte toepassingen. Een contactformulier heeft bij de eerste inzending zelden tweede voornamen, bedrijfsgrootte of branchecategorie nodig. Een boekingsformulier heeft de meisjesnaam van de moeder van een klant niet nodig. Een aanmelding voor een nieuwsbrief heeft op dag één geen postcode nodig. Je kunt later om meer informatie vragen, als je al vertrouwen hebt opgebouwd.
Een groot online reisbureau testte dit principe en bespaarde $12 miljoen per jaar door optionele velden uit het boekingsformulier te halen. Gebruikers maakten meer formulieren af. Er kwamen meer conversies. De vereenvoudiging loonde.
Begin met het absolute minimum. Op mobiel is de regel strenger: heb je het niet nodig om de kernactie te voltooien, haal het dan weg. Test het weghalen van velden een voor een en zie je voltooiingspercentage stijgen.
Regel 2: stapel velden in één kolom
Indelingen met twee kolommen op mobiel zijn een vergissing. Ze vragen horizontaal scrollen, geven een verwarrende visuele hiërarchie en verspillen horizontale ruimte. Eén kolom, verticaal gestapeld, is het snelst te scannen en in te vullen.
Elk veld krijgt de volle breedte. Labels staan boven het invoerveld, niet ernaast. De gebruiker scrolt omlaag, leest het label, tikt op het veld, typt en gaat naar het volgende. De stroom is lineair. De mentale belasting is laag.
Weersta de verleiding om voor- en achternaam naast elkaar te zetten, of adres en postcode op dezelfde regel. Verticaal stapelen is op desktop trager, dat klopt. Maar mobiel is twee derde van je verkeer. Optimaliseer voor het meest voorkomende geval.
Regel 3: maak aanraakdoelen groot genoeg om betrouwbaar te raken
Knoppen moeten minstens 44x44 pixels zijn. Selectievakjes en keuzerondjes moeten minstens 40x40 pixels zijn. Kleine knoppen dwingen gebruikers om zorgvuldig te richten of meerdere keren te tikken. De frustratie loopt op. Ze vertrekken.
Let een dag op je eigen telefoongebruik. Merk op hoeveel tikken missen. Zelfs ervaren gebruikers missen. Ontwerp voor het foutenpercentage dat in menselijke vingers zit ingebouwd.
Ook de ruimte tussen aanraakdoelen doet ertoe. Staat een ja-knop direct naast een nee-knop, dan raken gebruikers de verkeerde. Voeg 10-15 pixels ademruimte toe tussen interactieve elementen.
Regel 4: zet labels boven velden, niet erin
Plaatshoudertekst in invoervelden verdwijnt zodra de gebruiker begint te typen. Hij vergeet waar het veld voor was. Dan maakt hij een fout, ziet een foutmelding en weet niet wat hij moet herstellen.
Labels moeten buiten en boven het veld staan. Duidelijk, zichtbaar, altijd aanwezig. Tikt de gebruiker op het veld en verschijnt het toetsenbord, dan blijft het label zichtbaar en herinnert het hem eraan wat hij typt.
Een label in een veld is alleen een gemak voor de ontwerper. Het bespaart een paar pixels ruimte. Het kost je conversies.
Regel 5: kies het juiste invoertype voor het mobiele toetsenbord
Verschillende invoertypen roepen op mobiele apparaten verschillende toetsenborden op. Gebruik ze om gegevens sneller en nauwkeuriger in te voeren:
E-mailadressen
Gebruik `type="email"` om een toetsenbord op te roepen met het @-teken en de toetsen .com/.org zichtbaar. Gebruikers hoeven niet naar speciale tekens te zoeken. Ook de validatie gebeurt automatisch.
Telefoonnummers
Gebruik `type="tel"` om een numeriek toetsenbord te tonen. Sla de fraaie opmaak over die het veld verdeelt in segmenten voor (netnummer) en abonneenummer. Gebruikers hebben moeite met strakke veldverdelingen en wissen terug in het verkeerde stuk. Eén eenvoudig telefoonveld dat cijfers en spaties accepteert, is sneller.
Getallen en aantallen
Gebruik `type="number"` om alleen cijfers op het toetsenbord te tonen. Verberg de letters. Sommige getalvelden hebben decimalen nodig: gebruik `inputmode="decimal"` om ze toe te staan.
Datums
Gebruik `type="date"` om een eigen datumkiezer op te roepen in plaats van gebruikers te vragen 03/15/2026 te typen. De kalenderkiezer is sneller, geeft minder fouten en voelt eigen aan de telefoon.
URL's
Gebruik `type="url"` om een toetsenbord te tonen met de schuine streep en de toets .com. Gebruikers kunnen een webadres invoeren zonder naar speciale tekens te zoeken.
Elk invoertype laat de mobiele browser weten welke gegevens je verwacht. De browser optimaliseert dan het toetsenbord daarop. Je hoeft het formaat niet uit te leggen. Het toetsenbord doet het werk.
Regel 6: schrijf duidelijke foutmeldingen die in realtime verschijnen
Vult iemand op mobiel een formulier in en klikt hij op verzenden om "Ongeldig e-mailadres" te zien, dan is hij al vergeten wat hij typte. Hij weet niet welk veld de fout veroorzaakte. Op een klein scherm kan de foutmelding buiten beeld staan. Hij moet terug omhoog scrollen.
Valideer in plaats daarvan velden terwijl de gebruiker ze invult. Zodra hij naar het volgende veld gaat, controleer je het veld dat hij net verliet. Is er een fout, toon die dan direct, vlak onder dat veld. Hij ziet het probleem terwijl de context nog in zijn hoofd zit.
Foutmeldingen moeten specifiek zijn. FOUT: "Ongeldige invoer." GOED: "Het e-mailadres moet een @-teken bevatten." De gebruiker weet precies hoe hij het oplost.
Gebruik niet alleen rood om fouten aan te geven. Kleurenblinde gebruikers missen het. Gebruik rood plus een pictogram of een tekstlabel. "Fout: dit veld is verplicht."
Regel 7: optimaliseer knoppen voor mobiele bediening
Verzendknoppen moeten groot zijn, duidelijk aan te tikken en zitten waar een duim vanzelf rust. Knoptekst van 16 pixels in een knop van 44 pixels hoog is makkelijk aan te tikken. Tekst van 14 pixels in een knop van 32 pixels is een misser die staat te wachten.
De breedte van een knop moet het grootste deel van de schermbreedte beslaan en niet in een smalle kolom worden geperst. Knoppen over de volle breedte op mobiel verminderen de mentale belasting van "waar klik ik hierna".
Vermijd secundaire knoppen op hetzelfde scherm, tenzij het echt niet anders kan. Te veel knoppen geven keuzestress. Eén hoofdactie per scherm is de mobile-first regel.
Regel 8: gebruik voortgangsindicatoren bij formulieren met meerdere stappen
Beslaat je formulier meerdere schermen, toon dan bovenaan een voortgangsbalk. "Stap 1 van 3" vertelt de gebruiker wat hij kan verwachten. Hij weet dat hij geen eindeloos formulier invult. Hij ziet de finish.
Elke stap moet één logisch blok informatie behandelen. Gooi niet vijf verschillende onderwerpen op stap één. Verdeel ze. Laat gebruikers voortgang voelen terwijl ze doorgaan.
Laat gebruikers terug gaan om eerdere stappen aan te passen. Ze moeten zich niet opgesloten voelen. Mobiele gebruikers zijn schichtig. Een nooduitgang bieden vermindert onrust.
Regel 9: zorg dat je formulier werkt met mobiele toetsenborden en onderbrekingen
Het toetsenbord verschijnt en verbergt je formulier. De gebruiker scrolt om het volgende veld te zien. Goed. Nu komt er een melding binnen en het toetsenbord verdwijnt. Het formulier is zichtbaar, maar de gebruiker is vergeten wat hij invulde. Slecht.
Test je formulier op een echte telefoon en een echt toetsenbord. Begrijp hoeveel van het formulier verdwijnt als het toetsenbord verschijnt. Is een veld helemaal verborgen, dan is het onbruikbaar. Ontwerp de indeling opnieuw, zodat het actieve veld zichtbaar blijft met het toetsenbord open.
Sla de voortgang van het formulier op terwijl de gebruiker elk veld invult. Wisselt hij van app of sluit het formulier per ongeluk, dan blijven zijn gegevens bewaard. Komt hij terug, dan staat het formulier precies zoals hij het achterliet. Dat haalt een grote oorzaak van afhakers weg.
Regel 10: gebruik automatisch invullen en vooraf invullen om het invullen te versnellen
Mobiele telefoons bewaren contactgegevens, e-mailadressen, namen en betaalgegevens. Gebruikt je formulier standaard veldnamen en HTML-attributen, dan kan de browser deze automatisch invullen. Een telefoonveld met `autocomplete="tel"` toont opgeslagen telefoonnummers als suggesties.
Velden vooraf invullen met gegevens die je al kent is nog krachtiger. Logt iemand in en begint hij een formulier, dan is zijn e-mailadres al ingevuld. Zijn adres is al ingevuld. Hij typt alleen wat nieuw is. Voltooiingspercentages springen omhoog als gebruikers geen informatie opnieuw hoeven in te voeren die je al hebt.
Automatisch en vooraf invullen is geen valsspelen. Het respecteert de tijd van de gebruiker. Het vermindert typen. Het vermindert fouten. Het verhoogt het aantal voltooide formulieren.
Regel 11: test op echte telefoons met echte gebruikers
Desktopbrowsers hebben apparaatemulatie. Die simuleert een telefoonscherm. Handig voor snelle controles. Maar het simuleert de echte mobiele ervaring niet. Het toetsenbord werkt niet hetzelfde. Scrollen voelt niet hetzelfde. De aanraakdoelen vragen niet om je echte duim.
Test je formulier op echte telefoons. Vraag een collega het in te vullen. Kijk waar hij aarzelt. Kijk waar hij fouten maakt. Kijk waar hij afhaakt. Die echte data vertellen je meer dan welke checklist ook.
Veelgemaakte fouten in mobiele formulieren zijn zonder testen moeilijk te zien. Een knop die er op een desktopemulator groot uitziet, kan op een echte telefoon in fel zonlicht te klein zijn. Labels die in een wireframe duidelijk lijken, kunnen moeilijk leesbaar zijn onder de hoek waarin een telefoon wordt vastgehouden. Alleen echt testen laat deze problemen zien.
Zo helpt WEMASY bij mobiel formulierontwerp
De formulierbouwer van WEMASY bevat standaard mobile-first ontwerp. Formulieren stapelen op mobiel automatisch in één kolom. Aanraakdoelen hebben het juiste formaat. Labels blijven zichtbaar terwijl gebruikers velden invullen. Het mobiele toetsenbord is geoptimaliseerd voor elk invoertype.
Ingebouwde formuliervalidatie gebeurt in realtime, niet na het versturen. Voortgangsindicatoren verschijnen bij formulieren met meerdere stappen. Antwoorden op formulieren worden automatisch opgeslagen, zodat gebruikers nooit hun voortgang kwijtraken. Analyses laten zien welke velden de meeste afhakers veroorzaken, zodat je de grootste knelpunten kunt optimaliseren.
Bekijk wat er in elk WEMASY-abonnement zit en hoe de formulierbouwer bij jouw werkwijze past.