Fiche de révision : Introduction à l'ergonomie web

📋 Plan du Cours

1. Ergonomie du web
2. Utilité et utilisabilité
3. Idées reçues sur l'ergonomie
4. Comprendre les utilisateurs
5. Perception et affordances
6. Accessibilité et lisibilité
7. Règles d'ergonomie d'interface
8. Architecture de l'information
9. Parcours, zoning et prototypes
10. Tests utilisateurs et évaluation

📖 1. Ergonomie du web

🔑 Notions clés & Définitions

• Ergonomie : L’ergonomie regroupe des connaissances scientifiques pour concevoir des outils qui maximisent le confort, la sécurité et l’efficacité d’usage.
• Ergonomie informatique : L’ergonomie informatique analyse les besoins réels des utilisateurs afin que l’interface corresponde au mieux à ces besoins.
• Caractéristiques individuelles : Les caractéristiques individuelles désignent les différences entre utilisateurs à prendre en compte dans les choix d’interface.
• Contexte d’usage : Le contexte d’usage regroupe l’environnement et les conditions réelles dans lesquels l’utilisateur utilise le produit.

📝 Points essentiels

• L’ergonomie web ne se limite pas aux aspects physiologiques : elle inclut aussi l’analyse des individus, le contexte et les objectifs.
• La tâche et l’activité servent de point d’entrée pour analyser et concevoir les interfaces.
• Les critères visent à réduire l’inconfort et les risques tout en améliorant l’efficacité d’usage.
• Alain Wisner est présenté comme fondateur de l’ergonomie française et responsable d’instances liées à l’ergonomie en France.

💡 Astuce mémo

Besoin réel + interface adaptée = ergonomie informatique.

📖 2. Utilité et utilisabilité

🔑 Notions clés & Définitions

• Utilité : L’utilité décrit le fait qu’un site ou une application répond à un besoin lié à l’objectif de l’utilisateur.
• Utilisabilité : L’utilisabilité mesure la capacité du système à permettre à des utilisateurs définis d’atteindre des buts définis, avec efficacité, efficience et satisfaction.
• Efficacité : L’efficacité correspond à la capacité de l’utilisateur à réussir ce qu’il veut faire sur le système.
• Efficience : L’efficience reflète le niveau d’effort et la rapidité nécessaires pour atteindre les buts, souvent via erreurs et temps.
• Satisfaction : La satisfaction traduit le ressenti positif de l’utilisateur pendant son expérience.

📝 Points essentiels

• Le couple utilité + utilisabilité est présenté comme complémentaire : l’utilité répond au besoin, l’utilisabilité à la manière d’y parvenir.
• L’utilisabilité s’évalue avec trois axes mesurables : efficacité, efficience et satisfaction.
• L’efficience peut être observée à travers des indicateurs comme le nombre d’erreurs, le parcours et le temps de réalisation.
• L’utilité peut être décomposée en micro-utilités via des services ou fonctionnalités qui soutiennent l’objectif principal.

💡 Astuce mémo

Utilité = besoin ; utilisabilité = réussir vite avec effort réduit et satisfaction.

📖 3. Idées reçues sur l'ergonomie

🔑 Notions clés & Définitions

• Focus group : Le focus group est une méthode déclarative et collective réalisée en amont pour faire intervenir des utilisateurs cibles.
• Test utilisateurs : Le test utilisateur observe les comportements d’usage et sert à valider une conception en cours.
• Écoute clients : L’écoute clients consiste à demander des conseils aux clients, qui peuvent être trompeurs si collecte et interprétation ne sont pas cadrées.

📝 Points essentiels

• Si l’ergonomie n’était que du bon sens, tous les sites seraient comparables en qualité, ce qui n’est pas le cas selon le cours.
• Une “application ergonomique” n’existe pas pour tout le monde : la démarche est itérative et ne s’achève pas après une simple validation.
• Les statistiques d’usage donnent une vue traçable et objective, mais elles ne remplacent pas des tests utilisateurs.
• Focus group et test utilisateurs sont distingués : déclaratif en amont pour le premier, observation de l’usage pour valider la conception pour le second.
• L’utilisateur ne doit pas seulement donner un avis : ses feedbacks exigent un tri et une interprétation.

