19/02/2025

UX/UI
RIAHI INES A.U. 2024 :2025
FAOUZI MOUSSA

DÉFINIR L’EXPÉRIENCE UTILISATEUR

1
 19/02/2025

INTRODUCTION

LE WEB EN CHIFFRES
• Le nombre d’internautes/mobinautes flambe en une petite période. En dix ans, le nombre a bondi de 166%.
UTILISATEURS
POPULATION UTILISATEURS DE UTILISATEURS
RÉSEAUX
TOTALE SMARTPHONE INTERNET
SOCIAUX

7.83 BILLION 5.22 BILLION 4.66 BILLION 4.20 BILLION

• Le nord de l’Europe est considéré la région la

plus connectée avec 95% des utilisateurs.
• Une augmentation en Amérique du Nord a été
notée (95% contre 88% l’année dernière).
• La région la plus isolée est l’Afrique Centrale
avec un taux de pénétration très faible (12%).
4

2
 19/02/2025

LE WEB EN CHIFFRES
• Temps moyen passé par un utilisateur sur internet dans le monde: la moyenne est de 6h, un temps considéré assez stable.
• Le temps passé sur mobile (3 h 14) progresse au détriment de celui passé sur un ordinateur (3 h 28).

Temps moyen passé par un utilisateur sur Internet

500

375

250

125

0
2014 2015 2016 2017 2018 2019
Temps Total Sur mobile Sur Ordinateur

Réseaux Equipements

LE WEB EN CHIFFRES sociaux connectés

Publicité E-commerce
Les utilisations principales du web

Musique Banque

La recherche des informations (63%) Le contact avec ses amis et familles (56.3%)

Le suivi des actualités et des événements

La recherche des tutos (51,9 %)
(55,6 %)

La vision des vidéos, des émissions de

télévision et des films (51,7 %)

—> Besoins d’optimisation en termes de développement et d’interfaces homme machine

—> Besoin de prise en compte de l’expérience de l’utilisateur pour un meilleur rendu
6

3
 19/02/2025

L’UX EN
CHIFFRES

USER INTERFACE, USER EXPERIENCE UI/UX

4
 19/02/2025

INTERFACE HOMME MACHINE?

Interaction Homme Machine?

Expérience utilisateur?
• Quelle différence faitesvous entre interface, expérience et
interaction??????

• Qu’est ce qu’une interface Homme Machine?

Matériels et logiciels permettant à un utilisateur d’interagir avecun

système informatique.

▪ Qu’est ce qu’une interaction Homme Machine?

Discipline qui porte sur la conception, l’évaluation et la mise enœuvre
de systèmes informatiques interactifs. (ACM SIGCHI, 1992)

Se réfère à l’ensemble des phénomènes cognitifs, matériels, logiciels et

sociaux mis en jeu dans l’accomplissement des tâches sur support
matériel (Calvary, 2002)

10

10

5
 19/02/2025

INTERFACE-INTERACTIONS: EXEMPLES

La poignée de porte est une interface

qui offre deux interactions :
L’ouverture et la fermeture de la porte

L’interface c’est le dispositif physique : La poignée de la porte

11

11

S’AGIT IL D’UNE BONNE OU D’UNE MAUVAISE INTERFACE?

Quel est le type de formulaire le plus ergonomique?

12

12

6
 19/02/2025

QUESTIONS DE QUALITÉ D’IHM

CONSÉQUENCES D’UNE MAUVAISE CONCEPTION D’INTERFACE?

• Baisse de productivité
• Ennui, anxiété, frustration
• Rejet de l’interface par les utilisateurs
• Coût d’apprentissage
• Coût de maintenance du logiciel
• Erreurs-> accidents mortels

13

13

PRISE EN COMPTE DE L’UTILISATEUR

• Approche technocentrée
• centrée sur la machine et ses possibilités
• l’utilisateur doit s’adapter à la machine

• Approche anthropocentrée
• centrée sur l’homme et ses besoins
• la machine doit s’adapter à l’utilisateur

14

14

7
 19/02/2025

ADAPTER L’IHM (1)

• Caractéristiques de l’utilisateur
• différences physiques
• âge
• handicap
• connaissances et expériences
• dans le domaine de la tâche (novice, expert, professionnel)
• en informatique, sur le système (usage occasionnel, quotidien)
• caractéristiques psychologiques
• visuel/auditif, logique/intuitif, analytique/synthétique…
• caractéristiques socio-culturelles
• sens d'écriture
• format des dates
• signification des icônes, des couleurs

13

15

ADAPTER L’IHM (2)

• Contexte
• grand public (proposer une prise en main immédiate)
• loisirs (rendre le produit attrayant)
• industrie (augmenter la productivité)
• systèmes critiques (assurer un risque zéro)
• Caractéristiques de la tâche
• répétitive, régulière, occasionnelle, sensible aux modificationsde
l'environnement, contrainte par le temps, risquée...
• Contraintes techniques
• plate-forme
• taille mémoire
• écran, capteurs, effecteurs
• réutilisation de code ancien
14

16

8
 19/02/2025

IHM ET PROGRAMMATION

• La plupart des applications informatiques sont interactives

• L’IHM est souvent un élément clé du logiciel (en + ou -)

• La conception de l'interaction représente plus de 50% du coût

de développement

• L’IHM peut représenter 80% du code d’une application

• elle peut être modifiée/reconstruite de multiples fois
• importance de l’indépendance interface / cœur du système
17

17

MISE EN ŒUVRE DE LOGICIELS INTERACTIFS

• C’est
• difficile, long, coûteux
• nécessite une approche précoce, méthodique, itérative,
expérimentale
• Ce n'est pas
• une opération esthétique de l'écran
• une affaire de goût, de bon sens, d’intuition
• Il faut prendre en compte l’IHM dès le début
• Méthode ?
• pas toujours de solution prête à l'emploi
• des points de repères théoriques, expérimentaux, des savoir-
faire, des questionnements
• trouver des compromis
18

18

9
 19/02/2025

EVOLUTION HISTORIQUE
• Avant (1950 à 1980)
• Utilisateurs, des informaticiens, ingénieurs
• Traitement en lot
• Ordinateur réservé à une clientèle élitiste
• Utilisateurs esclaves du système

• Après (1980 à maintenant)

• Utilisateurs, des novices en informatique
• Systèmes hautement interactifs
• Ordinateur partout
• Utilisateurs maîtres du système

17

19

ÉVOLUTION DES INTERFACES (1)

• Systèmes plus conviviaux, faciles à comprendre et à
utiliser
• Interfaces graphiques
• manipulation directe
• action directe pour les objets représentés à l’écran
• WYSIWYG
• What You See Is What You Get
• ACAI : Affichage Conforme A l'Impression

20

20

10
 19/02/2025

ÉVOLUTION DES INTERFACES (2)

• Dispositifs de sortie
• écrans
• cf. visualisation d’informations
• vision 3D
• imprimantes
• son
• synthèse vocale
• Spatialisé
• si l’annonce semble devant, elle concerne l’avenir
• si elle est derrière, elle concerne le passé
• retour tactile, retour de force

21

21

SORTIE : VISUALISATION
D’INFORMATIONS

22

22

11
 19/02/2025

ÉVOLUTION DES INTERFACES (3)

• Dispositifs d’entrée
• clavier (azerty, Dvorak)
• souris, trackball, joystick, pavé tactile
• reconnaissance de parole
• écran tactile
• entrée visuelle
• 2D : écran tactiles, crayons optiques
• reconnaissance de tracé
• reconnaissance d’écriture
• 3D : capteurs de position et de direction

23

23

ÉVOLUTION DES INTERFACES (4)

• Multimédia
• combinaison de types de données / de supports de données
• texte, graphique, animation, son, vidéo
• Multimodalité
• combinaison de moyens d’entrée
• « mets-ça ici »
• interaction à deux mains

24

24

12
 19/02/2025

ÉVOLUTION DES INTERFACES (5)

• Réalité virtuelle
•simulation d’un environnement dans lequel le
sujet a l'impression d'évoluer (avatar)
• immersion dans un monde 3D
• Réalité augmentée, réalité mixte
• superposition de l'image d'un modèle virtuel sur une image
de la réalité en temps réel
• le virtuel est intégré dans le réel
• Réalité diminuée
• suppression d’un élément de l’image sur une image de la
réalité en temps réel

25

25

ÉVOLUTION DES INTERFACES (6)

• Interfaces tangibles
• association d’objets réels et numériques pour une
interaction plus simple et intuitive
• Réalité cliquable
• manipulation virtuelle du monde réel
• désignation d’une zone du monde réel par un geste

26

26

13
 19/02/2025

ÉVOLUTION DES INTERFACES (7)

• Informatique diffuse, nomade, ubiquitaire,

vestimentaire, systèmes pervasifs
• informatique présente dans les objets du quotidien
• problème de compatibilité entre les différents dispositifs
• Plateforme
• contraintes techniques
• bande passante
• taille de l’écran, mémoire, espace de stockage…

27

27

THÈMES INFLUENÇANT LES IHM

Human H2: Language communication and interaction:
Le langage est un moyen de communication.
On étudie les aspects linguistiques: les moyens les plus
H2 adaptés pour faire communiquer utilisateur et machine. Computer

H1 H1: Human Information Processing: H3

Comment l’utilisateur perçoit, traite,
mémorise, apprend l’information et
agit en conséquence?
H3: Ergonomics:
Les caractéristiques anthropométriques et physiologiques de l’individu. Ces aspects
portent sur:
• La disposition des informations et des dispositifs d’interaction.
• Les limites du système de perception et du système cognitif.
• La prise en compte des questions de fatigue, d’attention, de stress, de santé des
utilisateurs dans la conception.
28

28

14
 19/02/2025

THÈMES INFLUENÇANT LES IHM

Human
C1

C1: Input and Output devices:

