Les conventions en ergonomie web

doser les ingrédients web

Les conventions en ergonomie web ou comment profiter de l’expérience utilisateur.
Pour reprendre un intitulé du livre d’Amélie Boucher « Ergonomie web, pour des sites web efficaces », le site capitalise sur l’apprentissage externe.

L’internaute qui visite votre site ne vient pas avec un œil totalement neuf. Il a déjà acquis une certaine expérience du web et se servira de ses connaissances pour comprendre votre site.
S’il n’a pas suffisamment de recul sur le web en général, il se servira de sa logique propre, celle dont il se sert dans la vie de tous les jours.

Il est donc important que votre site réponde à certains critères, propose un schéma qui soit le plus intuitif possible. L’enjeu est de taille, on parle du confort de l’utilisateur.
Un texte ou un bouton mal placé, un lien qui n’en est pas un, un libellé inhabituel ou même un formulaire mal présenté sont autant d’éléments qui peuvent gêner la visite ou la navigation de l’internaute.
Parce que cet internaute s’attend à un certain fonctionnement, une certaine presentation. Bref à certaines conventions.
Or un site qui ne respecte pas ou peu ces conventions provoque de l’inconfort. Et même s’il n’est pas perçu directement vous avez un site sur lequel on ne reviendra pas ou dont on écourtera la visite.

Dans cet article, j’ai choisi d’illustrer trois types de conventions: la localisation des éléments dans l’interface, leur interaction ou leur présentation et enfin les conventions de vocabulaire.

Il ne s’agit pas de recette miracle mais simplement de mettre en évidence certains facteurs qui pourraient expliquer un moindre taux de visite ou de clicks sur certaines pages.

La localisation d’un élément dans l’interface

L’internaute qui visite votre site s’attend à ce que certains éléments soient positionnés à une place plus ou moins précise.
De manière presque automatique ses yeux se dirigeront vers l’endroit où il est censé trouver un menu, un logo, un bouton de connexion etc.
Ces places n’ont bien sûr pas été choisies au hasard, on parle du parcours oculaire naturel.
Il est cependant grandement influencé par ces convention de localisation.

L’originalité de votre design ne doit pas remettre en cause le confort d’utilisation de votre site.
L’internaute attend d’un site qu’il réponde à ses attentes avant tout.

 
localisation dans l'interface
Le site online.carrefour.fr propose une barre, en bas de page, regroupant les infos principales d’un site de commerce électronique: panier, bouton de connexion, lien vers les commandes etc.
Cette barre possède un fort contraste afin de la mettre en évidence mais son emplacement actuel fait qu’on ne la distingue pas au premier coup d’œil.
En principe ce type d’infos se positionne en haut et à droite du site. Le bas de la page étant en règle générale réservée à du contenu de moindre importance ou à des infos temporaires par exemple.

 

Interaction et présentation

L’internaute s’attend à retrouver un fonctionnement commun aux autres sites, cela lui permet de reconnaitre et d’identifier instinctivement chaque élément ou fonctionnalité.
On reprend le principe d’affordance, on interagit avec un élément pour l’utilité qu’il suggère.

 
des libellés et des icônes explicites aident l'internaute
Sur provenceguide.com on retrouve un élément libellé « je reserve » accompagné d’un logo représentant un caddie ainsi qu’une flèche montante.
Le terme utilisé ainsi que le logo indiquent que l’on va pouvoir réserver et payer en ligne.
En cliquant dessus, une carte affiche différents hébergements que l’on va pouvoir trier selon différents critères.
Et en effet, à condition d’avoir indiqué une date de séjour, le site nous propose des hébergements disponibles que l’on pourra réserver et payer en ligne.
L’élément « mon panier » étant un peu fondu sur la droite du site, la fonctionnalité de paiement en ligne pourrait ne pas être évidente, d’autant plus que la carte n’affiche pas la possibilité de réserver avant d’avoir indiqué une date de séjour.
Le logo du caddie renforce alors la notion de paiement en ligne.

carrousel d'images et menus
spartoo.com propose sur sa page d’accueil un carrousel d’infos faisant office de menu supplémentaire.
Le bandeau juste en dessous laisse penser qu’il s’agit d’images renvoyant vers des catégories d’articles, erreur! il s’agit en fait des différents items du carrousel.
En cliquant dessus vous ne faites qu’apparaitre l’item correspondant, il faut alors cliquer dans le carrousel pour changer la page.

carrousel ergonomiquement explicite
jamendo.com propose le même type de carrousel. Ici ils ont ajouté des points sur l’image afin de se situer dans le défilement.
Le bandeau ne liste que des liens, il est à faible contraste et un triangle blanc semble rattacher chaque lien à son image.
C’est la présentation classique d’un carrousel, son fonctionnement parait évident.

 

Conventions de vocabulaire

L’internaute s’attend à trouver un certain type de fonctionnement mais il s’attend aussi à trouver un certain vocabulaire, c’est son langage du web.
Il y est habitué, le rassure en quelques sortes car ainsi il connait son environnement.

Il s’attend à trouver panier ou panier d’achat et non sac ou besace, ajouter au panier et non remplir la gourde… Cet exemple est exagéré, on est d’accord, mais il montre le principe. Celui de proposer un vocabulaire qui fera tilt dans la tête de l’internaute, pas de questions à se poser, je sais où je vais!

Je veux contacter le service client je recherche la page contact, je veux retourner à l’accueil je recherche le mot accueil au début du menu ou une petite maison ou bien je clique sur le logo, je veux modifier mes infos personnelles je cherche mon espace client puis modifier mes informations personnelles.

Un menu comme un bouton dans un formulaire ne doivent pas être sujet à interprétation.

soigner la cohérence du vocabulaire
Sur le site thaitrade.fr on retrouve l’expression « se loguer » pour se connecter en tant que membre.
Il faut déjà réussir à trouver cette page en cliquant sur « catalogue produits » dans le menu.
La page affiche alors un mélange de termes anglais et français.
On retrouve « se loguer » et « register », « devenir membre » et « s’enregistrer », il aurait été plus simple pour l’internaute d’utiliser la même expression pour définir une même action à chaque fois.

 

Que font les autres?

L’ergonomie d’un site doit être préparée avant même de finaliser le design.
Il peut être intéressant de visiter des sites de même thématique afin de s’imprégner de ces conventions.

Il ne s’agit pas de rajouter des éléments à certains endroits pour copier son voisin mais d’agencer les éléments existants de telle manière que le site paraisse intuitif.
Pour cela il faut se placer à la place de son internaute cible ou procéder à des test utilisateurs.
On place un groupe d’amis devant l’écran et on observe leur réaction.

Enfin, certains outils d’analyse d’audience comme google analytic permettent de pointer les pages à faible audience ou possédant un taux de rebond élevé.

Laisser un commentaire

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