💡 Astuce mémo

Bon sens ≠ preuve : on valide par observation et itérations.

📖 4. Comprendre les utilisateurs

🔑 Notions clés & Définitions

• Utilisateur : L’utilisateur doit être défini précisément afin de concevoir un système correspondant à ses besoins et particularités.
• Données externes : Les données externes proviennent d’études de marché et de sources éditoriales utilisées pour mieux comprendre le public.
• Données internes : Les données internes rassemblent des informations issues du produit, comme études qualitatives/quantitatives, entretiens et données d’usage.
• Données d'usage : Les données d’usage décrivent la manière réelle dont les utilisateurs utilisent le produit pour guider la conception.

📝 Points essentiels

• Définir l’utilisateur consiste à préciser ses besoins et particularités pour aligner l’interface sur ses attentes.
• Les questions clés portent sur l’identité des utilisateurs, ce qu’ils viennent chercher, la récurrence/saisonnalité et les sites qu’ils fréquentent.
• La compréhension combine données externes et internes, puis analyse des objectifs réels et des difficultés d’usage.
• Le cours relie l’ergonomie à l’analyse tâche/activité pour concevoir à partir de ce que l’utilisateur fait vraiment.

💡 Astuce mémo

Profil + objectifs + contexte (données externes + internes) -> interface pertinente.

📖 5. Perception et affordances

🔑 Notions clés & Définitions

• Théorie de la Gestalt : La théorie de la Gestalt décrit comment le cerveau regroupe visuellement des éléments en ensembles selon des règles perceptives.
• Affordance : L’affordance est la capacité d’un élément visuel ou interactif à suggérer comment on peut l’utiliser.
• Point focal : Le point focal désigne l’élément saillant qui attire naturellement l’attention dans une composition visuelle.
• Loi de la proximité : La loi de la proximité décrit que des éléments visuellement proches sont plus susceptibles d’être perçus comme liés.
• Loi de la similarité : La loi de la similarité indique que des éléments qui se ressemblent sont plus facilement regroupés comme comparables ou opposables.

📝 Points essentiels

• La proximité, la similarité et le point focal expliquent des regroupements et des directions d’attention en perception visuelle.
• La loi de Fitts relie le temps $T$ à la distance $D$ et à la taille $W$ selon $T=a+b\cdot\log_2(D/W+1)$.
• Pour Fitts, augmenter la taille réelle/virtuelle des cibles cliquables et prévoir une zone tampon entre elles réduit le temps d’action.
• Les affordances doivent respecter les conventions et attentes et peuvent être renforcées par des apparences cohérentes avec l’action.
• Le nombre magique de Miller et la loi de Hick sont cités pour rappeler les limites de mémoire de travail et l’effet du nombre d’options.

💡 Astuce mémo

Affordance = indices visuels des actions possibles.

📖 6. Accessibilité et lisibilité

🔑 Notions clés & Définitions

• Accessibilité visuelle : L’accessibilité visuelle consiste à supprimer les obstacles qui empêchent certains utilisateurs d’accéder à l’information ou aux actions.
• Lisibilité : La lisibilité désigne la capacité à lire confortablement les textes et à repérer l’information à l’écran.
• Optimisation des couleurs : L’optimisation des couleurs vise à améliorer la perception du texte grâce au contraste entre fond et caractères.
• Accessibilité physique : L’accessibilité physique concerne les contraintes liées aux handicaps des utilisateurs.
• Accessibilité technologique : L’accessibilité technologique concerne la compatibilité avec des contraintes techniques.

📝 Points essentiels

• L’accessibilité web inclut aussi des choix de contraste et une lisibilité satisfaisante même sur des images/photos.
• Le cours associe la lisibilité aux réglages typographiques comme la taille des textes et l’usage des majuscules.
• L’accessibilité est classée en deux dimensions : physique et technologique.
• L’accessibilité est traitée comme une règle d’interface : le site doit rester utilisable par tous, y compris avec des handicaps.

💡 Astuce mémo

Lisibilité = contraste + typographie (taille/majuscules) + texte lisible sur fond.

📖 7. Règles d'ergonomie d'interface

🔑 Notions clés & Définitions

• Cohérence : La cohérence regroupe l’usage d’éléments familiers et homogènes pour faciliter l’apprentissage de l’interface.
• Conventions : Les conventions sont les usages standard attendus par les utilisateurs pour éviter la confusion.
• Gestion des erreurs : La gestion des erreurs vise à anticiper, repérer les erreurs puis aider l’utilisateur à les corriger.
• Liberté : La liberté renvoie au contrôle de l’utilisateur, notamment la possibilité de revenir en arrière.

📝 Points essentiels

• Le cours liste 12 règles : architecture, organisation visuelle, cohérence, conventions, information, compréhension, assistance, gestion des erreurs, rapidité, liberté, accessibilité et satisfaction.
• Pour l’architecture, les regroupements doivent être logiques et la structure doit mettre en avant les contenus clés avec des menus pour naviguer.
• La cohérence implique une localisation stable, des appellations/symboles cohérents, des formats cohérents et des interactions cohérentes.
• La gestion des erreurs doit faciliter le repérage et la compréhension puis proposer une correction avec détection dans le formulaire.
• La liberté impose des contrôles conventionnels et des retours possibles, sans forcer des actions inutiles comme créer un compte pour consulter.

💡 Astuce mémo

Arch + Cohérence + Conventions : pour apprendre vite ; Erreurs + Liberté : pour rester en contrôle.

📖 8. Architecture de l'information

🔑 Notions clés & Définitions

• Architecture de l'information : L’architecture de l’information organise le rangement, la recherche et la navigation afin d’aider l’utilisateur à trouver.
• Recherche ciblée : La recherche ciblée permet à l’utilisateur de trouver rapidement l’information attendue.
• Navigation globale : La navigation globale reste persistante quelle que soit la rubrique choisie.
• Navigation locale : La navigation locale s’adapte à la rubrique de navigation globale pour guider l’utilisateur au bon niveau.
• Navigation transversale : La navigation transversale relie des pages entre elles via des liens pour passer de page en page.

📝 Points essentiels

• L’objectif de l’architecture de l’information est de regrouper et structurer pour simplifier le repérage et la recherche.
• Le cours distingue recherche, navigation globale, navigation locale et navigation transversale comme façons différentes d’organiser les déplacements.
• La recherche est dite “droit au but”, tandis que la navigation ciblée correspond à une progression étape par étape.
• La navigation globale est persistante, mais la navigation locale varie selon la rubrique choisie.
• Les parcours doivent être pensés avec les objectifs et les représentations mentales des utilisateurs.

💡 Astuce mémo

Trouver = architecture ; Aller = global/local/transversal.

📖 9. Parcours, zoning et prototypes

🔑 Notions clés & Définitions

• Zoning : Le zoning priorise les zones d’une interface selon l’importance des contenus.
• Wireframe : Le wireframe décrit l’interface en niveaux de gris, sans intention graphique.
• Prototypage : Le prototypage transforme une structure statique en interface interactive pour tester la conception.
• Ligne de flottaison : La ligne de flottaison correspond à la limite où l’essentiel doit être transmis avant le premier écran.

📝 Points essentiels

• La conception détaillée impose de gérer l’espace horizontal et vertical avec une logique de largeur et une prise en compte de la verticalité.
• Avant la ligne de flottaison, l’essentiel du message doit être compris et l’interface doit faire deviner qu’il y a du contenu ensuite.
• Le zoning priorise les zones de l’interface et le wireframe détaille chaque zone sous forme de structure en niveaux de gris.
• Le prototypage correspond au passage vers l’interactivité afin de tester concrètement la conception.

💡 Astuce mémo

Avant l’écran : l’essentiel ; après l’écran : une suite devinée.

📖 10. Tests utilisateurs et évaluation

🔑 Notions clés & Définitions