Volets techniques du développement des dispositifs
d’entrée et de sortie.
C2
C3: Dialogue Genre:
Etude des concepts sous jacentes aux dialogues
• Métaphores de contenu, métaphore d’interaction, etc.
C2: Dialogue techniques:
C3
Etude des caractéristiques
• Des dispositifs d’entrée (clavier, souris, tablette/stylo,
reconnaissance écriture et geste, reconnaissance parole)
• Des dispositifs de sortie.
• Des techniques de dialogues (menus, icones, formulaires, etc.) 27

29

THÈMES INFLUENÇANT LES IHM

Human Computer

C5
C4

C4: Computer Graphics:

Concepts de visualisation graphique à étudier tels que 2D,
3D, etc.
C5: DialogueArchitecture:
Architecture de dialogue: étude des modèles de dialogues,
analyse des systèmes de fenêtrage existants, des standards,
etc.
30

30

15
 19/02/2025

THÈMES INFLUENÇANT LES IHM

U1: Social organization & work (contexte d’utilisation)
Human Computer

L’utilisateur interagit avec la machine dans un contexte de

travail et un contexte social.
On étudie donc:
• La manière dont l’interaction affecte les pratiques de
travail.
• La manière dont ces pratiquent conditionnent et
modifient l’interaction.
31

31

THÈMES INFLUENÇANT LES IHM

U2: Application area
Human Computer

Les types d’application en IHM

- Interfaces d’éditions.
- De communication
- De conception
- Multimedias
- Contrôle de processus.

32

32

16
 19/02/2025

THÈMES INFLUENÇANT LES IHM

U3: Human machine & adaptation
Human Computer

• Adapter l’utilisateur (formations, tutoriels, etc.)

• Adapter l’interface et les moyens d’interaction.
• Adapter les deux.

33

33

THÈMES INFLUENÇANT LES IHM

U3: Human machine & adaptation

U2: Applicationarea U1: Social organization & work

C1: Input and Output devices

H1: Human Information Processing C2: Dialogue techniques

Human Computer
• Etude du processus de conception et de
développement d’une IHM: conception,
réalisation et évaluation

H2: Language
communication
and interaction C3: Dialogue Genre
• Developement process D C4: Computer Graphics
H3: Ergonomics C5: Dialogue Architecture

34

34

17
 19/02/2025

DÉFINITION DE L’UX DESIGN

• UX Design = User Experience Design ou Design de l’Expérience Utilisateur

• Il s’agit de la conception de l’utilisation de quelque chose, en fonction de
l’expérience et des besoins de quelqu’un.
• Objectif : Aider l’utilisateur à atteindre son objectif et à lui faire adopter le système
• En moyenne, les feedbacks de 5 utilisateurs peuvent régler 85% des problèmes.

35

35

DÉFINITION DE L’UX DESIGN

Humain Penser Utilisateur

(utile, simple
Attirant rapide, esthétique)

Penser Design Penser

Technique Marketing Marketing
(créativité, (cible, budget,
Réalisable Durable innovation, promesse,
performance, choix marché)
technologique)

36

36

18
 19/02/2025

LES 7 CRITÈRES DE L’UX DESIGN

• UTILE - Grâce à des informations et fonctionnalités utiles et non
superflues
• UTILISABLE - Le site et les fonctionnalités proposées doivent Navigable trouvable
être simples d’utilisation
• DESIRABLE - Le design doit donner envie à l’internaute de
naviguer sur le site, évoquer une image et des valeurs qui lui
parle (design émotionnel) Utilisable Crédible Utile

• NAVIGEABLE - La navigation doit être simple et fluide depuis

n’importe quel device. La navigation mobile est donc un critère
très important.
Accessible désirable
• TROUVABLE - Le référencement doit permettre aux internautes
de trouver facilement le site depuis les moteurs de recherche
• ACCESSIBLE - Pour les personnes ayant des handicaps
• CREDIBLE - Une bonne expérience de l’utilisateur renforce la
qualité perçue d’un site web

37

37

UNE ATTITUDE TOURNÉE VERS

L’UTILISATEUR
Quelques exemples de l’UX Design

Répond aux attentes des

consommateurs / packaging
Répond aux valeurs plus ergonomique
de la marque
Image soignée /
Vintage

Deux méthodes d’achat distinctes qui répondent

au mieux aux attentes des consommateurs

36
38

38

19
 19/02/2025

UI VS UX : MÉTIERS
Basé sur l’humain

Recherche Design Front End Back End

User Expérience UI Developer Application

Designer Developer

Basé sur la technologie

37
39

39

UI VS UX : MÉTIERS
Le designer UX (user eXperience) et le designer UI (user interface) sont une évolution et une spécialisation récente du métier de
web designer. Le premier s’intéresse à l’expérience utilisateur, le second à la conception de l’interface produit.

UI Designer

Clarté de la
Lien entre homme et Conception générale Optimisation des
navigation et la
machine de l’interface parcours
qualité du contenu

UX Designer

Analyser et répondre Rendre le site

Etudier l’émotion des
Insérer un scénario aux besoins des accessible, crédible et
internautes
utilisateurs productif

40
38

40

20
 19/02/2025

UI/UX DESIGNER VS DÉVELOPPEUR WEB: MÉTIERS

• La principale différence entre designer et développeur Web est que le Designer (UX ou UI) crée l'apparence de la solution
digitale tandis que le développeur se charge de la programmation pour développer la solution.
• Un Designer Web doit donc être imaginatif, créatif et posséder d'excellentes compétences en communication, en plus des
compétences techniques en conception Web, alors qu'un développeur Web doit avoir un esprit logique et bien connaître les
divers langages de programmation et les outils de gestion de code source.

Le développeur

Le designer

41
39

41

UI/UX DESIGNER VS DÉVELOPPEUR WEB: MÉTIERS

Un objectif commun
• Les designers et les développeurs travaillent pour créer une application qui séduit et attire des utilisateurs.

• Un site a besoin de bien paraître et fonctionner correctement.

• Les couleurs et les images doivent refléter la marque, et l’interface doit encourager les visiteurs à réaliser une
action souhaitée.

• La délimitation entre les designers et les développeurs est de plus en plus floue —> Le futur de ce domaine
comprend le métier de Designer / Développeur Web.

42
39

42

21
 19/02/2025

UI/UX DESIGNER VS DÉVELOPPEUR WEB: MÉTIERS

Travailler ensemble

Pour éviter les soucis de communication Entre Designer et Développeur:

• Éviter le jargon.
• Montrer comment les choses devraient être ou fonctionner
• Être ouvert aux idées. Les designers doivent accepter les concepts de design des
développeurs, et les développeurs doivent être ouverts aux idées d’expérience utilisateur
des designers
• Apprendre la façon dont l’autre partie du processus de création web fonctionne.

43
39

43

UI VS UX

Analyse des données

Structuration du site
Tests utilisateurs UX
Satisfaction des utilisateurs
Schémas
Prototypes
Collaboration

Périphériques de sorties
Boutons d’action
Dispositifs de saisie
Outils
UI
Contrôle
Design Visuel
Contenu

44
42

44

22
 19/02/2025

UX/UI : MAÎTRISER L’EXPÉRIENCE [email protected]

UTILISATEUR [email protected]

UX Design = La conception de l’utilisation de quelque UI Design = User Interface Design

chose, en fonction de l’expérience et des besoins de
On appelle interface utilisateur l'ensemble des mécanismes,
quelqu’un.
matériels ou logiciels, qui permettent à un utilisateur
Objectif : Aider l’utilisateur à atteindre son objectif et à lui
d'interagir avec un système informatique.
faire adopter le système
Objectif : Faciliter la communication avec l’utilisateur
En moyenne, les feedbacks de 5 utilisateurs peuvent régler
85% des problèmes.

1
 19/02/2025

EXPÉRIENCE DE L’UTILISATEUR
DÉFINITION

Toute expérience vécue en interaction avec un dispositif,

digital ou non, c’est de l’UX !

L’eXpérience Utilisateur vécue dans la globalité de

l’interaction.

UX: PROCESSUS CENTRÉ UTILISATEUR

La conception

Ergonomie Modèle du Processeur

