Ergonomie des sites web

Vous avez décidé de créer un site internet avec votre agence web spécialisée sous Joomla?  Vous pensez graphisme, design, référencement, éventuellement technique mais avez vous réfléchi à l'ergonomie de votre site web? Quand on utilise un CMS comme Joomla! on se doit de définir l'ergonomie de son projet et d'en appliquer les bonnes pratique.

Qu'est-ce que l'ergonomie d'un site internet ?

Depuis le lancement du blog, on parle beaucoup ergonomie web, usabilité, ou encore accessibilité sans avoir vraiment expliqué le concept. L’ergonomie web, c’est l’étude de l’interface entre l’homme et sa machine, plus précisément entre l’homme et un site. Le but de cette étude est d’améliorer au mieux la navigation et l’expérience d’un utilisateur lorsqu’il visite un site. On parle donc bien d’IHM(interaction homme-machine). Cette recherche tend donc à améliorer les performances qualitatives et quantitatives de l’humain avec les interfaces qui l’entourent.

Les grands objectifs de l’ergonomie web sont donc de proposer :

• Une navigation claire et agréable pour l’utilisateur
• Une rapidité d’exécution lors de sa recherche d’information

L'objectif des interfaces d'un site Web est de créer un pont entre vos contenus (produits ou services) et le monde des utilisateurs. L’interface est  l'élément par lequel les utilisateurs vont effectuer des tâches afin de trouver les informations qu’ils souhaitent.

L'ergonomie utilise les sciences cognitives. Elle vise à étudier la manière dont les gens pensent et apprennent. Pour qu'une interface fonctionne, elle doit répondre aux 3 critères suivants :

• aider les internautes à trouver l'information
• aider les internautes à comprendre
• aider les internautes à utiliser l'information pour atteindre leurs objectifs.

Caractéristiques humaines

La principale difficulté que tente de lever l'ergonomie est la diversité des profils des visiteurs. Les critères suivants sont généralement déterminants pour un site web :

• attentes de l'utilisateur : tous les visiteurs du site ne recherchent pas nécessairement la même information ou n'ont pas nécessairement les mêmes exigences en terme de graphisme.
• habitudes de l'utilisateur : elles correspondent à des comportements acquis.
• âge de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation.
• équipements : il s'agit d'une des difficultés majeures. En effet, l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage.
• niveau de connaissances : tous les visiteurs du site ne sont pas nécessairement des as de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins expérimenté.

Les grands principes de l'ergonomie

Sobriété:  Design épuré et clair. Pas trop d’animation pour perturber l’oeil de l’internaute
Lisibilité: Structuration et hiérarchisation de l’information (titre, sous-titre, paragraphe, aération du texte) avec l’information la plus importante au haut
Utilisabilité:  Respect de la « règle des 3 clics », système de navigation claire et identique sur toutes les pages, page d’accueil de catégorie accessible en un clic, présence d’un logo (voir les bonnes pratiques de la conception des menus
Rapidité: Temps de chargement des pages rapides le plus court possible (réduire la taille des images, css)
Interactivité: Présence de liens pour que l’utilisateur puisse naviguer à son gré (importance des ancres claires et précises). Susciter l’intérêt du lecteur avec des phrases d’accroches pour aller sur les autres pages. Faciliter d’échange et de partage (formulaire de contact, partage sur les réseaux sociaux, possibilité de commenter)
Accessibilité: Rendre le site accessible à tous (malvoyant, non voyant, moteur de recherche), respect des standards W3C, mise en place de légende pour les images et les liens. Couleurs adaptées pour améliorer la lisibilité pour les daltoniens ainsi que les contrastes et la police pour les mal-voyants

Ergonomie des sites e-commerce

Pourquoi l'ergonomie de votre site e-commerce est essentielle

Une mauvaise ergonomie web de votre boutique en ligne est un des facteurs principaux de perte de clients. N'oubliez pas qu'une boutique en ligne est ... une boutique. Imaginez ce que serait une boutique dans la vraie vie avec les erreurs d'ergonomie habituellement rencontrées sur le net :

On comprend rapidement que pour un site e-commerce encore plus que pour tout autre site web l'ergonomie n'est vraiment pas qu'une décoration. Elle est directement liée au taux de transformation de la visite en achat en ligne.

Confort, sécurité, efficacité : l’ergonomie telle qu’on la conçoit aujourd’hui s’adapte aussi bien à des objets qu’à des outils virtuels. Si on parle de plus en plus d’ergonomie web, il est parfois difficile de faire le point sur les éléments principaux sur lesquels travailler pour améliorer l’ergonomie de son site marchand. Voici une liste de 10 points qui nous paraissent fondamentaux, des principes qu’on a identifiés sur les sites dont on est (bons) clients ou encore sur des sites dont on a pas été client car il manquait le petit truc en plus qui rend l’achat simple et agréable.

1- Eviter la surmultiplication des clics

Sans vouloir jouer les Ayatollahs du clic et imposer en force la règle des trois clics jusqu’au tunnel de commande, nous ne pouvons que vous inciter à réduire le nombre clics qui séparent l’acheteur de l’achat. C’est la proximité qui compte. On sait qu’on perd un certain pourcentage d’acheteurs à chaque étape (de la fiche produit à la page de paiement CB). La conclusion est simple : moins d’étapes vous ajoutez, moins de clients vous perdez.

2- Faire cohabiter (avec bonheur) ergonomie, design et code

Certains voudraient vous faire croire qu’il est impossible de conjuguer les trois car ils sont antinomiques et qu’il faudra faire un choix entre un code propre, un design agréable ou une ergonomie efficace. Faux, vous vous en doutiez, le vrai challenge est de réussir à faire cohabiter les trois et de savoir piloter son projet e-commerce en travaillant les trois : il faut savoir définir ses besoins en termes d’outils, penser leur ergonomie, décliner cela dans un design et une image qui vous convienne puis coder le tout proprement et sans bavure. Finalement, ici le plus difficile sera de réconcilier l’ergonome avec le développeur et le designer et de faire en sorte qu’ils avancent main dans la main ;-)

