ERGONOMIE

CT Tess MASSANGU S.
PRÉSENTATION DU COURS
​Dans le cadre d'une Licence 3 en multimédia communication digitale,
l'enseignement de l'ergonomie est essentiel pour former des
professionnels capables de concevoir des interfaces utilisateur efficaces
et agréables.

Le cours d'ergonomie couvre généralement les principes de

l'interaction homme-machine, les critères d'utilisabilité, l'architecture
de l'information, le design centré utilisateur et les méthodes
d'évaluation de l'expérience utilisateur.
DESCRIPTION DU COURS
L’ergonomie, appliquée au domaine du multimédia et de la
communication digitale, vise à concevoir des interfaces (sites
web, applications mobiles, objets connectés, etc.) et des
contenus numériques en tenant compte des besoins, des
contraintes et des capacités des utilisateurs finaux.

Ce cours introduit les principes fondamentaux de l’ergonomie,

afin d’améliorer la qualité d’utilisation, l’accessibilité, et
l’expérience utilisateur (UX).
OBJECTIFS DU COURS
À la fin de ce cours, les étudiants seront capables de :
• Comprendre les concepts clés de l'ergonomie et de l'expérience
utilisateur.
• Analyser les besoins et attentes des utilisateurs pour créer des
interfaces conviviales.
• Évaluer et optimiser des interfaces en tenant compte des principes
d'ergonomie.
• Appliquer des techniques de conception centrée sur l’utilisateur dans
leurs projets de communication digitale.
• Tester l’utilisabilité des interfaces et interpréter les résultats pour des
améliorations continues.
COMPÉTENCES ACQUISES
À la fin du cours, l’étudiant sera capable de :
• Réaliser une analyse ergonomique d’un site ou d’une application.
• Organiser et mener des tests utilisateurs pour valider ses hypothèses
de conception.
• Prendre en compte les contraintes d’accessibilité et d’expérience
utilisateur dans ses projets.
• Prototyper rapidement et itérer pour améliorer l’ergonomie d’une
interface.
• Communiquer efficacement avec les équipes de design et de
développement pour intégrer les bonnes pratiques ergonomiques tout
au long du cycle de production.
Prérequis
▪ Connaissances générales en design graphique et web.
▪ Notions de base en développement web ou mobile (HTML/CSS,
principes de navigation, etc.).
▪ Intérêt pour la psychologie cognitive et l’étude du comportement
des utilisateurs.
CONTENU DU COURS
✓ Introduction à l'ergonomie
✓ Principes de l'interaction homme-machine (IHM)
✓ Architecture de l'information
✓ Design centré utilisateur
✓ Évaluation de l'expérience utilisateur (UX)
✓ Ergonomie cognitive et perception
✓ Normes et standards en ergonomie
MÉTHODES PÉDAGOGIQUES
▪ Cours magistraux pour introduire les concepts théoriques clés.
▪ Travaux dirigés (TD) : exercices pratiques autour de l’analyse
d’interfaces, réalisation de prototypes simples.
▪ Travaux pratiques (TP) : tests utilisateurs en petits groupes,
observations et analyses pour formuler des propositions
d’amélioration.
▪ Études de cas et projets : travail en équipe sur une problématique
d’ergonomie réelle (site, application, logiciel, etc.), avec restitution
orale et remise d’un rapport.
MÉTHODES PÉDAGOGIQUES
Cours magistraux : 10 heures
Travaux dirigés (TD) : 10 heures
Travaux pratiques (TP) et Projet : 10 heures
MÉTHODES D’ÉVALUATION
• Participation et implication : 10%
o Engagement dans les travaux et discussions.
• Exercices pratiques : 30%
o Exercices d’analyse d’interface et de création de wireframes
ergonomiques
• Projet final : 60%
RESSOURCES ET MATÉRIEL
• Matériel requis :
oOrdinateur avec accès aux logiciels de design (Figma,
Adobe XD)
oOutils pour les tests d’utilisabilité (si disponibles)
POLITIQUES DU COURS
• Assiduité : La présence est requise pour les séances et les
exercices pratiques. Les absences non justifiées peuvent
entraîner une pénalité sur la note finale.
• Retards : Les travaux remis en retard seront pénalisés de
10% par jour de retard.
• Plagiat : Toute forme de plagiat entraînera une note de zéro
pour l’évaluation concernée.
CALENDRIER RÉSUMÉ
Séances Thèmes Évaluations
Introduction à l'Ergonomie
1 Principes de l'interaction homme-
machine (IHM)
Architecture de l'information
2
Design centré utilisateur
Évaluation de l'expérience utilisateur
3
(UX)
4 Ergonomie cognitive et perception
5 Normes et standards en ergonomie
Projet final et présentation
BIBLIOGRAPHIE
Nielsen, J. (1993). Usability Engineering. Morgan Kaufmann.
Norman, D. (2013). The Design of Everyday Things (édition révisée).
MIT Press.
Bastien, J. M. C., & Scapin, D. L. (1993). Ergonomic criteria for
evaluating the ergonomic quality of interactive systems. INRIA.
Garrett, J. J. (2010). The Elements of User Experience. New Riders.
ISO 9241 (série) – Normes sur l’ergonomie de l’interaction homme-
système.
WCAG 2.1 – Règles pour l’accessibilité des contenus Web.
Ressources en ligne : A List Apart, NNGroup, UX Collective, Smashing
Magazine, etc.
INTRODUCTION À L'ERGONOMIE
INTRODUCTION À L'ERGONOMIE
Définitions et concepts fondamentaux de l’Ergonomie
L’ergonomie est la discipline scientifique qui vise à
adapter les technologies, les systèmes et les interfaces
aux capacités et aux besoins des utilisateurs.