Vise à adapter les outils, les environnements et les
systèmes aux capacités physiques et mentales des
Humain (MPH)
utilisateurs : Le modèle du processeur humain (MPH) décrit le
fonctionnement cognitif de l'humain comme un ensemble
de trois systèmes :
1.Le processeur perceptif (vision, audition, etc.),
• Ergonomie physique (posture, fatigue, sécurité)
• Ergonomie cognitive (perception, mémoire, 2.Le processeur cognitif (prise de décision, mémoire),
3.Le processeur moteur (mouvements, actions).
prise de décision)
Utilisé en IHM pour optimiser les interactions homme-
• Ergonomie organisationnelle (flux de travail,
machine en tenant compte des limites et capacités
coordination d'équipe)
humaines.

Les lois
La loi de Fitts, essentielle en ergonomie et IHM,
relie le temps nécessaire pour atteindre une cible
à sa taille et à la distance à parcourir. Utilisée en
design d'interfaces, elle optimise l'accessibilité des
éléments interactifs en favorisant des cibles
grandes, proches et faciles à pointer. Elle
améliore ainsi l’ergonomie, la productivité et
l’expérience utilisateur.
L’évaluation 4

2
 19/02/2025

PROCESSUS CENTRÉ UTILISATEUR

ERGONOMIE COGNITIVE

La science trouve, l’industrie applique, l’homme se conforme

Point de vue centré sur machine
Prédominance facteur technique

Les gens proposent, la science étudie, la technologie se conforme

Point de vue centré utilisateur

Prédominance facteur humain

1945, l’ergonomie étudie l’adaptation de la machine à l’homme (prédominance d’une ergonomie physiologique)
1970, l’ergonomie cognitive étudie l’adaptation de la machine aux caractéristiques du fonctionnement cognitif des utilisateurs.

PROCESSUS CENTRÉE UTILISATEUR

ERGONOMIE COGNITIVE

Ergonomie cognitive
vise à adapter les postes de travail aux caractéristiques physiologiques
et psychologiques de la personne

Ergonomie logicielle
vise à adapter les logiciels à l’utilisateur pour diminuer les erreurs, le
temps d'apprentissage rendre le logiciel le plus facilement utilisable

3
 19/02/2025

PROCESSUS CENTRÉ UTILISATEUR

ERGONOMIE COGNITIVE

Critères de base de conception des IHM ergonomiques:

- Utilité: Le produit satisfait des contraintes fonctionnelles et opérationnelles.

- Utilisabilité: qualité de l’interaction c’est-à-dire la facilité d’apprentissage et d’utilisation.

(ISO 98)
• Utilisabilité: qualité d’utilisation c’est-à-dire efficacité, efficience et satisfaction avec laquelle des
utilisateurs identifiés atteignent des objectifs définis dans un contexte d’utilisation spécifié.

PROCESSUS CENTRÉ UTILISATEUR

ERGONOMIE COGNITIVE

Pour concevoir une bonne IHM

Comprendre le système du traitement de l’information par l’homme.
Comprendre comment on perçoit et comment on y réagit.
Les limites de notre performance dans la réalisation des tâches.

Utiliser ses connaissances pour concevoir une bonne IHM.

4
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

LES MÉTHODES DE CONCEPTION

Norme ISO 13407 : 5 principes

• Analyse des besoins des utilisateurs, de leurs tâches et de leur contexte de travail.
• Participation active de ces utilisateurs à la conception.
• Répartition appropriée des fonctions entre les utilisateurs et la technologie.
• Démarche itérative de conception.
• Intervention d’une équipe de conception multi disciplinaire.

Principe:
L’utilisateur et sa tâche prioritaires sur le fonctionnement du système
=> Distinguer la logique d’utilisation et la logique de fonctionnement.

PROCESSUS CENTRÉE UTILISATEUR

LES MÉTHODES D’ÉVALUATION

Objectifs de l’évaluation
• Analyse de l’utilisabilité et de l’utilité du système : points forts et points faibles.
• Recommandations de reconception.
• Evaluation formative / Conception itérative Processus itératif de conception - évaluation

Prototype

Concevoir Evaluer

Résultats utilité / utilisabilité

10

10

5
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

LES MÉTHODES D’ÉVALUATION : EVALUER QUOI?
Utilisabilité : norme ISO 9241

degré selon lequel un produit peut être utilisé, par des utilisateurs
identifiés, pour atteindre des buts définis avec efficacité, efficience et
satisfaction, dans un contexte d’utilisation spécifié

Critères de l’utilisabilité

• efficacité: atteinte du résultat prévu

• efficience: consommation d’un minimum de ressources
• satisfaction de l’utilisateur: confort et évaluation subjective
• facilité d’apprentissage
• facilité d’appropriation: prise en main du logiciel
• facilité d’utilisation
• fiabilité: pas ou peu d’erreurs d’utilisation

11

11

PROCESSUS CENTRÉE UTILISATEUR

LES MÉTHODES D’ÉVALUATION : EVALUER QUAND?

En cours de conception
conception itérative de maquettes/prototypes conception centrée
utilisateur
évaluation formative
En cours de réalisation
méthodes classiques de contrôle qualité
En cours de diffusion
satisfaction des utilisateurs incidents critiques
Avant un achat
comparaison de logiciels évaluation sommative

12

12

6
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

LES MÉTHODES D’ÉVALUATION

• Évaluation expérimentale
• observation et recueil de données
• entretiens, questionnaires

• Évaluation analytique
• scénario d’utilisation, jugements d’experts
• utilisation de référents
• évaluations heuristiques
• critères d’évaluation ergonomique

13

13

PROCESSUS CENTRÉE UTILISATEUR

LES MÉTHODES D’ÉVALUATION : JUGEMENT D’EXPERTS

Caractéristiques
nécessité d’avoir plusieurs experts en début de projet pour évaluer des produits
existants utiles pour éliminer les grosses erreurs
nécessité de disposer de scénarios d’utilisation du système et d’une
description des futurs utilisateurs

Mais...
les experts ne peuvent pas remplacer complètement les utilisateurs
les experts ont souvent des domaines privilégiés qui constituent des biais d’évaluation

14

14

7
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

LES MÉTHODES D’ÉVALUATION : JUGEMENT D’EXPERTS

7 règles d’or de
10 heuristiques
Coutaz
Nielson

Performance du couple 8 critères de

ordinateur utilisateur Johnson

5 critères de 9 critères
Shneiderman de Bastien
et Scapin
15

15

PROCESSUS CENTRÉE UTILISATEUR

LE MODÈLE DU PROCESSEUR HUMAIN

Le MPH décrit un cadre fédérateur aux diverses connaissances en psychologie cognitive.

Le MPH décrit le système de traitement de l’information par l’homme.

Système sensoriel Temps du cycle

Système Moteur
Processeur
Processeur
Mémoire
Processeur

Système Cognitif
Processeur
Mémoire
Mémoire

Persistance Capacité
16

16

8
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

MPH: ZOOM SUR MODÈLE SENSORIEL

Représentation de
Mémoire sensorielle
l’information
Visuelle Auditive physique

Yeux Processeur
sensoriel
Oreilles

17

17

Processus centrée utilisateur

Le MPH : Zoom sur le modèle cognitif

Perception

Z
Z -------------------- -
-
Information brute
non reconnue

Filtre cognitif
Lettre reconnue
Z

19
Interprétation

18

9
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

LE MPH : ZOOM SUR LE MODÈLE COGNITIF

Mémoire à long terme

Mémoire à long terme
Mémoire à court terme

Processeur Processeur
Cognitif Moteur

Bras
Poignet
Utiliser le contenu du MCT et MLT: Doigts, etc.
-Prendre des décisions
-Planifier des actions du système moteur

Connaissances de faits et procédures organisés en un

ensemble d’association et de mnémes

19

PROCESSUS CENTRÉE UTILISATEUR

LE MPH : ZOOM SUR LE MODÈLE COGNITIF

Mnème (chunk) = unité cognitive symbolique

Une seule unité d’information (une lettre, un nombre, un symbole graphique, etc.)
Associations d’unités (mots, numéros de téléphone, etc.)

Chunking
créer des associations d’unités permet de conserver plus l’information en mémoire
Exemple: 1284 vs 1 2 8 4
Exemple : SNCFT

Mémoire à Long Terme (MLT)

- Capacité de stockage est illimité
- Utilisée pour la compréhension et la réalisation des tâches

21

20

10
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

LE MPH : ZOOM SUR LE MODÈLE COGNITIF

Représentation produite par le système sensoriel

Produits de réflexions partielles
Capacité 7+-2mnémes 22

Persistance = 3mnèmes

21

PROCESSUS CENTRÉE UTILISATEUR

LE MPH : ZOOM SUR LE MODÈLE COGNITIF

Pourquoi oublie t on?

- On oublie car on n’a pas su enregistrer l’information
- Pas su retrouver l’information
- Problème de stockage

Interférence:
Difficulté de se souvenir d’un mnéme si des mnèmes similaires sont actives
- Un item en cache un autre
* une information apprise antérieurement réduit l’aptitude à retrouver une nouvelle connaissance.
* Une information récemment apprise réduit l’aptitude à retrouver une ancienne connaissance.

Discrimination:
Difficulté de retrouver un mnème si plusieurs correspondent aux critères de recherche.

23

22

11
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

LE MPH : ZOOM SUR LE MODÈLE COGNITIF

La mémoire de travail peut contenir

lundi
7 items ± 3 mardi
mercredi
jeudi
vendredi
selon individu, fatigue... samedi
dimanche

Risques
l’utilisateur oublie, perd du temps en recherches
particulièrement pour les logiciels à utilisation peu fréquente
Solutions
limiter le nombre d’objets à mémoriser à 7
pas d’information inutile
établir des liens entre éléments via couleur, format,
emplacement…

24

33

23

ZOOM SUR LE SYSTÈME COGNITIF

MÉMOIRE : LONG TERME VS. COURT TERME

 Mémoire à court  Mémoire à long terme

terme : : caractéristiques
caractéristiques  capacité infinie
 mémorisation 7 items  accès associatif
 accès séquentiel  durée de stockage illimitée
 oubli :
15 à 30 secondes
 regroupement par motifs
 visuels
 Solutions pour
 lettres, chiffres, mots bénéficier de la mémoire à
 formes, taille long terme
 couleur, localisation
 favoriser la répétition, la régularité,
 acoustiques la cohérence
 son de début, rime  s’appuyer sur les éléments
 nombre de syllabes… constants, les points communs
1—
0

24

12
 19/02/2025

PROCESSUS CENTRÉE UTILISATEUR

LE MPH : ZOOM SUR LE MODÈLE COGNITIF

25

PROCESSUS CENTRÉE UTILISATEUR

LE MPH : ZOOM SUR LE SYSTÈME MOTEUR

Contrôler les mouvements du corps

Mémoire à long terme Composé de micro mouvements discrets
Cycle=70ms
Mémoire à court terme

Processeur Processeur
Cognitif moteur

Bras
Poignet
Doigts, etc.

26

26

13
 19/02/2025

LES LOIS EN UX
LOI DE FITT’S
Loi de Fitts:
Un modèle permettant d’évaluer le temps nécessaire pour pointer/Clicker sur un objet à l’écran (à l’aide d’une
Souris ou d’un autre dispositif d’entrée en fonction de
- Sa taille
- La distance qui le sépare de ce dispositif

T= temps pour que la main se place sur la cible

D= distance de la main à la cible
L = largeur de la cible
I =constante évaluée à 100ms
T =Ilog2(2D/L)

27

27

LES LOIS EN UX
LOI DE FITT’S

Utilisation du coin magique

Dans word

Des icônes plus larges avec des labels

(cliquer plus rapidement) Détermination de la zone de confort
dans des dispositifs mobiles

Le format Windows de la barre de navigation essaie de se

pencher plus dans le modèle mental (regard vers la droite et
la gauche)
Le Mac met toutefois les flèches côte à côte parce qu'en
raison de la Loi de Fitts, la navigation entre elles est
beaucoup plus rapide sous ce format.

28

28

14
 19/02/2025

LES LOIS EN UX
LOI DE FITT’S

29

29

LES LOIS EN UX
LOI DE FITT’S

Compromis vitesse/précision
Les cibles plus proches ou plus grosses peuvent être sélectionnées plus rapidement.
Comment réduire le temps pour atteindre la cible?
-> Augmenter la taille de la cible
-> Réduire les distances

On peut utiliser la loi de Fitt’s pour:

-> Prédire les temps de mouvements
-> Comparer deux périphériques
-> Nous guider dans la conception 31

30

15
 19/02/2025

LES LOIS EN UX
LOI DE FITT’S

31

31

LES LOIS EN UX
LOI DE FITT’S

32

32

16
 19/02/2025

LES LOIS EN UX
LOI DE HICK

Le temps nécessaire pour prendre une décision dépend

• du nombre
• de la complexité
• des options proposées
Risques
l’utilisateur peut se tromper, perdre du temps

Solutions
• limiter le nombre d’objets
• pas d’informations inutiles
• utiliser des messages concis 34

33

33

LES LOIS EN UX
LOI DE HICK

33

34

17
 19/02/2025

LES LOIS EN UX
PRINCIPE DES DEUX SECONDES

https://www.ikea.com/global/en/international-sales/
la réponse du système ne doit mettre plus de 2 secondes à arriver
Risques
L’utilisateur peut relancer l’action
bugs ou messages d’erreur
Solutions
actions rapides : indicateur d’action effectuée

actions longues : indicateur dynamique d’action en cours

3
5

33

35

LES LOIS EN UX
PRINCIPE DES TROIS CLICS

L’information souhaitée doit être accessible

• en 3 clics (web)
• rapidement

Risques
l’utilisateur peut abandonner la tâche / l’application
Solutions
rendre les actions importantes
accessibles directement ou
au moins rapidement
adapter à la situation
33

36

18
 19/02/2025

LES LOIS EN UX
TEST D’APPRENTISSAGE

38

37

LES LOIS EN UX
TEST D’APPRENTISSAGE

39

https://www.figma.com/community/file/905337008546827994

38

19
 19/02/2025

SYSTÈMES DE PERCEPTION
LOI DE GESTALT

Théorie de Gestalt

On perçoit un ensemble comme étant un tout organisé. Ce n’est pas l’addition d’éléments
séparés.

« Un élément n’est jamais isolé mais perçu par rapport à un fond, à un contexte qui lui
donne un sens. »

« La perception …. Est envisagée comme un processus créatif de construction et de

déconstruction de formes par rapport à un ensemble de données sensorielles. »

39

39

SYSTÈMES DE PERCEPTION
LOI DE GESTALT

Ambiguïté car plusieurs interprétations possibles.

Par principe de familiarité, le système cognitif privilégie une seule interprétation.
Une fois les différents éléments repérés, on peut passer d’une interprétation à une autre.
Impossible de voir simultanément les deux.
Par automatisme, on repère la bonne forme.

40

40

20
 19/02/2025

SYSTÈMES DE PERCEPTION
LOI DE GESTALT

Les principes de Gestalt expliquent comment l’œil construit un tout à partir de

différentes parties.

Proximité
On voit trois lignes de cercles car elles sont
proches horizontalement

41

41

SYSTÈMES DE PERCEPTION
LOI DE GESTALT

Les principes de Gestalt expliquent comment l’œil construit un tout à partir

de différentes parties.

Similarité
On voit Quatre lignes de cercles car les cercles
en lignes se ressemblent

42

42

21
 19/02/2025

SYSTÈMES DE PERCEPTION
LOI DE GESTALT

Les principes de Gestalt expliquent comment l’œil construit un tout à partir de

différentes parties.

Continuité
On peut voir dans ce graphe deux éléments
qui se croisent plutôt que des angles

43

43

SYSTÈMES DE PERCEPTION
LOI DE GESTALT

Les principes de Gestalt expliquent comment l’œil construit un tout à partir de différentes parties.

Fermeture
On peut voir le triangle même si les arcs
n’y sont pas.

44

44

22
 19/02/2025

SYSTÈMES DE PERCEPTION
LOI DE GESTALT

Les principes de Gestalt expliquent comment l’œil construit un tout à

partir de différentes parties.

Région
Quand par exemple deux éléments se recouvrent
Le plus petit sera interprété comme étant l’objet
de devant.

45

45

SYSTÈMES DE PERCEPTION
LOI DE GESTALT

Les principes de Gestalt expliquent comment l’œil construit un tout à

partir de différentes parties.

Symétrie
Les formes liées par des bordures symétriques forment
des figures cohérentes.

46

46

23
 19/02/2025

47

47

48

48

24
 19/02/2025

COMPRENDRE LES BASES D’UN

PROJET UX
1

COMPRENDRE LES BASES DU PROJET

Veille Stratégique

Un processus informationnel mis en place par une entité qui décide de se mettre à l’écoute de son
environnement.
Elle consiste à collecter, à analyser et à diffuser de manière permanente et organisée des
informations essentielles sur :
• son marché et ses acteurs,
• ses concurrents,
• ses clients potentiels, 2

• les innovations et avancées technologiques, etc.

1
 19/02/2025

COMPRENDRE LES BASES DU PROJET

Les Personas

Un persona n’est pas un utilisateur réel, mais une de plusieurs (i.e., traits caractéristiques les
abstraction fréquents) plus

* Meilleure compréhension des utilisateurs et de leurs

objectifs
* Vision partagée des utilisateurs

Persona :
* Des données générales (prénom, photo, devise, etc.)
* Des objectifs, contraintes, environnement de travail
* Ce qui va déclencher ses actions
* Ce qui peut l’influencer
* Ce qui peut le freiner ou le faire fuir

2
 19/02/2025

3
 19/02/2025

COMPRENDRE LES BASES DU PROJET

Les Personas

https://uxpressia.com

COMPRENDRE LES BASES DU PROJET

User Flow

Un User Flow est une représentation graphique qui montre comment les utilisateurs naviguent sur une interface
web ou mobile.
Le terme User Flow décrit le processus d’utilisation d’une interface digitale, de la première étape (visite) à la
dernière étape

Cela inclut le flux de navigation mais également l’interaction entre les éléments (naviguer, taper, cliquer…).

Un diagramme qui explicite les étapes du parcours client ainsi que les liens entre les différentes phases.

La représentation du User Flow est une partie intégrante du plan de l’interface.

4
 19/02/2025

LES GUIDES DE STYLE

UI DESIGN

L’UI Design désigne la conception de l’interface utilisateur pour une application, un logiciel ou tout dispositif digital.
L’UI Design englobe tout ce qui s’apparente au graphisme, à l’aspect et à l’agencement:

• Grille de mise en page

• Typographie
• Polices de caractères
• Icônes
• Couleurs
10
• Disposition des boutons de navigation
• Charte graphique…

L’UI Design peut se définir sous deux angles essentiels et complémentaires :

• “Ce qui se perçoit” : vue, toucher, audition, ressenti – avec ce que cela implique d’émotionnel (interface agréable
et esthétique, design émotionnel, dimension humaine de l’écran…). On parle d’ailleurs de Design émotionnel
• “Ce qui optimise l’interaction avec l’utilisateur du produit” : fonctionnalités requises, qualité des contenus,
parcours de navigation intuitif, architecture de l’information…

10

5
 19/02/2025

LES GUIDES DE STYLE UI

CONCEPTION DE L’ECRAN

Caractéristiques standards des composants à l’écran:

- Visibilité
- Accessibilité à l’aide d’un pointeur/souris/doigt

Très visible peu Très visible Très visible peu

accessible accessible

Très visible et
accessible Très visible et
accessible

Peu accessible Peu visible peu accessible Peu accessible

11

LES GUIDES DE STYLE UI

CONCEPTION DE L’ECRAN

Technique
oculométrie (eye-tracking)
simulateur d’eye-tracking en ligne
u Feng-GUI

Parcours de l’écran
1ère visualisation de l’écran
parcours en Z
ensuite
parcours sélectif
moteur de recherche en F
12

12

6
 19/02/2025

LES GUIDES DE STYLE UI

CONCEPTION DE L’ECRAN

La position des informations doit être cohérente

Schéma de disposition standard des écrans et fenêtres
Commandes
Zone de
sélection
Zone de travail

Zone de message à lecture optionnelle

Les questions à poser plusieurs fenêtres

- Quelle répartition de l’information/Interaction entre les fenêtres (dépend du User Flow / Task Flow)
- Comment passe t-on d’une fenêtre à une autre?
- Utilisation en série ou style Workbench

13

LES GUIDES DE STYLE UI

CONCEPTION DE L’ECRAN

Les questions à poser Une seule fenêtre

-Comment utiliser des espaces (compromis entre information/interaction nécessaire et
densité de l’information)
- Comment regrouper de l’information
- Contrôler du passage d’un item à un autre dépend d’une séquence logique
- Comment aligner des items
- Comment utiliser les animations (distraction)

14

7
 19/02/2025

LES GUIDES DE STYLE UI

LISIBILITÉ ET COULEUR

Lorem ipsum Lorem ipsum

contraste caractères/fond élevé
caractères sombres sur fond clair
de préférence caractères noirs sur fond blanc
sauf en environnement peu lumineux (nuit, tâche particulière)
nombre de couleurs limité

Risques Lorem ipsum Lorem ipsum

contraste insuffisant qui limite la lisibilité
effet sapin de noël
Solutions
éviter certaines combinaisons de couleurs
limiter le nombre de couleurs (7 grand
maximum, hors icônes)

15

LES GUIDES DE STYLE UI

SIGNIFICATION DES COULEURS

les couleurs ont une signification usuelle

exemple : rouge = stop / vert = go
contre-exemple : en chine, rouge = joie ; au théâtre, vert = superstition
Risques
mécompréhension de l’interface
mésinterprétation du code couleur

Solutions
respecter les codes usuels
vert : validation, succès
rouge : alerte, arrêt, échec
utiliser des couleurs neutres s’il n’y a pas de besoin spécifique (bleu)
faire attention aux spécificités locales, culturelles

16

8
 19/02/2025

LES GUIDES DE STYLE UI

PERTINENCE DES COULEURS

Principe
utiliser les couleurs pour signifier quelque chose de façon pertinente
Risques
objets de même couleur associés à tort
couleurs non/mal perçues
Solutions
même type d’information ð même couleur
types d’information différents ð couleurs contrastées
types d’information similaires ð couleurs peu contrastées
combiner/expliciter les informations

17

LES GUIDES DE STYLE UI

SIGNIFICATION DES COULEURS

Principe
l’information portée par la couleur doit être disponible
partout, toujours, pour tous
Risques
couleurs mal rendues (distinction, contraste, nombre de couleurs)
dans certains contextes (en plein air, la nuit)
selon les écrans, les dispositifs (vidéoprojecteurs,
smartphones) pour certains utilisateurs (daltonisme)
u 8-10% des hommes, 0,5% des femmes
Solutions : outils de test d’interfaces
couleurs suffisamment tranchées
outils de test : Contrast Checker
ensemble de couleurs adapté au daltonisme
outils de test : ColorOracle (bureau), ColorBlindness SimulateCorrect)

18

9
 19/02/2025

EVOLUTION UI DE QUELQUES SITES « Les lecteurs sont de plus en plus

des abonnés, et nous devons
prendre soin d’eux en leur offrant
une expérience utilisateur de
qualité, une navigation fluide et des
pages rapides. C’est la raison pour
laquelle nous pensons performance
web dès le début de tous nos
projets. «

Les prototypes suivants montrent l’évolution du site le monde au fil du temps et prouvent que les règles de
composition d’un site peuvent fragmenter le site d’une manière différente

19

Evolution UI de Quelques sites

Le site de démarrage de Youtube était basique mais a subi plusieurs évolutions en changeant les règles de structuration
d’un site.

20

10
 19/02/2025

EVOLUTION UI DE QUELQUES SITES

YouTube déploie sa nouvelle interface sur le web. Les changements concernent principalement la page d’accueil
qui fait apparaître les vidéos dans un format plus grand
—>Offrir plus d'espace pour afficher les titres longs sans obliger l'utilisateur à passer la souris pour les lire
en intégralité.
—> L’interface apparaît ainsi plus « zoomée » et affiche huit vidéos au lieu de dix auparavant.

 70% des vidéos visionnées le sont via les suggestions qui

tiennent compte de différents critères.

21

EVOLUTION UI DE
QUELQUES SITES

22

11
 19/02/2025

EVOLUTION UI DE
QUELQUES SITES

23

Evolution UI de Quelques sites

Apple a montré énormément de changements depuis l’apparition de ses sites web.

24

12
 19/02/2025

EVOLUTION UI DE
QUELQUES SITES

25

26

26

13
 19/02/2025

DESIGN DES UI DIGITALES

Les interfaces graphiques sont en évolution continue depuis leurs apparitions sur différents plans (esthétique,
fonctionnel, etc.). Ces dernières années se caractérisent par leurs richesse en terme d’innovation et
d’expérimentation sur les interfaces graphiques.

Le Skeuomorphisme Un style graphique caractérisé par le réalisme dont le design imite l’apparence des objets réels. Il en copie l’aspect
physique, les textures et les ombres (donner une texture de cuir à un bouton virtuel).

Un style graphique caractérisé par le minimalisme. Ses composants visuels sont les aplats de couleur, la typographie et les grilles
Le Flat Design de mise en page. Par sa simplicité, le flat design met en avant le message et les fonctionnalités : Absence de relief, couleurs unies et
vives, icônes épurées. Modernité, clarté, rapidité de chargement, adaptabilité

27

DESIGN DES UI DIGITALES

Skeuomorphisme de l’interface iOS 6 versus flat design de l’interface iOS 7

Interface Metro (UI épuré avec tendance vers le tactile)

de Windows 8, à l’origine du flat Design

28

14
 19/02/2025

DESIGN DES UI DIGITALES

Evolution des Logos de Google vers le Flat Design

Evolution des Logos de Apple vers le Flat Design

29

DESIGN DES UI DIGITALES

Un design system définit par Google en 2014, un ensemble de règles graphiques et d’interactions (animations et
Le Material Design transitions) destiné à un écosystème applicatif qui s’inspire du monde physique (lumière et ombre, mouvements
naturels, couleurs agréables).

Ce site offre une m eilleure

expérience de l’utilisateur en
ajoutant à l’interface des éléments
de la vie (fleurs, arbres, etc.)

Dropbox est l’exemple parfait du Material Design, et le bleu utilisé est considéré comme un matériel parfait.
Le site utilise une palette unique avec du noir et blanc inclus en arrière plan

30

15
 19/02/2025

une interface utilisateur développée par Microsoft pour unifier l'expérience utilisateur sur l'ensemble de ses produits, des
Le Fluent Design ordinateurs de bureau aux smartphones en passant par les consoles de jeux. C'est une évolution du langage de design Metro
introduit avec Windows 8, qui cherche à créer une expérience plus immersive et dynamique.

Les utilisateurs de MSTeams ont remarqué l’utilisation d’une

couleur unique avec une barre latérale qui change en fonction
du thème (clair ou foncé). Les icônes ont été mises à jour
pour utiliser un design Fluent (plus élégantes que les
anciennes)

Un effet ombres appliquées à une forme, donnant une sensation de

surface illuminée ce qui donne la vie à des éléments du design.

31

DESIGN DES UI DIGITALES: EVOLUTION

Ajout de l’IA Connexion sans contact

Minimaliste
(fournir des prédictions aux (sans manipulation directe des UI/UX plus simplifiée
(simplifiant les caractéristiques
client grâce au Machine dispositifs via des chatbots (simplifiant les accès, réduire
graphiques, éviter la densité
Learning, systèmes de vocaux ou des systèmes de le nombre d’éléments)
informationnelle)
recommandation) contrôle gestuel)

Design pour tous

(accessibilité des plateformes Mobile First Avoir des mouvements Pages innovantes
aux personnes ayant des (adapter un design responsive) (animations) (création d’un design immersif)
handicaps)

32

16
 19/02/2025

PROCESSUS DE CONCEPTION DES UI

33

PROCESSUS DE CONCEPTION
SYSTÈMES INTERACTIFS

Nombreuses méthodes de conception en génie logiciel :

* Merise

* Modèle en cascade, en V

* Modèle en spirale
* Méthodes Agile (e.g., Scrum, DSDM)

Risques:
Implication limitée des utilisateurs
Méthodes centrées système (garantie fonctionnelle) au
détriment des utilisatrices
Évaluation tardive (effet ”tunnel”)

34

17
 19/02/2025

PROCESSUS DE CONCEPTION
CENTRÉ UTILISATEUR

Étude de l’utilisateur et de sa tâche pour concevoir l’UI :

* Prise en compte des utilisateurs dès l’analyse
* Choisir des utilisateurs représentatifs

* Ne pas oublier le contexte réel d’utilisation

Trois modèles pour spécifier les caractéristiques :

* De l’utilisateur

* De la tâche à réaliser

* De l’interaction

35

PROCESSUS DE CONCEPTION
CENTRÉ UTILISATEUR

Modèle de l’utilisateur : identifier les caractéristiques

pertinentes de l’utilisateur

• Données générales
* taille, âge, genre, handicaps
* niveau de formation, habitudes culturelles (e.g.,
format des dates, sens d’écriture)
*psychologiques (e.g., visuel/auditif, logique/intuitif,
analytique/synthétique)

• Données liées à l’application : compétences sur le

domaine, compétences en informatique et sur le
système
* novice, expert, professionnel
* usage occasionnel, quotidien

36

18
 19/02/2025

PROCESSUS DE CONCEPTION
CENTRÉ UTILISATEUR

Modèle de la tâche : identifier l’enchaînement des

processus d’une tâche
• Construire la hiérarchie de tâches du système

• Spécifier chaque tâche, penser aux exceptions

• Évaluer la décomposition avec l’utilisateur

Dans ce modèle :
• Une tâche secompose de :
* but = ce qui doit être fait
* procédure = un ensemble desous-tâches reliées par des relations
de composition ou des relationstemporelles
• Une tâche élémentaire est une tâche décomposable
uniquement en actions physiques opérations d’E/S

37

Comment représenter les informations d’une analyse de tâche?

Ils expriment:
La décomposition d’une tâche en sous tâches(avec
éventuellement une typologie des tâches).
Les relations d’ordonnancement temporel des sous
tâches (séquence, alternative parallélisme, etc.)
Les buts, sous buts et les tâches qui permettent de les atteindre
Les objets utilisés pour accomplir une tâche ou une action.

38

19
 19/02/2025

0
Faire du thé
Plan
0 Faire I
en même temps, si la théière
est pleine, faire 2 3- 4
après quatre ou cinq minutes faire
5

1 2 3 4 5
Faire bouillir Vider la Verser l’eau Attendre Verser le thé
de l’eau théière

1.I 1.2 1.3 I.4 I.5

Remplir la Allumer la Mettre la Attendre Éteindre le
bouilloire Gazinière bouilloire sur la gaz
Gazinière

39

ANALYSE DE TÂCHES POUR LA

CONCEPTION ET L’ÉVALUATION
Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA
Hierarchical Task Analysis)?

