Formulieren bouwen voor het mobiele web
We kennen allemaal de situatie dat we via een tablet proberen een formulier in te vullen. Datzelfde (bestel-, reactie- contributie-)formulier hebben we al vaker op onze laptop ingevuld, maar op het tablet lijken enkele functies te missen.
De helptekst
Zo verschijnt op de laptop de helptekst als we de muis boven een helpicoon plaatsen. Maar tablet en smartphone kennen geen muisfunctie, dus de "hover" functie, die op laptop en PC zijn werk zo goed doet, geeft hier niet thuis. Er moet dus (naast de muis boven een icoon) een andere manier gevonden worden om de helptekst te tonen. Het meest voor de hand ligt een eenvoudige klik op datzelfde icoon, die de helptekst toont (en weer verwijdert).
De invulhint
Veel formulieren bieden een invulhint, die getoond wordt als we met de muis boven het invoerveld bewegen. Ook hiervoor geldt dat voor mobiele devices een andere vorm gekozen moet worden. Een extra knop is natuurlijk een optie, maar eenvoudiger is HTML5 functionaliteit hiervoor in te zetten. Omdat de hint meestal alleen van belang is als we nog niets hebben ingevuld, kunnen we het zogenaamde "placeholder" attribuut van een invoerveld gebruiken.
Bovenstaand voorbeeld toont hoe de hint in een leeg invoerveld in het veld zelf wordt geplaatst. Zodra de gebruiker begint in te voeren, verdwijnt de hint zodat de invoer ongestoord kan plaatsvinden (dit is tegelijkertijd het belangrijkste nadeel van hints die via de placeholder worden getoond: om ze weer zichtbaar te maken moet het invoerveld worden gewist).
De juiste typen invoervelden
Om ervoor te zorgen dat invoer van data zo effectief mogelijk verloopt, is het van belang de invoervelden in de HTML uitwerking goed te specificeren. Door een input veld te voorzien van het type "email" verschijnt bij tablet of smartphone het onscreen toetsenbord dat is bedoeld voor de invoer van e-mail adressen en dat meestal handige invoerhulpen bevat.
Break points
Om een formulier geschikt te maken voor alle mogelijke apparaten zouden we voor ieder apparaat moeten bepalen wat we willen tonen en hoe we dat willen tonen. Dat is echter onbegonnen werk vanwege het grote aantal devices. Wat we wel kunnen doen is een aantal - bijvoorbeeld drie - categorieën definieren:
- Klein: smartphones met een schermbreedte van maximaal 600 pixels
- Midden: smartphones en tablets met een schermbreedte van maximaal 900 pixels
- Groot: overige devices.
Break point is de benaming voor de grens tussen twee schermformaten. Zo'n break point kunnen we technisch detecteren door middel van CSS of JavaScript en op basis van de uitkomst bepaalde informatie wel of niet tonen, of in een compactere of ruimere opmaak weer te geven.
Een ander soort break point wordt gevormd door de mogelijkheden van de browser: welke audio- en videomogelijkheden zijn beschikbaar, kan de geolocator ons helpen om het formulier effectiever in te vullen, en hoe maak ik gebruik van de camera van de smartphone?
Door slim break points te bepalen en vervolgens het gedrag van het formulier op die specifieke condities af te stemmen verhogen we de effectiviteit van een formulier aanzienlijk.
Conclusie
Een formulier geschikt maken voor een breed scala aan devices betekent meer dan een responsief design te ontwikkelen. We moeten nadenken vanuit de functie van het formulier en de specifieke omstandigheden van de gebruiker van dit device.
CM Pro heeft een formulieren Quickscan ontwikkeld die onder meer deze aspecten beschouwt.