Elle repose sur une approche centrée sur l’utilisateur

afin d’optimiser l’efficacité, le confort et la sécurité
dans l’utilisation des produits numériques.
INTRODUCTION À L'ERGONOMIE
Définitions clés :
• Ergonomie : Science qui étudie les interactions entre
l’homme et son environnement de travail, incluant
les outils, les machines et les interfaces numériques.
• Interaction Homme-Machine (IHM) : Ensemble des
échanges entre un utilisateur et un système
informatique via une interface.
INTRODUCTION À L'ERGONOMIE
Définitions clés :
• Utilisabilité : Qualité d’un produit numérique
mesurée en termes d’efficacité, d’efficience et de
satisfaction de l’utilisateur.
• Expérience Utilisateur (UX) : Ensemble des
perceptions et réactions d’un utilisateur lorsqu’il
interagit avec un produit ou un service.
INTRODUCTION À L'ERGONOMIE
L’ergonomie se divise en plusieurs branches, dont :
• L’ergonomie physique (posture, fatigue visuelle,
accessibilité physique)
• L’ergonomie cognitive (charge mentale, perception
de l’information)
• L’ergonomie organisationnelle (optimisation des
processus et des flux d’information)
INTRODUCTION À L'ERGONOMIE
Historique et évolution de la discipline
L’ergonomie est une discipline relativement récente qui
s’est développée en plusieurs étapes :
• Antiquité et Moyen Âge : Premières réflexions sur
l’ergonomie avec l’optimisation des outils artisanaux
et des postes de travail.
• Révolution Industrielle (XIXe siècle) : Apparition
des premières études sur l’efficacité des travailleurs
et la réduction de la fatigue.
INTRODUCTION À L'ERGONOMIE
Historique et évolution de la discipline
• Seconde Guerre mondiale (1940-1950) :
Développement de l’ergonomie cognitive pour
améliorer la conception des interfaces des avions et
des équipements militaires.
• Années 1970-1980 : Apparition de l’informatique
personnelle et prise en compte de l’interaction
homme-machine.
INTRODUCTION À L'ERGONOMIE
Historique et Évolution de la Discipline
• Années 1990 à aujourd’hui : Intégration de
l’ergonomie dans le design numérique, les interfaces
utilisateur (UI) et l’expérience utilisateur (UX), avec
des méthodologies avancées de tests utilisateurs.
Aujourd’hui, l’ergonomie est un élément clé de la conception
numérique, influençant des domaines comme le web design,
le développement d’applications mobiles, les interfaces de
logiciels et la réalité virtuelle.
INTRODUCTION À L'ERGONOMIE
Objectifs et avantages de l’Ergonomie dans la conception
numérique
L’application de l’ergonomie à la communication numérique et
multimédia vise plusieurs objectifs :
Objectifs :
• Améliorer l’efficacité et la productivité : Faciliter la
navigation et l’accès aux informations.
• Optimiser l’expérience utilisateur (UX) : Assurer une
interaction fluide et intuitive.
INTRODUCTION À L'ERGONOMIE
Objectifs :
• Réduire les erreurs et la frustration : Diminuer les risques
d’incompréhension et d’abandon d’une plateforme.
• Favoriser l’accessibilité : Permettre l’accès aux services
numériques pour tous, y compris les personnes en
situation de handicap.
INTRODUCTION À L'ERGONOMIE
Avantages :
• Meilleure satisfaction des utilisateurs : Interfaces
intuitives et agréables à utiliser.
• Augmentation de la fidélisation et de
l’engagement : Les utilisateurs restent plus
longtemps sur une plateforme bien conçue.
• Diminution des coûts de maintenance : Moins de
retours négatifs et de corrections nécessaires après
lancement.
INTRODUCTION À L'ERGONOMIE
Avantages :
• Amélioration de la performance commerciale :
Une bonne ergonomie favorise la conversion et
l’achat en ligne.
En intégrant ces principes, la communication
numérique devient plus efficace, accessible et
attrayante pour tous les utilisateurs.
L’ergonomie est donc un facteur clé dans la réussite
d’un projet digital.
Exercice : Audit d’interface

Analyser un site web ou une application existante en fonction

des principes de l'ergonomie.

Évaluez :
• La lisibilité et la hiérarchie des informations.
• La facilité d'accès aux fonctionnalités principales.
• La clarté des messages d’erreur.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
L’interaction homme-machine (IHM) est une discipline
qui étudie la manière dont les utilisateurs interagissent
avec les systèmes numériques et les interfaces.
Son objectif est d’améliorer l’expérience utilisateur
(UX) en concevant des interfaces intuitives, efficaces et
accessibles.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
Modèles et théories de l’IHM
L’IHM repose sur plusieurs modèles et théories qui aident
à comprendre comment les utilisateurs perçoivent,
traitent et interagissent avec les interfaces numériques.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
1. Modèle du processeur Humain (Card, Moran et
Newell, 1983)
Ce modèle compare l’humain à un ordinateur et décrit
trois systèmes cognitifs influençant l’interaction :
•Le processeur perceptif : Traitement des stimuli
visuels et auditifs.
•Le processeur cognitif : Prise de décision et
mémoire.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
1. Modèle du processeur Humain (Card, Moran et
Newell, 1983)
•Le processeur moteur : Exécution des actions
physiques (cliquer, taper, déplacer la souris).

Application en IHM : Réduction du temps de réaction

en simplifiant les interfaces.
 Réponse visuelle, Composant Composant Vision, Audition, Odeur,
