8 règles pour optimiser l’ergonomie d’un site web

8 Règles Pour Optimiser L’ergonomie D’un Site Web

L’ergonomie d’un site est très importante car elle facilite la vie de vos internautes. Un internaute satisfait est un internaute qui revient, qui parle de vous, qui achète vos produits, qui s’inscrit à votre newsletter, autrement dit qui interagit régulièrement avec vous.

Un site web ergonomique est un site utile et utilisable (A. Boucher, 2013)

Concrètement, ça veut dire que l’interface de votre site doit permettre à l’utilisateur de faire ce qu’il souhaite faire, ce qui implique de connaître ses besoins. L’ergonomie de votre site doit aussi guider l’utilisateur pour prendre une décision: s’inscrire, acheter, poster un message etc.

Je vous propose donc 8 règles à suivre pour optimiser l’ergonomie de votre site.

1. L’architecture de votre site sera claire et logique

La catégorisation des informations de votre site est très importante, mais elle doit correspondre à la logique de l’internaute et non à la vôtre. Il vous faut utiliser des termes que les lecteurs comprennent et qui correspondent à ce qu’ils tapent dans les moteurs de recherche. Ainsi, utilisez des termes simples compréhensibles par un lycéen.

Les menus doivent être simples et surtout aider à naviguer de contenus en contenus. Dans son livre « Don’t make me think« , Steve Krug, grand spécialiste en ergonomie, recommande de ne pas dépasser 8 rubriques dans le menu principal. Enfin, les contenus clés doivent être visibles et mis en avant dans votre navigation.

2. La devise en ergonomie: « Less is more »

L’erreur commise par la quasi totalité des internautes qui débutent et, même par plus des 3/4 des professionnels expérimentés, c’est de surcharger les pages d’éléments jusqu’à n’en plus finir.

Le plus souvent, les pages deviennent alors de véritables sapins de noël, avec des encadrés dans tous les sens, des dizaines d’infos partout et on s’y perd vite.

Pour rendre une page efficace, il faut réduire au maximum les distractions et les éléments qui détournent l’utilisateur du but principal de la page. C’est notamment le cas dans beaucoup de sites e-commerce. Les pages faisant partie du processus de commande/paiement devraient être conçues de manière à limiter le plus possible les chances que l’internaute s’arrête en chemin.

Plusieurs éléments peuvent freiner, voire stopper les internautes, comme demander trop d’informations sur une même page, un processus d’inscription qui n’en finit pas, afficher des liens vers d’autres pages etc.

Vous pouvez constater que sur ce site, les pages sont légères, il n’y a que le strict minimum. Certes, le site est récent et démarre doucement, mais j’ai enlevé de nombreux éléments que je considère inutiles dans mon cas, comme la date des articles (je ne propose pas de news, mais plutôt des articles de fonds qui sont pérennes dans le temps).

Autrement dit, il est très important de se demander l’utilité de chacun des éléments affichés sur une page. S’ils n’apportent rien de concret, alors on les enlève.

Plus vos pages seront simples, plus elles seront efficaces, ce qui n’empêche pas de faire évoluer vos pages au fil du temps. L’ergonomie n’est pas nécessairement figée.

3. Prendre en compte les habitudes des utilisateurs

Un exemple qui vous parlera sûrement: Pourquoi Windows 8 ne plaisait pas à la majorité des gens qui l’ont essayé ? Parce qu’il changeait les habitudes des utilisateurs.

Un internaute n’aime pas le changement, sauf lorsqu’il l’a demandé lui-même. Chambouler les habitudes de vos visiteurs n’est pas une bonne idée, à moins que vous sachiez vraiment ce que vous faîtes et que vous maitrisiez vraiment votre communication, l’accompagnement du visiteur, le côté intuitif du changement etc.

C’est pourquoi votre interface doit correspondre plus ou moins aux conventions et standards web. Par exemple, un mot souligné et dans une autre couleur au milieu d’un texte représente le plus souvent un lien cliquable.

Utilisez une seule couleur pour indiquer le côté « cliquable » d’une élément (lien, bouton, icônes…). Mais n’utilisez pas cette couleur sur quelque chose qui n’est pas cliquables (comme un titre par exemple).

Notez toutefois que les conventions et standards peuvent évoluer au cours du temps. Au début du web, le bleu était systématiquement la couleur du lien, aujourd’hui ce n’est plus forcément le cas. De même, les sites avaient leur menu en vertical et à gauche, alors qu’aujourd’hui la plupart des sites ont un menu horizontal en haut.

Bien entendu, il faut coller à votre public. Si vous vous adressez à des gens dont le sens de lecture et de droite à gauche (les pays arabophones par exemple), peut-être ont-ils des habitudes différentes, auquel cas il faut vous renseigner.

4. Informer l’internaute

