L’ergonomie Web ou l’art du formulaire en ligne

L’architecture Web, l’ergonomie Web et la rédaction Web sont à considérer pour la création d’un formulaire en ligne. Afin de proposer une bonne expérience utilisateur, le formulaire doit proposer un contenu clair et précis et efficace. L’internaute doit également pouvoir y vivre une expérience utilisateur sans y perdre de temps.

Les principes de conception d’un formulaire en ligne

Afin de concevoir un formulaire en ligne à la fois claire, efficace et navigable, il faut marier adéquatement architecture Web et rédaction Web.

Voici quelques principes importants :

• Déterminer le public cible du formulaire en ligne;
• Déterminer la fonction du formulaire en ligne;
• Énumérer les informations présentées à l’utilisateur;
• Catégoriser les informations et effectuer un tri;
• Rédiger de façon claire et compréhensible;
• Dessiner une architecture Web pour le formulaire en ligne.

L’ergonomie Web d’un formulaire en ligne

L’ergonomie Web est essentielle pour une conception efficace et navigable d’un formulaire en ligne. L’ergonomie Web permet notamment à l’utilisateur de remplir facilement les champs de saisies.

Voici quelques règles à retenir :

• Créer un visuel efficace pour le formulaire en ligne;
• Faciliter la saisie de données en adaptant la longueur de la ligne;
• Si le formulaire est long, le présenter en plusieurs étapes (pages);
• Soigner la présentation des libellés;
• Permettre de revenir en arrière pour modifier ses informations;
• Résumer les informations saisies lors de la dernière étape;
• Afficher un message de confirmation à la toute fin du formulaire en ligne;
• Envoyer une confirmation finale à l’utilisateur par courriel.

Des tests utilisateurs sont conseillés, et ce, qu’il s’agisse de l’architecture Web, de l’ergonomie Web ou de la rédaction Web. Les tests utilisateurs permettront d’améliorer notamment la gestion des erreurs. En bref, des tests utilisateurs permettront de se rapprocher d’une expérience utilisateur réussie.

Pour conclure

Le formulaire en ligne demande une conception minutieuse. Étant souvent présenté dans un contexte transactionnel, il doit susciter la confiance de l’utilisateur. Sa conception doit être effectuée dans le respect des normes imposées par l’architecture Web, l’ergonomie Web et la rédaction Web. Un savant mélange des 3 augmentera ses chances de succès.

Afin d’en apprendre plus sur la conception d’un formulaire en ligne, nous vous invitons à consulter les billets de Frédéric Cavazza, Luke Wroblewski (fichier .PDF) et Jean-Claude Grosjean.

Billet initialement publié sur Mikimya

Ne mettez pas de bouton ‘Reset’ dans vos formulaires !

C’est étrange de constater comme les habitudes ont la vie dure… Prenez par exemple les boutons ‘Reset‘ sur les formulaires : Je ne sais pas qui a eu cette idée folle, mais elle est incroyablement tenace.

J’ai déjà eu de nombreuses discussion à ce sujet, mais je profite du dernier édito de Jaokb Nielsen (Top-10 Application-Design Mistakes) pour vous le redire : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.

Qui a envie de supprimer toutes les données saisies d’un coup ? Qui va s’offusquer de ne pas se voir proposer cette fonction ? Quelle est l’intérêt pour vous ?

Donc une dernière fois : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.

Et ça sera mon dernier mot ! A vrai dire, je n’ai plus la force d’argumenter sur ce point, je me demande si je ne devrais pas fermer les commentaires pour ce billet…

/!\ Billet initialement publié sur FredCavazza.net.

Connaissez-vous la simplexité ?

Je vous propose de découvrir un concept qui me tient à cœur : la simplexité (contraction de simplicité et complexité). Pour faire simple, la simplexité est un art qui consiste non pas à simplifier un produit complexe, mais plutôt à rendre à priori simple un produit qui ne peut pas être simplifié sous peine de ne pas remplir sa fonction.

La première fois que j’ai entendu parler de ce terme c’était chez Renault où un réel effort est déployé pour améliorer le confort d’utilisation et la lisibilité des tableaux de bord (SVP pas de troll dans les commentaires). Mais cette notion s’applique à de multiples domaines comme le design (exemple ici : Quand les constructeurs de l’EGP misent sur le design), l’art (notamment avec des artistes comme Constantin Brâncuşi) ou encore le managment (Manager soyez dans l’art de la simplexité).

C’est d’ailleurs de ce dernier article que je tire une première définition : “Art qui consiste àrendre simple les choses compliquées et à vulgariser le monde dans le but de le mettre à la portée de tous“.

Appliquée à la conception d’interfaces web, qu’est-ce que ça pourrait bien donner ? Voilà ce que je vous propose : “Une interface à la simplicité apparente pour un service à la complexité induite“.

Illustration avec Gmail et son interface de rédaction d’un email : les options sont nombreuses (car c’est comme ça que les systèmes de messagerie fonctionnent) mais les équipes de Google ont trouvé l’astuce en masquant un maximum de choses.

Regardez bien cette copie d’écran, à gauche la version initiale (à l’ouverture de la page) et à droite la version complète (avec toutes les options déployées) :

Gmail1.jpgGmail2.jpg

L’impression de simplicité à l’ouverture de la page est réelle, par contre en cliquant sur différents liens on s’aperçoit que toutes les options sont bien là. Et voilà : simplicité apparent pour un service à la complexité induite.

/!\ Billet initialement publié sur FredCavazza.net.

Une analyse du nouveau formulaire d’inscription d’eBay

Visiblement eBay serait en train de tester une nouvelle version de son formulaire d’inscription (sur un principe de tests A/B). S’ils pensaient faire ça de manière discrète c’est raté puisque Garrett Dimon nous propose une analyse détaillée de cette refonte : Better Web Forms: Redesigning eBay’s Registration.

C’est au niveau de la mise en page que le plus gros du travail a été réalisé :

EbayRegister.gif

Vous noterez sur ces deux images que les intitulés des champs ont été alignés à droite et que des lignes de séparation horizontales servent à faire des regroupements logiques. Il y a également eu un travail de fait sur le texte d’introduction ainsi que les intitulés de section.

Bien évidement cette nouvelle version est meilleure que la précédente dans la mesure où elle améliore la lisibilité et le guidage mais elle apporte également du confort grâce notamment à l’usage d’Ajax pour faire de la validation en sein de la page.

/!\ Article initialement publié sur FredCavazza.net.

Le formulaire parfait ?

Voilà près d’un an et demi que j’ai publié mon tutoriel sur comment concevoir des formulaires plus simples. Depuis, même si certaines règles de lisibilité et de structurations sont toujours d’actualité, il faut bien avouer qu’il s’est passé beaucoup de choses.

Hier, en testant un nouveau service en ligne de gestion de tâches (le service s’appelle Remember The Milk), je suis tombé sur ce que je peux considérer comme le formulaire parfait : Signup.

Les points forts :

  • la mise en page est minimaliste (pas d’éléments perturbateurs) ;
  • tous les champs sont obligatoires (pas besoin de préciser ceux qui doivent être rempli avec une petite astérisque) ;
  • les intitulés sont alignés à droite et les champs bien espacés ;
  • la gestion des erreurs est remarquable car elle s’effectue au fur et à mesure de la frappe à l’aide d’AJAX (un message contextuel vous indique si le champ est validé ou s’il faut le corriger) ;
  • le bouton d’action est sans d’ambiguïté.

Bon allez, je ne résiste pas à l’envi de dénicher quelques points faibles :

  • même si la balise label est utilisée, pas de trace d’un fieldset, de tabindex ou de raccourcis clavier ;
  • est-ce que l’utilisation d’AJAX est complétée par une détection des erreurs côté serveur en cas de désactivation de javascript ?
  • où sont les messages de réassurance et la politique de confidentialité ?

Passé ces quelques points, je ne peux qu’admirer le résultat et la redoutable efficacité de ce formulaire. Un exemple à suivre.

/!\ Article initialement publié sur FredCavazza.net.

En quoi les messages d’erreur peuvent améliorer l’expérience des utilisateurs

Voici un article fort juste sur les messages d’erreur qui vient d’être publié sur GrokDotCom : Honey vs. Vinegar. L’auteur appuie sa démonstration sur les deux points suivants :

  • On n’attrape pas les mouches avec du vinaigre (mais avec du miel, d’où le titre de l’article) ;
  • Quand les choses tournent mal, la qualité de votre réponse à un problème reflète l’attention que vous portez à vos clients.

Plusieurs messages d’erreur typiques sont ainsi listés dans l’article, de même que des suggestions pour les améliorer. Et pour ceux qui veulent approfondir le sujet, j’ai déjà publié d’autres billets sur le sujet : De l’art de rédiger des messages d’erreur accessibles et Vous avez cliqué sur le mauvais bouton !.

/!\ Article initialement publié sur FredCavazza.net.