40

20
 19/02/2025

ANALYSE DE TÂCHES POUR LA

CONCEPTION ET L’ÉVALUATION
Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

 Tâches et sous-tâches sont agencées (reliées) entre elles selon

cinq modalités :
◦ Séquentielles (en suivant)
◦ Alternatives (l’une ou l’autre exclusivement)
◦ Parallèles (l’une ou l’autre)
◦ Simultanées (l’une et l’autre en même temps)  Tâches collectives
(supposent plusieurs acteurs ou opérateurs)
◦ Itératives (en boucle)
Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface ergonomique avec MAD »)

41

41

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

Les sous-tâches sont exécutées [strictement] en séquence, c'est-à-dire, l'une

après l'autre dans un ordre donné (A-B-C…)

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

42

21
 19/02/2025

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

Manger des
crêpes

si la pâte a
reposé 2h

Acheter les Préparer la Faire cuire la Déguster les

ingrédients pâte pâte crêpes

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

43

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

Structure permettant d'indiquer qu’une tâche peut s'exécuter de plusieurs manières (ou sous-tâches).
Une seule des manières (sous-tâches) est exécutée [dans le cas de l’alternative stricte].

alternative

alternative non stricte

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

44

22
 19/02/2025

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

Mélanger la farine
dans le lait

Battre avec un Utiliser un batteur