d'affichage de la
auditive, tactile sensoriel humain
machine Goût, Toucher

Composant cognitif humain

Composant CPU de la machine
Attention
Modèle Mémoire
Stockage de données d'interaction des Traitement
Traitement de données facteurs humains. d'informations
La prise de décision
Initiation à l'action
Éclairage
Niveau de bruit Composant de
Composant musculo-
Vibration périphérique d'entrée de
squelettique humain
machine
Qualité de l'air Environnement

Climat
Capteur, Commandes,
Interrupteurs Coordination motrice
Claviers, souris Action Performance
Écran tactile, aptique Manipulation d'objets
Entrée vocale
Une application interactive communique en temps réel avec un utilisateur
humain. Les échanges sont effectués par l'intermédiaire d'une interface,
qui prend en charge:
• la communication avec l'application informatique;
• la communication avec l'utilisateur humain;
• la traduction entre le monde de l'application et celui de
l'utilisateur.
L’approche cognitive: dans cette approche, l'interaction homme-application
est vue comme l'ensemble des phénomènes physiques et cognitifs qui
participent à la réalisation des tâches informatisées.

L’approche informatique: l'interaction est vue comme un assemblage de

composants logiciels et matériels qui permet l'accomplissement de tâches
avec le concours d'un ordinateur.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
2. Loi de Fitts (1954)
Cette loi prédit le temps nécessaire pour pointer un
élément en fonction de sa taille et de sa distance.
•Plus un bouton est grand et proche, plus il est facile
à atteindre.
•Un petit élément éloigné sera plus difficile à cliquer.
Application en IHM : Boutons d’action doivent être
suffisamment grands et placés stratégiquement.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
3. Loi de Hick-Hyman (1952)
Cette loi stipule que plus un utilisateur a de choix, plus
il met de temps à décider.
• Trop d’options augmentent la charge cognitive.
• Simplifier les choix améliore l’expérience utilisateur.

Application en IHM : Menus déroulants organisés,

nombre limité d’options par écran.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
4. Théorie de la charge cognitive (Sweller, 1988)
• Trop d’informations sur une interface surcharge la
mémoire de travail de l’utilisateur.
• Il est essentiel de structurer le contenu pour
faciliter la compréhension.

Application en IHM : Interfaces épurées, utilisation

d’icônes et de couleurs pour guider l’utilisateur.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
Facteurs humains et leurs implications sur la conception
des interfaces
Les facteurs humains sont des caractéristiques
physiologiques, psychologiques et cognitives qui
influencent la manière dont les utilisateurs interagissent
avec une interface.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
1. Perception visuelle et ergonomie de l’interface
• L’œil humain suit un schéma de lecture en F sur le
web.
• Importance du contraste, des couleurs et de la
typographie.
• Hiérarchisation de l’information avec des titres et
des espaces blancs.
Application en IHM : Interfaces adaptées aux habitudes
de lecture des utilisateurs.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
2. Mémoire et attention
• L’utilisateur moyen retient peu d’informations à
court terme.
• Un trop grand nombre d’éléments à l’écran peut
créer une surcharge cognitive.

Application en IHM : Interfaces épurées, menus bien

organisés, feedback immédiat.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
3. Erreurs humaines et tolérance aux fautes
• Les utilisateurs font inévitablement des erreurs.
• Une bonne interface doit les anticiper et offrir des
solutions.
Application en IHM :
✓ Messages d’erreur clairs et précis.
✓ Fonctionnalité "Annuler" pour éviter la frustration.
✓ Confirmation des actions critiques (exemple :
suppression d’un fichier).
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
Notions d’utilisabilité et d’accessibilité
L’utilisabilité et l’accessibilité sont deux critères essentiels en
IHM.
1. Utilisabilité
Selon la norme ISO 9241-11, une interface est utilisable si elle
est :
• Efficace : Permet d’atteindre un objectif facilement.
• Efficiente : Nécessite peu d’effort et de temps.
• Satisfaisante : Offre une bonne expérience utilisateur.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
Notions d’utilisabilité et d’accessibilité

Exemple : Un formulaire bien conçu doit être rapide à remplir,

sans informations inutiles.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
Notions d’utilisabilité et d’accessibilité
2. Accessibilité
L’accessibilité numérique garantit que les interfaces sont utilisables par
tous, y compris les personnes en situation de handicap.
• WCAG (Web Content Accessibility Guidelines) définit les bonnes
pratiques.
• Utilisation de contrastes adaptés, textes alternatifs pour les images,
navigation au clavier et synthèse vocale.

Exemple : Un site doit permettre la navigation sans souris pour les

personnes malvoyantes.
PRINCIPES DE L'INTERACTION HOMME-
MACHINE (IHM)
Notions d’utilisabilité et d’accessibilité

Exemple : Un site doit permettre la navigation sans

souris pour les personnes malvoyantes.
L’IHM repose sur des modèles cognitifs, des principes ergonomiques et
l’adaptation aux facteurs humains. Une bonne interface doit être :
• Intuitive et facile à apprendre.
• Accessible à tous les utilisateurs.
• Optimisée pour minimiser les erreurs et la charge cognitive.
En appliquant ces principes, on améliore l’expérience utilisateur (UX) et
rend leurs interfaces plus performantes et agréables à utiliser
Projet : Conception d’un prototype basé sur un Modèle IHM
Créer un prototype interactif en appliquant un modèle d'IHM (ex.
Fitts, Hick, Gestalt).
• Sélectionnez une plateforme (ex. site de réservation, app de
streaming).
• Appliquez les lois de Fitts et Hick pour optimiser l’interaction.
• Testez l’interface avec 5 utilisateurs et ajustez en fonction des
retours.
• Prototype (Figma, Adobe XD) + Rapport d’expérimentation.
ARCHITECTURE DE L'INFORMATION
ARCHITECTURE DE L'INFORMATION
L’architecture de l’information désigne l’organisation, la
structuration et la présentation de l’information dans un
système numérique afin de faciliter la navigation et
l’expérience utilisateur.
Elle vise à optimiser l’accessibilité, la compréhension et
l’utilisation des contenus.
ARCHITECTURE DE L'INFORMATION
Organisation et structuration de l’information pour
une navigation intuitive
1.Définition et objectifs
L’architecture de l’information permet d’organiser les contenus
de manière logique pour :
• Rendre l’information facilement accessible.
• Réduire la charge cognitive de l’utilisateur.
• Améliorer l’expérience utilisateur en simplifiant la navigation.
ARCHITECTURE DE L'INFORMATION
Organisation et structuration de l’information pour
une navigation intuitive
2. Principes fondamentaux
Pour garantir une navigation intuitive, l’architecture de
l’information repose sur plusieurs principes clés :
• Principe de findability (trouvabilité) : l’utilisateur doit
pouvoir retrouver une information rapidement.
• Principe de consistency (cohérence) : une structure et
un design homogènes facilitent l’apprentissage de
l’interface.
ARCHITECTURE DE L'INFORMATION
Organisation et structuration de l’information pour
une navigation intuitive
• Principe de hierarchy (hiérarchisation) : les contenus
doivent être organisés de manière claire et logique.
• Principe de flexibility (flexibilité) : permettre plusieurs
chemins pour accéder à l’information (menu principal,
moteur de recherche, filtres).
Ex: Sur un site e-commerce, les utilisateurs doivent pouvoir
naviguer par catégories de produits, par mots-clés ou via
un menu latéral.
ARCHITECTURE DE L'INFORMATION
Techniques de catégorisation et de hiérarchisation des
contenus
Une bonne catégorisation et hiérarchisation permet d’améliorer la
navigation et l’expérience utilisateur.
1. Types de structuration
Il existe plusieurs méthodes pour organiser l’information :
Structuration Hiérarchique (ou Arborescente)
• Modèle le plus courant (exemple : site web).
• Les pages sont organisées sous forme d’un menu à plusieurs
niveaux.
• Idéal pour les sites complexes avec beaucoup de contenus.
ARCHITECTURE DE L'INFORMATION
Ex :

Accueil
↳ Catégories
↳ Sous-catégories
↳ Pages produits
ARCHITECTURE DE L'INFORMATION
Structuration en Réseau
• Chaque contenu peut être relié à plusieurs autres.
• Utilisé dans les wikis et bases de connaissances.
• Facilite l’exploration par liens hypertextes.
Ex: Wikipedia, où chaque page est reliée à plusieurs autres via des
liens internes.
Structuration Séquentielle
• L’utilisateur suit un chemin prédéfini.
• Utilisé dans les parcours d’apprentissage, les formulaires en
plusieurs étapes.
Ex: Un formulaire d’inscription en plusieurs étapes (données
personnelles > adresse > paiement).
ARCHITECTURE DE L'INFORMATION
Structuration en Facettes (ou Tags)
• Chaque contenu peut être classé selon plusieurs critères
simultanés.
• Utilisé dans les sites e-commerce et bases de données.

Ex: Un produit peut être filtré par catégorie, prix, marque,

taille.
ARCHITECTURE DE L'INFORMATION
2. Techniques de Hiérarchisation
• Titre et sous-titres (H1, H2, H3) : Facilite la lecture et
l’indexation par les moteurs de recherche.
• Zoning et Wireframing : Planification visuelle de la
structure avant le développement.
• Balises et Métadonnées : Aident au référencement et à
l’organisation des informations.

Ex: Sur un blog, l’utilisation des catégories, tags et

menus améliore la recherche d’articles pertinents.
ARCHITECTURE DE L'INFORMATION
Conception de parcours utilisateur efficaces
Le parcours utilisateur (User Flow) désigne la façon dont un
utilisateur navigue dans une interface pour atteindre son objectif.
1. Les étapes du parcours utilisateur
• Identification du besoin : Comprendre les attentes des
utilisateurs.
• Définition des points de contact : Menus, boutons, liens,
moteurs de recherche.
• Création de wireframes et prototypes : Test des différentes
structures.
• Test et amélioration continue : Analyse des comportements et
ajustements.
ARCHITECTURE DE L'INFORMATION
Conception de parcours utilisateur efficaces
2. Méthodes de conception
• User Story Mapping : Visualisation des actions possibles
pour chaque type d’utilisateur.
• A/B Testing : Comparaison de plusieurs versions d’une
interface.
• Heatmaps : Analyse des zones les plus cliquées.
ARCHITECTURE DE L'INFORMATION
Conception de parcours utilisateur efficaces
3. Optimisation de la navigation
• Réduire le nombre d’étapes entre l’entrée et l’objectif
final.
• Offrir plusieurs chemins d’accès aux informations clés.
• Intégrer une barre de recherche efficace.
• Fournir des indicateurs visuels (progression, feedback
interactif).
Ex: Sur un site e-commerce, le parcours idéal pour un
utilisateur est : Rechercher un produit → Ajouter au
panier → Paiement rapide → Confirmation.
L’architecture de l’information est un pilier essentiel du design
d’interfaces. Une bonne organisation des contenus améliore la
navigation, réduit la charge cognitive et optimise l’expérience utilisateur.
Exercice : Tri de cartes
Organiser l’information d’un site en fonction des attentes des utilisateurs.
• Prenez un site web mal organisé.
• Identifiez les catégories de contenus clés.
• Faites un test de tri de cartes avec 5 utilisateurs.
• Analysez les résultats et proposez une nouvelle arborescence.
Livrable : Diagramme d’architecture de l’information.

Projet : Refonte de la navigation d’un site

Repenser la structure d’un site pour une meilleure navigation.
• Sélectionnez un site ayant une navigation complexe.
• Redéfinissez l’arborescence avec un menu optimisé.
• Créez un wireframe interactif.
Livrable : Wireframe + rapport d’analyse.
DESIGN CENTRÉ UTILISATEUR
DESIGN CENTRÉ UTILISATEUR
Le Design Centré Utilisateur (DCU) est une approche
qui place l’utilisateur au cœur du processus de
conception.
Son objectif est de concevoir des interfaces adaptées
aux besoins, aux attentes et aux comportements des
utilisateurs pour améliorer leur expérience et leur
satisfaction.
DESIGN CENTRÉ UTILISATEUR
Méthodologies de conception participative
Le Design participatif implique les utilisateurs dès les
premières étapes de la conception afin de s’assurer que les
solutions proposées correspondent à leurs besoins réels.

1. Principes clés du Design centré utilisateur

• Comprendre les besoins et comportements des utilisateurs.
• Impliquer les utilisateurs dans le processus de création.
• Itérer en testant et améliorant progressivement l’interface.
• Évaluer l’utilisabilité à chaque étape du projet.
DESIGN CENTRÉ UTILISATEUR
2. Approches de conception participative
2.1 Co-Design (Conception collaborative)
Les utilisateurs participent directement aux décisions de
conception à travers des ateliers interactifs.
Ex : Brainstorming avec des personas (profils types d’utilisateurs).
2.2 Focus Groups
Réunions de groupes représentatifs d’utilisateurs pour
discuter des attentes et évaluer des prototypes.
Ex : Échange avec des clients potentiels sur la navigation d’un
site e-commerce.
DESIGN CENTRÉ UTILISATEUR
2 Approches de conception participative
2.3 Design Thinking
Processus en 5 étapes :
• Empathie : Comprendre l’utilisateur.
• Définition : Identifier les problématiques.
• Idéation : Générer des solutions.
• Prototypage : Créer des versions testables.
• Test : Évaluer et améliorer la solution.
Ex : Développement d’une application mobile en organisant
des tests d’usage dès la première maquette.
DESIGN CENTRÉ UTILISATEUR
Techniques de recueil et d’analyse des besoins des
utilisateurs
Avant de concevoir une interface, il est essentiel de comprendre
les attentes des utilisateurs.
1. Méthodes de recueil des données
1.1 Entretiens utilisateurs
Discussion individuelle approfondie pour comprendre les
attentes et frustrations.
Ex : Entretien avec un utilisateur pour identifier ses difficultés
sur un site web.
DESIGN CENTRÉ UTILISATEUR
1.2 Questionnaires et sondages
Recueil de données quantitatives sur un échantillon large.
Ex : Enquête auprès d’utilisateurs pour connaître leurs
préférences en matière de design.
1.3 Observations et Eye-Tracking
Analyse des comportements réels des utilisateurs en situation
d’usage.
Ex : Suivi des clics et des mouvements oculaires sur une
interface web.
DESIGN CENTRÉ UTILISATEUR
2. Analyse des données collectées
Une fois les données collectées, plusieurs outils sont utilisés
pour structurer les résultats :
• Personas : Création de profils types d’utilisateurs.
• User Journeys : Cartographie du parcours utilisateur
pour
• identifier les points de friction.
• Affinity Mapping : Classification des retours utilisateurs
en catégories pour identifier des tendances.
Ex : En e-commerce, l’analyse des parcours utilisateurs peut révéler qu’un
trop grand nombre d’étapes dans le tunnel d’achat entraîne des abandons de
panier.
DESIGN CENTRÉ UTILISATEUR
3. Prototypage et tests utilisateurs
Le prototypage permet de visualiser, tester et améliorer une
interface avant son développement final.
1. Étapes du prototypage
Wireframes (Maquettes basses fidélité)
Dessins simples ou schémas des pages sans design détaillé.
Outils : Balsamiq, Sketch, Figma.
2. Maquettes haute fidélité
Version avancée du design intégrant couleurs, typographies et
interactions.
Outils : Adobe XD, Figma.
DESIGN CENTRÉ UTILISATEUR
3. Prototypes Interactifs
Simulations fonctionnelles des interactions utilisateur.
Outils : InVision, Axure.
DESIGN CENTRÉ UTILISATEUR
2. Tests utilisateurs
Les tests permettent d’évaluer l’ergonomie et la
compréhension de l’interface par les utilisateurs.

Tests d’utilisabilité
Observation des utilisateurs en train d’exécuter des
tâches spécifiques.
Ex : Tester si les utilisateurs trouvent facilement un
produit sur un site e-commerce.
DESIGN CENTRÉ UTILISATEUR
A/B Testing
Comparaison de deux versions d’une interface pour
voir laquelle est la plus efficace.
Ex : Tester deux placements de bouton d’achat pour
voir lequel génère le plus de conversions.

Heatmaps et Click Tracking

Analyse des zones les plus cliquées d’une interface.
Ex : Identifier les éléments ignorés sur une page web
Le Design Centré Utilisateur est une approche indispensable
pour créer des interfaces numériques performantes et
adaptées aux besoins réels des utilisateurs.
Exercice : Création de personas
Définir les utilisateurs types d’un produit digital.
• Identifiez un produit/service numérique (ex. application mobile).
• Faites des entretiens utilisateurs (ou utilisez des données fictives).
• Créez 3 personas détaillés avec leurs besoins et frustrations.
Livrable : Fiche persona.

Projet : Co-Design d’une application

Concevoir une interface avec des utilisateurs réels.
• Organisez un atelier de co-design.
• Identifiez les besoins utilisateurs.
• Concevez des maquettes UX.
Livrable : Présentation des résultats + prototype interactif.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
L’expérience utilisateur (UX) désigne la perception
globale qu’un utilisateur a d’un produit numérique (site
web, application, logiciel). Pour garantir une interface
intuitive, agréable et efficace, il est essentiel d’évaluer
l’UX en combinant des méthodes qualitatives et
quantitatives, en utilisant divers outils de mesure et en
analysant les retours utilisateurs pour améliorer
continuellement l’interface.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
1. Méthodes d’évaluation Qualitative et Quantitative
L’évaluation UX repose sur deux types d’approches
complémentaires :
Évaluation Qualitative (analyse subjective et profonde)
• Comprendre le comportement et les émotions des
utilisateurs.
• Basée sur l’observation et l’interprétation des
retours.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
Méthodes Qualitatives :
Tests utilisateurs (ou tests d’utilisabilité)
• Observation d’utilisateurs en situation réelle.
• Identification des points de friction.
Ex : Observer si un utilisateur trouve facilement un bouton de
paiement.
Entretiens et focus groups
• Discussions approfondies pour comprendre les motivations
et frustrations.
Ex : Interviewer des utilisateurs après l’utilisation d’une application mobile.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
Journaux d’utilisation
• Les utilisateurs documentent leur expérience au fil du
temps.
Ex : Étudier l’adoption d’une nouvelle interface sur plusieurs
semaines.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
Évaluation Quantitative (Données Chiffrées et
Objectives)
• Mesurer la performance et l’efficacité d’une interface.
• Basée sur des statistiques et des indicateurs précis.
Méthodes Quantitatives :
A/B Testing
• Comparaison de deux versions d’une interface pour voir
laquelle fonctionne le mieux.
Ex: Tester deux emplacements pour un bouton "Ajouter au
panier".
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
Heatmaps et Click Tracking
Analyse des zones les plus cliquées sur une page web.
Ex: Voir si les utilisateurs ignorent un bouton
important.
Taux de conversion
• Pourcentage d’utilisateurs ayant accompli une action
souhaitée (achat, inscription).
Ex : Évaluer si une interface e-commerce favorise
l’achat.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
Taux de rebond
•Pourcentage d’utilisateurs quittant le site après une
seule page.
Ex: Un taux élevé indique un manque d’engagement.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
2. Outils et techniques de mesure de la satisfaction
utilisateur
Indicateurs clés de performance (KPIs UX)
CSAT (Customer Satisfaction Score)
• Score de satisfaction donné par les utilisateurs après
interaction.
Ex : Questionnaire post-achat sur une boutique en
ligne.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
NPS (Net Promoter Score)
• Score basé sur la probabilité que l’utilisateur
recommande le produit.
Ex: Échelle de 0 à 10 demandant si l’utilisateur
recommanderait une application.
SUS (System Usability Scale)
• Score évaluant la facilité d’utilisation d’un système.
Ex : Questionnaire avec 10 affirmations sur l’utilisabilité
d’un site web.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
2. Outils d’Analyse UX
• Google Analytics : Analyse du comportement des
utilisateurs (taux de rebond, temps de session).
• Hotjar / Crazy Egg : Heatmaps, enregistrements de
sessions utilisateur.
• Lookback.io / UserTesting : Plateformes pour réaliser des
tests utilisateurs en direct.
• Optimal Workshop : Tests de tri de cartes pour structurer
l’information d’un site web.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
3. Analyse des retours utilisateurs pour l’amélioration
continue des interfaces
1.Collecte des retours
• Enquêtes de satisfaction post-utilisation.
• Analyse des avis et commentaires sur les stores
d’applications.
• Surveillance des tickets support pour détecter les
problèmes récurrents.
ÉVALUATION DE L'EXPÉRIENCE
UTILISATEUR (UX)
2. Analyse et actions correctives
• Identification des points bloquants
Ex : Un taux de rebond élevé peut signaler une navigation
compliquée.
• Proposition d’améliorations
Ex : Simplifier le parcours utilisateur en réduisant le nombre
d’étapes d’un formulaire.
• Test des solutions
Ex : Mettre en place un A/B test sur un nouvel agencement de
menu.
L’évaluation UX est un processus itératif et continu. En
combinant analyse qualitative et quantitative, en utilisant
des outils adaptés, et en écoutant les retours utilisateurs, il est
possible d’améliorer continuellement une interface pour
offrir une expérience fluide, intuitive et engageante
Exercice : Test d’utilisabilité
Mesurer l’expérience utilisateur sur une interface.
• Sélectionnez un site ou une application.
• Faites tester 3 tâches spécifiques (ex. créer un compte, acheter un produit).
• Mesurez le temps d’exécution, les erreurs, les retours utilisateurs.
Livrable : Rapport d’observation avec recommandations.

Projet : A/B Testing sur une Interface

Comparer deux versions d’une interface pour optimiser l’engagement.
• Prenez une interface (ex. formulaire, landing page).
• Créez deux versions avec une modification clé (ex. couleur du bouton).
• Faites un test A/B sur 5 utilisateurs et analysez les résultats.
Livrable : Rapport d’analyse comparative.
ERGONOMIE COGNITIVE ET PERCEPTION
ERGONOMIE COGNITIVE ET PERCEPTION

L’ergonomie cognitive étudie comment le cerveau

humain perçoit, traite et mémorise l’information dans
une interface numérique.
Son objectif est de concevoir des interfaces efficaces et
intuitives qui minimisent la charge cognitive et
favorisent une interaction fluide.
ERGONOMIE COGNITIVE ET PERCEPTION
1. Principes de la perception visuelle et leur application dans
le design
Comment l’œil et le cerveau perçoivent l’information?
L’utilisateur scanne une interface en fonction de schémas de lecture
naturels, influencés par la hiérarchie visuelle, la couleur et la
typographie.
Les schémas de lecture :
• Schéma en F → Les utilisateurs lisent les pages de gauche à droite et
du haut vers le bas.
• Schéma en Z → Utilisé pour les interfaces avec peu de texte
(exemple : landing pages).
ERGONOMIE COGNITIVE ET PERCEPTION
Les lois de la Gestalt (perception des formes)
• Loi de proximité : Les éléments proches sont perçus
comme liés.
• Loi de similarité : Les éléments de même couleur/forme
sont regroupés mentalement.
• Loi de clôture : L’utilisateur complète mentalement les
formes incomplètes.
• Loi de continuité : Le regard suit naturellement les lignes et
les flux d’une page.
ERGONOMIE COGNITIVE ET PERCEPTION
Contrastes et couleurs
• Contraste élevé pour faciliter la lisibilité (exemple : texte
foncé sur fond clair).
• Psychologie des couleurs pour influencer les émotions et
l’engagement.

Ex: Le rouge pour inciter à l’action (bouton "Acheter"), le bleu

pour la confiance (banques, réseaux sociaux).
ERGONOMIE COGNITIVE ET PERCEPTION
2. Charge cognitive et gestion de l’attention
Qu’est-ce que la charge cognitive ?
La charge cognitive correspond à l’effort mental nécessaire
pour traiter l’information d’une interface. Une charge
cognitive trop élevée = fatigue, confusion, abandon de
l’utilisateur.
Types de charge cognitive
• Charge cognitive intrinsèque : Difficulté inhérente à la
tâche.
Ex : Remplir un formulaire avec trop d’informations demandées.
ERGONOMIE COGNITIVE ET PERCEPTION
• Charge cognitive extrinsèque : Complexité inutile due à
une mauvaise interface.
Ex : Mauvaise organisation du contenu, menus complexes.
• Charge cognitive germane : Effort mental bénéfique, lié à
l’apprentissage et à la compréhension.
ERGONOMIE COGNITIVE ET PERCEPTION
Techniques de gestion de l’attention et de réduction de la charge
cognitive
• Minimalisme et hiérarchisation → Se concentrer sur l’essentiel.
• Progressive Disclosure → Afficher l’information au bon moment
(exemple : formulaire en plusieurs étapes).
• Utilisation d’icônes et de pictogrammes → Facilite la
compréhension rapide.
• Regroupement des informations → Diviser les contenus en blocs
logiques.
Ex: Un site e-commerce qui affiche un seul choix par étape pour ne pas
surcharger l’utilisateur.
ERGONOMIE COGNITIVE ET PERCEPTION
3. Conception d’interfaces facilitant l’apprentissage et la
mémorisation
1. Principes de l’apprentissage en UX
• Effet de primauté et de récence : L’utilisateur retient mieux
les premiers et derniers éléments d’une liste.
• Chunking (Regroupement) : Découper l’information en
petits blocs faciles à retenir.
• Mémoire spatiale et reconnaissance : L’utilisateur se
repère mieux avec une mise en page stable.
ERGONOMIE COGNITIVE ET PERCEPTION
2. Outils pour faciliter l’apprentissage
• Feedback immédiat : Messages d’erreur précis et guides
interactifs.
• Système de progression : Barre de chargement, étapes
d’un processus (exemple : inscription).
• Utilisation de métaphores visuelles : Icône d’enveloppe
pour les emails, corbeille pour la suppression.
L’ergonomie cognitive est un élément clé du design UX. En
appliquant les principes de la perception visuelle, de la
gestion de l’attention et de l’apprentissage, les interfaces
peuvent être plus intuitives, plus engageantes et plus
efficaces.
Exercice : Optimisation visuelle d’une interface
Appliquer les lois de la perception visuelle (Gestalt, contraste, couleur).
• Sélectionnez une page web mal conçue.
• Appliquez des principes ergonomiques (hiérarchie visuelle, alignement,
contrastes).
• Présentez avant/après.
Livrable : Capture d’écran + explication des changements.

Projet : Conception d’une interface éducative

Créer une interface favorisant l’apprentissage et la rétention d’informations.
• Concevoir une page web ou une app expliquant un concept complexe.
• Utiliser des schémas interactifs, animations et feedbacks.
Livrable : Prototype + tests utilisateurs.
NORMES ET STANDARDS EN ERGONOMIE
NORMES ET STANDARDS EN ERGONOMIE

L'ergonomie des interfaces repose sur des normes et

guidelines internationales garantissant des interactions
efficaces, intuitives et accessibles.

L’objectif est de minimiser les erreurs, améliorer la

satisfaction utilisateur et garantir l’accessibilité pour
tous.
NORMES ET STANDARDS EN ERGONOMIE
1. Présentation des normes ISO relatives à
l’Ergonomie des interfaces

