Het aanvragen van een afspraak, maken van een reservering, bestellen van een product: het zijn de belangrijkste contactmomenten met uw doelgroep. De gebruiksvriendelijkheid van uw webformulieren is bepalend voor uw digitale succes, schrijft Wendy Thio van Jungle Minds.
Tekst: Wendy Thio
En voor al deze cruciale ‘conversiemomenten’ geldt: ze vinden steeds vaker plaats via een mobiele interface. Optimale mobiele toegankelijkheid is dus cruciaal, maar nog altijd meer uitzondering dan regel. Daarom 5 concrete tips voor directe verbetering van je mobiele conversie.
Slechte formulieren: voorkom uitstel
Uit onze usability onderzoeken bij Jungle Minds horen we vaak van gebruikers dat ze zich mobiel oriënteren, maar vaak het ‘conversiemoment’ uitstellen totdat de gebruiker achter een laptop/desktop zit. De belangrijkste reden die gebruikers hiervoor aangeven, zijn lastige webformulieren (slechte usability voor mobiel). Kortom, slechte formulieren leiden tot uitstel. En we weten allemaal waar uitstel toe leidt. Zonde dus, en bovendien onnodig: tegenwoordig zijn er voldoende mogelijkheden om ook op mobiele telefoons slim met formulieren om te gaan.
Automatisch zoomen: veel gemaakte fout
Mobiele browsers zijn in staat om bij het klikken op een formulierveld in te zoomen. Echter zien wij nog vaak genoeg dat dit fout gaat. Hierboven ziet u hoe labels buiten het scherm komen te vallen. Zorg dus dat uw formulieren geoptimaliseerd zijn voor mobiel.
Tip 1 – Maak formulieren responsive
Responsive design schikt zich uitermate voor formulieren op mobiel. Er zijn veel verschillende mobiele schermformaten om rekening mee te houden. Middels responsive design kunnen teksten en invoervelden groter worden weergegeven en u kunt ze tevens aanpassen aan de schermgrootte, maar ook aan de positie van uw mobiel; staand of liggend.
U kunt de uitlijning van labels bepalen aan de hand van de positie. Als uw uw mobiel staand vast hebt, is de leesbaarheid bijvoorveeld groter wanneer er labels boven de formuliervelden staan. Maar heeft u uw mobiel liggend vast, dan ontstaat er meer ruimte om de labels links van het formulierveld te plaatsen. Dit leidt tot meer verticale ruimte.
Maar denk ook aan formuliervelden die kunnen ‘groeien’ naarmate er meer tekst in komt. Zo valt uw tekst nooit meer buiten beeld:
Tip 2 – Responsive lettergrootte
Een andere responsive oplossing is om de grootte van het lettertype automatisch aan te passen aan de hoeveel content die in het veld staat. Dit geldt met name voor formuliervelden die een fixed size hebben. Het maakt het controleren en wijzigen van de content een stuk eenvoudiger, omdat u de cursor precies op de geselecteerde tekst kunt plaatsen.
Tip 3 – Bied het juiste toetsenbord
Zowel iOS als Android devices hebben speciale toetsenborden voor verschillende typen formuliervelden. Dit zijn belangrijke technische requirements die u moet aangeven voor het ontwikkelen van formulieren. Het biedt veel voordelen voor de gebruiker, omdat het wisselen van toetsenborden wordt beperkt.
Typen:
- Default: alfabetisch (berichten schrijven)
- E-mail: apenstaartje voor e-mailadressen
- URL: tekens voor web-adressen
- Numeriek: numeriek voor aantallen + symbolen
- Telefoon: numeriek voor telefoonnummers
Tip 4 – Eenvoud en snelheid
Help de gebruiker om een formulier zo snel en eenvoudig mogelijk te voltooien. Door formulieren met pre-sets in te vullen in plaats van een leeg veld te tonen, kan dit in de meeste gevallen enkele clicks schelen. Bijvoorbeeld door standaard het aantal passagiers op 1 te zetten of de datum van vandaag in te vullen.
De mobiele site van Kayak.com heeft een simpel en overzichtelijk zoekformulier.
Zoals u hieronder ziet, hoeft men slechts op de ‘+’ en ‘-‘ knoppen te klikken om het aantal passagiers aan te passen.
Tip 5 – Auto-aanvullen voorzien
Het grootste verschil tussen mobiele en desktop formulieren invullen, is dat er op desktop browsers standaard functionaliteit voor automatisch aanvullen aanwezig is. Hiermee kunnen gebruikers sneller formulieren invullen. Dit is vergelijkbaar met het creëren van een account bij een webshop, zodat men maar eenmalig zijn gegevens hoeft in te vullen.
Als u bent ingelogd op Amazon.com en u de betaalmethode en het bezorgadres in een eerdere bestelling hebt ingevuld, dan krijgt bijvoorbeeld de optie om in 1 click je bestelling te plaatsen (zie hieroboven). U hoeft dan niet nogmaals uw gegevens in te vullen. Dit kan veel tijd schelen, waardoor uw conversie én klantvriendelijkheid kan bewerkstelligen:
De auto-aanvullen functionaliteit van formulieren is niet standaard ingesteld op mobiel. Vele gebruikers hebben dit niet ingesteld of ze weten niet dat deze functionaliteit bestaat.
U kunt op de iPhone een eigen contactpersoon aanmaken met uw adresgegevens, telefoonnummer en e-mailadres. Deze gegevens kunnen vervolgens worden gebruikt voor formulieren. Kijk hier hoe u auto-aanvullen op de iPhone kunt instellen.
Het auto-aanvullen op mobiel is een persoonlijke actie, die de gebruiker zelf moet uitvoeren. Als organisatie heeft u hier geen grip op.
Binnen ingebakken ofwel native apps is auto-aanvullen ook al mogelijk. Uw e-mailadres en telefoonnummer kunnen direct uit uw telefoon worden gelezen. Dit maakt bijvoorbeeld een registratieproces een stuk eenvoudiger. Het voordeel van auto-aanvullen is dat men niet bang hoeft te zijn om typefouten te maken.
In de Chrome app kun t u uw Google-account koppelen aan de browser. Deze gegevens worden door Chrome onthouden, waardoor elke Google service optimaal draait zonder elke keer te moeten inloggen.
Toekomstvisie: ultiem mobiel gemak
Uw mobiel is dé centrale database waar al uw gegevens samenkomen en worden beheerd. Deze database bevat voornamelijk persoonlijke gegevens: e-mail, adresboek, bankgegevens, foto’s, dagboek, boodschappen, et cetera. Als u deze database toegankelijk wil maken, is het zaak dat u daarbij gemak aan uw gebruikers kunt bieden.
De ontwikkelingen die ik op dit gebied zie aankomen, zullen de user experience naar een hoger niveau tillen. In mijn ideale ontwerp kunnen gebruikers door een druk op 1 knop toestemming geven om data te importeren in een formulier vanuit het eigen adresboek. Het ultieme gemak met een optimale conversie:
Wendy Thio is User Experience Designer bij Jungle Minds. Dit artikel verscheen eerder op de site van het bureau.
Bedankt voor de blogpost Wendy, met name de responsive lettergrootte is nieuw voor me en handig om rekening mee te houden.
Ik ben van plan de veldnamen in de velden zelf te plaatsen, dan voorkom je onnodig scrollen en in-/uitzoomen ongeacht de positie van het device. Moet alleen nog uitzoeken of dit op elk device ook naar behoren werkt, heb jij daar inzicht in?