Tamiser la farine
fouet électrique

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

45

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?
Faire cuire la pâte
(une crêpe)

jusqu’au
changement
complet de texture

Verser une Faire cuire Faire cuire

louche de pâte une face l’autre face
dans la poêle
chaude Retourner les Faire sauter
crêpes avec les crêpes
une spatule

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

46

23
 19/02/2025

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

La parallèle exprime que l'ordre des sous-tâches n'est pas contraint à priori et qu'il peut exister des tâches
d'interruption.
Une tâche parallèle se termine quand toutes les sous-tâches non facultatives ont été exécutées.
Une sous-tâche et une seule est exécutée à un moment donnée. Celle-ci peut être interrompue par une tâche
d'interruption mais dans ce cas, elle est suspendue et c'est la tâche d'interruption qui devient active.

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en

interface ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe
Renevier

47

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

Acheter les
ingrédients

Optionnelle : si
crêpes sucrées

Acheter du Acheter de Acheter du lait Acheter des Acheter de la Acheter du

sel l’huile (1 litre) œufs (6) farine (500 g) sucre vanillé

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

48

24
 19/02/2025

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

Très proche de la structure parallèle, la structure simultanée implique plusieurs opérateurs.

Le fonctionnement est le même que celui de la parallèle à la différence que plusieurs tâches peuvent
s'exécuter en même temps.
La relation simultanée n’est utilisable que lors des activités multi- opérateurs.