ISO 9241 : Norme internationale sur l’Ergonomie des

Interactions Humain-Système

L’ISO 9241 est la principale norme ergonomique pour

le design d’interfaces numériques. Elle est divisée en
plusieurs parties :
NORMES ET STANDARDS EN ERGONOMIE
• ISO 9241-11 (Utilisabilité) : Un système est
"utilisable" s’il est efficace, efficient et satisfaisant.
• ISO 9241-110 (Principes de conception
ergonomique) : Énonce des règles de
conception (cohérence, flexibilité, retour
d’information).
• ISO 9241-151 (Design des interfaces web) :
Recommandations spécifiques pour les sites
internet et applications.
NORMES ET STANDARDS EN ERGONOMIE
Autres normes ISO pertinentes
• ISO 13407 → Processus de conception centré sur
l’utilisateur.
• ISO 30071-1 → Accessibilité des contenus
numériques.
• ISO 25010 → Qualité des logiciels et applications
web.
Ex : Un site e-commerce doit respecter ISO 9241-151 pour offrir une
navigation fluide et conforme aux attentes des utilisateurs.
NORMES ET STANDARDS EN ERGONOMIE
2. Bonnes pratiques et guidelines internationales
principales guidelines UX/UI
WCAG (Web Content Accessibility Guidelines) → Accessibilité numérique
• Perceptible : Contenus lisibles et compréhensibles.
• Opérable : Navigation fluide, alternative pour les
personnes en situation de handicap.
• Robuste : Compatibilité avec les technologies
d’assistance (lecteurs d’écran).
NORMES ET STANDARDS EN ERGONOMIE
Material Design (Google)
• Cohérence des éléments visuels et animations.
• Hiérarchisation claire de l’information.
• Interactions naturelles et intuitives.
Apple Human Interface Guidelines (HIG)
• Utilisation cohérente des icônes et gestuelles.
• Accent sur la lisibilité et la fluidité des animations.
• Expérience utilisateur harmonieuse sur tous les appareils
Apple.
L’ergonomie des interfaces repose sur des normes ISO, des
guidelines internationales et des bonnes pratiques UX.
L’analyse de cas concrets montre l’importance d’une
approche centrée sur l’utilisateur pour garantir des
expériences optimales.
Exercice : Évaluation d’une Interface selon les normes ISO
Vérifier si un site respecte les normes ISO 9241 et les WCAG.
• Sélectionnez un site web existant.
• Évaluez les critères de lisibilité, navigation, accessibilité.
• Notez les points de conformité et de non-conformité.
Livrable : Tableau d’audit UX.

Projet : Refonte accessibilité d’un site

Adapter une interface aux normes d’accessibilité numérique.
• Analyser un site web selon les WCAG 2.1.
• Modifier les couleurs, textes alternatifs, navigation clavier.
• Tester avec un lecteur d’écran.
Livrable : Site refondu + test d’accessibilité.
Projet final : Amélioration de l’expérience utilisateur d'une plateforme de formation en ligne.
Ce projet a pour objectif de concevoir et/ou améliorer une plateforme e-learning en
appliquant les principes de l’ergonomie des interfaces et de l’expérience utilisateur.

Contexte et problématique
De nombreuses plateformes de formation en ligne présentent des problèmes
d’ergonomie et d’accessibilité, ce qui nuit à l’apprentissage et à l’engagement des
utilisateurs.
L’objectif est de concevoir une interface intuitive, ergonomique et efficace permettant
aux étudiants et formateurs de naviguer facilement et d’apprendre dans de bonnes
conditions.

Étapes du projet
• Analyse et compréhension des besoins
Objectif : Identifier les attentes et difficultés des utilisateurs.
• Étudier les problèmes rencontrés sur une plateforme existante.
• Réaliser un audit ergonomique et identifier les points d’amélioration.
• Créer des personas utilisateurs (ex. : étudiant, formateur, administrateur).
 • Conception de l’architecture de l’information
Objectif : Organiser les contenus de manière intuitive pour faciliter la navigation.
• Réaliser une analyse de l’existant et proposer une nouvelle arborescence.
• Effectuer un test de tri de cartes avec des utilisateurs pour optimiser l’organisation des menus.

• Design Centré Utilisateur

Objectif : Concevoir une interface intuitive respectant les principes de l’IHM.
• Appliquer les lois de Fitts et de Hick pour optimiser les boutons et menus.
• Créer des wireframes de la plateforme (maquettes basse fidélité).

• Ergonomie cognitive et gestion de l’attention

Objectif : Réduire la charge cognitive pour faciliter l’apprentissage.
• Intégrer des principes de perception visuelle (lois de Gestalt, contraste, hiérarchie).
• Simplifier la navigation en appliquant l’affichage progressif des contenus.

• Accessibilité et Normes
Objectif : Adapter la plateforme pour une accessibilité optimale.
• Vérifier la conformité WCAG (contrastes, navigation clavier, alternatives textuelles).
• Appliquer les normes ISO 9241 pour l’ergonomie des interfaces.
 • Prototypage et tests utilisateurs
Objectif : Tester et valider les améliorations avant le développement final.
• Réaliser des tests d’utilisabilité avec 5 à 10 utilisateurs.
• Effectuer un A/B testing entre l’ancienne et la nouvelle version.

• Présentation
Objectif : Défendre les choix ergonomiques et recueillir des retours critiques.
• Préparer une présentation.
• Résultat attendu: Une plateforme e-learning ergonomique, accessible et
optimisée, améliorant l’expérience d’apprentissage des étudiants et
l’efficacité des formateurs
FIN DU COURS