3- Adapter votre boutique à votre client, votre offre et au produit

Le client en ligne est volatile et doit pouvoir identifier votre valeur ajoutée au premier coup d’oeil. Si votre offre n’est pas claire, votre client ne comprendra pas pourquoi il est chez vous plutôt que chez vos concurrents et sera donc tenté d’aller voir ailleurs. Il faut donc tout faire pour valoriser vos avantages en tant que marchand mais aussi proposer le bon produit au bon prix.

4- Penser aux habitudes acquises par les internautes

Désormais aguerris, les internautes ont capitalisé une certaines expérience du web et des sites marchands. Ainsi ils se sont habitués à un certain nombre de standards et conventions qui les aident à naviguer de manière intuitive sur un site qu’ils ne connaitraient pas. Par exemple, on s’est habitués à trouver le logo en haut à gauche, au fait qu’un clic sur ce logo renvoie en homepage, que le moteur de recherche de produits soit accessible en haut à droite, que la plupart des sites marchands proposent une navigation secondaire à droite, etc.

5- La question du sens de lecture

Non, les clients ne lisent pas en F en Z ou en E : en fait ils sont attirés par les éléments de la page qui vont attirer leur regard en premier et sur un même site, le sens de lecture pourra être différent d’un internaute à l’autre. Cela dit, il faut quand même noter que les éléments hauts sont souvent ceux qui sont vus en premier par vos visiteurs, ne les négligez pas et pensez à optimiser ce qui se trouve au dessus de la ligne de flottaison.

6- Savoir se distinguer sur le contenu

Avoir un site au design original n’est pas l’enjeu premier : la qualité de vos contenus fera la vraie différence et renforcera la valorisation de votre offre aux yeux de vos clients potentiels. Ainsi des fiches produits bien renseignées, contenant des informations qu’on ne trouverait pas ailleurs, auront une valeur énorme. Visuels permettant de zoomer, de faire le tour à 360° de l’objet, de le voir en situation, vidéos produits : tout cela peut vraiment faire la différence. 

7- Proposer des visuels de qualité

En ligne, il est impossible de toucher l’objet, d’essayer un vêtement, ou de se faire une idée précise d’une matière. Le seul support dont vous disposez pour vendre vos produits, c’est le visuel – photo ou vidéo – et c’est donc ce dernier qui devra rendre compte de ce qu’est votre produit. On s’interdit donc les photos produits prises à l’iPhone et on essaie d’avoir de belles photos détourées sur fond blanc. 

8- Soigner ses boutons d’actions

Comme leur nom l’indique, ces boutons incitent à l’action, il est donc essentiel de faire en sorte qu’ils soient bien visibles (emplacement et contraste soignés), leur intitulé doit être court et percutant (ex. « Créer un compte », « Ajouter au panier ») cohérents sur tout le site (toujours la même couleur et le même format). Ils peuvent être assortis d’un élément de réassurance (en texte juste sous le bouton d’action, ex. « inscription gratuite » ou « Aide au choix »). Les petits plus : le retour visuel au survol avec la souris (état graphique qui change et attire donc le regard), privilégiez les verbes aux phrases à la première personne (« Ajouter au panier » plutôt que « Je l’ajoute à mon panier »)

9- Simplifier son tunnel de commande

Surtout quand on sait qu’en moyenne 75% des paniers sont abandonnés, on imagine très bien le CA en plus qu’on pourrait faire si on bossait vraiment sur le sujet. Dans une lointaine époque, j’étais e-commerçante et j’avais un site qui était propulsé par OsCommerce. 5 étapes pour réussir à valider une commande, autant de pages sur lesquelles je perdais à chaque fois 50% des visiteurs. Bref, un tunnel de commande simple et court, c’est mieux, proposer une aide au remplissage de formulaires, guider l’acheteur de manière fluide…

10- Penser A/B testing

Cerise sur le gâteau auquel tout e-commerçant devrait goûter, l’A/B testing doit devenir une habitude. Un changement d’ergonomie ne devrait jamais être appliqué sans comparaison avec la version initiale. Parfois, on se trompe sur un changement, parfois notre intuition nous joue des tours et là où on a pensé avoir une idée géniale, il peut s’avérer que notre version de 1999 était en fait la bonne. Bref, on fait du tracking, on fait de la proposition de pages A/B et on prend sa décision finale après avoir longuement comparé les résultats.