« Ergonomie Web »	
Synthèse de l’ouvrage d’Amélie Boucher : « Ergonomie Web » [Editions Eyrolles]	
mercredi 7 mai 2008

Extrait du livre Ergonomie web (Amélie Boucher), Copyright Eyrolles 2007 / http://www.ergonomie-sites-web.com 	

Table des matières
Avant propos
PARTIE 1 : INTRODUCTION A L’ERGONOMIE WEB
L’ergonomie web, qu’est-ce que c’est ?
Un site web ergonomique est un site utile et utilisable
Intérêts et retour sur investissement (ROI)
Les méthodes de l’ergonomie web
La place de l’ergonomie dans les projets web
Le top 10 des idées reçues sur l’ergonomie
La sacro-sainte règle des 3 clics
Les internautes sont des idiots
L’ergonomie et le design sont des ennemis jurés
Pas besoin d’ergonomie, on a fait un focus group
Faites-moi un site ergonomique
Les internautes lisent en F
L’ergonomie c’est juste du bon sens
On le fera en Web2.0, en ajax, etc,
Les internautes ne scrollent pas
Pour l’ergonomie, on verra à la fin
PARTIE 2 : LES FONDEMENTS DE L’ERGONOMIE
Comprendre l’internaute : d’abord un être humain
Découvrez et appliquez les théories de la Gestalt
Découvrez et appliquez la loi de Fitts
Découvrez et appliquez le concept d’affordance
Le nombre magique de Miller et la loi de Hick
Accessibilité visuelle et lisibilité
Définir votre internaute : critères et méthodes des personas
Une personne donnée dans un contexte précis
Un persona pas comme les autres
PARTIE 3 : LES REGLES DE L’ERGONOMIE WEB
12 règles pour optimiser l’ergonomie de votre site
Règle n°1. L’architecture : le site est bien rangé
Règle n°2. Organisation visuelle : la page est bien rangée
Règle n°3. Cohérence : le site capitalise sur l’apprentissage interne
Règle n°4. Conventions : le site capitalise sur l’apprentissage externe
Règle n°5. Information : le site informe l’internaute lui répond
Règle n°6. Compréhension : les mots et symboles sont choisis minutieusement
Règle n°7. Assistance : le site aide et dirige l’internaute
Règle n°8. Gestion des erreurs : le site prévoit que l’internaute se trompe.
Règle n°9. Rapidité : l’internaute ne perd pas son temps
Règle n°10. Liberté : c’est l’internaute qui commande
Règle n°11. Accessibilité : un site facile d’accès pour tous
Règle n°12. Satisfaction de votre internaute
En bref les 12 règles à utiliser à bon escient
L’audit ergonomique : conseils et méthodologie
Pratique, support et moyens de l’audit ergonomique
Structurer l’étude selon vos besoins

Avant propos
Essor d’internet  Professionnalisation :
 Réflexion sur la qualité d’un site et son adaptation à sa cible

CONCEPTION CENTREE UTILISATEUR
« Créer une interface au service d’un internaute effectuant une tache donnée dans un contexte donné »

 Economie de coûts (efficience)
CONCEPTION CENTREE UTILISATEUR :
	 Optimisation de la rentabilité
 Diminution des coûts de la conception/exploitation
 Fidélisation des internautes

PARTIE 1 : INTRODUCTION A L’ERGONOMIE WEB

MOTS CLES DU CHAPITRE
Ergonomie, utilité, utilisabilité, efficacité, efficience, satisfaction, ROI 

L’ergonomie web, qu’est-ce que c’est ?
Un site web ergonomique est un site utile et utilisable
L’ergonomie redonne du pouvoir à l’être humain, permet à l’outil « site Internet » d’aider et non de pénaliser.
2 grandes fonctions sont gages de la réussite d’un site Internet et de la fidélisation des internautes qui l’utilise : 
Utilité du site pour capter l’internaute

DEFINITION DE LA NORME ISO 9241 DE L’UTILISABILITE : 
« Un produit est dit utilisable, lorsqu’il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés cherchant à atteindre des objectifs donnés, dans un contexte d’utilisation donné »

 A quoi sert un site et quels micro-services il offre ?
Utilisabilité pour prolonger l’utilisation par l’internaute
LES COMPOSANTS DE L’UTILISABILITE : 
 Efficacité : un utilisateur peut faire ce qu’il doit faire (surtout pour les sites généralistes)
 Efficience : faire rapidement ce qu’il a à faire avec le moins d’erreur  (surtout pour les sites spécialisés + pour fidéliser l’internaute)
 Satisfaction : mettre le site au service des utilisateurs

CONCLUSION DU RAPPORT DE J.NIELSEN & S.GILUTZ « USABILITY RETURN ON INVESTMENT »
« La moitié du budget de création d’un site Internet devrait être consacrée à l’utilisabilité. »

Intérêts et retour sur investissement (ROI)
« Investir » dans l’ergonomie permet :
 satisfaction donc fidélisation des « clients »
 augmentation des ventes et taux de conversion
 augmentation du trafic et de sa qualité
 amélioration des performances des utilisateurs en terme d’efficacité et d’efficience
 amélioration de l’image de marque
 réduction des temps de développement (pour Jakob Nielsen une modification coûte 100 fois plus après le lancement d’un site)
Les méthodes de l’ergonomie web
Méthodes expertes
Ces méthodes font intervenir un ou plusieurs intervenants concepteurs ou responsables d’audit pour concevoir où évaluer des sites en fonction de leurs connaissances, expériences et convictions.
Méthodes participatives
Ces méthodes mettent en jeu les utilisateurs finaux en les observant, les questionnant sur des données objectives le plus souvent sous forme d’entretiens ou d’analyses individuelles.
La place de l’ergonomie dans les projets web
Elle est parfois qualifiée de « science du compromis » dans le sens où elle doit mettre en jeu tous les interlocuteurs d’un projet web en leur demandant de dialoguer. Le suivi ergonomique est primordial et transversal à tout le projet de création du début à sa fin.

MOTS CLES DU CHAPITRE
Architecture de l’information, ergonomie, design, sens de lecture, scroll, focus group, test utilisateur 

Le top 10 des idées reçues sur l’ergonomie
Où comment se défaire des idées reçues.
La sacro-sainte règle des 3 clics
Cette « règle » prend en compte la difficulté physique  des clics, mais occulte complètement la difficulté mentale ; l’important est que l’internaute réalise à bien les tâches qu’il souhaite mener sans erreur ou ambiguïté. Appliquer stricto-sensu cette règle peut nuire au projet. L’internaute peut au final être plus efficient dans sa démarche en faisant plus de 3 clics sans se poser de question ni commettre d’erreur.
Les internautes sont des idiots
Il ne faut ni sous-estimer ni surestimer les internautes. Il ne faut pas réfléchir au bien être des Internautes en général, mais connaître les Internautes visitant le site et prendre en compte leurs caractéristiques.
L’ergonomie et le design sont des ennemis jurés
Les 2 disciplines frontalières doivent en réalité collaborer et se répondre :
Le graphisme aide l’ergonomie quand il respecte les recommandations. Ces échanges permettent d’optimiser l’utilisabilité, le design influence la qualité ergonomique de l’interface d’un point de vue utilisateur.
Le graphisme possède également un fort impact sur la satisfaction des internautes (composante de l’utilisabilité).
L’esthétique d’une interface influence la perception de l’utilisabilité par les internautes car inconsciemment on interprète que ce qui est beau est également agréable à utiliser.
Pas besoin d’ergonomie, on a fait un focus group
Il est essentiel de ne pas confondre les résultats et la démarche de focus group (méthode collective permettant de collecter les avis subjectifs des internautes) et la démarche ergonomique. Les focus group et les tests utilisateurs sont tous 2 utiles à la démarche ergonomique mais ne s’y substituent pas.
Faites-moi un site ergonomique
Un site ergonomique à 100% est un modèle idéal utopique puisque tous les internautes sont différents, cherchent à réaliser des taches différentes dans des contextes différents.
Les internautes lisent en F
Il n’existe pas de sens de lecture de page web inscrit dans nos automatismes mentaux, chaque internaute possède des habitudes différentes et l’aspect graphique à un fort impact sur son comportement de lecture. Il ne faut pas construire un site à partir de tels pré-requis mais de façon réfléchi et dépendant du contexte ainsi que des conventions web qui ont émergées.
L’ergonomie c’est juste du bon sens
Il n’y a pas de bon sens ergonomique, c’est essentiellement, la réflexion, la connaissance des grands principes d’ergonomie, et l’expérience qui permettent de forger une bonne ergonomie. Il est important que tous les acteurs du projet possèdent des notions d’ergonomie.
On le fera en Web2.0, en ajax, etc,
La technologie ne détermine pas en soi la facilité d’utilisation finale du site, les objectifs et normes de l’ergonomie sont les mêmes quelque soit la technologie.
Les internautes ne scrollent pas
En réalité les internautes scrollent si le site correspond à leurs attentes et si ils pensent qu’ils trouveront ce qu’ils cherchent en scrollant. A contrario veiller à disposer dans la zone de haut de page tous les éléments primordiaux, et des éléments plus annexes dans les zones scrollables est judicieux. 
Pour l’ergonomie, on verra à la fin
Les préoccupations ergonomiques n’intervient pas ponctuellement  mais tout au long du projet.

PARTIE 2 : LES FONDEMENTS DE L’ERGONOMIE

MOTS CLES DU CHAPITRE
Gestalt, proximité, similarité, loi de Fitts, affordances, nombre magique de Miller, Loi de Hick, accessibilité visuelle, lisibilité 

Comprendre l’internaute : d’abord un être humain
Ce chapitre présente différentes « lois » qui conditionnent le comportement des êtres humains de manière générale et qui ont des conséquences importantes quand à leurs comportements sur internet.
Découvrez et appliquez les théories de la Gestalt
Elles traitent de la manière dont notre cerveau analyse son environnement comme un ensemble de formes. Plusieurs lois composent les théories de Gestalt, 2 ont des conséquences essentielles par rapport à Internet :
La loi de proximité
Notre cerveau tend à regrouper des choses qui sont proches physiquement. Il faut donc rapprocher physiquement des éléments ayant des points communs et dissocier les éléments différents et ce quelque soit l’échelle (de la page dans son ensemble à chaque zone et élément la composant. En respectant ce principe, le site gagne en intuitivité.
La loi de similarité
Notre cerveau tend à regrouper des choses qui se ressemblent, une différence de forme ou de couleur sera signe d’objets opposables.
Découvrez et appliquez la loi de Fitts
Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande :
Les éléments cliquables doivent être gros
Pour augmenter la taille des éléments cliquables, il est possible : 
-	D’augmenter la taille réelle des éléments cliquables et de choisir des tailles relatives à leur importance
-	D’augmenter la surface cliquable des éléments cliquables (ex : le clic sur le label pour un bouton radio, en s’assurant que toute la surface des boutons soient cliquables et pas seulement le texte du bouton). Cela permet en plus de compenser les erreurs et imprécisions des internautes, et de guider leur comportement (le changement du curseur de la souris « prévient », avant d’arriver précisément sur la cible, l’internaute qu’il pourra cliquer)
-	 D’augmenter la distance entre des éléments cliquables par des actions sur la distance physique ou la différence de formes ou de couleurs.
Les éléments cliquables doivent être proches
Plus l’objet cible est proche de l’objet source, plus on l’atteindra rapidement, en conséquence, il faut : 
-	Regrouper les éléments utilisés de manière simultanée ou successive
-	Utiliser  les raccourcis claviers et clic droit qui réduisent forcément les distances.
Découvrez et appliquez le concept d’affordance
Les affordances sont les possibilités d’action suggérées par les caractéristiques d’un objet. Les affordances nous permettent d’anticiper et de connaitre à l’avance quel comportement adopter face à un objet ou une situation.
Optimiser l’affordance « vous pouvez me cliquer »
-	En optimisant l’affordance de cliquabilité des éléments correspondant pour favoriser leur repérage (via la forme, couleur, libellé, curseur de souris, localisation dans l’interface, adjonction d’éléments indiquant la présence d’un lien,)
-	En travaillant sur le comportement de l’objet lors de l’interaction avec l’internaute (roll-over)
Et penser également à renforcer l’affordance des autres éléments d’interaction tel des formulaires.
Optimiser l’affordance « vous pouvez interagir avec moi »
Il s’agit de donner aux éléments d’interaction de type champ de formulaire une apparence les incitant à les utiliser et facilitant leur repérage via une recherche sur la forme, la couleur, le libellé, le contenu, la localisation d’interface, l’adjonction d’éléments renforçant l’identité et surtout en respectant les conventions.
Attention aux affordances erronées
Il ne vaut mieux pas détourner les affordances pour ne pas diminuer l’utilisabilité finale (pas de texte souligné non cliquable,…)
Le nombre magique de Miller et la loi de Hick
La loi de Miller
« Au-delà de 7 « objets » dans notre cerveau, il sature » ; 7 est donc le nombre magique de Miller (plus ou moins 2 éléments), seuil maximal de notre « mémoire de travail » qui nous permet de stocker des informations temporaires. En conséquence il faut le prendre en compte pour ne pas surcharger les interfaces web. Ce n’est cependant pas une loi à respecter stricto-sensu notamment quand au nombre d’items des menus.
 La loi de Hick
Cette loi indique qu’il est plus facile de décider parmi un nombre réduit d’éléments, la complexité de compréhension et d’utilisation croit proportionnellement au nombre de choix proposés
Accessibilité visuelle et lisibilité
-	S’attacher à concevoir des interfaces adaptées aux internautes pénalisés sur le plan visuel (synthèse vocale et autres…)  Optimisation de l’intégration html (normes xhtml/css (séparer contenu et forme) + normes d’accessibilité (liens de contournement (skiplink) et title sur les liens))
-	S’attacher à facilité l’utilisation courante du site quelque soit l’internaute  Optimisation de la charte graphique 
o	optimisation des couleurs : 
•	différence de couleurs en prenant en compte les couleurs qui « vibrent » (bleu rouge ; noir blanc franc) et la taille et la graisse des textes
•	différence de brillance (recommandé d’être supérieure à 125)
o	optimisation des caractéristiques des textes
•	taille des polices
•	graisse des polices
•	typographie (sans serif plus lisible qu’avec serif)
•	interlignage
•	casse (minuscule plus lisible que les majuscules)

MOTS CLES DU CHAPITRE
Profils utilisateurs, personas, scénarios d’utilisation 

Définir votre internaute : critères et méthodes des personas
« Définir l’utilisateur et ses particularités afin de concevoir un système adapté à ses besoins et capacités »
Une personne donnée dans un contexte précis
Il faut dialoguer avec les responsables du projet et collecter un maximum d’informations sur les cibles utilisateurs en déterminant : « Qui ? », « Quels sont ces objectifs ?», « Quels sont les contextes d’utilisation ? » 
Concevoir un site pour les plus novices d’entre eux n’est pas « la » solution, mieux vaut l’adapter aux réelles cibles.
La notion de tâche pour mieux cerner l’internaute
 Il est primordial d’analyser, de questionner, d’observer les utilisateurs dans les taches qu’ils effectuent sur le site, on en retire des données concernant à la fois l’utilité et l’usabilité.
Les statistiques de visite, un atout majeur
Renseignent sur les configurations des utilisateurs et la qualité des visites (pages les plus visitées, nb de pages vues/visite,…) et désormais des outils permettent d’obtenir des informations sur le comportement au sein même d’une page (taux de clics sur différents éléments…)
Interroger les internautes
Un persona pas comme les autres
Les personas représentent des utilisateurs typiques créés de toute pièce permettant de concrétiser la notion d’utilisateur type. 
Les intérêts de créer des personas 
-	Force à se pencher réellement sur la cible toute l’équipe impliquée dans le projet
-	« Humanisation » de la cible par l’apport de toutes les caractéristiques (nom, histoire, lieu de consultation,…) favorable à l’empathie et donc la réelle considération
-	Nécessite d’attribuer aux personas des missions et à matérialiser les objectifs utilisateurs
Comment créer et utiliser des personas
Il existe différents types de personas
-	Le persona primaire (cible de prédilection) important pour définir les principes de fonctionnement par défaut du système
-	Les personas secondaires 
-	Les personas tertiaires pour les profils plus annexes
-	Les ante-personas sont éventuellement utilisés pour définir les profils que l’on souhaite exclure du site
Combien de personas créer ?
Le but à conserver en tête est d’avoir au final le mois de personas possibles car il ne s’agit pas de prendre en compte l’exhaustivité de la cible mais au contraire de restreindre à peu de profils particuliers.
La création de personas doit être collective
Sous peine d’écarter des personas importants et de s’éloigner des cibles réelles
Comment définir (construire) un persona
Les dimensions à prendre en compte dans l’ordre suivant : 
-	Objectifs et missions sur le site spécifiques et précis (ce point est bien le premier à définir !)
-	Information socio-démographique
-	Relation à la marque, historique client et relation à la concurrence
-	Habitudes et envies
Communiquer sur les personas
Ce sont des outils de travail pour l’ensemble de l’équipe projet, il faut donc ne cesser d’en parler. Tout ce qui peut les rendre plus présents est positif (affiches,…)

PARTIE 3 : LES REGLES DE L’ERGONOMIE WEB

MOTS CLES DU CHAPITRE
Règles ergonomiques, architecture de l’information, navigation, charge informationnelle, Gestalt, Homogénéité, conventions, informations et feedback, vocabulaire, guidage, affordances, erreurs, efficience, contrôle utilisateur, accessibilité, satisfaction. 

12 règles pour optimiser l’ergonomie de votre site
Les règles d’ergonomie permettent d’optimiser la qualité d’utilisation du site en influençant la conception et en tant qu’outil de pour évaluer des interfaces existantes. Toutes ces règles sont imbriquées et doivent régir la construction de l’architecture du site dans son ensemble tout comme chacune des pages.
Règle n°1. L’architecture : le site est bien rangé
Il s’agit de déterminer la meilleure manière d’organiser le contenu en vue de sa présentation aux internautes via la catégorisation (grouper) et la structuration (hiérarchiser).
Les regroupements sont logiques
Faire des regroupements logiques en adoptant des termes clairs et n’induisant pas en erreur sur le contenu.
La structuration met en avant les contenus clés
L’architecture doit être pensée pour faire remonter au premier plan les éléments majeurs et contenus importants
Les menus aident à naviguer dans les contenus
Les menus reflètent à la fois les principes de catégorisation et de structuration. 
Les intitulés doivent respecter 3 critères : 
-	être signifiants : évoquer clairement le contenu
-	être complémentaires : la somme de tous les items recouvre tout le contenu du site
-	être exclusifs : éviter les ambiguïtés en permettant à chaque item d’avoir son sens même en l’absence de la lecture des autres items
Contourner un site mal rangé
 La mise en place de liens transversaux au cœur des pages peuvent permettre de contourner une mauvaise organisation et renforcer la mise en exergue de certains contenus ou de certaines fonctionnalités.
Règle n°2. Organisation visuelle : la page est bien rangée
La finalité est de libérer au maximum l’esprit de l’internaute en limitant la charge mentale liée au traitement des informations de ce qu’il perçoit à l’écran.
Eviter le trop plein d’informations
En épurant les pages et en supprimant ce que ne sert à rien…
Diviser la quantité de mots par 2 dans les pages de navigation
Il est souvent possible de supprimer des termes inutiles essentiellement dans les pages de navigation et dans les éléments de navigation. Il ne faut pas hésiter à remettre en cause l’utilité de textes pour les internautes en vérifiant que leur présence est justifiée.
N’afficher que les principaux éléments de navigation et d’interaction
Afficher les éléments optionnels que quand cela est nécessaire
Ce point prend toute sa valeur pour les formulaires ou il y a des interactions avec l’internaute ; le but est de ne proposer les fonctionnalités optionnelles que lorsque l’internaute en a besoin et sans rafraichissement de la page.
Supprimer les éléments d’interaction inutile
C’est notamment le cas d’un « bouton » suivant apparaissant en bas de page d’un résultat de recherche alors qu’il n’y a pas de page suivante.
N’afficher que les éléments d’interaction les plus utiles
Différencier les quantités d’information réelles et perçues
L’hétérogénéité visuelle augment la charge d’information
Plus on emploie de typographies et de couleurs différentes plus on augmente la charge informationnelle sur une surface d’écran donnée.
Les images de fond augmentent la charge d’information
Il s’agit parfois d’éléments graphiques polluant le contenu.
Les animations augmentent la charge informationnelle
Aussi il est nécessaire que les animations ne fonctionnent pas en continu ou que l’internaute puisse les arrêter ; et il faut éviter de placer plusieurs animations dans le même écran.
Démultiplier la valeur du pixel carré
Il s’agit de profiter de la flexibilité de l’interface pour utiliser les mêmes surfaces physiques pour délivrer différents contenus.
Remplacer une information au clic
C’est souvent le cas lors de l’utilisation d’onglets permettant d’afficher des contenus cachés sans rechargement de pages.
Remplacer une information au roll-over
Le changement de contenu peu également s’effectuer au roll-over, attention toutefois à la sensibilité du système.
L’apparition d’informations au roll-over
Contrairement au cas précédent le fait qu’une information apparaisse n’est pas suggérée et donc évidente. Cela peut poser des problèmes de compréhension et d’appréhension par les internautes notamment : 
-	 Si la distance entre l’action et l’apparition de l’élément est grande,
-	Si la surface de déclenchement est trop réduite,
-	Si la fonction de déclenchement n’est pas facilement compréhensible,
-	Si l’intégration html/javascript produit des comportements peu faciles à gérer pour l’utilisateur,

La question de la publicité
Souvent difficile à écarter la cantonner aux pourtours du site dans des zones réservées placées aux mêmes endroits sur toutes les pages.
Optimiser l’organisation et la hiérarchie visuelle
En faisant appel aux principes de proximité et de similarité, il s’agit d’organiser les éléments au sein de la page : distinction des espaces de navigation des éléments de contenus, des éléments d’interaction,… Ce travail doit se faire au sein de la page comme au niveau de chacun des éléments la composant (séparation de différents groupes de champs dans un long formulaire,…). La hiérarchisation du contenu textuel et des éléments est également un moyen d’apporter de la clarté et de facilité l’utilisation du site.
Règle n°3. Cohérence : le site capitalise sur l’apprentissage interne
La cohérence dans la mise en page entre les pages du site facilite l’utilisation par les internautes qui dès leur connexion au site enregistre sans s’en rendre compte des principes de fonctionnement, et gagne ainsi en rapidité et en efficacité dans leur visite.
Des localisations cohérentes

Des méthodes, des métiers, des livrables permettent de travailler sur le vocabulaire (thesaurus, taxonomie,…)

Autrement dit ne pas déplacer les éléments semblables entre les différentes pages du site.
Les appellations sont cohérentes
Employer le même mot pour désigner un même élément.

La création d’une charte ergonomique aidera à obtenir une cohérence des informations des formats de présentation et des interactions

Les formats de présentation sont cohérents
Il faut rechercher la cohérence au sein des classes « d’objets » d’un même type et l’hétérogénéité entre ces classes « d’objets ».
Les interactions sont cohérentes
Un site doit se comporter de la même manière afin de ne pas surprendre les visiteurs.
Règle n°4. Conventions : le site capitalise sur l’apprentissage externe
Les connaissances et habitudes tirées de l’expérience de l’internaute lors de sa navigation sur d’autres sites doit être mise à profit pour simplifier l’usage d’une interface.
Qu’est ce qu’une convention
On parle de standard si plus de 80% des sites adoptent une même procédé/dispositif, et de convention s’ils sont 50 à 79% à l’adopter. Lorsqu’on recherche les conventions à respecter pour un site, mieux vaut les rechercher parmi les sites que visitent les internautes cibles que parmi tous les sites existants. Cela peut même parfois s’opposer à d’autres principes, par exemple le bleu #0000ff qui a caractérisé les liens a été une convention bien qu’en contradiction avec les principes de saturation des couleurs.
Respecter les conventions de localisation
Les éléments tels le logo en haut à gauche, le moteur de recherche en haut, l’accès au panier en haut à droite, les barres de navigation horizontales en haut pour le premier niveau de navigation, les barres de navigation verticales à gauche pour les menus de second niveau, les éléments de pied de page (mentions légales) font maintenant partie des conventions. On peut donc difficilement ne pas s’y soumettre sauf si la démarche est justifiée et souvent compensée par une mise en exergue de l’élément pour qu’il devienne immanquable.
Respecter les conventions de vocabulaires
 Respecter les conventions permet de simplifier et d’apporter en clarté (« accueil » plutôt que « page d’accueil »), et s’adapter à la cible, en respectant les conventions de vocabulaire qui lui sont propre, lui apporte plus de facilité pour l’utilisation.
Respecter les conventions d’interaction et de présentation
Cela touche tous les éléments d’interaction : ascenseurs, formulaires, alertes, déclenchement d’actions, process de commande,… il faut donc veiller à ne pas créer un élément qui ressemble à un menu alors qu’il ne l’est pas, à ne pas utiliser le format d’alerte pour indiquer des messages peu importants, à respecter les différentes formes du curseur de souris,… 
Règle n°5. Information : le site informe l’internaute lui répond

TAGLINE, BASELINE OU SLOGAN : 
C’est la phrase accompagnant le logo et définissant le caractéristique principale du site. Elle prend toute son importance en absence d’un accès par la page d’accueil mais par un moteur de recherche.

Le site se doit d’être poli, et informe l’internaute au moment opportun.
L’ordinateur informe et prévient l’internaute
Donner de l’information générale 
Le site doit laisser transparaitre l’activité et les contenus proposés au travers d’éléments génériques (logo, tagline,…) et de la page d’accueil.
Donner de l’information ponctuelle
Le fait d’informer dans toute sa navigation l’internaute sur l’endroit où il se trouve, les différentes options qui s’offrent à lui et les pages et rubriques déjà visités vont faciliter l’utilisation du site. 
Il faut veiller également : 
-	A apporter à l’internaute les précisions nécessaires qui lui permettront d’interagir et de comprendre l’interface, de « faire ce qu’on attend de lui » ;
-	A apporter les informations lui permettant de comprendre ce qui est en train de se passer grâce à un feedback adapté (symbolisation du téléchargement pour ne pas qu’il ait l’impression que rien ne se passe,…).
Informez, mais au bon moment
Le fait de prévenir du format à télécharger ou de l’ouverture d’une nouvelle fenêtre évite que l’internaute soit troublé par le comportement d’un site. Le fait d’offrir la possibilité d’acheter un produit sans aller consulter sa fiche détaillée, ou d’indiquer quels éléments seront nécessaires pour remplir un long formulaire, d’indiquer le plus en amont si un produit est disponible ou nécessite un délai de livraison vont raccourcir, simplifier ou éviter une démarche longue et infructueuse à l’internaute.
L’ordinateur répond aux interactions de l’internaute
Il s’agit de mettre en place des feedbacks répondant aux actions de l’internaute.
Donner du feedback aux actions de l’internaute
Dans le cas de rechargement de page, ou d’éléments au sein d’une page, suite à l’action de l’internaute il faut que les différences visuelles soient assez marquées pour que l’internaute comprenne aisément ce qui s’est passé.
Visibilité du feedback
C'est-à-dire mettre en place des feedbacks suffisamment visibles et positionnés judicieusement.
Règle n°6. Compréhension : les mots et symboles sont choisis minutieusement
Il s’agit d’employer les codes sémantiques que l’internaute connait.
La bonne utilisation des mots sur le web
La réduction de boutons à de simples icones sans terme associé entraine par exemple une diminution de l’utilisabilité. 
Il faut utiliser des mots explicites adaptés aux internautes cibles en faisant référence au « langage naturel » et aux conventions en terme de nomenclature, les plus précis et concis possibles et en rapport avec le contenu ou la fonction qu’ils proposent pour améliorer l’utilisabilité au maximum (éviter les langages techniques, éviter les ambiguïtés,…).
Les symboles et codes doivent être compréhensibles
Les codes et symboles comme les couleurs doivent être en adéquation avec la culture de l’internaute (rouge = erreur,…) et une trop grande utilisation entraine une surcharge informationnelle. 
Dans le cas des icônes, il faut veiller à ce que leur sens soit clair et que chacune ne porte qu’un sens connu et compréhensible par tous.

Les défauts de visibilité sont critiques lorsque l’internaute ne se doute pas du contenu ou des fonctions offerts. Il faut alors absolument travailler sur l’organisation de la visibilité pour contrer ce défaut.

Règle n°7. Assistance : le site aide et dirige l’internaute
Le site doit être conçu de manière à assister l’internaute tout au long de sa visite.
Dirigez grâce à l’organisation de la visibilité
Dans ce cadre la bonne visibilité des objets de navigation est primordiale (menu, pages suivantes ou précédentes,…). Il est nécessaire de répondre à la question « qu’est ce que le site propose ? »  pour présenter l’interface en conséquence et de s’assurer que tous les éléments primordiaux sont affichés sans scroll. 
Dirigez grâce à des clics logiques

Affordance : 
En ergonomie, elle se réfère aux capacités d’un objet à suggérer sa propre utilisation.

Il est fondamental que ce soient les éléments décisionnels qui soient activables et cliquables (proscrire « pour lire la suite cliquez sur le bouton ci-dessous »). 
Dirigez grâce aux affordances
Il est impératif que les internautes identifient quasi instantanément les éléments cliquables et actionnables.
Les affordances permettent de repérer ce qui est cliquable
Il faut veiller à ne pas induire en erreur l’internaute en lui faisant croire qu’un élément n’est pas cliquable par l’utilisation d’un style ou d’un effet. A noter que le fait d’utiliser des formulations à l’impératif ou l’infinitif ont tendance à renforcer l’affordance au clic.
Les affordances permettent de remarquer ce qui est utilisable
Il faut aider les internautes à repérer tous les éléments interactifs. C’est important pour tous les formulaires où les champs de saisie doivent apparaitre clairement en couleur claire pour représenter le vide et en contraste avec le fond du formulaire (le fait de pré-remplir un champ de saisie est plutôt néfaste à l’utilisabilité). Le fait des utiliser des affordances temporaires pour distinguer le champ de saisie en cours de remplissage est favorable à l’utilisabilité (ajout de pictogrammes, changement de couleur, bordures,…).
Veiller à ne pas diriger de façon erronée
Le manque de justesse et de précision induit en erreur
Les contre affordances induisent en erreur
Il s’agit de ne pas déguiser des éléments en ce qu’ils ne sont pas (ne pas faire ressembler à un lien un élément non cliquable, ne pas proposer une list-box lorsqu’il n’y a qu’un choix proposé)
Evitez d’avoir à diriger grâce à un modèle d’interaction adapté
Il ne faut pas demander à l’internaute de faire plus d’action qu’il n’est nécessaire (inutile de le faire cliquer sur le bouton recalculer lorsqu’il change le nombre de produits d’un panier, le recalcule doit être fait dès qu’il sort de la zone « quantité »).
Assistez votre internaute en tenant compte de ses besoins en terme de tâches
La prise en compte du comportement des internautes effectuant des tâches sur un site est importante pour lui faciliter « le travail ». L’idée de remplacer des caractères par des * lors de la saisie d’un code peut renforcer le sentiment de sécurité mais complexifie et gêne la saisie de l’internaute qui peut désirer vérifier sa saisie).
Assistez votre internaute en le suivant de très près
Il faut assister l’internaute en lui proposant clairement les choix qui s’offrent à lui à un instant T (aide à la saisie ou suggestions lors d’une recherche).
Fournissez de l’aide explicite en cas de besoin
Ne proposer que des contenus d’aide utiles et utilisables soit directement dans la page soit de manière transversale dans une rubrique dédiée ; mais l’aide n’est que l’ultime point d’action qui ne peut compenser une mauvaise ergonomie.
Règle n°8. Gestion des erreurs : le site prévoit que l’internaute se trompe.

L’erreur dans un formulaire peut prendre plusieurs formes qui doivent toutes être prises en compte pour les gestions d’erreur : champ oublié, mauvais format de saisie, incohérences des informations.

La gestion des erreurs est là pour palier aux situations où l’internaute s’écarte du chemin idéal imaginé par le concepteur particulièrement critique dans les interfaces transactionnelles.
L’internaute ne doit pas faire d’erreur
Les erreurs sont des points de rupture qui peuvent faire s’arrêter l’internaute et qu’il faut donc éviter.
La présentation du formulaire peut protéger contre l’erreur
Le fait d’indiquer clairement les champs obligatoires par un * et de rendre lisible aisément la mention l’accompagnant sont pertinents dans cette démarche.
Eviter les erreurs grâce aux libellés et légendes des champs
Le libellé éventuellement accompagné d’une légende plus détaillée doit être clair et sans ambiguïté. Le fait de n’afficher la légende qu’au moment opportun à par rapport à la saisie de l’internaute est également pertinent.
Eviter les erreurs en ajustant la taille des champs à l’information qui y sera saisie
La taille des champs plus ou moins grands suggère le type de données attendu.
Eviter les erreurs en utilisant des éléments de formulaire à bon escient
Adapter le champ de formulaire à la fonction et la tâche attendue (radio bouton si 1 seule sélection possible).
Eviter les erreurs par l’affordance générale de l’interface
Par exemple si la présence d’un bouton « effacer » est obligatoire il faut absolument éviter la confusion avec le bouton valider par la position, la forme, la couleur,…
Le fonctionnement du formulaire peur protéger contre l’erreur
Eviter les erreurs en demandant la confirmation pour les actions risquées
Eviter les erreurs en empêchant la saisie de données erronées
Si on ne peut commander des articles que par 6 autant faciliter la saisie en les proposant sous forme de list-box que de laisser un champ libre.
Eviter les erreurs en validant ou en corrigeant à la volée
Cette méthode est à appliquer judicieusement pour ne pas être trop intrusive et nuisible. Elle est surtout justifiée dans les cas où le concepteur est certain que l’internaute commet une erreur (saisie d’une date antérieure pour un voyage retour).
L’internaute doit facilement repérer et comprendre ses erreurs
Faciliter le repérage de l’erreur
L’objectif est de mettre en valeur de manière visible le fait qu’une erreur s’est passée et ce sans rechargement de la page.
Fournir une explication précise de l’erreur
Il est nécessaire de distinguer les différents types d’erreur et d’y attribuer des messages spécifiques libellés clairement.
Faire preuve de courtoisie dans les messages d’erreur
Il ne s’agit ni d’affoler l’internaute ni de remettre en cause ses compétences et capacités mais juste de le guider de nouveau pour lui faciliter la tâche.
L’internaute doit facilement pouvoir corriger ses erreurs
Grâce à l’explication de l’erreur
L’erreur est expliquée clairement le format attendu est précisé et éventuellement accompagné d’un exemple.
Faciliter la correction grâce aux mécanismes de gestion des erreurs
-	Traiter l’ensemble des erreurs en une seule fois pour éviter des allers retours fastidieux à l’utilisateur commettant de multiples erreurs.
-	Favoriser l’affichage des messages d’erreur directement dans la page
-	Laisser les champs remplis afin de faciliter sa compréhension de l’erreur commise

La loi de Fitts
Une cible est d’autant plus cliquable qu’elle est « proche » et « grande ».

Règle n°9. Rapidité : l’internaute ne perd pas son temps
Optimiser la navigation
Faciliter l’action de visée sur les éléments cliquables en gardant en mémoire la loi de Fitts
Prendre en compte les besoins de l’internaute sur le plan fonctionnel
Si un internaute doit cliquer sur un élément dans une longue liste, la mise en exergue de la ligne survolée peut faciliter la tâche de l’internaute. 
Multiplier les clés d’entrée vers une même page
Le fait de permettre un accès à une page à la fois en cliquant sur un titre, une image et un bouton est favorable à la rapidité de la navigation.
Faciliter les interactions
Le fait de rendre cliquable les libellés de champ de formulaire facilite l’utilisation par l’internaute, le fait de passer au champ suivant via la touche Tab, ou automatiquement dans le cas d’un code CB sont également favorables.
Eviter les actions inutiles
Il s’agit de simplifier la vie des utilisateurs en leur évitant les actions, clics ou scroll non obligatoires.
Ne pas demander à l’internaute deux fois la même chose
Notamment en n’effaçant jamais ce qu’il a déjà saisi.
Des modes d’interaction orientées efficience

Les fonctionnalités de personnalisation rentrent parfaitement dans la démarche d’efficience de l’interface (iGoogle).

Il faut que les utilisateurs les plus à l’aise puissent bénéficier de raccourcis (faire ses courses en mode express, faire varier le nombre de produits avec + et – en plus de la possibilité de saisir l’information dans le champ quantité, liste personnelle de courses, acheter en 1 clic dans une boutique,…), de moyens d’augmenter leur niveau d’efficience tout en préservant aussi un parcours pour les néophytes. 
Ce genre d’optimisation nécessite de connaître scrupuleusement le comportement et les tâches effectuées par les internautes.
Règle n°10. Liberté : c’est l’internaute qui commande
L’internaute doit garder le contrôle sur le site Internet où en avoir l’impression.
Respecter les contrôles utilisateur conventionnels

A voir le site www.dontclick.it où tout est navigable au survol qui révèle que les actions au survol sont souvent des expériences difficiles à gérer pour l’utilisateur

Le fonctionnement le plus basique du site doit être identique à la majorité des sites Internet.
Ne jamais déclencher d’actions au rollover
Flexibilité des actions utilisateurs
Les fonctions d’annulation et/ou de retours en arrières sont des plus proposées aux internautes lui donnant plus de maîtrise de l’outil.
Donnez la possibilité à l’internaute de contourner le système et d’agir dessus
Il s’agit d’offrir à l’utilisateur les moyens de contourner des dispositifs contraignants ou intrusifs (arrêter une bannière, un défilement d’actualités,…)
N’induisez pas de comportements passifs
Notamment en proposant des animations de courtes durées, en évitant les fondus entre les pages qui ont tendance à rallonger le temps que prend la navigation.
N’enfermez pas votre internaute
En terme de navigation il ne faut pas le contraindre à faire des choix successifs avant d’accéder à son objectif (limiter le nombre de niveau des menus ou faciliter l’accès d’une autre manière).
Le système ne doit pas être intrusif
Le système n’est pas insistant
Ne pas contraindre les internautes sous des prétextes d’incitation et donner l’impression qu’on le force à subir un choix avec trop d’insistance (les options doivent rester des options).
Le système ne force pas l’internaute à voir quelque chose
-	Eviter les introductions et fournir des entrées directes
-	Eviter l’affichage spontané de pop-up 
-	Le site n’agit pas à la place de l’internaute
Le site ne doit pas prendre le contrôle de l’ordinateur
-	Ne pas forcer l’ouverture d’une application logicielle sur le poste client
-	Ne pas jouer du son de manière inappropriée et fournir la possibilité de le contrôler
Règle n°11. Accessibilité : un site facile d’accès pour tous
Accessibilité physique
Permettre l’accès à tous les internautes quel que soit le ou les canaux perceptifs et d’action qu’ils utilisent pour naviguer.
Accessibilité technologique
Le site est accessible quel que soit le matériel utilisé par l’internaute en prenant en compte les systèmes d’exploitation, navigateurs, taille et résolution, fonctions activées, plugins installés,…
Adaptez le contenu au matériel de l’internaute
En proposant un format jpg au lieu d’un flash lorsque l’internaute n’a pas le plugin plutôt que de lui demander de le télécharger et en permettant au site de fonctionner même sans javascript,…
La plateforme de consultation est stratégique : informez et guidez
Dans le cas où l’internaute a besoin d’un outil ou d’une activation obligatoire pour utiliser le site il faut le prévenir et l’inciter à y procéder.
Règle n°12. Satisfaction de votre internaute

Les micro-fonctionnalités peuvent permettre de mieux impliquer l’internaute dans le site en le rendant acteur des évolutions du site.

Bien que citée en 12ème c’est la règle primordiale car c’est la seule qui peut autoriser la remise en question de toutes les autres. C’est aussi le critère le plus difficile à évaluer. Par contre le respect des 11 précédents critères entrainera nécessairement un accroissement du satisfécit du client. 
Satisfaire au critère d’utilité
 Un site utile est un site qui fournit du bon contenu à ses internautes, un service leur permettant de remplir leurs objectifs, ainsi que des utilités de second niveau (micro-fonctionnalités) optimisant la satisfaction. 
Satisfaire grâce à l’esthétique et à l’expérience utilisateur globale
La qualité graphique a un impact indéniable sur la perception subjective de l’utilisabilité d’un site
Satisfaire grâce à la puissance et la fiabilité technique
Le site doit être puissant au niveau fonctionnel et fiable (pas de liens erronés, d’images cassés, pas de lourdeur de chargement, et veiller à ce que le site réponde sur les requêtes sans les www,…).
En bref les 12 règles à utiliser à bon escient
Un post-it à conserver tout le temps en tête en restant conscient qu’elles peuvent se compenser les unes par rapport aux autres.
Conventions : 			Le site capitalise sur l’apprentissage externe 

- Les règles pour optimiser l’ergonomie d’un site -
1.	 Architecture : 		Le site est bien rangé
2.	Organisation visuelle : Le page est bien rangée
3.	Cohérence : 		Le site capitalise sur l’apprentissage interne
4.	Conventions : 		Le site capitalise sur l’apprentissage externe
5.	Information : 		Le site informe l’internaute et lui répond
6.	Compréhension : 	Les mots et symboles sont choisis minutieusement
7.	Assistance : 		Le site aide et dirige l’internaute
8.	Gestion des erreurs : 	Le site prévoit que l’internaute se trompe
9.	Rapidité :			L’internaute ne perd pas son temps
10.	Liberté : 			C’est l’internaute qui commande
11.	Accessibilité : 		Un site facile d’accès pour tous
12.	Satisfaction de l’internaute

 

MOTS CLES DU CHAPITRE
Audit ergonomique, inspection experte, ajax, seniors, outils pour l’audit 

L’audit ergonomique : conseils et méthodologie 
Pratique, support et moyens de l’audit ergonomique
Il s’agit d’observer une interface sous la lumière des objectifs de l’ergonomie en essayant d’aller dans le moindre détail et en passant donc par des thématiques renvoyant à des métiers différents (chef de projet, infographiste, intégrateur, développeur).
L’évaluation ergonomique, une pratique multiforme
L’objectif « ergonomie » conduisant au bien être des internautes se doit d’être posé dès le départ comme une vocation centrale du site et doit régir en arrière plan toutes les actions mêmes les plus anodines de maintenance. On peut distinguer : 
-	Une réflexion ergonomique « silencieuse » intervenant dans tous nos choix de manière plus ou moins mécaniques sans demander de temps supplémentaire. Les évolutions ergonomiques qui sont pratiquées sont discrètes et sont mises en place au fur et à mesure que leur besoin est perçu lors d’audits informels, elles peuvent l’être par tous les corps de métiers.
-	Une réflexion ergonomique relevant d’un audit formel. Il s’agit de vérifications planifiées s’inscrivant à des moments clés de la vie d’un projet (au tout début du projet, après l’intervention de chaque métier, et après le lancement du site) sur tout ou partie du site.
Support et périmètre de l’évaluation ergonomique 
L’audit ergonomique peut concerner : 
-	Un cahier des charges : l’audit juge surtout des utilités de telles ou telles fonctions,
-	Une maquette fonctionnelle : l’audit juge de l’architecture et de l’organisation visuelle,
-	Une maquette graphique : l’audit juge surtout de la lisibilité, de l’accessibilité visuelle, 
-	Un site fonctionnel : permet d’analyser des éléments difficilement évaluables à un autre moment (délai des feedbacks, mouvements de l’interface,…)
Le support analysé a donc des conséquences sur les thématiques abordées dans l’audit. Le périmètre de l’audit est variable mais est souvent orienté par des préoccupations marketing ou stratégiques.
Normes, conventions, critères, checklists & co
De nombreuses normes et règles peuvent guider l’audit ergonomique, elles doivent tout être cependant considérées avec précaution et réflexion car elles sont en général établies sans prendre en compte le contexte. Prendre en compte les règles d’ergonomie ne passe pas par la soumission à une ou plusieurs checklists ou grilles d’évaluation.

Différentes normes et critères en ergonomie web

Références 	Contenu et origine	
Heuristiques de Nielsen (issues de Nielsen et Molich, 1990)	10 heuristiques créées en 1994 et révisées en 2005 pour juger de l’utilisabilité de l’interface

Cf http://www.hec.unil.ch/fbodart/IHM/Chap3/heuristiques.html 	
Critères ergonomiques de Bastien et Scapin	18 critères répartis en 8 dimensions pour juger de l’ergonomie des interfaces homme-machine

Cf http://www.ergoweb.ca/criteres.html	
Heuristiques d’Instone	Adaptation des heuristiques de Nielsen pour juger de l’utilisabilité d’un site web	
Bruce Tognazzini	16 grands principes du design d’interaction proposés en 2003	

Structurer l’étude selon vos besoins
Les personas pondèrent les règles génériques
L’audit ergonomique consiste à analyser un site pour savoir s’il répond aux besoins des personas. Les besoins des personas pondèrent donc les règles génériques (on s’autorise à une surcharge informationnelle pour un site dont le persona principal est un expert de manière à augmenter l’efficience de l’interface pour ce persona ; dans le cas d’un persona sénior on aura tendance à accorder plus d’importance à l’organisation visuelle, l’information, la compréhension, l’assistance,  la liberté, l’accessibilité et la satisfaction).
Les technologies vous mettent la puce à l’oreille

ajax
acronyme d’« asynchronous javascript and xml », technologie qui ouvre des possibilités d’interaction beaucoup plus large (des requêtes serveurs en temps réel permettent le rafraichissement de fragment de page sans rechargement de la page complète)

A priori, comme évoqué dans le chapitre 2, il existe une autonomie entre le recours à une technologie et la qualité ergonomique de l’interface. Cependant, les technologies ont une influence sur la récurrence des défauts observés (les sites flash ont des défauts communs, idem pour ceux utilisant de l’ajax,…).
L’exemple d’ajax et javascript
-	Modification partielle de la page