* * * * *

Abonnez-vous !

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

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

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



    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. Seconde et dernière partie (2/2) (la première partie est toujours disponible).

    Formulaires Web

    Optimisez la lisibilité

    eBay formulaire d’inscription re-design : Page Flow

    • Limitez vos champs dès la saisie via l’attribut “size” (soit en amont) plutôt que grâce à contrôle post validation (en aval). Il est insupportable de se voir retourner après validation un message “Le libellé saisi est trop long !“.
    • Afficher clairement les champs obligatoires par une convention homogène à tout le site / l’application. On utilise généralement l’astérisque (*) à cette fin. Une bonne pratique également peut être de coupler l’astérisque avec une balise acronym :

     <label for="passwd">Mot de passe <acronym title="obligatoire">(*)</acronym></label>

    • Donnez un intitulé clair et directif à vos boutons d’action.Envoyer“, “Valider” feront l’affaire.
    • Désactivez la touche Entrée dans votre formulaire, elle est source d’erreurs de frappe. Mieux vaut forcer à utiliser le bouton “Valider” prévu à cet effet.

    <INPUT type="button" onClick="document.nomForm.submit();">

    • Toujours en quête de simplicité et de lisibilité, pensez à l’alignement de vos labels avec vos contrôles. Des études (de type eye-tracking) ont montré que ces alignements influent sur la perception qu’ont les visiteurs du formulaire. Le placement des libellés juste au dessus de leur champs d’entrées permet à l’utilisateur de capter les deux informations en un seul mouvement oculaire. Cette méthode semble donc être la plus efficace car les utilisateurs ne sont pas obligés de regarder séparément le libellé et le champs de saisie. Il faut toute fois faire attention à bien séparer visuellement le libellé et le champ. L’exemple ci-dessous montre l’optimum en cas de formulaire classique (ex : information générale, nom, prénom, adresse, etc.…) :

    Formulaires Web : alignement optimum des contrôles

    Soyez malin !

    • Limitez l’information recueillie au strict nécessaire : pour un formulaire d’enregistrement, on peut se contenter de récolter le strict minimum, à savoir Nom, Prénom, Email, Login, Mot de passe. Le reste des informations viendront compléter le profil au fur et à mesure de l’utilisation de l’application / du site par le visiteur / le client. Affichez des champs en surnombre ne ferait qu’augmenter le bruit visuel de la page. C’est une formule largement utilisée dans le eCommerce.
      Exemple, le formulaire d’inscription de Picnick que décidement j’adore :

    Formulaires Web : Inscription rapide et simple

    Pagination : uniquement lorsque c’est nécessaire

    Le formulaire idéal comporte quelques champs, tous situés sur une page unique. Mais pas à tout prix : les pages multiples peuvent s’avérer indispensables. Dans ce cas :

    • Essayez de limiter le scroll. La perception du formulaire est meilleure si l’œil peut l’envisager du premier coup globalement.
    • Compactez l’information.
    • Regroupez les champs par thématique (Informations personnelles, adresse de livraison, comment vous contacter).
    • Créer des enchainements logiques entre ces parties.
    • Effectuez des coupes dans votre contenu aux endroits appropriés.
    • Rendez possible une navigation entre les pages. Si un formulaire doit s’étendre sur plusieurs pages, laissez la possibilité de revenir en arrière, de circuler entre les pages précédemment remplies et ainsi de modifier une saisie. La navigation peut s’effectuer par liens Précédent / Suivant ou par exemple par onglets.
    • Pour celà, permettez une validation page par page.

    Utilisez la technologie appropriée (2)

    • Utilisez le JavaScript. Là encore à bon escient et par petites touches, il peut donner des résultats intéressants. Un exemple : appliqué aux boutons de validation (submit), il peut permettre le « Submit once », afin de bloquer la fonctionnalité de soumission après le premier envoi.

    Formulaires Web : Submit once

    • Utilisez toutes les fonctionnalités du CSS. Là encore sur les boutons de validation. Mieux qu’un simple bouton, des alternatives existent, accessibles pour peu qu’on s’en donne la peine.
      Exemple : Rediscovering the Button Element, pour obtenir des boutons non image qui ressemblent à quelque chose comme ça :

    Formulaires Web : Boutons submit avec CSS

    Soyez clair et explicite

    • Eviter les messages d’erreur sous forme de pop-up, qu’elle soit d’alert ou plus élaborées graphiquement.
    • Evitez le drag n’ drop : s’il flatte l’ego du concepteur pour avoir réussi une belle intégration des technologies dites “2.0″, il est en pratique très difficile de l’implémenter dans un environnement non geek. Le commun des mortels (les utilisateurs des sites et donc des formulaires) ne pratique pas au quotidien le drag n’ drop de ses contenus dans Netvibes. Rares sont encore aujourd’hui les intégrations compréhensibles et qui apportent un réel plus à l’interface du drag n’ drop.
    • Si vous proposez des liens, qu’ils soient visibles.
    • Proposez des message explicatifs clairs et détaillés avant toute action. La prévention vaut mieux que la répression. Un utilisateur bien informé de ce qu’il doit faire fera mécaniquement moins d’erreurs dans son processus d’inscription.
      Exemple lors du process d’inscription sur Yahoo, le message au fond orange apparait au clic dans le champs de saisie (il ne parasite donc pas l’écran une fois cette étape passée) et apporte une réelle information :

    Formulaires Web : Message clair et explicite

    • Dans le même ordre d’idées, penser à munir votre formulaire d’un fils d’Ariane ou Breadcrumbs lorsqu’il se déroule en plusieurs étapes. Rien de pire que d’être perdu dans son process de réservation. De plus, ce type de dispositif permet d’anticiper les futures questions posées par l’application et donc d’être plus pertinent dans ses réponses.
      Voici les exemples de Cdiscount et d’Interrent :

    Formulaires Web : Fil d’Ariane (navigation)

    Formulaires Web : Fil d’Ariane Interrent

    • Pour les sites d’eCommerce, pensez qu’un utilisateur / client en confiance sera celui qui convertira le plus. Personne n’a envie d’acheter sur un site s’il ne s’y sent pas à l’aise et que son expérience utilisateur est confuse.
    • Le cas échéant (en cas d’erreur de saisie), fournissez des messages d’erreur eux aussi clairs et détaillés, précisant l’erreur à corriger. Evitez le pourtant très classique : “L’identifiant ou mot de passe semblent incorrects !
      Voici ci-dessous deux exemples montrant deux stratégies totalement différentes. Le premier issu du formulaire d’inscription Yahoo, très fortement documenté, le second, que l’on pourrait considérer comme contre-exemple, proposé par Amazon.fr :

    Formulaires Web : Message d’erreur Yahoo

    Formulaires Web : Message d’erreur Amazon

    Créer ses formulaires en ligne

    Pour l’anecdote, voici Formspring.com un outil de création en ligne de formulaires dans lequel vous retrouverez tous les contrôles habituels du formulaire (inputs text, boutons de validation, labels, checkbox,etc…).

    Conclusion

    La création d’un bon formulaire web répond donc à certaines exigences qu’il faut prendre en compte dès l’origine du projet. De nombreux outils sont aujourd’hui à la disposition du développeur pour rendre convivial et compréhensible par tous son travail.

    Notons tout de même que s’il était si facile de bien faire, nombre de formulaires web que l’on trouve en ligne aujourd’hui ne seraient pas faits tels qu’ils sont. Mais bien d’autres contraintes doivent aussi être prises en compte par le développeur comme en tout premier lieu les désirs des clients par exemple !

    Ressources :

    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