12 règles pour améliorer l’ergonomie de votre site web

Magritte vision

 

Comment aider vos internautes à aller vite et à utiliser plus efficacement votre site internet ? Comment viser une satisfaction et une conversion plus grandes ?

L’ergonomie web met l’accent sur la nécessité de créer un site optimisé pour vos utilisateurs.

L’objectif est de faciliter la prise en main du site par l’internaute.

De rendre agréable la navigation générale ainsi que la navigation au niveau des pages.

Il s’agit d’aider l’internaute à atteindre et à trouver une information avec efficacité et efficience. De lui permettre de commander, prendre un rendez-vous, s’inscrire à une newsletter, c’est à dire engager une relation de conversion sans effort.

Créer un site internet est un art complexe.

Nombreux sont les sites où l’information est mal mise en valeur et dont l’usage déçoit au final les utilisateurs. Le risque est véritablement de perdre des internautes.

Quelles sont les 12 règles ergonomiques à connaître absolument pour capitaliser sur votre trafic ?

Un site internet qui donne du fil à retordre aux internautes qui le consultent prend le risque de perdre un trafic précieux. En effet, quand il arrive sur un site internet, même si le sujet du site l’intéresse, l’internaute ne reste pas si les principes essentiels de l’ergonomie web ne sont pas respectés.

Amélie Boucher dans son livre “Ergonomie web” (Eyrolles), énumère12 règles d’ergonomie web à prendre en compte le plus tôt possible quand vous concevez votre site web.

 

Règle d’ergonomie web n°1 : L’architecture

 

Magritte dans la rue

 

Le site doit être bien rangé

L’architecture de l’information doit être bien pensée et les internautes doivent arriver facilement à l’objet de leur recherche.

En pratique, Il faut catégoriser l’information, faire des regroupements logiques et créer une arborescence. Il faut structurer pour mettre en avant les pages ou les fonctionnalités les plus utilisées par vos internautes.

 

Le menu de la barre principale de navigation

doit être :

Signifiant : Lorsque l’internaute lit un intitulé, il doit pouvoir comprendre immédiatement quel est le type de contenu de chaque rubrique.

Etre complémentaires : La somme de tous les items du menu doit couvrir l’ensemble de tout ce que le site offre aux internautes.

Etre exclusifs : Il faut pouvoir choisir entre deux items sans hésiter. Un intitulé doit être le seul envisageable pour une recherche précise.

 

Règle d’ergonomie web n°2 : L’organisation visuelle

 

Magritte

 

La page est bien rangée

Au niveau de la page, il faut éviter le trop plein d’informations. La notion de “bruit visuel” est employée car le trop plein d’information peut gêner consciemment les internautes.

Il faut distinguer 2 niveaux d’informations

L’information dans les pages navigantes

– L’information dans les pages de contenu final

 

L’information des pages navigantes doit être particulièrement propice au scan visuel de la page. la quantité de mots peut être divisée par 2.

Le rythme de lecture redevient “normal” une fois que l’internaute a identifié une information qui l’intéresse.

Aussi, l’information contenue dans les pages de contenu final doit être plus détaillée (tout en respectant au mieux les règles d’ergonomie comme les lois de Gestalt, les principes de Fitts et d’affordance).

 

L’étude du Poynter institute sur la façon de lire les news sur les tablettes (octobre 2012) montre que sur un iPad, la façon de lire des news la plus plébiscitée est celle qui présente l’information sous forme de carroussel. L’internaute peut plus facilement repérer en un coup d’oeil l’information qui l’intéresse et cliquer sur la vignette et le titre correspondant pour avoir le détail de l’article.

 

Optimiser l’information et la hiérarchie visuelle

 

L’information et son affichage

– Sur certains site, il est pertinent d’afficher la date de mise à jour du site. C’est le cas par exemple sur les sites des journaux sur lesquels l’actualité est régulièrement mise à jour.

En revanche, ce type d’information peut être “en trop” pour de nombreux sites. Ce genre d’information peut induire en erreur les internautes qui pourraient alors avoir un doute sur la pertinence de ce qu’ils lisent.

– Certaines options peuvent être affichées sans recharger la page. Ainsi un principe d’onglets cliquables peut rendre visible l’information quand l’internaute en a besoin sans surcharger visuellement la page web.

De même, le site peut faire apparaitre une information contextualisée selon le choix de l’internaute. Une option prise déclenchera une réponse contextualisée et masquera la réponse qui serait apparue pour une autre option. Par exemple, choisir un trajet en voiture, invalide les options qui seraient apparues pour un trajet piéton.

 

La hiérarchie visuelle

– Au niveau de l’organisation générale de la page, il faut distinguer les espaces de navigation, les différents blocs de contenu, les informations complémentaires, les éléments d’interaction (boutons d’action, formulaires).

– En plus de l’organisation visuelle en différentes zones, il faut rajouter la hiérarchie visuelle pour rendre votre page compréhensible d’emblée.

Ainsi, il faut éviter d’insérer une publicité en plein milieu d’un contenu car elle sera plus gênante alors.

 

Règle d’ergonomie web n°3 : La cohérence

 

René Magritte

 

 

Le site doit capitaliser sur l’apprentissage interne.

Pour une navigation efficiente, il faut utiliser les apprentissages que l’internaute a acquis en navigant sur votre site. Il faut donc rester cohérent dans tous vos choix.

 

La Charte ergonomique

La cohérence exploite les apprentissages inconscients de l’internaute dès le moment où il découvre notre site :

– Des localisations : l’ordre des éléments en fonction des rubriques doivent être les mêmes

– Du vocabulaire : il faut employer le même mot pour désigner la même chose dans tout le site.

– Des formats de présentation : Il faut permettre d’inférer la fonction d’un objet à partir de son apparence (cf.affordance) de façon identique dans tout le site.

– Des interactions

La cohérence des localisations, des appellations, des formats de présentation et des interactions peut être soutenu pas une charte ergonomique.

La charte ergonomique permet à quiconque travaillant sur le projet d’avoir une référence assurant la cohérence su site dans sa globalité.

 

Règle d’ergonomie web n°4 : Les conventions

 

Magritte web 2.0

 

 

Le site doit capitaliser sur l’apprentissage externe

Cette règle utilise le constat simple que l’on préfère ce que l’on connaît. L’internaute a acquis des habitudes à naviguer sur d’autres sites.

Les recherches dans ce domaine attestent que les utilisateurs préfèrent les sites conventionnels, où ils peuvent exploiter le fruit de leurs expériences passées.

La conséquence est que si les internautes voient quelque chose sur plus de la moitié des sites web, ils s’attendent à retrouver le même modèle sur d’autres sites.

 

Respecter les conventions de localisation

Les emplacements des éléments sur une page web sont une des principales dimensions de conventions web.

 

Respecter les conventions de vocabulaire

– Ainsi la page d’accueil s’appelle Accueil ou Page d’accueil (ie. des variantes proches)

, le panier s’appelle Panier ou Votre panier (ie. des variantes proches)

, la page de contact Contact

– Respecter les conventions de vocabulaire du secteur

 

Respecter les conventions d’interaction et de présentation

– Il faut veiller à rester conventionnel dans les modes d’interaction très répandu sur le web (ascenseurs, formulaires, alertes, déclenchement d’actions, étapes classiques d’un process de commande, etc.) ainsi que dans leur format de présentation.

– Le changement du pointeur au survol d’un élément cliquable permet à l’internaute de tout de suite identifier la fonctionnalité “cliquable”.

– Il faut respecter convention d’interaction et représentation d’écran. Par exemple représenter graphiquement un bouton d’action sans que celui ci soit cliquable, et ne rendre cliquable que le texte inscrit sur le dessin.

 

Règle d’ergonomie web n°5 : L’information

 

Magritte

Le site informe l’internaute et lui répond.

 

Donner de l’information sur la société

– Travailler les éléments génériques de votre site et votre page d’accueil : l’internaute doit savoir qui vous êtes et ce que vous faites.

– Les éléments comme le logo et la tagline (ou slogan) sont en permanence sur votre site. Ils sont des indices visuels pour les internautes et doivent être travaillés avec soin.

 

Donner de l’information ponctuelle (par petites phrases ou indices visuels)

L’information ponctuelle c’est quand il faut :

– Fournir à l’internaute une information relative à la navigation (l’endroit où l’internaute se trouve sur votre site, les rubriques déjà consultées).

– Expliquer à l’internaute les raisons et les conséquences des actions que vous lui demandez de réaliser.

– Renseigner votre internaute sur ce que le site peut lui apporter.

– Donner des informations nécessaires pour bien comprendre l’interface.

– Rassurer l’internaute sur ce qui va suivre. (Le faire patienter pendant un temps de chargement un peu long par exemple etc.)

 

Informer pour augmenter votre force persuasive

Choisir de donner la bonne information au bon moment permet de présenter des points forts de l’offre et de façon contextuelle influencer l’acte de décision de l’internaute.

Par exemple,

– Afficher le nombre de points de fidélité apportés par l’achat d’un produit.

– Calculer le montant restant pour bénéficier de frais de port gratuits suite à l’ajout d’un article dans un panier

– Ajouter gratuitement à la commande des échantillons de produits gratuits

– Afficher la disponibilité des produits en stock et les délais de livraison (si ceux-ci sont des arguments de vente)

 

Répondre à l’internaute

Le site doit fournir un feedback à l’internaute suivant l’action de ce dernier. Ce feedback ou réponse du site à l’internaute doit être visible.

Par exemple,