Opérateur-1 Opérateur-2

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

49

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

Les courses pour les crêpes sont faites par 2 personnes, par exemple : la grand-mère (GM) et son petit-fils (PF).
On ne sait pas à priori qui va mettre dans le caddie le sel ou le [lait]. Les courses seront achevées (post-conditions)
lorsque toute la liste des courses sera complétée.

Mettre les
ingrédients dans
le caddie

Optionnelle : si
crêpes sucrées
PF PF GM GM GM GM
Mettre le sel Mettre l’huile Mettre le lait Mettre les Mettre la farine Mettre le
(1 litre) œufs (6) (500 g) sucre vanillé

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

50

25
 19/02/2025

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

La relation itérative s’effectue tant que la tâche n’est pas achevée.

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

51

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

tant qu’il reste

de la pâte

Faire cuire la pâte

(une crêpe)

Adapté de : Bertrand Evain (« Transformer un besoin utilisateur en interface

ergonomique avec MAD ») et cours « Modèle de tâche » de Philippe Renevier

52

26
 19/02/2025

Comment représenter les informations d’une analyse de tâche (exemple de formalisme HTA)?

53

Impact de l’agencement du modèle de tâches sur l’interface

Nature de l’agencement Impact sur l’interface
entre les tâches

Séquentielle Les champs ou les écrans seront présentés les uns à la suite des
autres. Le second ne pourra être utilisé tant que la première tâche
n’est pas close

Alternative Les champs alternatifs seront présentés en même temps. Dès qu’un
choix est effectué l’opérateur ne peut plus travailler sur les champs
précédents

Parallèle Toutes les possibilités sont présentées en même temps. L’utilisateur

remplira tout ou partie [de ces possibilités]

Simultanée Tous les possibles sont présentés mais plusieurs opérateurs peuvent y
travailler en même temps

Itérative L’écran se représente tant que l’objectif n’est pas atteint

Source : Bertrand Evain (« Transformer un besoin utilisateur en interface ergonomique avec MAD»)

54

27
 19/02/2025

Task flow User flow

Objectif: Le modèle de tâche permet de visualiser Objectif: Le user flow permet de visualiser
de manière claire et concise le cheminement d'un l'ensemble des interactions possibles d'un utilisateur
utilisateur pour réaliser une action donnée. Il est avec une interface. Il est utile pour :
utile pour : • Identifier les différents scénarios d'utilisation.
• Identifier les points de friction dans le parcours • Évaluer la cohérence globale de la navigation.
utilisateur. • Mettre en évidence les points de contact entre
• Optimiser l'ordre des étapes pour rendre la les différentes fonctionnalités.
tâche plus efficace. Exemple: Pour un site e-commerce, un user flow
• S'assurer que l'interface est intuitive et facile à pourrait inclure plusieurs chemins possibles :
comprendre. • Un utilisateur peut directement rechercher un
Exemple: Pour commander un produit sur un site e- produit spécifique.
commerce, un modèle de tâche pourrait inclure les • Un utilisateur peut explorer les différentes
étapes suivantes : catégories de produits.
• Ajouter un produit au panier • Un utilisateur peut se rendre sur la page d'un
• S'inscrire ou se connecter produit spécifique à partir d'une publicité.
• Saisir les informations de livraison
• Choisir un mode de paiement
• Confirmer la commande

55

PROCESSUS DE CONCEPTION
DÉMARCHE ITÉRATIVE
Quel intérêt?
Quel type de prototype?

Prototype

Concevoir Evaluer

Résultat de l’utilisabilité

Evaluation Formative : Evaluer les points faibles et forts de l’interface

 Processus itératif de conception et d’évaluation.

56

28
 19/02/2025

PROCESSUS DE CONCEPTION
ITÉRATIF

Méthodologie basée sur une succession de cycles composés des trois phases
(analyse, développement, évaluation) :
* Travail sur l’intégralité de l’interface

* Cycles répétés jusqu’à obtention d’une interface satisfaisante

* Prise en compte de nouveaux objectifs

* Prise en compte de l’avis des utilisateurs qui peuvent changer

57

PROCESSUS DE CONCEPTION
Incrémental
Méthodologie basée sur la réalisation d’une première partie, puis d’une seconde,
etc.
* Travail sur une seule zone de l’interface jusqu’à satisfaction

* Développement de solutions partielles, intermédiaires

* Prise en compte de nouveaux objectifs

* Prise en compte de l’avis des utilisateurs qui peuvent changer

58

29
 19/02/2025

ITÉRATIF & INCRÉMENTS

59

PROCESSUS DE CONCEPTION
PROTOTYPÉ

• Démontrer les principales fonctionnalités du

système
• Assurer une communication entre informaticiens et
usagers
• Former l'usager
• Découvrir les besoins par une approche
WYSIWYG
• Vérifier le modèle
• Explorer de nouvelles voies
• Valider les modèles de données et l’aspect
esthétique de l'interface

60

30
 19/02/2025

PROCESSUS DE CONCEPTION
PROTOTYPÉ

Différents types de prototypes

- Low Fidelity: informel, papier, maquettes (e.g., Mocking Bird, Pencil, Basalmiq)
- High Fidelity: Prototypes semi-réalistes, simulateurs (e.g., Invision, Maqetta, Figma,
JustInMind)

61

Obtenir une interface finale passe par plusieurs étapes :

- Croquis (sketch) = aperçu global de l’interface (idée générale)
- Maquette (mockup, wireframe) = interface détaillée (sans interaction)
- Prototype = version incomplète d’une interface (avec interactions)

Croquis, maquette et prototype d’une page web

http://exitstudio.be/blog/

62

31
 19/02/2025

PROCESSUS DE CONCEPTION
PROTOTYPÉ

Qu’est ce que le Zoning ?

*Le zoning est une schématisation grossière

de ce que sera la future page web
*On utilise des blocs pour déterminer où se
trouveront les contenus et fonctionnalités
*Cette étape a généralement lieu après la
création d’une arborescence, il arrive
quelquefois qu’elle soit réalisée en parallèle
* Définir l’organisation générale des pages est
l’occasion de présenter une première
approche au client ou décisionnaire

63

PROCESSUS DE CONCEPTION
PROTOTYPÉ

Qu’est ce que le wireframe?

* Le wireframe est la suite logique du zoning

*Chaque bloc réalisé lors de l’étape précédente
se voit doté d’image(s), de texte(s) ou de
vidéo(s)
*Ce contenu peut être fictif car les
informations finales ne sont pas toujours
connues à ce stade du projet
*L’objectif est de définir l’organisation des
éléments et des formes sans travailler l’aspect
visuel, le graphisme n’interviendra que plus
tard

64

32
 19/02/2025

PROCESSUS DE CONCEPTION
PROTOTYPÉ

Qu’est ce qu’un Prototype?

*Un prototype vient valider les technologies en

rendant les interfaces fonctionnelles, tout est testé
pour détecter d’éventuels problèmes
*Ce concept remonte à bien avant internet, un
inventeur devant s’assurer que son objet
fonctionne correctement avant de le
commercialiser
*Le but n’est pas d’inciter le testeur à acheter le
produit, il doit seulement le rendre meilleur
*Un prototype permet également d’aller
démarcher d’éventuels investisseurs

65

