Conversie optimalisatie voor mobiel: Formulieren

17 oktober 2016

Het wordt al jaren voorspeld dat het internetgebruik van smartphones dat van desktop zou overstijgen. Voor vele websites is dit inmiddels al het geval. Onderstaande afbeelding is een willekeurig voorbeeld van een website waar het mobiele verkeer (oranje) dat van desktop (blauw) overstijgt.

google-analytics-vergelijking-mobile-en-desktop-verkeer

In dit eerste deel van de blogserie over het optimaliseren van je website voor mobiel wordt ingegaan op het optimaliseren van formulieren.

Zelfs op desktop haken veel gebruikers af bij het zien van een lastig in te vullen formulier. De welwillendheid om moeite te doen bij het invullen van een formulier is op mobiel nog een stuk lager. Hieronder vijf tips die ervoor zorgen dat jouw bezoekers niet afhaken!

Overzicht: Formulieren optimaliseren voor mobiel

Kies het juiste toetsenbord

Op een desktop heb je een vaststaand toetsenbord en een muis. Op mobiel is dit niet het geval. Er is het standaard toetsenbord waarbij je kan switchen tussen het nummerieke deel en de speciale tekens. Met behulp van een kort stukje html is het ook mogelijk om een ander toetsenbord op te roepen.

Voorbeelden van speciale toetsenborden zijn het toetsenbord met @ teken voor mailadressen of het toetsenbord met enkel nummers voor bijvoorbeeld telefoonnummers.

toetsenbord voor telefoonnummer en voor email adressen op mobiel

 

Door naar het volgende veld

Bij het invullen van een formulier wordt het halve beeldscherm in beslag genomen door het toetsenbord. Dit laat weinig ruimte over voor de verschillende velden. Onnodige extra handelingen zoals het wegdrukken van het toetsenbord om vervolgens het volgende inputveld te selecteren wil je zoveel mogelijk voorkomen. Dit kan door gebruik te maken van de volgende knop in het toetsenbord, deze vervangt de verzendknop in het toetsenbord. In het bovenstaande voorbeeld zie je dat het numerieke toetsenbord een | achter de pijl rechtsonder heeft staan. Deze geeft aan dat er naar een volgend veld genavigeerd wordt.

Eenvoudigste invuloptie

Zorg ervoor dat het invullen van velden niet moeilijker is dan nodig. Bij een vraag met meerdere antwoordmogelijkheden kan je de afweging maken tussen een drop down menu en checkbox. Als je slechts enkele opties hebt (bijv. man/vrouw) vergt het invullen van een (grote!) checkbox minder van de gebruiker dan een drop down menu. Heb je een langere lijst met opties, bijvoorbeeld een taalkeuze, dan kan je gebruik maken van het drop down menu.

Checkbox opties in een formulier

Datum kiezen in het formulier

Voorkom dat mensen niet weten wat ze in moeten vullen! Zeker bij het invullen van een datum is dat een veelvoorkomend probleem door de vele verschillende formats. Denk aan de keuze tussen 14-10-16 of 14-10-2016.
Google adviseert om bij een keuzeveld voor datum gebruik te maken van een kalender weergave. Motivatie is dat mensen niet altijd de exacte datum van volgend weekend weten, wat bijvoorbeeld handig is als je een hotel of vlucht wil boeken.

Kalender voor het selecteren van een datum op mobiel

Aantal velden minimaliseren

Een lang formulier kan de bezoeker op een desktop al afschrikken. Je kan wel nagaan wat het dan met mobiele bezoekers zal doen. Zorg ervoor dat je formulier alleen noodzakelijke velden bevat en vraag dus niet naar onnodige zaken. Data verrijken kan later altijd nog. Daarnaast kun je bezoekers helpen door velden automatisch in te vullen, denk daarbij aan de straatnaam nadat de postcode en het huisnummer ingevuld zijn.

Samenvattend

Als je een formulier wil maken of een bestaand formulier wil optimaliseren kan je onderstaande checklist langs lopen:

Vond je dit interessant?

Schrijf je in voor onze nieuwsflits en ontvang maandelijks een update met onze laatste blogs en updates!

volg ons op
{ "@context": "https://schema.org", "@type": "LocalBusiness", "address": { "@type": "PostalAddress", "addressLocality": "Groningen, Nederland", "postalCode": "9723ZA", "streetAddress": "Helperpark 288b" }, "image": { "@type": "ImageObject", "url": "https://www.rocketdigital.nl/wp-content/themes/rocketdigital/images/logo.png", "width": 256, "height": 81 }, "aggregateRating": { "@type": "AggregateRating", "bestRating": "10", "worstRating": "1", "ratingValue": "9.8", "reviewCount": "60" }, "sameAs": [ "https://www.facebook.com/rocketdigitalbv/", "https://www.linkedin.com/company/rocketdigitalbv/", "https://twitter.com/rocketdigitalbv" ], "name" : "Rocket Digital", "url" : "https://www.rocketdigital.nl/", "telephone": "0507001535", "logo": { "@type": "ImageObject", "url": "https://www.rocketdigital.nl/wp-content/themes/rocketdigital/images/logo.png", "width": 256, "height": 81 } }