– Un clic de l’internaute peut être matérialisé par un feedback positionnel sous la forme d’une étoile .

– Le rajout d’un article à un panier doit entrainer un feedback visible sur la page sans avoir à scroller.

 

Règle d’ergonomie web n°6 : La compréhension

 

Magritte livre electronique

 

Les mots et les symboles doivent être choisis minutieusement.

– L’importance d’utiliser un vocabulaire proche du langage naturel des internautes.

– Les mots traduisent idéalement les concepts.

– Les icônes ou symboles d’un menu doivent être explicités par des mots pour en renforcer l’utilisabilité et le pouvoir suggestif. dans l’idéal : Icône + Libellé

– Le vocabulaire doit être compréhensible : Préférez utiliser Afficher par  plutôt que Trier par, Voir plutôt que Visualiser, Modifier plutôt qu’ Editer

Eviter l’ambiguïté : Eviter les fausses affordances : la phrase mentionnée sur un bouton d’action doit être en accord avec l’action effective quand on clique sur ce bouton.

– Le vocabulaire doit être précis et exact. Il doit aussi être conventionnel.

Pour l’internaute Télécharger est plus explicite que Récupérer le document

Les conventions des symboles visuels doivent aussi être respectés : Utiliser le symbole de la poubelle pour rajouter un article dans un panier est à ne pas faire.

– Eviter les métaphores

– Expliciter les “cliquez ici” par des phrases signifiantes pour les internautes et cliquables en tant que lien :

Par exemple, plutôt que “ pour continuer vos courses, cliquez ici”.

Préférez:

Continuez vos courses

(Toute la phrase étant cliquable, est plus explicite pour les internautes et détermine s’il va cliquer ou non)

 

Règle d’ergonomie web n°7 : L’assistance

 

Magritte Cavalière

 

Le site doit être conçu pour assister l’internaute tout au long de sa visite.

On peut distinguer:

– L’assistance de l’internaute (L’aide qui ne se voit pas)

– Les contenus d’aide explicite

Dans l’idéal, il faudrait avoir moins à “guider” explicitement l’internaute qu’à l’assister sans que celui-ci s’en rende compte.

Le site web doit donc automatiser le maximum d’opérations qui pourraient être perçues comme complexes pour l’internaute. Par exemple, le recalcul d’un panier après l’ajout ou le retrait d’un article etc.

 

L’organisation et la visibilité

Aider l’internaute à se repérer

La visibilité des outils de navigation principaux est primordiale ainsi que tout ce dont le visiteur a besoin pour se diriger dans le site doit être visible (objets, actions, options ou moyens pour y accéder).

L’internaute s’attend toujours à être dirigé ou guidé sur un site de façon logique grâce à des clics logiques.

Aider l’internaute à repérer l’information capitale et à agir

Identifier les espaces d’informations

L’internaute doit clairement identifier les espaces d’informations et avoir une vision claire de ce qui est attendu de lui sans qu’il ait à chercher les boutons d’action.

Plutôt que de demander à un internaute qui a lu une phrase de demande d’action de chercher un bouton d’action ou un lien correspondant pour s’exécuter, il vaut mieux rendre toute la phrase en elle-même cliquable.

L’information capitale doivent être présentée au-dessus du seuil de visibilité sans scroll.

 

Utiliser les affordances

Pour que l’internaute ne manque pas les éléments essentiels d’un site, il faut utiliser les affordances, c’est à dire les indices qui permettent à l’internaute de comprendre comment il peut interagir avec le site web.

Les affordances du web permettent de guider l’internaute vers l’information capitale. Par exemple des phrases formulées à l’infinitif ou à l’impératif, suggèrent une action de la part de l’internaute, et sont sans conteste celles qui sont le plus affordantes à la cliquabilité. Ces phrases doivent être cliquables effectivement.

Sur une page, le gros plan sur un produit est un élément affordant fort. Il faut donc que cette image soit cliquable pour accompagner l’envie naturelle ou le réflexe de cliquer dessus (l’affordance naturelle au clic de l’image).

 

Guider l’internaute pour augmenter sa rapidité

Si la page est construite de manière logique et que les affordances sont cohérentes, l’internaute va accomplir rapidement ses activités.

Les affordances peuvent être temporaires pour guider une activité de saisie. Par exemple, une flèche qui apparait pour indiquer la case à remplir dans un bulletin.

Attention aux contre affordances qui induisent à l’erreur. Une image qui parait cliquable et qui ne l’est pas par exemple.

 

Assister l’internaute en fonction de ses besoins en termes de tâches à faire

Les test utilisateurs (tests personas) sont utiles pour analyser une interface existante et comprendre le raisonnement et le besoin des internautes qui utilisent le site.

Aider l’internaute à comprendre l’ensemble des activités de l’entreprise

