Je ne le répèterais jamais assez : Les formulaires sont les bêtes noires des internautes. Surtout quand il s’agit de saisir des données avec un format bien particulier comme un numéro de téléphone ou une date.
Mais rassurez-vous car la situation est en train de changer grâce aux assistants de saisie qui sont décris ici : Input Masks Design. Le principe est révolutionnaire : simuler le formatage des données lors de la saisie.
Illustration avec une première technique de Masked Input Plugin (cliquez sur l’onglet « Demo« ) :
Deuxième illustration avecle Dynamic Field Masking :
Je trouve ce principe révolutionnaire car il permet une bien meilleure appréhension du format à respecter sans pour autant perturber la saisie.
Dans le même genre il y a aussi la correction orthographique sur les formulaires de recherche de Transport-IdF mais qui est bien plus perturbante car très dirigiste (ne fonctionne que sur certains navigateurs).
En tout cas cette nouvelle variante de la saisie assistée mérite largement que l’on s’y intéresse, surtout si elle se dégrade correctement pour les navigateurs non compatibles (à vérifier).
La première solution (Masked Imput Plugin) est vraiment très efficace, j’aime beaucoup !
J’ai plus de réserve pour la deuxième solution (Dynamic Field Masking) : elle ne permet pas à un utilisateur ignorant ce système de taper elle-même les caractères de formatage ($, /, etc.).
Enfin, le système utilisé pour transport IdF pêche surtout par le fait qu’il ne propose pas de mots par approximation. ex: « patis » devrait donner « Paris » ; au lieu de ça, il affiche « pat ».
Je préfère encore ce qui est proposé sur http://www.ratp.fr/ quand on tape le nom d’une station de métro :
l’ensemble des stations pouvant correspondre à la frappe s’affiche, et le champ est automatiquement complété dès qu’il n’y a plus d’ambiguïté. Enfin, si on continue la frappe, le nom correct de la station n’est pas altéré.
Le premier exemple et vraiment très bien pensé !
Il ne reste plus qu’a ajouter un petit effet pour signifier que le champ est correctement rempli.
Merci pour cette article en tout cas je vais de ce pas implémenter cette solutions sur mes formulaires.
[…] Vive les assistants de saisie pour les champs de formulaire. […]
Il y a aussi une autre solution : laisser l’utilisateur saisir l’information au format qu’il veut et mettre un peu d’intelligence derrière pour interpréter les différents formats possibles. Exemple :
20/02/2009 ou 20022009 ou 20/02/09 ou 200209 ou 20 fev 2009, etc.
[…] http://www.simpleweb.fr/2009/01/28/vive-les-assistants-de-saisie-pour-les-champs-de-formulaire/ : les assistants de saisie simplifient les champs de saisie […]
[…] Vive les assistants de saisie pour les champs de formulaire. […]
[…] javascript qui permet le formatage de la saisie dans un champs suivant un pattern défini: article Vive les assistants de saisie pour les champs de formulaire de FredCavazza sur […]
[…] javascript qui permet le formatage de la saisie dans un champs suivant un pattern défini: article Vive les assistants de saisie pour les champs de formulaire de FredCavazza sur […]