• Tri de cartes : Le tri de cartes organise l’architecture de l’information à partir de la représentation mentale des utilisateurs.
• Cartes : Les cartes listent des fonctionnalités et contenus afin de permettre des regroupements proposés par les utilisateurs.
• Panel d'utilisateurs : Le panel est un groupe d’utilisateurs représentatifs du cœur de cible utilisé pour tester le produit en conditions réelles.
• Évaluation d'interface : L’évaluation d’interface recense les problèmes d’ergonomie et les relie à leur définition, priorité et corrections.

📝 Points essentiels

• Le tri de cartes produit une architecture d’information alignée sur la représentation mentale des utilisateurs finaux.
• Le tri de cartes suit un déroulé : inventaire des fonctionnalités/contenus sur cartes, regroupements, puis analyse par l’ergonome.
• Le test utilisateurs est réalisé avec un panel représentatif pour comprendre comment les utilisateurs se servent réellement de l’application.
• Le test utilisateur consiste à observer et interviewer pour relever objectifs réels et difficultés d’utilisation.
• Dans le TP, chaque problème doit être relié à sa définition, sa priorité, un concept ergonomique et une ou plusieurs corrections envisagées.

💡 Astuce mémo

Observation + regroupement : l’info se structure avec les utilisateurs, pas seulement avec l’intuition.

📊 Tableaux de synthèse

Utilité vs utilisabilité

⚠️ Pièges & confusions fréquents

1. Penser que l’ergonomie est du bon sens et donc que tous les sites seront comparables, alors que l’expérience et les utilisateurs réels comptent énormément.
2. Confondre une “application ergonomique” universelle avec une démarche indépendante des utilisateurs, du moment et du contexte.
3. Croire que des focus group ou des avis suffisent sans observer l’usage, alors que le test utilisateurs sert précisément à valider une conception.
4. Se baser uniquement sur des statistiques d’usage : elles décrivent un usage traçable mais ne prouvent pas seules les causes, qui doivent être vérifiées.
5. Appliquer une “règle des trois clics” sans tenir compte du risque d’erreurs et de la complexité quand les écrans sont chargés.
6. Supposer des “lois universelles” de lecture en F et de non-scroll, alors que le cours insiste sur des effets liés à l’apprentissage et au comportement du site.
7. Chercher d’abord à rendre l’interface “jolie” en oubliant l’ergonomie, alors que le cours distingue des objectifs d’ergonomie et affirme que l’approche commence dès le début.

✅ Checklist Examen

1. Définir l’ergonomie et expliquer pourquoi elle vise confort, sécurité et efficacité d’usage, au-delà des aspects physiologiques.
2. Expliquer comment l’ergonomie du web s’appuie sur une analyse des besoins réels des utilisateurs pour concevoir l’interface.
3. Relier l’utilité à la réponse à un besoin lié à un objectif utilisateur.
4. Relier l’utilisabilité à trois axes : efficacité, efficience et satisfaction.
5. Donner ce que recouvrent concrètement efficacité, efficience et satisfaction pour un utilisateur.
6. Citer et justifier des idées reçues à rejeter : bon sens, ergonomie “absolue”, confusion focus group vs tests, et limites des statistiques seules.
7. Distinguer focus group et tests utilisateurs en termes de méthode (déclaratif vs observation) et de moment dans la conception.
8. Lister les questions à se poser pour définir l’utilisateur et préciser le rôle des données externes et internes, puis des données d’usage.
9. Citer au moins trois lois Gestalt du cours (proximité, similarité, point focal) et expliquer leur effet de regroupement visuel.
10. Reconstituer la loi de Fitts sous la forme $T=a+b\cdot\log_2(D/W+1)$ et énoncer deux recommandations d’action proposées.
11. Expliquer les dimensions d’accessibilité et les leviers cités : contraste couleurs, lisibilité sur photos, taille/majuscules, et accessibilité physique vs technologique.
12. Reciter les familles de règles d’interface : architecture, cohérence/conventions, information/compréhension/assistance, erreurs/rapidité/liberté/accessibilité/satisfaction.
13. Expliquer comment l’architecture de l’information organise la recherche et les quatre formes de navigation (recherche, globale, locale, transversale).
14. Décrire l’objectif du zoning, du wireframe et la logique de la ligne de flottaison.