Il faut veiller à ce que l’organisation visuelle de la page n’occulte pas ou ne minimise pas des aspects importants pour la société.

Une page bien faite doit traduire parfaitement l’ensemble de la proposition d’une société.

 

Règle d’ergonomie web n°8 : La gestion des erreurs

 

Magritte puzzle matières

 

 

Le site doit prévoir que l’internaute peut se tromper.

Dans l’idéal, il faut bien sûr optimiser le site pour une compréhension par l’internaute la plus intuitive possible.

Les formulaires de saisie

Les erreurs peuvent survenir dans lors de saisie d’information dans un formulaire.

Il faut éviter les erreurs grâce à l’indication des champs obligatoires. Une légende explicite ou la taille des champs, par exemple, permet d’expliquer à l’internaute le type de données que l’on attend de lui.

Eviter les erreurs par l’affordance générale de l’interface

Ce sont les erreurs induites quand le format général de l’interface prête à confusion et amène l’internaute à se tromper.

Par exemple, proposer un bouton Effacer à la fin d’un formulaire est dangereux puisque l’internaute peut avoir le réflexe de cliquer par erreur et ainsi de perdre toutes les données qu’il vient de rentrer.

L’internaute doit facilement repérer, comprendre et corriger ses erreurs

Il faut :

– Faciliter le repérage de l’erreur et montrer à l’internaute là où l’erreur a été faite.

– Fournir une explication précise de l’erreur et compréhensible pour l’internaute. Afficher le type d’erreur (informatique) n’est pas clair pour l’internaute. il faut affecter un message d’erreur différent de la nature de l’erreur.

– Faire preuve de courtoisie dans les messages d’erreur.

– Suggérer à l’internaute une solution pour corriger l’erreur.

 

Règle d’ergonomie web n°9 : La Rapidité

 

L’internaute ne perd pas son temps.

Pour cela il faut :

– Optimiser la navigation

– Faciliter l’action de visée des éléments cliquables

– Prendre en compte les besoins de l’internaute sur le plan fonctionnel

– Eviter les actions inutiles

– Ne pas demander à l’internaute deux fois la même chose

– Le système doit être utilisé par des novices et des experts. Ne jamais demander à l’internaute s’il est novice ou expert.

 

Règle d’ergonomie web n°10 : La liberté

 

Magritte

 

C’est l’internaute qui commande.

L’internaute doit pouvoir sentir que c’est lui qui commande. Il faut donc :

– Respecter les contrôles utilisateur conventionnels (Back, ouverture plein écran à ne pas imposer, éviter de déclencher des actions au Rollover, au survol de la souris etc…)

– Donner la possibilité de stopper une action contraignante ou intrusive (Une option d’achat, une animation, une vidéo, le volume sonore etc…)

– Eviter l’affichage de pop-up spontanées, pré-pages, la publicité intrusive etc…

 

Règle d’ergonomie web n°11 : L’Accessibilité

 

Le site doit être facile d’accès pour tous.

L’accessibilité doit être physique et technologique.

Le site doit être prévu pour tous les internautes quel que soit le canal perceptif par lequel ils consultent le site.

Prévoir votre site pour les navigateurs de vos internautes peut vous amener à présenter différentes versions de votre site en HTML et en Flash par exemple.

En 2013, la multiplication des devices mobiles (smartphones et tablettes) met l’accent sur l’importance d’avoir un site internet “mobile friendly”, consultable à partir d’un mobile ou “responsive”.

 

Règle d’ergonomie web n°12 : La satisfaction de votre internaute

 

Cette règle passe avant toutes les autres.

 

Satisfaire grâce au critère d’utilité

Les micro-fonctionnalités d’un site peuvent impliquer activement les internautes dans ce site.

Si l’internaute devient acteur du site web, cela peut être une clé de plus forte satisfaction utilisateur.

Satisfaire grâce à l’esthétique et à l’expérience utilisateur globale

Un site beau, plaisant, motivant voire ludique stimule et plait aux internautes.

Satisfaire grâce à la qualité de service

La qualité de service intègre les notions de service après vente et de désinscription aux abonnements, newsletters etc. proposés par le site.

Satisfaire grâce à la puissance et la fiabilité technique

Le site doit fonctionner. Il faut traquer les erreurs techniques (liens cassés, pages en construction, lenteurs de chargement, mauvaise gestion des URL, etc.).

 

Crédit photos : Danaeryn, Filax1, RasMarley, Dotgoogle, Stuart Beard, Stills-nate, Edtgraff, Nello3, Miguel Ariel Contreras Drake – Mc Laughlin, Laralarus

 

Si vous avez aimé cet article, merci de cliquer sur les boutons de partage à gauche ou ci-dessous pour le faire connaitre et le partager avec votre réseau.

Incoming search terms:

  • quels sont les regles ergonomiques
  • web ergonomie saisie formulaire hierarchie

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