Comment optimiser un formulaire sur mobile
L’ergonomie est un point crucial d’une navigation sur mobile, c’est encore plus vrai quand votre site web a pour but de générer des leads.
Seulement parfois, remplir un formulaire peut vide tourner au cauchemar sur mobile avec des zooms dans tous les sens, des champs masqués par le clavier, etc…
Alors comment optimiser l’ergonomie de vos formulaires web sur mobile ?
Il existe en html divers types de champs spécifiques à des types et formats de données précis, mais ça c’est la théorie car dans la pratique une grande partie des développeurs n’utilise que le type de champs text alors que les possibilités sont bien plus étendues…
Le champ Text
Le champ le plus commun et le plus basique. Si vos utilisateurs doivent saisir du texte ce champ est parfait.
Malheureusement il est utilisé pour tout par la plupart des développeurs. Regardez plutôt ci-dessous si un type de champ n’est pas plus adapté.
<input class="form-control" type="text">
Le champ Email
Saisir un email avec le clavier standard est possible, mais pas le plus pratique. Saisir un email dans un champ de type email permet d’avoir un clavier plus adapté avec le @ en accès direct.
De plus les navigateur modernes opèrent un controle du format directement.
<input class="form-control" type="email">
Le champ Tel
Le champ le moins utilisé est pourtant un des plus pratiques. En mettant le focus sur celui ci, vous accédez au clavier numérique directement, comme pour composer un numéro de téléphone.
<input class="form-control" type="tel">
Le champ Number
Le champ Number est probablement le moins utile de cet article, bien souvent le champ tel sera plus ergonomique car plus simple. Avec Number, vous accédez directement à la partie chiffres et caracteres spéciaux du clavier.
<input class="form-control" type="number">
Le champ Password
Probablement le plus utilisé après Text, Password masuqe les caractères saisis dans le champ
<input class="form-control" type="password">
Le champ Date
Oubliez le calendrier jQuery Ui impossible à utiliser sur mobile ou cassant votre mise en page. Le champ Date est juste parfait pour selectionner une date. Sur mobile en tout cas car les interface natives des navigateur d’ordinateurs ne sont pas encore parfaites. A conditionner en fonction de la largeur de l’ecran probablement…
<input class="form-control" type="date">
Le champ DateTime
La meme chose que Date mais avec l’heure en plus, toujours plus ergonomique qu’un select qui n’en fini pas.
<input class="form-control" type="datetime">
Le champ Month
Le champ le plus simple pour selectionner un mois et une année, plus intéressant pour la selection de lannée. Toujours plus agréable que de selectionner des radios buttons avec le doigt.
<input class="form-control" type="month">
Le champ Search
Le changement est le moins visible quand vous utilisez le champ Search, mais ce détail est plutôt agréable, le boutton « accéder » se change en « Rechercher ».
<input class="form-control" type="search">