* * * * *

Abonnez-vous !

Innovablog, Le Web où l’Innovation ordinaire : design, ergonomie, interfaces riches, web 2.0, eCommerce,…

  • A propos de l’auteur
  • Archives
  • Contacts
  • 23
    nov 07
    Catégorie : Analyse

    Bonnes pratiques de la conception de formulaires web (1/2)



    Les formulaires web sont à notre environnement ce que les portes d’entrées sont à nos habitations. On est obligé d’y passer pour entrer. Et regarder de loin est beaucoup plus ennuyeux. Les formulaires sont donc partout : pas un site n’en compte pas dans ses pages, pas un blog ne propose une inscription, ne serait-ce qu’à son flux RSS.

    Formulaires Web

    Et pour autant, qui n’a jamais ressenti un grand moment de solitude en tentant de finaliser une inscription en ligne ? La cause de cela ? Dans 90% des cas, des problèmes de conception. Problèmes grandement évitables si le concepteur se penche sur les bonnes pratiques et l’état de l’art.
    Voilà donc ma vision des meilleures pratiques actuelles, guidées aussi bien par mes lectures que par mon vécu d’utilisateur, mais aussi de concepteur de ces mêmes formulaires. Première partie (1/2).

    Le meilleur ou du moins le plus optimal des formulaires sera celui qui réunira les conditions suivantes :

    • L’utilisateur va rapidement comprendre le but de l’action : Quoi faire ?
    • L’utilisateur va comprendre la façon appropriée de le remplir : Comment faire ?

    Le premier conseil et peut être le plus simple, faire… simple !

    Faites simple (1) : Exploitez les possibilités de l’Html

    • Utilisez les <label> : les labels sont peut être l’une des fonctionnalités les plus fondamentales liée aux formulaires, aussi bien pour l’utilisateur que pour le développeur. Leur utilité est de tous les instants :
    • L’élément Label associe une étiquette (un texte) à un contrôle du formulaire. D’un clic sur le label, on positionne le curseur dans le contrôle associé.
    • En associant des labels à des contrôles, vous donnez de précieuses indications en termes d’accessibilité aux lecteurs d’écran tout en leurs permettant de reproduire les fonctionnalités des interfaces homme machine (IHM) habituelles. Cette méthode d’association implicite est pratique à plus d’un titre :
    • Utilisé avec un champ de type text ou textarea, il positionne le curseur dans le champ,
    • Utilisé avec une liste d’options, il sélectionne le bouton radio en question. Il est fréquemment utilisé pour la validation de conditions générales.
    • Utilisé avec les checkbox, il coche la case sur son clic.

    Formulaires Web : Label & Checkbox
    Un clic sur le texte a coché la case

    On comprend donc vite son utilité. Il peut par ailleurs très facilement permettre le déclenchement d’un effet de type onFocus / onBlur sur le contrôle et en améliorer la visibilité.
    Exemple avec le formulaire de Contact d’Innovablog :

    Formulaires Web : Label, Clic & Focus

    Paradoxalement, le label est bien souvent le parent pauvre du formulaire puisque qu’oublié par les développeurs. Je l’utilise personnellement depuis des années et ne conçoit plus un formulaire quel qu’il soit sans lui !

    1. Est-il plus naturel pour l’utilisateur de taper une réponse ou de la sélectionner ?
    2. Est-il aisé de faire une erreur en tapant la réponse ?
    3. L’utilisateur doit-il analyser les options pour comprendre la question ?
    4. Combien d’options y-a-t-il ?
    5. L’utilisateur peut-il sélectionner plusieurs options ?
    6. Les options sont-elles visuellement différentes ?
    • Validations Javascript : optez pour la simplicité. N’”agressez” pas vos utilisateurs avec des contrôles trop pointus. C’est évidemment un arbitrage entre qualité des données enregistrées dans votre base dedonnées et complexité de saisie.

    Utilisez la technologie appropriée (1) : l’Ajax

    • L’Ajax, utilisé à bon escient, peut permettre des merveilles en termes d’ergonomie et d’utilisabilité. Offrir par exemple une validation de champ en temps réel va éviter de pénibles aller et retour à l’utilisateur.
      Un exemple : l’éditeur de photos en ligne Picnik. Son formulaire d’inscription est un réel plaisir à remplir et confirme un remarquable travail. Les validations Ajax se trouvent à la fois pour le contrôle de la validité du login, mais aussi pour la gestion du mot de passe. L’infographie ci-dessous met en scène les différentes étapes de l’inscription.

    Formulaires Web : Inscription Picnik

    1. A la sortie du champ login, validation de la disponibilité du login.
    2. Au clic dans le champ Password, le second champ, grisé, apparaît.
    3. Dès que les conditions de validité du mot de passe sont réunies, le second champ devient actif.
    4. Saisie de la confirmation
    5. Dès que les deux mot de passe coïncident, le second champ disparaît, puisqu’inutile. Ne restent affichés que les deux champs essentiels d’un formulaire d’inscription.
    • En contrepartie, l’utilisation de l’Ajax suppose un double contrôle au moment de la validation. En effet, dans cet exemple, le login est disponible à un instant t qui peut être différent du moment de la validation. Exemple de la vérification de la disponibilité d’un login.
    • Un conseil de Stuart Brown, en revanche, n’utilisez pas l’Ajax pour l’envoi des données. Une bonne vieille méthode POST native du navigateur est plus robuste et tout aussi rapide lorsqu’elle est bien employée.

    Voici pour cette première partie des bonnes pratiques de conception des formulaires Web. La suite et fin d’ici quelques jours ici même. D’ici là, restez-branchez !

    Cet article vous a plu ? Ne perdez plus aucune info : abonnez-vous gratuitement !

    A vous de jouer ! Laissez un commentaire :

    XHTML: Vous pouvez utiliser ces tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

    Innovablog motorisé par WordPress
    Theme Wordpress par Olivier Favre
    Site Map
    RSS Feed
    Contenu intégralement sous licence Creative Commons