Vive les assistants de saisie pour les champs de formulaire

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« ) :

Exemple de formatage de données en cours de saisie
Exemple de formatage de données en cours de saisie

Deuxième illustration avecle Dynamic Field Masking :

Deuxième e
Deuxième exemple de formatage de données en cours de saisie

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).

8 commentaires pour “Vive les assistants de saisie pour les champs de formulaire”

  1. Posté par iolivier a dit : le

    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é.

  2. Posté par Thibaut De Saint Florent a dit : le

    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.

  3. Posté par L4actualité de mes autres blogs (janvier 2009) | FredCavazza.net a dit : le

    […] Vive les assistants de saisie pour les champs de formulaire. […]

  4. Posté par Michel Tournié a dit : le

    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.

  5. Posté par Dev Blog AF83 » Blog Archive » Veille technologique (x2) : Annonces, Contenus, Conférences, Méthodes, Agilité, Développment, Langages, Editeurs, Outils, Bases de données, Protocoles, Bibliothèques, SEO, Ergonomie, etc. a dit : le

    […] 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 […]

  6. Posté par Ideal » Archive du blog » L’actualité de mes autres blogs (janvier 2009) a dit : le

    […] Vive les assistants de saisie pour les champs de formulaire. […]

  7. Posté par Sign Up Forms Must Die « Web (x) Centric – Le blog qui tourne autour du Web a dit : le

    […] 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 […]

  8. Posté par Les formulaires d’enregistrement doivent disparaître » Web Centric, le blog qui tourne autour du Web a dit : le

    […] 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 […]