QU’EST CE QU’UNE MÉTHODOLOGIE AGILE ET

QUELLES DIFFÉRENCES AVEC UX DESIGN
66

33
 19/02/2025

QU’EST CE QU’UN LOGICIEL

•Un produit industriel où :
—>le producteur de logiciel vise principalement à réaliser un bénéfice matériel
—>Le client cherche à minimiser le prix.

L’équipe doit être efficace mais comment?

Une démarche structurante assurant le bon déroulement d'un projet avec :
•Une planification
•Une gestion des ressources humaines

• Un suivi des enjeux financier  C’est la Gestion du projet

67

APPROCHES CLASSIQUES DE GESTION DE PROJET

Approche classique
Pour développer un logiciel il faut commencer par planifier :
• Diviser en étapes
• Les étapes seront divisées en tâches
• Les tâches seront assignées à des intervenants
• Des réunions au sein de l’équipe seront prévues afin de valider ce qui a été réalisé, discuter ce qui sera lancé
• Le client ne recevra que le produit réalisé à la fin

68

34
 19/02/2025

APPROCHES CLASSIQUES DE GESTION DE PROJET

Les inconvénients des méthodes classiques de gestion de projet.

■ Changements des spécifications non planifiés.
■ Absence de réactivité.
■ Priorités non définies.
■ Manque de qualité du logiciel.
■ Conception trop ambitieuse.
■ Les besoins sont incompréhensibles ou mal définis.

69
69

APPROCHES CLASSIQUES DE
GESTION DE PROJET

70

35
 19/02/2025

APPROCHE AGILE DE GESTION DE PROJET

■ « Une méthode agile est une approche itérative

et incrémentale pour le développement de
logiciel, réalisé de manière très collaborative par
des équipes responsabilisées appliquant un
cérémonial minimal, qui produisent, dans un
délais contraint, un logiciel de grande qualité
répondant aux besoins changeants des
utilisateurs»
Ambler, Scott (2002). Agile Modeling: Effective Practices for EXtreme Programming and the Unified Process

71

APPROCHE AGILE

■ Elle privilégie la communication entre les

différents acteurs d’un projet.
■ Le partage d’information, les points de vue
différents ou complémentaires,…
■ L’entraide et non la concurrence,
■ Le respect des opinions des autres,
■ Une prédisposition à l’autodiscipline, voire
l’autogestion.

72

36
 19/02/2025

APPROCHE AGILE

• Personnes et interaction plutôt que

L’équipe processus et outils

• Logiciel fonctionnel plutôt que

L’application documentation complète

• Collaboration avec le client plutôt que

La collaboration négociation de contrat

L’acceptation du • Réagir au changement plutôt que

changement suivre un plan

73

LES PRINCIPES DES MÉTHODES AGILES

1
• Satisfaire le client

■ Le client valide le produit à chaque livraison

intermédiaire.
■ Ceci afin de vérifier la conformité de la livraison
avec les attentes des clients.

74

37
 19/02/2025

LES PRINCIPES DES MÉTHODES AGILES

2
• Livrer fréquemment des versions

■ Il s’agit de livrer des versions fonctionnelles du

projet demandé.
■ une version intermédiaire du produit final,

■ une version testée et qui satisfait le client

plutôt qu’une documentation à valider.

75

LES PRINCIPES DES MÉTHODES AGILES

3
• Accepter le changement

■
Subir l’évolution des besoins même tard dans le cycle de vie.
■ Comprendre et apprendre comment satisfaire encore mieux
la demande.

76

38
 19/02/2025

LES PRINCIPES DES MÉTHODES AGILES

4
• Collaborer quotidiennement

■ La coopération est obligatoire entre clients et

développeurs durant le projet.
■ Le client est disponible et totalement impliqué dans toutes les
phases du projet.

77

LES PRINCIPES DES MÉTHODES AGILES

5
• Motiver et encourager

■ Offrir l’environnement et le support nécessaires

pour motiver l’équipe.
■ Lever tous les obstacles liés aux processus, aux
outils, à la composition de l’équipe,…

78

39
 19/02/2025

LES PRINCIPES DES MÉTHODES AGILES

6
• Communiquer face à face

■ Préconiser l’échange oral à l’écrit pour éviter

l’ambiguïté et atteindre la compréhension.
■ La connaissance tacite est facilement exprimée
par les conversations.

79

LES PRINCIPES DES MÉTHODES AGILES

7
• Mesurer l’avancement du projet

■ Le fonctionnement de l’application est le premier indicateur d’avancement

du projet.
■ La quantité de documents produits ou le nombre de ligne de
code sont non significatifs.

80

40
 19/02/2025

LES PRINCIPES DES MÉTHODES AGILES

8
• Rythmer le projet

■ La qualité du travail dépend du rythme

d’avancement du projet.
■ Le rythme doit être soutenu, soutenable et
constant sur la durée du projet.

81

LES PRINCIPES DES MÉTHODES AGILES

• Porter une attention continue à la
9 technique et à la conception

■ Maintenir un code propre, évolutif et performant.

■ Eviter des codes qui ne peuvent pas être utilisés
par les autres.
■ Viser des outils technique et des approches de
conception qui favorise l’agilité.

82

41
 19/02/2025

LES PRINCIPES DES MÉTHODES AGILES

• Simplifier
10

■ La simplicité garantit l’évolutivité du système.

■ La complexité rend difficile les évolutions liées
au développement incrémental .
■ Viser une conception qui contient que les
composants nécessaires.

83

LES PRINCIPES DES MÉTHODES AGILES

• S’auto -organiser
11

■ Le chef de projet agile n’est plus celui qui attribue

les tâches.
■ L’équipe s’auto-organise et définit ses travaux.
■ Le partage des tâches s’effectue sur la base du
volontariat.

84

42
 19/02/2025

LES PRINCIPES DES MÉTHODES AGILES

• Améliorer le fonctionnement
12

■ L’environnement d’un projet n’est pas constant.

■ L’équipe agile s’interroge, régulièrement, sur la manière de
devenir encore plus efficace.
■ Acceptation du changement.

85

DIFFÉRENCES ENTREAGILEETUXDESIGN

■ L’objectif d’UX design est de

■ rendre l’expérience utilisateur plus fluide et plus intelligible

■ Fournir un produit efficace, qui répond parfaitement à ses

besoins.
■ L’objectif de l’agilité est de
■ créer un produit qui respecte les clauses du contrat avec le
client.

86

43
 19/02/2025

DIFFÉRENCES ENTREAGILEETUXDESIGN

Pour pouvoir satisfaire les clients et les utilisateurs à la

fois, il est pertinent d’intégrer l’esprit Agile dans une
approche UX.

Agile + UX = complémentarité

87

LES ÉLÉMENTS COMMUNS

Processus itératif
Multidisciplinarité
Disciplines collaborative
Interactivité

88

44
 19/02/2025

LES ÉLÉMENTS COMMUNS

User Stories vs storytelling

Personas. Vs acteurs
Storyboard. Vs. Etude ergonomique
En résumé :
UX Design doit s’adapter au rythme qu’impose un projet
agile
l’UX design doit avoir une avance sur le développement
pour ne pas être un frein. —> Agile UX

89

ASSOCIERAGILE À UX : POINTS FORTS

Les approches Agiles et centrées utilisateurs sont de plus en plus présentes dans
les entreprises:

•un travail itératif entre les développeurs et les designers —> optimisation
constante selon les besoins du client.
•Organisation optimale des équipes du projet
•Travail centré utilisateur, opérationnel à des cycles courts.
•Résultats très satisfaisants autant pour le client que les utilisateurs finaux.

90

45
 19/02/2025

ASSOCIERAGILE À UX: POINTS FAIBLES

Des temporalités différentes, décalées entre les deux approches.

-Les processus d’UX design demandent du temps : recherches, réflexion, recueil des besoins, analyses,
idéation, conception, tests, optimisation suite aux tests.
- La démarche agile fonctionne en cycles courts.
- Les méthodes agiles ont pour objectif de démarrer le développement rapidement afin d’obtenir au plus
vite un MVP (produit minimum viable).
La majorité des travaux UX se réalise en amont du développement.

—> le Product Owner et l’équipe de développement planifient les interventions de l’UX Designer
dans les sprints.

91

ASSOCIERAGILE À UX : OPTIONS

En amont des sprints :

L’UX Designer définit les fonctionnalités.
Il reste sur son rythme habituel de conception.
Il fournit les maquettes aux développeurs qui intégreront ces fonctionnalités dès le
premier sprint.
+: l’UX Designer avance en parallèle des sprints à son rythme et alimente les
développements petit à petit.
- : l’UX Designer est détaché du rythme de développement et donc moins disponible pour
les développements en cours de sprint.

92

46
 19/02/2025

ASSOCIERAGILE À UX

Après les sprints :

L’UX Designer définit les fonctionnalités.

il fournit des maquettes aux développeurs. Dans ce cas, les développeurs doivent modifier le travail
qu’ils ont réalisé pendant le sprint afin d’intégrer les changements liés à l’UX.

C’est donc une perte de temps et ce n’est pas une option à privilégier.

93

ASSOCIERAGILE À UX
Pendant les sprints :
Cette option est plus difficile à mettre en place mais elle reste la plus efficace.

•L’UX Designer donne ses maquettes et directives aux développeurs qui peuvent
donc activer le développement.
•L’UX Designer est intégré à l’équipe de développement, ce qui favorise la
communication et apporte davantage de souplesse pour les itérations en cours de sprint.

94

47
FST / DSI
IHM

INTERFACES HOMME-MACHINE INTERFACES HOMME-MACHINE

1 2

PLAN PLAN
5
1
LE GENIE COGNITIF
INTRODUCTION GENERALE
6
2
METHODOLOGIES DE CONCEPTION D'IHM TECHNIQUES ET OUTILS DE
CREATION D’IHM
3
LA PSYCHOLOGIE COGNITIVE 7

