Les 8 règles de l’art de la conception de formulaires Web

J’ai récemment eu la chance de participer à une formation offerte par Daniel Lafrenière, auteur de l’excellent livre «Le design Web raisonné». Le sujet de cette journée de formation était la conception de formulaires pour les transactions Web. Que ce soit pour des achats en ligne via un site marchand ou bien pour un service en ligne offert par le gouvernement, nous sommes tous appelés à interagir avec un formulaire sur le Web.

Dans ce billet, nous verrons un résumé des points que nous avons abordés lors de cette formation, ainsi que quelques ajouts ici et là, tirés du livre «Defensive Design for the Web» de 37signals.

Les règles de l’art de la conception de formulaires Web

1. Favoriser la simplicité

Comme le disait John Pawson, père du minimalisme, la simplicité est l’omission de l’inessentiel. En règle générale, chaque fois que nous voyons quelque chose ou que nous devons mettre quelque chose sur une page, nous devrions nous demander si nous en avons réellement de besoin. Bien que cette règle (Favoriser la simplicité) prime sur tout, il est important de bien comprendre que la simplicité n’équivaut pas à l’ennui. La simplicité mise davantage sur le fait que nous devrions toujours penser à réduire la charge cognitive de nos utilisateurs au minimum. Pour cela, reprenons les concepts de Steve Krugs dans son livre «Don’t make me think».

Selon le gourou de l’utilisabilité Jakob Nielsen, le design Web doit être centré tout d’abord sur l’utilisabilité, sur la facilité à accomplir nos actions. Il suffit de regarder son site Web pour comprendre que l’émotionnel n’est pas sa première préoccupation. Un autre vent de pensé quant à lui, nous dis que le Web devrait être davantage axé sur l’expérience utilisateur, alliant ergonomie et design visuel agréable (le fameux «look and feel»). Tout cela dans le but de créer cette expérience utilisateur.

Une des notions de la simplicité est le design juste à temps. Pensons à ne pas tout présenter sur la même page. Penser tout d’abord à votre visiteur et montrer lui seulement ce qu’il a de besoin à ce moment précis. Cette notion prévient également l’effet «dépotoir» que nous retrouvons sur beaucoup trop de sites Web. Celui où les concepteurs n’ont fait qu’ajouter du contenu et du contenu sans nécessairement penser à l’impact négative que cela pourrait avoir sur leurs visiteurs.

2. Parler le langage de l’utilisateur

Parler le langage de l’utilisateur signifie que nos textes, nos libellés, nos onglets, nos boutons, tout devrait être écrit et orienté en fonction de l’objectif de l’utilisateur et non en fonction de votre vocabulaire technique. Regardez par exemple le site d’Apple. Ils ne nous parlent pas uniquement avec des termes techniques habituels pour décrire leur iPod Nano. Bien que nous voyons des termes comme «disque à mémoire flash de 8 Go ou 16 Go», nous voyons également des descriptions écrit dans un langage compréhensible de tous:

• Contient jusqu’à 2 000 ou 4 000 morceaux
• Contient jusqu’à 7 000 ou 14 000 photos
• Contient jusqu’à 8 ou 16 heures de vidéo

Les termes techniques, ou les termes que vous utilisez dans votre propre jargon sont à proscrire s’ils ne sont pas utilisés par vos utilisateurs. Pour la plupart des êtres humains, ces termes sont incompréhensibles! Qui d’entre nous, geek que nous sommes, peut me dire rapidement à combien de chansons différentes 16 Go équivaut? Qui peut me dire pour combien d’heure de vidéo j’aurai droit? La réponse: personne! Bref, parler le langage de l’utilisateur est une notion qui peut sembler simple, mais qui est souvent parfois bien malmenée.

3. Minimisez la charge mentale

Souvenez-vous premièrement que l’humain ne se rappelle généralement que de 5 à 7 concepts différents. Alors il est impératif d’essayer de réduire la charge mentale de nos utilisateurs. Comment faire cela?

• Présentez l’information en contexte;
• Étiquettez les icônes et assignez des info-bulles significatives;
• Évitez les animations en boucle inutiles, elle ne feront qu’agresser votre utilisateurs. Agresser vos acheteurs potentiels n’est certainement pas votre but;
• Regrouper les éléments d’information afin d’en faire des ramassis. Créer des zones où les boutons auront une famille d’actions communes. Faites vos regroupements selon leur sémantique, selon leur sens. Notre cerveau adore chaque fois que l’on fait des regroupements. L’inverse ne fait que pénaliser notre utilisateur;
• Pardonnez! Ne pensez pas que vos utilisateurs réussiront nécessairement du premier coup, alors ne grogner pas vos utilisateurs s’ils ne remplissent pas correctement un champ dans un formulaire. Penser plutôt à mieux les guider afin qu’ils répondent correctement.

4. Soyez cohérent

Si vous mettez en place une façon de fonctionner, assurez-vous que vous restez collé à elle sur le reste de votre site. Offrez un environnement rassurant.

5. informez l’utilisateur

Répondez à leurs questions avant qu’elles ne surviennent. Donnez leurs du feedback. Assurez-vous que vos utilisateurs n’aient pas à se poser ce genre de questions:

• Est-ce que ça marche?
• Est-ce que cela a marché?
• Où suis-je?

Nous verrons dans un prochain billet plus de détails sur les notions de navigation à travers un formulaire Web, ainsi que les différents types de messages (information, erreur, avertissement).

6. Indiquez clairement les actions

Daniel Lafrenière fait allusion à cette règle en mentionnant l’affordance. Selon Wikipedia, l’affordance est la capacité d’un objet à suggérer sa propre utilisation.
Deux grandes voies de définition se sont développées :

• en psychologie, elle désigne la propriété d’un objet ou la caractéristique de son environnement immédiat à indiquer l’utilisation de l’objet.
• en ergonomie, elle se réfère aux capacités d’un objet à suggérer sa propre utilisation.

En gros, un objet se retrouvant dans votre interface devrait être assez clair en soi pour que l’utilisateur n’ait pas à cliquer dessus afin de comprendre son sens.

• À proscrire : N’utilisez pas le libellé «OK» ou «GO» pour un bouton de recherche. Priorisez les mots qui ont un sens.
• Que veulent faire vos utilisateurs quand ils font une recherche? Rechercher!
• Que veulent faire vos utilisateurs quand ils achètent un produit sur votre site? Acheter!
• Que veulent faire vos utilisateurs lorsqu’ils s’inscrivent sur votre site? S’inscrire!
• Etc.

7. Prévenez les erreurs

Je vous invite à lire l’excellent livre «Defensive Design for the Web» de 37signals afin d’avoir une vue global de comment prévenir les erreurs. Un billet portera également sur cette notion, je vous invites donc à vous abonner aux actualités de mon blog via le fil RSS afin de ne pas manquer ce prochain billet.

8. Offrez un traitement simple des erreurs

Soyez prescriptif. Utilisez des exemples de solution. Montrez à vos utilisateurs comment vous voudriez qu’ils répondent, plutôt que de dire que le champ X ne respectent pas le format désiré.

Quels sont selon vous les autres règles à respecter, ou les meilleures pratiques afin de rendre nos formulaires Web agréable à remplir?