menu

5 tips voor optimale mobiele formulieren

Overzicht

Slechte formulieren: voorkom uitstel

Uit onze usability onderzoeken 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.

Door in te zoomen op het formulier, zijn de labels niet meer zichtbaarDoor in te zoomen op het formulier, zijn de labels niet meer zichtbaar

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 zie je een formulier die inzoomt op het formulierveld, waardoor de labels buiten het scherm vallen. Zorg dus dat je 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 je kunt ze tevens aanpassen aan de schermgrootte, maar ook aan de positie van je mobiel; staand of liggend.

Je kunt de uitlijning van labels bepalen aan de hand van de positie. Bijvoorbeeld als je je mobiel staand vast hebt, is de leesbaarheid groter als labels boven de formuliervelden staan. Maar heb je je mobiel liggend vast, dan ontstaat er meer ruimte om de labels links van het formulierveld te plaatsen. Dit leidt tot meer verticale ruimte.

Formulieropbouw aanpassen op positie telefoonFormulieropbouw aanpassen op positie telefoon

Maar denk ook aan formuliervelden die kunnen ‘groeien’ naarmate er meer tekst in komt. Zo valt je tekst nooit meer buiten beeld.

Responsive formulierveld, zo vallen teksten nooit meer “buiten” beeldResponsive formulierveld, zo vallen teksten 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 je de cursor precies op de geselecteerde tekst kunt plaatsen.

Responsive lettergrootte in fixed size formulierenResponsive lettergrootte in fixed size formulieren

Tip 3 – Bied het juiste toetsenbord

Zowel iOS als Android devices hebben speciale toetsenborden voor verschillende typen formuliervelden. Dit zijn belangrijke technische requirements die je 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

Verschillende toetsenborden weergaves op iPhoneVerschillende toetsenborden weergaves op iPhone

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.

Tip 5 – Auto-aanvullen voorzien

Kopen binnen 1 click van AmazonKopen binnen 1 click van Amazon

Het grootste verschil tussen mobiele en desktop formulieren invullen is dat er op desktop browsers standaard een auto-aanvullen functionaliteit 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.

Bijvoorbeeld als je bent ingelogd op Amazon.com en je de betaalmethode en het bezorgadres in een eerdere bestelling hebt ingevuld, dan krijg je de optie om in 1 click je bestelling te plaatsen. Je hoeft dan niet nogmaals je gegevens in te vullen. Dit kan veel tijd schelen, waardoor je conversie én klantvriendelijkheid kan bewerkstelligen.

De auto-aanvullen functionaliteit van formulieren is niet standaard ingesteld op mobiel. Vele gebruikers hebben dit niet ingesteld of weten niet dat deze functionaliteit bestaat.

Je kunt op de iPhone een eigen contactpersoon aanmaken met je adresgegevens, telefoonnummer en e-mailadres. Deze gegevens kunnen vervolgens worden gebruikt voor formulieren.

Auto-aanvullen functionaliteit van formulieren op de iPhoneHet auto-aanvullen op je mobiel is echter een persoonlijke actie die de gebruiker zelf moet doen. Als organisatie heb je hier geen grip op!

Binnen native apps is auto-aanvullen ook al mogelijk. Je e-mailadres en telefoonnummer kunnen direct uit je 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.

Auto-aanvullen in native appsAuto-aanvullen in native apps

In de Chrome app kun je je 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

Je mobiel is dé centrale database waar al je gegevens samenkomen en worden beheerd. Deze database bevat voornamelijk persoonlijke gegevens: e-mail, adresboek, bankgegevens, foto’s, dagboek, boodschappen, etcetera. Als je deze database toegankelijk wil maken, is het zaak dat je gemak aan je gebruikers kunt bieden.

Formulier vullen met contactgegevens uit je telefoon

 

Bron: jungleminds

Publicatiedatum 15/01/2013

TXT_GALLERY_ATTACHED

Partner Badge Xolphin