4
CRITERES D’EVALUATIONDES IHM

L'ERGONOMIE COGNITIVE

1 2

FAOUZI MOUSSA
FST / DSI
IHM

INTRODUCTION 3
INTRODUCTION 4

EVOLUTION INFO. MICRO-ELECTRONIQUE

EVOLUTION TECHNOLOGIQUE
(fin 70 / début 80) ? usine sans homme
EMPLOIE D'ECRANS GRAPHIQUES

complexité croissante
+ SYNTHETISATION + ORGANISATION
renforcer la place de l'opérateur DES INFORMATIONS A PRESENTER

CONSEQUENCE
TACHES HAUTEMENT COGNITIVES
créativité improvisation APPARITION DE PROBLEMES
ERGONOMIQUES

raisonnement spécialiste

3 4

FAOUZI MOUSSA
FST / DSI
IHM

INTRODUCTION 5 INTRODUCTION 6

CES PROBLEMES RESULTENT DEUX TYPES DE PROBLEMES :

 Lacunes dans la manière de présenter  Contenu informationnel

l'information graphique sur l'écran inadapté aux BIO

Organisation et présentation
des informations
NECESSITE D'UNE APPROCHE
ERGONOMIQUE SURTOUT

Concepteurs ne possèdent pas

Lacunes dans l'analyse des Besoins de connaissances dans le
Informationnels des Opérateurs domaine de l'INTERACTION
HOMME-MACHINE

5 6

FAOUZI MOUSSA
FST / DSI
IHM

METHODOLOGIES DE METHODOLOGIES DE 8

CONCEPTION D'IHM CONCEPTION D'IHM

L'Interaction HOMME-MACHINE DEMARCHE DE MILLOT /90/

n'est pas tjs traitée explicitement
comme une variable de conception deux étapes séquentielles :

SCAPIN et al. /88/ étape conceptuelle descendante

de modélisation du système H-M
DIFFICULTE D'EXPLOITER
 définir le modèle du procédé
LES RECOMMANDATIONS
 analyser des tâches humaines
 temps très long pour la lecture  modéliser l'opérateur humain

d'un manuel de recommandation

 recommandation très générales

approche approche
et posent des problèmes d'accès
7 fiabiliste cognitiviste

7 8

FAOUZI MOUSSA
FST / DSI
IHM

METHODOLOGIES DE METHODOLOGIES DE 10

CONCEPTION D'IHM CONCEPTION D'IHM

L'APPROCHE FIABILISTE
DEMARCHE DE MILLOT /90/
SWAIN /63/
 choix des outils d'aide à la décision
 choix des modes de coopération
THERP : quantifier la fiabilité humaine
 spécification des interfaces H-M en passant par la probabilité d'occurrence
des erreurs des opérateurs au même
 réalisation et intégration titre que les dysfonctionnement du système

étape ascendante d'évaluation

du système H-M conçu
SHERPA de EMBREY /86/ : rajoute une évaluation
qualitative a celle quantitative des erreurs
selon des critères :
humaines

 performance L'APPROCHE COGNITIVISTE

 ergonomiques
9
9 10

FAOUZI MOUSSA
FST / DSI
IHM

METHODOLOGIES DE 11 METHODOLOGIES DE 12

CONCEPTION D'IHM CONCEPTION D'IHM

contextes fct normal ANALYSE : contextes MODELE GENERALE

SADT, PETRI PROCEDE D'ACTIVITE O-H
fct anormal SYS CDE LIMITES / RESSOURCES
AMDEC, AD
TACHES A EFFECTUER

MODELE OH ANALYSE VALIDATION / AFFINAGE

limites DES
ressources TACHES MODELE DES INTERFACE H-M
TACHES COOPERATION H-M
CHOIX DES PRESCRITES MODELES DES ACTIVITES
OUTILS D'AIDE
A LA DECISION MODELE DES ANALYSE D'ACTIVITE
TACHES COGNITIVE -
HUMAINES TRAITEMENT DONNEES
CHOIX DES BESOINS
MODES DE D'INFORMATION
MESURES
COOPERATION

SPECIFICATION SYS H-M

CRITERES DES IHM REEL / SIMULE
ERGONOMIQUES
CONTEXTES, SCENARIOS MESURES A
EFFECTUER
fct normal
DEFINITION DE
REALISATION fct anormal
coopération H-M PROTOCOLES OBJECTIFS
INTEGRATION
EXPERIMENTAUX

11 12

FAOUZI MOUSSA
FST / DSI
IHM

METHODOLOGIES DE 13 METHODOLOGIES DE 14

CONCEPTION D'IHM CONCEPTION D'IHM

NON OBSERVABILITE DES PARAMETRES PARAMETRES EVALUES

ANALYSE D'ACTIVITE
DIFFICULTES DE L'EVALUATION

OBSERVATEURS : PROTOCOLE EXPERIMENTAL

deux types d'extraction d'information
paramètres directement observables
séquences d'actions, mvts effectués, etc.
 informations objectives :
prélèvement d'info lors de l'activité
paramètres estimés (subjectives)
charge de travail, fatigue, etc.
 informations subjectives :
recueil des traces
13 14

FAOUZI MOUSSA
FST / DSI
IHM

16
LA PSYCHOLOGIE COGNITIVE

ANALYSE DES TACHES

DEDUIRE

 Besoins Informationnels des Opérateurs

 Besoins en Outils d'Aides à la Décisions

STRUCTURER, ORGANISER, CODER

VUES GRAPHIQUES

15 16

FAOUZI MOUSSA
FST / DSI
IHM

17
LA PSYCHOLOGIE COGNITIVE18
LA PSYCHOLOGIE COGNITIVE
MODELE DE RESOLUTION DE PROBLEME

LA MODELISATION DU COMPORTEMENT Evaluation en relation

avec les contraintes
du système
DECISIONNEL HUMAIN
Ambiguïté But final

J. RASMUSSEN /86/ Interprétation des

conséquences pour la
tâche courante, la
sécurité, l'efficacité, etc..
Etat du
 La détection d'un EVENEMENT ANORMAL met système But cible

l'opérateur en état d'alerte

Identification de l'état Définition de
actuel du système la tâche

Ensemble Tâche
 L'opérateur évalue alors la situation pour d'observations

identifier l'état du système Observation Formulation de

d'information et de procédure; planification
données de séquence d'actions

DETECTION D'EVENT
Alerte Procédure

ACTION
Définition d'une stratégie de reprise en fct des Exécution;
Alarme ou détection
objectifs de conduite (tâches) d'un état anormal coordination de
manipulations

 Mise en oeuvre du plan d'action défini

17 18

FAOUZI MOUSSA
FST / DSI
IHM

LA PSYCHOLOGIE COGNITIVE19 LA PSYCHOLOGIE COGNITIVE20

MODELE DE RESOLUTION DE PROBLEME 3 TYPES DE COMPORTEMENT DE L'O-H

Evaluation en relation
avec les contraintes
du système BUTS

Ambiguïté But final

Knowledge
Interprétation des
conséquences pour la
Based IDENTIFICATION
DECISION
PLANIFICATION
D'ACTIONS
tâche courante, la
sécurité, l'efficacité, etc..
Behaviour
symboles
Etat du
système But cible
Rule RECONNAISSANCE ASSOCIATION REGLES
Identification de l'état
actuel du système
Définition de
la tâche
Based DE SITUATION ETAT / TACHE D'INTERVENTION
Behaviour
Ensemble
d'observations
Tâche signes

Observation Formulation de
d'information et de
données
procédure; planification
de séquence d'actions
Skill PRISE EN ACTIVITES
Based COMPTE SENSORI-MOTRICES
DETECTION D'EVENT

Alerte Procédure Behaviour

ACTION

Alarme ou détection Exécution;

entrée d'info signaux actions
d'un état anormal coordination de
manipulations

CLES:
Activité de traitement d'information
Etats de connaissance résultant d'un traitement d'information

19 20

FAOUZI MOUSSA
FST / DSI
IHM

LA PSYCHOLOGIE COGNITIVE21 22
LA PSYCHOLOGIE COGNITIVE
3 TYPES DE COMPORTEMENT DE L'O-H

LA THEORIE DE L'ACTION
 COMPORTEMENT BASE SUR
L'HABILITE NORMAN /86/
(SKILL BASED BEHAVIOUR )  L'ETABLISSEMENT D'UN BUT.
{BUT = représentation mentale de l'état objectif}

 LA FORMULATION D'UNE INTENTION

 COMPORTEMENT BASE SUR LES
REGLES {Décision d'agir pour atteindre le but}
(RULE BASED BEHAVIOUR )
 L'ADOPTION D'UN PLAN D'ACTION
{Représentation PSYCHOLOGIQUE des
actions}
COMPORTEMENT BASE SUR LES
CONNAISSANCES  L'EXECUTION DU PLAN D'ACTION
(KNOWLEDGE BASED BEHAVIOUR ) {Agir au moyen des dispositifs de contrôle}

21 22

FAOUZI MOUSSA
FST / DSI
IHM

23 24
LA PSYCHOLOGIE COGNITIVE LA PSYCHOLOGIE COGNITIVE

LA THEORIE DE L'ACTION
BUTS
NORMAN /86/

INTENTION COMPARAISON
EVALUATION

 LA PERCEPTION D'UN NOUVEL ETAT DU SYS.

{Observation des changements}
PLAN INTERPRE-
D'ACTION TATION
INTERPRETATION DES MODIFICATIONS DES
VAR. PHYSIQUE EN TERME PSYCHOLOGIQUE ACTIVITE MENTALE

{Représentation mentale du nouvel état du sys}

EXECUTION PERCEPTION

COMPARAISON DE L'ETAT DU SYS AVEC LE

BUT PREETABLI ET LES INTENTIONS
{Poursuite ou modification du plan d'action}
ACTIVITE PHYSIQUE

23 24

FAOUZI MOUSSA