Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition

Ergonomie
Elodie Descharmes (ingénieur Orange Labs)
Filière IMR, deuxième année
2012-2013
Parce qu’il ne sert à rien de réinventer ce qui est déjà très bien fait, ce cours est très largement
basé que le livre suivant :
Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles

Ergonomie web, introduction et
définition
Le rapport homme – machine
Ergonomie web : définition et objectifs
Les méthodes de l’ergonomie web
La place de l’ergonomie dans un projet web
Idées reçues sur l’ergonomie

3
@elodescharmes
Définition et origine de l’ergonomie
 L’ergonomie concerne tous les outils utilisés par l’être humain
 Origine de l’ergonomie : sphère du travail
– la médecine du travail et les maladies professionnelles : adaptation des postes de travail
– domaine de la santé, de la sécurité : contrôle aérien, centrales nucléaires…
Définition de Alain Wisner (1950)
« L’ergonomie est l’ensemble des connaissances scientifiques relatives à l’Homme
nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent
être utilisés avec le maximum de confort, de sécurité et d’efficacité. »

4
@elodescharmes
 Démarche aujourd’hui étendue à tous les objets du quotidien (voitures, lecteurs DVD, brosse à dent,
machines à café…)
 Omniprésence de l’ergonomie : chaque objet a un niveau de qualité ergonomique
 Pour produire des objets de bonne qualité ergonomique, il faut prendre en compte les
caractéristiques des utilisateurs dès la conception

5
@elodescharmes
Ergonomie et rapport homme – machine
 Principe de l’ergonomie : c’est l’outil qui s’adapte à l’homme
– Les caractéristiques de l’être humain (anthropométrie, mémoire, raisonnement, langage, capacités
perceptives, objectifs, envies etc…) doivent être au cœur du processus de conception
– L’ergonomie utilise ces connaissances pour améliorer le rapport de l’homme à la machine et plus
généralement aux objets qui l’entourent
 Analyser ce dont l’utilisateur a réellement besoin et mettre en œuvre les méthodes appropriées
pour que l’interface finale réponde au mieux à ces besoins

6
@elodescharmes
Ergonomie générale (tous les objets)
Ergonomie des Interfaces Homme-Machine (distributeurs de billets,
tableaux de bord automobiles, logiciels…)
Ergonomie informatique
(interfaces logicielles et web)
Ergonomie web (interfaces web)
Définition
Utilité
Utilisabilité
Intérêt et retours sur investissement

7
@elodescharmes
Différents types d’ergonomie
 On distingue généralement trois types d’ergonomie
– l'ergonomie cognitive : ergonomie en rapport aux interfaces cognitives (p.ex. un logiciel, un site web, un GPS,
une notice d'utilisation, ...),
– l'ergonomie physique : ergonomie en rapport aux interfaces physiques (p.ex. un poste de travail physique à la
chaîne, un intérieur de voiture ...),
– l'ergonomie organisationnelle : ergonomie en rapport aux interfaces organisationnelles (un flux de travail
particulier, des horaires de travail).
 Au niveau de l’ergonomie des IHM, les normes et les critères de bases d’une bonne ergonomie peuvent
être communes aux différentes sous-disciplines mais doivent être contextualisées au moment de leur
application
– Exemple : interface d’un distributeur de billets de banque et site web
– Mêmes règles d’organisation visuelle, de cohérence, de conventions, de feedback, de compréhension, de liberté
etc.
Définition
Utilité
Utilisabilité

8
@elodescharmes
 L’ergonomie est liée à la problématique de communication entre l’utilisateur et la machine
 Lorsqu’il y a un problème, que ça ne fonctionne pas d’un point de vue utilisateur, c’est en
général parce qu’il y a un écart important entre la vision du concepteur et la vision de
l’utilisateur final
Utilité
Utilisabilité
Définition
Utilité
Utilisabilité

9
@elodescharmes
 Utilité : ce que l’interface permet de faire
– Définir l’utilité d’une interface nécessite de connaître les besoins et envies des utilisateurs
– Une notion à deux dimensions
– Utilité générale : à quoi sert mon site web ?
– Micro-utilité : micro-applications supportant l’utilité générale
– L’utilité seule ne suffit pas. Pour qu’un internaute profite de l’utilité d’un site web, celui-ci doit
être utilisable.
Utilité et utilisabilité
Définition
Utilité
Utilisabilité

10
@elodescharmes
 Utilisabilité : efficacité, efficience et satisfaction
– L’utilité générale est souvent chose acquise. La différence se fait sur les micro-utilités et
surtout… sur l’utilisabilité
– Prendre en compte la satisfaction des utilisateur : un internaute satisfait est un internaute qui
revient
Utilisabilité, définition de la norme ISO 9241
« Un produit est dit utilisable lorsqu’il peut être utilisé avec efficacité, efficience et
satisfaction par des utilisateurs données, cherchant à atteindre des objectifs donnés,
dans un contexte d’utilisation donné »
Définition
Utilité
Utilisabilité

11
@elodescharmes
 Point de départ de l’utilisabilité
– un utilisateur
– des objectifs
– un contexte
 Ces trois notions doivent être définies lors de la conception d’un site web
 L’utilisabilité a trois objectifs (décrits ci-après)
– l’efficacité
– l’efficience
– la satisfaction
Définition
Utilité
Utilisabilité

12
@elodescharmes
 Premier objectif de l’utilisabilité : l’efficacité
– L’utilisateur doit réussir à faire ce qu’il veut faire
– Aisance d’utilisation
– Facilité d’apprentissage
– Critère principal
– Pour les interfaces grand public
– Pour les applications où les nécessités de séduire de nouveaux utilisateurs sont fortes
(nouvelles applications sur un domaine concurrentiel)
Définition
Utilité
Utilisabilité

13
@elodescharmes
 Deuxième objectif de l’utilisabilité : l’efficience
– L’utilisateur doit réussir non seulement réussir à accomplir ses objectifs (efficacité), mais il doit
pouvoir le faire rapidement et avec le moins d’erreurs possibles
– Critère principal
– Pour les interfaces spécialisées, les applications métiers, etc.
– Pour les applications où les nécessités de conserver des clients existants sont fortes
 L’efficience et l’efficacité ne s’opposent pas
 Une IHM web doit toujours tendre vers la double optimisation de l’efficacité et de l’efficience
Définition
Utilité
Utilisabilité

14
@elodescharmes
 Troisième objectif de l’utilisabilité : la satisfaction
– Mettre le site web au service des utilisateurs
– Critère assez spécifique aux IHM web :
– intégration des problématiques esthétiques, marketing, plaisir
– on peut tout à fait imaginer venir sur un site web pour se détendre et se promener au gré des
rencontres… C’est plus difficile à imaginer sur un logiciel de traitement de texte !
Remarque : Le web n’est cependant pas le média le plus marqué par cette notion. Par exemple, les exigences
du jeu vidéo le dépassent de très loin…
Définition
Utilité
Utilisabilité

15
@elodescharmes
 L’ergonomie a une certaine tendance à l’humanisme…
Mais ce n’est pas de l’argent jeté par les fenêtres !
 Retour sur investissement d’une démarche ergonomique
– Satisfaction utilisateur : un internaute satisfait est un internaute qui revient, peut recommander votre site,
etc.
– Critères mesurables
– Ventes et taux de conversion (pour les sites de e-commerce)
– Actions utilisateurs de type création de compte, inscription à des newsletter, etc.
– Trafic, nombre de visites, de visiteurs, nombre de pages vues, fonctionnalités utilisées, etc.
– Performance des utilisateurs en terme d’efficacité et d’efficience
– Plus difficile à mesurer
– Satisfaction client
– Image de marque, etc.
Définition
Utilité
Utilisabilité

16
@elodescharmes
 Autre aspect du retour sur investissement : réduction des coûts projet liés au développement
– Réduction des temps de développement
– Réduction des corrections post-lancement
Jakob Nielsen (expert ergonome Danois) a montré qu’une modification coûte 100 fois plus
cher après le lancement d’un site que lors de sa phase de conception fonctionnelle
Définition
Utilité
Utilisabilité

17
@elodescharmes
 Attention à l’interprétation des données
– Exemple : l’augmentation du nombre de pages vues sur un site peut avoir plusieurs causes
– Intérêt des internautes
– Les internautes ont du mal à trouver ce qui les intéressent
Bibliographie
« Usability Return on Investment » de Jackob Nielsen et Shuli Gilutz
(étude comparative suite à la refonte de sites)
42 projets
Un augmentation de l’utilisabilité estimée en moyenne à 202%
Définition
Utilité
Utilisabilité

18
@elodescharmes
 Deux grandes familles de méthodes
– Méthodes expertes (au niveau du concepteur uniquement)
– Méthodes participatives (font intervenir des utilisateurs)
 Les démarches ergonomiques couplent souvent méthodes expertes et participatives
Méthodes expertes
Méthodes participatives

19
@elodescharmes
Méthodes expertes
 « Expertes » ne veut pas dire réservé aux experts ergonomes
 « Expertes » = ne font pas intervenir d’utilisateurs
(ces méthodes seront présentées dans la suite du cours)
Exemples de méthodes expertes pour l’ergonomie
Audit ergonomique
Spécifications ergonomiques Réalisation de plans de site
Réalisation de flux d’interaction
Réalisation de zonings et maquettes
Méthodes expertes

20
@elodescharmes
 Font intervenir les utilisateurs finaux des interfaces
– Observer, questionner, analyser le comportement et le discours
 Attention, ces méthodes sont à différencier des méthodes marketing, tests de consommateurs
ou focus groups
 Les méthodes participatives de l’ergonomie se caractérisent par :
– Peu de méthodes de groupe, l’internaute est en général auditionné seul
– L’objectivité de l’analyse
Méthodes expertes

21
@elodescharmes
(les méthodes de tri des cartes et de test utilisateur seront présentées dans la suite du cours)
Exemples de méthodes participatives pour l’ergonomie
Analyses de l’activité et études ethnographiques
Entretiens et questionnaires
Tri des cartes
Test utilisateur
Méthodes expertes

22
@elodescharmes
 Deux principes majeurs à garder en tête :
1.Toute l’équipe doit se sentir concernée
2.L’ergonomie doit chercher à intégrer les contraintes des autres métiers
Point de vigilance particulier : le concepteur/ergonome et le designer doivent travailler de concert
(idéalement dans le même bureau)

23
@elodescharmes
1.« La sacro-sainte règle des 3 clics »
 Idée reçue
– Dans le monde du web, le nombre de clics est un indicateur de la distance de l’information
– 3 clics = nombre maximal d’actions au-delà duquel la navigation ne serait plus optimisée
– Populaire car mesurable
– Accroche publicitaire « calculez votre impôt en moins de 3 clics », « commandez votre canapé en
3 clics »
– Peut être utilisé comme accroche à bon escient
– Ne doit pas être utilisée comme référence pour architecturer un site !

24
@elodescharmes
1.« La sacro-sainte règle des 3 clics »
 Le problème
– Le critère du nombre de clic est relatif à une difficulté physique (liée au clic), et on oublie la
difficulté mentale. Elimine complètement la complexité qui peut se cacher derrière chaque clic
(processus mental de sélection)
– Pourrait être pertinente si l’internaute atteignait effectivement la page souhaitée à coup sûr. Mais
si ce n’est pas le cas ?
Parcours en cas d’erreurParcours idéal
1 1
1
3
2
2 clics simples valent mieux qu’un clic compliqué !

25
@elodescharmes
2.« Les internautes sont des idiots »
 Sous-estimation des internautes
– « Si un enfant de 10 ans y arrive, tout le monde devrait y arriver »
– Sûrement vrai, mais évidemment contre-productif !
 Surestimation des internautes
– « Les internautes savent qu’il faut cliquer sur le logo pour retourner à la page d’accueil, moi je le
fais bien » ou « ils vont apprendre »
 Point clé à retenir : il faut savoir pour qui on conçoit le site et prendre en compte les
caractéristiques de ces utilisateurs finaux
– Vous n’êtes pas l’internaute type, pas plus que votre copine, votre mère ou votre collègue !

26
@elodescharmes
3.« L’ergonomie et le design, ennemis jurés »
 Idées reçues
– « L’ergonomie tue le design »
– « Le design ruine la qualité ergonomique à laquelle on aurait pu prétendre »
 Les deux disciplines n’ont pas le même objectif, mais elles ne sont pas non plus
antinomiques !
 Tout est question de compromis au regard des objectifs que l’on se fixe pour le site

27
@elodescharmes
http://www.louisvuitton.com (03/03/2012)
http://www.ratp.fr/ (03/03/2012)
L’accent est mis sur l’image de
marque, l’interface doit servir de
vitrine
L’accent est mis sur la facilité d’utilisation
et sur les fonctionnalités

28
@elodescharmes
 Les apports de l’ergonomie au design graphique
– La maquette ergonomique sert de base au travail graphique
 Les apports du design graphique à l’ergonomie
– Agencement, hiérarchie visuelle, couleurs formes… permettent de renforcer l’ergonomie d’un
site s’ils sont bien utilisés
– L’esthétique influence l’utilisabilité : les internautes confrontés à une belle interface ont
tendance à la juger plus facile à utiliser
Stéréotype « What is beautiful is good »
Mis en évidence (pour les IHM) par une étude de Tractinsky, Katz et Ikar (1983)

29
@elodescharmes
4.« Pas besoin d’ergonomie, on a fait un focus group »
 Confusion entre test utilisateur et focus group
– Même remarque pour les questionnaires, entretiens d’appréciation, sondages etc. faisant appel à
l’évaluation subjective
Focus group Test utilisateur
Font intervenir des personnes réelles dont les profils correspondent à ceux
de votre public cible
Méthode collective Sessions individuelles
S’intéresse à l’avis subjectif des
internautes
Observe des comportements réels
Approche
marketing
Approche
ergonomique
≠

30
@elodescharmes
4.« Pas besoin d’ergonomie, on a fait un focus group »
≠

31
@elodescharmes
5.« Faites-moi un site ergonomique »
 Un site n’est jamais ergonomique dans l’absolu
 Il ne pourra éventuellement l’être que pour un internaute donné, à un instant donné, dans un
contexte donné

32
@elodescharmes
6.« Les internautes lisent en F »
– Ou d’autres lettres de l’alphabet (Z, E, …)
 Il n’existe pas de sens de lecture des pages web qui soit inscrit dans nos automatismes
cérébraux
 Le sens de lecture d’une page est influencé par
– Les habitudes des internautes
– Le contenu de la page

33
@elodescharmes
 Ce sont les pages qui produisent un
comportement de lecture en F et
non les internautes !
 Seul principe de base à respecter :
– Sens de lecture de gauche à droite et de haut en bas (pour les occidentaux)
– Il est donc plus logique d’attribuer plus d’importance au haut de la page, puis à la zone située à
gauche

34
@elodescharmes
http://www.charlottegainsbourg.com/ (03/03/2012)
Deux sens de lecture possibles pour ce site

35
@elodescharmes
7.« L’ergonomie c’est juste du bon sens »
 Preuve du contraire : la multitude de sites incompréhensibles existants…
 Eléments importants pour atteindre une qualité ergonomique acceptable
– Il faut du temps pour véritablement réfléchir de manière centrée sur l’utilisateur
– Il faut connaître les principes de base de l’ergonomie
– Il faut de l’expérience pour prendre de bonnes habitudes de conception
– Il faut parfois une expertise spécifique (analyse de l’activité, tri de cartes, tests utilisateurs…)

36
@elodescharmes
8.« On le fera en Web 2.0, HTML5, en Ajax, etc. »
 Le recours à une technologie donnée n’a pas d’influence de la qualité ergonomique des sites
web
 La technologie ou les fonctionnalités sont un point de départ
 L’ergonomie doit les prendre en compte et « essayer de faire avec »

37
@elodescharmes
9.« Les internautes ne scrollent pas »
 Vous n’en savez rien !
– En fait les internautes scrollent quand ils ont l’impression que le site correspond à leurs besoins et que la suite
de la page peut leur permettre d’atteindre leur objectif
 Certains problèmes ne se posent plus
– L’internaute sait-il que l’on peut descendre dans la page ? Est-ce trop difficile ?
 Il faut distinguer deux types de pages
– Page de contenu : on peut se permettre de scroller
– Page navigante ou transactionnelle : uniquement si c’est réellement adapté au besoin et que les contenus qui se
trouvent sous le seuil de scroll ne sont que secondaires

38
@elodescharmes
 Deux stratégies qui doivent pouvoir cohabiter
1. L’internaute utilise la page d’accueil pour naviguer vers un contenu
précis
Il doit pouvoir y parvenir grâce aux éléments situés en premier dans la
page
Pas de scroll
2. L’internaute attend du site qu’il mette en avant le maximum d’entrées
possibles vers les pages internes (contenus les plus récents par
thématiques par exemple)
Le scroll est acceptable
http://www.lemonde.fr/ (03/03/2012)
La page d’accueil lemonde.fr fait
plus de 4900 pixels de haut !

39
@elodescharmes
 Si la page est plus longue qu’un écran, faire attention à bien montrer qu’elle continue !
– Ne pas la « couper » avec du blanc par exemple
– « Cut-off » design : technique consistant à placer des éléments qui semblent tronqués si
l’internaute ne scrolle pas (« coupés » aux niveaux de seuil les plus courants)

40
@elodescharmes
10.« Pour l’ergonomie, on verra à la fin »
 La préoccupation ergonomique doit être présente tout au long du projet
 Une équipe projet commence fréquemment sa réflexion par d’autres étapes :
– Technique : « On a réussi à développer une nouvelle fonctionnalité, elle sera le cœur de notre
nouveau produit ! »
– Design : « Nous voulons voir l’allure qu’aura notre site ! » (ex : réponses à appels d’offres)
 Or, si l’intervention ergonomique n’est pas menée en amont, il est souvent trop tard pour
changer l’architecture de l’information ou les grands principes d’interaction par exemple…

Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition

Semelhante a Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition (20)

Mais de ElodieDescharmes

Mais de ElodieDescharmes (15)

Último

Último (16)

Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition