Ergonomie des IHM web - Notes de cours (1/3)

1. Ergonomie – Notes de cours
IMR2 – 2012-2013
Référence : Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles
ERGONOMIE
NOTES DE COURS
CONTEXTE
Conception de service
Conception centrée utilisateur
Ergonomie
CONCEPTION DE SERVICE
 Fonctionnalités du service, mais aussi ensemble des autres processus
CONCEPTION CENTRÉE UTILISATEURS
 Caractéristiques
 Processus
 Méthodes (mises en œuvre dans le cadre de la contribution ergonomique)
INTRODUCTION ET DÉFINITION
RAPPORT HOMME-MACHINE
 C’est l’outil qui doit s’adapter à l’homme
DÉFINITION ET OBJECTIFS
 Ergonomie web ⊂ Ergonomie informatique ⊂ Ergonomie des interfaces ⊂ Ergonomie générale
 Trois types d’ergonomie
o Cognitive
o Physique
o Organisationnelle
 Utilité : répondre à un besoin
o Utilité générale
o Micro-utilités
 Utilisabilité
o efficacité : facile à utiliser
o efficience : efficace
o satisfaction : agréable
 Intérêt et retours sur investissements
o Certains critères mesurables, d’autres moins
o Réduction des coûts

2. Ergonomie – Notes de cours
IMR2 – 2012-2013
Référence : Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles
MÉTHODES
 Méthodes expertes (sans intervention d’utilisateurs)
o Audit ergonomique
o Spécifications ergonomiques
 Méthodes participatives (avec intervention d’utilisateurs)
o Analyses et études
o Entretiens
o Tri des cartes
o Tests utilisateurs
LA PLACE DE L’ERGONOMIE DANS UN PROJET WEB
L’ergonomie : doit chercher à intégrer l’ensemble des contraintes métier
Les autres contributions : doivent se sentir concernées par l’ergonomie !
IDÉES REÇUES SUR L’ERGONOMIE
1. La sacro-sainte règle des 3 clics
2. Les internautes sont des idiots
3. L’ergonomie et le design, ennemis jurés
4. Pas besoin d’ergonomie, on a fait un focus group
5. Faites-moi un site ergonomique
6. Les internautes lisent en F
7. L’ergonomie c’est juste du bon sens
8. On le fera en Web 2.0, en Ajax, etc.
9. Les internautes ne scrollent pas
10. Pour l’ergonomie, on verra à la fin

3. Ergonomie – Notes de cours
IMR2 – 2012-2013
Référence : Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles
CONNAÎTRE ET DÉFINIR VOTRE INTERNAUTE : CARACTÉRISTIQUES GÉNÉRALES
L’internaute est défini par
 des caractéristiques générales (en temps d’être humain)
 des caractéristiques individuelles (en temps que personne unique)
LES THÉORIES DE LA GESTALT
Gestalt = forme
Nous percevons des formes globales qui rassemblent les éléments entre eux : le tout différent de la somme de ses parties
Les 7 lois de la Gestalt
 Loi de la bonne forme
 Loi de la bonne continuité
 Loi de proximité
 Loi de similarité
 Loi de destin commun
 Loi de clôture
Loi de proximité
 Proximité visuelle = indice de proximité conceptuelle
 Eloignement visuel = indice d’éloignement conceptuel
Loi de similarité
 Ressemblance de forme = proximité conceptuelle
 Différence de forme = éloignement conceptuel
LA LOI DE FITTS
Une cible est d’autant plus facile à atteindre qu’elle est proche et grande
 Les éléments cliquables doivent être gros
o Augmenter la taille réelle
o Augmenter la taille virtuelle
 Augmenter la surface cliquable
 Augmenter la distance entre éléments
 Les éléments cliquables doivent être proches
LE CONCEPT D’AFFORDANCE
Capacité d’un objet à suggérer sa propre utilisation
 Signes implicites
 Signes explicites
Optimiser l’affordance au clic (et à l’interaction en général)
Attention aux affordances erronées
LE NOMBRE DE MILLER ET LA LOI DE HICK
Seuil maximal de notre mémoire de travail = 7, plus ou moins 2
Le temps nécessaire pour prendre une décision croît proportionnellement au nombre et à la complexité des options proposées

4. Ergonomie – Notes de cours
IMR2 – 2012-2013
Référence : Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles
ACCESSIBILITÉ VISUELLE ET LISIBILITÉ
Accessibilité visuelle
 Prise en compte du handicap  solutions techniques
o Séparer forme et contenu
o Règles de conception
o Fonctionnalités spécifiques
 Pour tous les internautes  optimisation graphique
o Optimisation des couleurs
 Contraste
 Luminance
 Eviter les couleurs complémentaires
o Optimisation des caractéristiques des textes
 Taille, graisse, typographie, interlignage, casse…