Un petit détail généralement peu présent sur le web, mais qui fait une grande différence: proposer à l’internaute des informations sur les éléments affichés, lorsque nécessaire. Par exemple, un point d’interrogation ou un « i » à côté d’un champ de formulaire pour lui expliquer ce qui est attendu, avec un exemple etc.

Affichez des messages d’erreurs précis qui indiquent à l’internaute ce qu’il n’a pas correctement rempli, guidez l’utilisateur dans son processus de paiement avec des explications claires pour chacune des étapes, proposez la définition d’un terme technique au survol sur ce dernier, etc. Plein de petits détails qui améliorent grandement l’ergonomie d’un site web.

5. Utiliser un « langage » clair

Par « langage », je sous-entends toutes formes de communication: icônes, symboles, mots, couleurs, animations, sons… Si la plupart des graphistes choisissent bien les icônes, il n’est pas rare de les voir utiliser des couleurs non pertinentes. A chaque culture, une signification différente des couleurs.

Par exemple, en Chine, le blanc représente le deuil, alors qu’en France c’est le noir. Attention aussi aux connotations que l’on veut donner: Le rouge peut représenter plusieurs choses très diverses selon la perception des gens: le danger, la passion, l’urgence, l’amour… L’information véhiculée par vos couleurs dépend des autres couleurs qui la complètent, des symboles utilisés, de la police d’écriture, etc.

Mais surtout, le plus important, choisissez des mots et des termes clairs et parlants. Il est fréquent de voir des pages remplies d’icônes sans qu’elles ne soient accompagnées de mots, les rendant peu claires pour les utilisateurs.

6. Distinguer les éléments interactifs du reste

Les éléments cliquables, modifiables ou déplaçables doivent être perçus comme tels. L’internaute doit pouvoir comprendre rapidement sur quels éléments il peut cliquer. Il doit également comprendre l’action qu’il doit faire. Par exemple, s’il doit déplacer un élément en glisser déposer, il faut le préciser clairement sans quoi l’internaute ne saura pas quoi faire.

Mettre en évidence les éléments cliquables les plus importants, comme un bouton d’inscription, peut être fait de manière simple via l’utilisation de flèches et de verbe d’action. C’est ce qu’on appelle les « call-to-action » ou « appel au clic ». Par exemple, au lieu d’un simple « valider » sur un bouton de formulaire, indiquez plutôt « Je m’inscris à la Newsletter ».

7. Ne pas faire perdre du temps à l’internaute

Mettons ici de côté l’aspect « temps de chargement » d’une page, pour se focaliser sur la navigation pure. Il s’agit de permettre à l’internaute d’accéder à ce qu’il veut le plus rapidement possible, c’est à dire en visitant le moins de pages possibles, en réalisant le moins de clics possibles.

Un très bon exemple à suivre est celui des badges Google Plus. Lorsque vous survolez le bouton « Suivre » sous la photo d’une personne, un menu apparaît, vous proposant de l’ajouter dans un ou plusieurs de vos cercles. Une fois que vous avez coché une case, l’action est effectuée: vous avez réalisé plusieurs actions en un seul et unique clic: afficher le petit menu déroulant pour afficher la liste de vos cercles, réfléchi à quel cercle vous souhaitiez l’ajouter, et sélectionné un cercle.

Un autre bon exemple: la recherche Facebook: vous n’avez pas besoin de taper le nom complet de la personne que vous cherchez, les premières lettres suffisent la plupart du temps. Sans avoir effectué de clic vous avez déjà une liste de plusieurs personnes qui s’affiche.

Ce genre d’interactions est précieux pour l’utilisateur car elles lui font gagner du temps. Plus votre site propose une navigation agréable, plus vos chances de transformer une visite en achat / inscription / demande de devis sont importantes.

8. Utiliser une typographie lisible

Combien de pages avez-vous quitté dès les 2 premières secondes parce que vous n’arriviez pas à lire ce qui était écrit dessus en raison d’une police trop petite, de couleurs trop flashy ou d’une police fantaisiste ? Pour ma part je ne les compte plus.

Utilisez des polices simples, du genre Arial, Tahoma ou Calibri par exemple. Utilisez une taille de texte suffisamment lisible par les plus bigleux d’entre nous. On considère que 14px est une taille minimum, même si personnellement je vise plutôt 16px en général. Bien sûr, tout dépend quelle type font vous utilisez.

Conclusion

Respectez ces règles de base et votre site sera nettement plus efficace. Il y a ensuite bien d’autres optimisations ergonomiques possibles pour décuplez votre chiffre d’affaire, notamment dans le domaine e-commerce. Si vous aussi vous pensez qu’il y a trop de pages horribles sur le net, partagez cet article sur les réseaux sociaux et encerclez-moi sur Google plus pour continuer à recevoir mes conseils 🙂

Si vous souhaitez un devis pour améliorer drastiquement l’ergonomie de votre site web, contactez-moi. Nous pourrons travailler ensemble en direction d’un objectif précis: augmenter votre taux de conversion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *