CHAPITRE 2 - Méthodologies de Construction - IHM

Centre Universitaire d’Ali Kafi –
Tindouf Institut des Sciences et de

Technologie
Département des Mathématiques et Informatique
Interface Homme Machine

3éme année Licence Système Informatique, S5
Chapitre II:
Méthodologie de construction d’une
IHM
1
Plan du chapitre
1. Prise en compte de l’utilisateur.
2. Méthode de conception IHM
3. Techniques de recueil
d’informations.
4. Modèle de tâches.
2
1. Prise en compte de
l’utilisateur
3
1. Prise en compte de l’utilisateur (1/2)
- Une des clés pour réussir à concevoir une interface ergonomique est
de
connaître et comprendre ses utilisateurs.
- L'humain doit constituer l'élément central à considérer dans

la conception d'une interface homme-machine.
- La prise en compte des utilisateurs doit intervenir assez tôt, dès la

phase
phases du cycle de 4
1. Prise en compte de l’utilisateur (2/2)
- Pour éviter de commettre des erreurs grossières de conception, il

est aussi indispensable de connaître quelques caractéristiques générales
des humains.
Eléments de psychologie appliqués aux systèmes interactifs
psychologie cognitive
5
Don Norman est un chercheur en sciences cognitives, en
design et en utilisabilité renommé. Il a beaucoup écrit sur
le design centré sur l'utilisateur et sur l'importance de la
psychologie cognitive dans la conception des produits
La théorie de l'action de Don Norman repose sur l'idée que les utilisateurs interagissent avec des produits et des
systèmes en effectuant des actions pour atteindre des objectifs spécifiques. Sa philosophie est centrée sur la
compréhension des comportements des utilisateurs, de leurs intentions et de leurs interactions avec les objets ou les
systèmes conçus.
Norman a développé le concept de "cognition située", qui met l'accent sur le fait que le comportement humain est
étroitement lié à l'environnement dans lequel il se produit. Selon cette théorie, les actions d'une personne sont
influencées par la perception de la situation dans laquelle elle se trouve, par ses connaissances préalables et par les
indices disponibles dans l'environnement.
Il a également mis en avant l'importance de la conception centrée sur l'utilisateur et de l'ergonomie cognitive,
affirmant que les produits et les interfaces doivent être conçus en tenant compte des capacités cognitives, des
motivations et des besoins des utilisateurs. Pour Norman, une bonne conception doit être intuitive, permettre des
actions claires et offrir un retour d'information clair pour que les utilisateurs puissent facilement comprendre et
maîtriser l'utilisation d'un produit.
1.1. Aspects humains
Vue
Perception Ouïe
Touche Action physique
r Action
Langage parlé
Traitement de l’information
Cognition sensorielle Mémoire et apprentissage
Résolution des problémes 6
Cette section ne prétend pas être un cours de psychologie. Tout au plus s'agit-il
de donner quelques éléments issus de la psychologie, pertinents pour la
conception de systèmes interactifs.
L'être humain perçoit son environnement par l'intermédiaire des cinq sens. Il
peut agir sur son environnement par l'intermédiaire de son système moteur
(action physique) et par l'intermédiaire du langage. Enfin il est doté d'un
système cognitif qui lui permet de mémoriser des informations et de planifier et
contrôler des actions en fonction de ses perceptions et de sa mémoire
1.2. Résolution de problèmes (1/3)
Il désigne en psychologie toute activité visant à atteindre un but à
partir d'une situation courante.
Exemple :
➢ Décider ce que l'on va manger ce soir.
➢ Démontrer un théorème.
10
La Théorie de l'Action de Don Norman précise le déroulement
du processus mental lors d'une étape élémentaire de la
résolution de problème, dans le cas de l'interaction avec un système
informatique ou
autre.
11
12
1.2.1. Théorie de l’action (1/4)
La théorie de l'action qui a été élaborée par D. A. Norman, fournit

un cadre théorique permettant de mesurer la complexité d'utilisation
d'une interface homme-machine.
Principe:
Toute action exécutée avec un certain but est un cycle itératif en

deux
temps : 10
❖ Exécution d'une commande.

❖ Évaluation de la modification engendrée par la commande par
rapport
au but fixé. 11
On distingue deux couches dans le cycle de l'action :
•Compréhension du système (élaboration du plan et évaluation

du résultat).
• Interaction avec le système (exécution de l'action et perception).
15
16
1.2.2. Distances (1/3)
A. La distance sémantique
Symbolise la distance entre le but visé par l'utilisateur et

les actions/objets de l'interface. Elle indique la complexité de
compréhension et mesure la quantité de ressources nécessaires aux
processus cognitifs pour choisir les commandes et déterminer si le but a
été atteint.
17
B. La distance articulatoire
Représente la distance entre l'action et sa représentation

physique (perception). Elle atteste la complexité d'utilisation du système
et mesure la quantité de ressources nécessaires aux processus cognitifs
et moteurs liés à la manipulation ou à la perception du système.
18
La réduction des distances sémantiques et articulatoires contribue

à diminuer les ressources nécessaires pour utiliser le système (logiciel)
et permet donc d'en faciliter son utilisation.
Exemple de cycle action-évaluation:
19
Exemple :L'objectif pour un utilisateur est d'acheter un produit spécifique.
Distance sémantique courte : Si le site web est conçu de manière intuitive avec une navigation claire, des étapes évidentes et
une mise en page logique, la distance sémantique entre le but (acheter un produit) et l'action (ajouter au panier, passer à la
caisse) serait courte. L'utilisateur voit facilement le produit, comprend comment l'ajouter au panier et finaliser son achat sans
ambiguïté ni confusion. Moins d'efforts cognitifs sont nécessaires pour passer du but à l'action car le chemin est direct et
évident.
Distance sémantique longue : En revanche, si le site web présente une disposition confuse, des options multiples ou des étapes
peu claires pour ajouter un produit au panier, la distance sémantique entre l'objectif (acheter un produit) et les actions à
entreprendre peut être plus grande. Si l'utilisateur doit naviguer à travers des menus complexes, des options ambiguës ou une
interface peu conviviale pour trouver et acheter le produit souhaité, cela augmentera l'effort cognitif nécessaire pour
comprendre comment atteindre le but.
Dans le premier cas, une distance sémantique courte entre le but (achat du produit) et les actions requises (ajout au panier,
finalisation de l'achat) rend l'expérience utilisateur fluide et nécessite moins d'efforts cognitifs. À l'inverse, une distance
sémantique plus grande rend l'accomplissement du but plus difficile car les étapes pour y parvenir sont moins évidentes,
exigeant ainsi plus d'efforts cognitifs pour comprendre comment passer à l'action.
Ces exemples illustrent comment la conception intuitive et la réduction de la distance sémantique entre les objectifs et les
actions peuvent influencer l'effort cognitif nécessaire pour réaliser une tâche donnée, et comment cela s'aligne avec les
principes de conception centrée sur l'utilisateur promus par des spécialistes tels que Don Norman.
21
2. Méthode de
conception IHM
22
2.1. Démarche ergonomique de conception (1/2)
A. Etape d'analyse
• Définition des sites de référence :
- Systèmes existants (concurrence).
- Contexte d'utilisation, d'organisation

sociale.
- Population de référence.
23
2.1. Démarche ergonomique de conception (2/2)
- Création d'un modèle de l'utilisateur.
- Création d'un modèle de la tâche.
B. Etape de conception
• Conception du système : les concepts

informatiques.
• Modèle de l'interaction.
24
2.2. Conception en génie logiciel (1/4)
En génie logiciel, de nombreuses méthodes de conception ont été élaborées :
- Quick and dirty. - Merise.

- (rapide et approximatif) : Supposez qu'une petite entreprise - Une entreprise décide de développer un nouveau
ait besoin d'un site web très simple pour présenter ses système de gestion de stocks pour son entrepôt. La
services. Dans cette approche, le développeur crée méthode Merise est utilisée pour analyser et concevoir
rapidement un site web basique en utilisant des outils de le système. Les concepteurs utilisent des schémas
création de sites web rapides et simples. Le site peut (comme le MCD : Modèle Conceptuel de Données) pour
manquer de fonctionnalités avancées ou de design décrire les entités, les relations et les traitements
sophistiqué, mais il répondra rapidement au besoin impliqués dans la gestion des stocks, en planifiant de
immédiat de présenter les informations de base de manière méthodique chaque étape du développement
l'entreprise. du système.
25
Modèle en cascade
Le modèle en cascade (en anglais : waterfall
model) est un modèle de gestion linéaire qui
divise les processus de développement en
phases de projet successives. Contrairement
aux modèles itératifs, chaque phase est
effectuée une seule fois. Les sorties de chaque
phase antérieure sont intégrées comme
entrées de la phase suivante
- Modèle en V.
- Méthodes Agile Modèle en spirale Modèle par incréments
(découpage en petit
blocs. Exemples :
Scrum, DSDM).
Ces méthodes ont pour
objectif commun d'améliorer
la flexibilité, la collaboration
et la qualité dans le
développement logiciel, mais
elles adoptent des approches
spécifiques pour y parvenir,
adaptées à différents
contextes et types de projets.
27
Avantages :
✓Ces méthodes poussent à impliquer fortement les utilisateurs pendant

la phase de conception.
Inconvénients :
- Implication limitée des utilisateurs (principalement lors de l’analyse

et
de l’évaluation).
28
-Méthodes centrées système (garantie fonctionnelle) au détriment
des utilisateurs.
-Principe d’indépendance entre le noyau fonctionnel et l’interface
utilisateur : dans les logiciels interactifs, cette séparation n’est pas
si nette.
- Évaluation tardive.
Et donc, il faut des méthodes de conception spécifiques pour les
IHM.
2.3. Pourquoi une méthode de conception
IHM ?
Les IHM doivent être pensées dès le début (analyse) la/le :
✓ Réduction des risques.
✓ Réduction des coûts de développement et de

maintenance.
✓ Réduction du budget et du temps pour la formation.
✓ Gain de productivité côté utilisateurs.

30 ✓ Réutilisation et amélioration des composants de base.
Méthode conception génie logiciel
.Focus sur le développement logiciel plutôt que sur l'expérience utilisateur
Rigidité dans la planification et les processus : Certaines méthodologies de génie logiciel, comme
le modèle en cascade, impliquent une planification et des processus plus rigides, ce qui peut ne
.pas convenir à la nature itérative et collaborative de la conception d'IHM
Manque d'accent sur les besoins et les retours utilisateurs
Complexité technique supérieure : Les processus complexes et techniques du génie logiciel
pourraient ne pas se traduire directement dans la conception intuitive et conviviale d'interfaces
utilisateur
Aperçu de la méthode de conception IHM .2.4
-Des concepts : utilisateur, tâche, contexte, phases.

-Des caractéristiques (inspirées des méthodes de conception GL) :
itérative, incrémentale, prototypée, centrée utilisateur et avec
évaluation précoce.
-Une relation entre équipe de conception et utilisateurs : basée
sur des personas, informative, participative.
Diapo 32 2.4.1. Concepts (1/4)
-Utilisateur : Plusieurs profils, caractéristiques variées.
-Tâche : Objectif de l’utilisateur (Exemple : rechercher un livre)
➢ Répétitive, régulière, occasionnelle, sensible aux

modifications de
l’environnement, contrainte par le temps, risquée, etc.
- Contexte : Environnement et contraintes d’utilisation :
➢ Grand public (proposer une prise en main immédiate).

33
2.4.1. Concepts (2/4)
➢Loisirs (rendre le produit attrayant).
Diapo 32
➢ Industrie (augmenter la productivité).
➢ Systèmes critiques (assurer un risque zéro).
➢ Mobilité.
➢Techniques (plate-forme, taille mémoire, écran, capteurs, réutilisation

d’ancien code).
34
- Phases : Une méthode de conception IHM se découpe
(généralement)
en trois phases :
1.Analyse = Préciser les attentes et les besoins des utilisateurs, connaître

leurs tâches et le contexte.
2. Développement = Réaliser tout ou partie d’une interface.
35
3. Évaluation = Mesurer l’utilisabilité de l’interface réalisée,

la satisfaction des utilisateurs pour réaliser les tâches avec cette
interface, identifier les points à améliorer pour la version suivante, etc.
36
Diapo 32
2.4.2. Caractéristiques
37
Caractéristiques
Cycles répétés(analyse, développement, iterative
évaluation )
Division en +eurs parties realiser 1 partie puis Incrémentale
,,,partie2
Utiliser les etapes croquis maquette,( logiciel) Prototypée
Étude de l’utilisateur et de sa tâche pour Centrée utilisateur
concevoir l’IHM
1. Modèle de l’utilisateur
2. . Modèle de la tâche
3. Modèle de l’interaction
Évaluation précoce
A. Itérative
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.

39
B. Incrémentale
Méthodologie basée sur la réalisation d’une première partie, puis d’une seconde...
-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

40utilisateurs qui peuvent changer.
C. Prototypée (1/2)
Obtenir une interface finale passe par
plusieurs étapes:
✓Croquis = Aperçu global de

l’interface (idée générale).
✓Maquette = Interface détaillée (sans

interaction).
Croquis, maquette et prototype d’une page
✓ Prototype = Version incomplète web
interface
41 d’une(avec interactions).
C. Prototypée (2/2)
Outils d’aide au prototypage :
✓Papier.
✓ Transparents, vidéo.
✓Logiciels de maquettage (Exemples : Invision, Maqetta, Pencil, Mocking Bird,

Basalmiq).
✓Logiciels de développement (Exemples : frameworks web, Netbeans,

Visual Studio).
42
D. Centrée utilisateur (1/8)
Étude de l’utilisateur et de sa tâche pour
concevoir l’IHM :
✓ Prise en compte des utilisateurs dès

l’analyse.
✓ Ne pas oublier le contexte réel d’utilisation.
Trois modèles pour spécifier les

caractéristiques de :
- L’utilisateur.
- La tâche à réaliser.
-43
1. 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 (Exemples : format

des sens d’écriture).
dates,
44
✓ Données liées à l’application : sur le
Compétences domaine,
compétences en informatique et sur le système :
- Novice, expert,
professionnel.
- Usage occasionnel, quotidien.
2. Modèle de la tâche
Identifier l’enchaînement des processus d’une
tâche :
45
✓ 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 se compose de :

46
- Procédure = Un ensemble de sous-tâches reliées par des relations de
composition ou des relations temporelles.
Une tâche élémentaire est une tâche décomposable uniquement

en actions physiques d’opérations d’E/S.
Exemple d’un modèle de tâche pour l’activité ”envoyer un sms”
47
48
3. Modèle de l’interaction
Établir une correspondance directe entre :
✓ Les objets conceptuels manipulés (Exemple : un fichier).
✓ La présentation et les interactions :
- Les représentations de l’objet à l’écran (Exemple : fichier

ouvert, corbeille vide).
49
D. Centrée utilisateur
(8/8)
- Les opérations sur l’objet (Exemple : ouverture,
modification).
50
E. Évaluation précoce (1/4)
L’évaluation des croquis, maquettes, et interfaces est
prototypes
fréquente et intervient
L’évaluation très tôt danssur
repose généralement la conception.
des scénarios. Un scénario
associe :
- Un utilisateur (ou un groupe).
- Un contexte (environnement et contraintes).
- Une ou plusieurs tâches (que l’utilisateur doit accomplir).

51
L’exécution d’un scénario provoque des idées et pistes
d’améliorations
pour concevoir les interfaces.
La réussite ou l’échec de l’exécution d’un scénario sont évalués

de manière qualitative et quantitative selon plusieurs critères :
➢ Taux de succès.
➢ Nombre
d’erreurs.
52
➢ Temps d’exécution des tâches.
➢ Nombre d’étapes nécessaires à la réussite du

scénario.
➢ Rythme d’apprentissage.
➢ Satisfaction des utilisateurs.
➢…
Exemple de scénario:
53
Utilisateur = Sans connaissance sur le
site khanacademy.org.
Contexte = Un ordinateur
standard
équipé de Firefox.
Tâches = Se connecter
à khanacademy.org, s’inscrire, choisir
les domaines d'étude et commencer
cours, …
54
Voici un exemple de scénario utilisé dans l'évaluation d'une Interface Homme-Machine (IHM) pour une application de
commerce électronique :
**Scénario : Achat en ligne d'un produit**
**Contexte :** Vous êtes un utilisateur régulier de l'application "ShopNow", une plateforme de commerce électronique
populaire. Vous souhaitez acheter un nouvel ordinateur portable pour remplacer le vôtre, et vous avez trouvé un modèle
intéressant sur cette application.
**Tâche :** Veuillez naviguer sur l'application "ShopNow", rechercher le modèle d'ordinateur portable "TechMaster
X5000", l'ajouter à votre panier, puis procéder au paiement pour finaliser votre achat.
**Étapes :**
1. Ouvrir l'application "ShopNow".
2. Se connecter à votre compte utilisateur.
3. Utiliser la barre de recherche pour trouver le modèle d'ordinateur portable "TechMaster X5000".
4. Accéder à la page du produit pour obtenir plus d'informations.
5. Vérifier les détails, la disponibilité et le prix.
6. Ajouter le produit à votre panier.
7. Accéder à votre panier pour voir le produit ajouté.
8. Procéder au paiement en utilisant votre méthode de paiement préférée.
9. Confirmer la commande et attendre la confirmation de la transaction.
Ce scénario permet de simuler une interaction typique d'un utilisateur qui souhaite effectuer un achat sur une
application de commerce électronique. En observant les utilisateurs pendant qu'ils effectuent cette tâche, les
concepteurs peuvent identifier les éventuels obstacles, les points de confusion ou les problèmes d'utilisabilité dans
l'IHM, et ainsi apporter des améliorations pour rendre le processus d'achat plus fluide et intuitif.
Diapo 32
2.4.3. Relation
concepteur/ utilisateur
56
A. Personas
Persona est un ensemble :
✓Des données générales (prénom, photo, etc.).

✓Des objectifs, contraintes, environnement de travail.
✓ Cequi peut influencer l’utilisateur et

ce qui peut le freiner ou le faire fuir.
49
Lors de la conception d'une IHM, la
création de personas permet de se
mettre à la place des utilisateurs cibles
et d'appréhender leurs besoins, leurs
comportements, leurs attentes et leurs
motivations. Chaque persona
représente un segment spécifique des
utilisateurs finaux et est caractérisé par
des données démographiques, des
comportements, des objectifs et des
scénarios d'utilisation.
B. Utilisateur réel
Dans une relation ou les
informative participative, utilisateurs
n’interviennent pas que pour les :
➢ Observées dans la résolution des tâches
(analyse).
➢ Interrogées sur leurs attentes (développement).
➢ Questionnées sur les interfaces (évaluation).
59
C. Informative
L’utilisateur est intégré dans l’équipe de conception, mais ne
participe
pas aux choix finaux.
60
D. Participative
L’utilisateur est intégré dans l’équipe de conception comme partenaire
de
conception, et participe donc aux choix de conception finaux.
- Obligation d’accepter des compromis pour satisfaire des

participants, même s’ils ont tort.
61
3. Techniques de
recueil d’informations
62
Introduction
Les techniques de recueil d’informations sont utilisées lors de la
méthode
de conception IHM pour récolter des informations :
➢ Sur les utilisateurs (Exemple : Pour construire des personas).
➢ Surles tâches (Exemple : Enchaînement des actions,

vocabulaire
métier).
➢ Sur les interfaces (Exemple : Idées, points forts/faibles).

63
A. Remue-méninges (brainstorming) (1/2)
Objectif : Générer un grand nombre d’idées
créatives.
Protocole :
- Réunir petit groupe avec différents rôles et

un
expertises.
- Limiter le temps (1
heure).
- Aborder / traiter un problème de conception
spécifique.
64
A. Remue-méninges (brainstorming) (2/2)
Procédure :
1. Générer une grande quantité de solutions
✓Enregistrer toutes les idées sans les évaluer (Exemple : sur

post-its).
2. Classer les idées en fonction de leur qualité
✓ Les idées sont classées par nombre de votes.
✓ Ne pas oublier les idées insolites. 56

B. Focus group (Groupe de discussion) (1/4)
• Est un petit groupe de personnes invitées ou recrutées

pour discuter d’un thème ou d’une proposition. Il
offre un aperçu de leurs réactions, leurs
valeurs, leurs préoccupations et leurs perspectives.
• Le focus group est une bonne méthode pour identifier

les principales problématiques à creuser dans le
cadre d’une enquête plus approfondie.
66
Objectif :
Le focus group est généralement utilisé pour répondre aux objectifs suivants :
❖Comprendre les motivations des utilisateurs.
❖Collecter des opinions, des croyances et des attitudes concernant un sujet ou une
problématique précise.
❖ Confirmer des hypothèses.
❖ Encourager la parole autour de problèmes particuliers.

67
Protocole :
- Définir différents thèmes à aborder (5 ou 6 recommandés).
- Limiter le groupe à 7-10 participants (timidité, temps de

parole).
- Séance filmée, utilisation de tableaux et/ou assistantes.
Procédure :
✓ Activité ”brise-glace”, les utilisateurs font
68
connaissance.
✓ Rappeler les règles à respecter.
✓ Exercices de difficulté croissante, et portant sur des points de plus en plus précis du
système.
✓ Synthèse des résultats et discussions.
Comme avantage, le focus group donne une :
• Vision globale sur le système en termes de motivations, préférences, priorités,

attentes
voire conflits.
69
• Emergence d’idées nouvelles (dynamique de
C. Magicien d’Oz (1/2)
Objectif :
Obtenir des informations sur un système inexistant ou

partiellement développé en simulant les fonctionnalités absentes.
Protocole :
- Adapté à des systèmes lourds, difficiles à développer.
- Un partenaire (magicien) effectué les actions à la place du système.

70
C. Magicien d’Oz (2/2)
Procédure :
✓ Le magicien interprète les entrées de l’utilisateur.
✓ Il supplée aux manques du prototype et contrôle le comportement

du
système.
71
D. Tri par cartes (1/3)
Objectif :
Construire l’architecture de l’information
Protocole :
-Panel représentatif d’utilisateurs (en individuel ou en groupe).
-Préparer des cartes avec une information ou une fonctionnalité (décrite

par 1 ou 2 mots-clés).
72
D. Tri par cartes (2/3)
Procédure :
✓ Validation des mots-clés sur les cartes (réécriture au

besoin).
✓ Regroupement des cartes ”qui se ressemblent”.
✓ Choix d’un nom pour chaque groupe construit.
Analyse des résultats :

73
D. Tri par cartes
(3/3)
• Qualitative, basée sur les observations lors des
séances.
74
E. Scénarimage (storyboard) (1/2)
Objectif :
Créer une description réaliste de l’utilisation

du système.
Protocole :
- Utiliser les storyboards du monde du cinéma

pour une vue d’ensemble des interactions pour
66
E. Scénarimage (storyboard) (2/2)
Procédure :
✓ Identifier des tâches existantes (typiques et inhabituelles).
✓ Créer des scénarios de travail en généralisant les histoires.
✓ Mélanger les événements de déférentes provenances.
✓ Incorporer des situations inhabituelles dans des activités

typiques.
76
F. Conception en parallèle (1/2)
Objectif : Créer plusieurs interfaces et sélectionner leurs points forts.
Protocole : Panel représentatif d’utilisateurs et/ou de concepteurs

(en individuel ou en groupe).
Procédure :
✓ Chaque utilisateur (ou groupe) réalise indépendamment une

interface
(papier, logiciel, etc.).
77
F. Conception en parallèle (2/2)
✓ Discussion et comparaison des interfaces
réalisées.
✓ Les meilleures idées sont conservées.
78
G. Inspection cognitive (cognitive walkthrough)
(1/2)
Objectif :
Evaluer le système en se mettant à la place de

l’utilisateur.
Protocole :
- Spécifier des scénarios (tâches et contexte).
Procédure :
79
G. Inspection cognitive (cognitive walkthrough)
(2/2)
✓ Évaluation en imaginant ce que ferait l’utilisateur pour
résoudre la
tâche.
• Comprend-il les messages, le comportement du système ?
✓ Interprétation et prise en compte des résultats.
80
H. Observation (1/2)
Objectif :
Identifier les problèmes d’une application.
Protocole :
- En laboratoire ou sur le terrain.
- Choisir au moins 2 utilisateurs qui agiront

indépendamment.
81
H. Observation (2/2)
✓Définir une mission spécifique (résoudre un problème, suivre un scénario).
✓ Décider de ce que l’on veut mesurer.
✓Demander à l’utilisateur d’effectuer la mission : • Observation

directe simple.
• Avec explicitation ・ haute voix.
✓ Enregistrer les interactions, puis les analyser :

82
• Papier, audio, vidéo, trace
I. Test A/B (1/4)
Objectif :
Evaluer performances de deux alternatives de conception pour un

les
composant.
Protocole :
- Deux versions d’une même interface, chacune avec une variante du

composant à tester (Exemple : la couleur d’un bouton).
- Définir un objectif (Exemple : un clic sur le bouton testé).

83
I. Test A/B (2/4)
-Choisir une métrique pour quantifier l’intérêt pour chaque version

(Exemple : le nombre de clics sur le bouton divisé par le nombre
de vues).
-Extensions pour tester plus de deux versions ou plus de

deux composants (tests A/B, multivarié).
Procédure :
84
I. Test A/B (3/4)
✓ Quand un utilisateur arrive sur l’interface, proposer au hasard l’une
des
deux versions.
✓ Calculer le nombre d’objectifs atteints pour chaque version.
85
I. Test A/B (4/4)
Exemple: en 2008, plusieurs versions de la page
Pour la campagne présidentielle de B. Obama

d’accueil :
- Six médias différents (images et vidéos).
- Quatre labels sur le bouton ”call-to-action”.
- Métrique utilisée = nombre d’inscriptions / nombre de

vues.
- Meilleur résultat = le label ”learn more” et une image.

86
J. Audit ergonomique
Objectif :
Evaluation des interfaces par des experts en ergonomie.
Protocole :
- Dans l’idéal, évaluation par plusieurs experts indépendants et confrontation

de leurs résultats.
- En pratique, évaluation par un expert en ergonomie et relecture par un expert

du domaine. 78
K. Enquête / entretien (1/3)
Objectif :
Identifier des pistes de conception pour les prochaines itérations ou

des problèmes rencontrés par les utilisateurs.
Protocole :
- Panel représentatif d’utilisateurs (en mode individuel).
- Questionner l’utilisateur dans son environnement de travail (face à face).

88
K. Enquête / entretien (2/3)
- Favoriser l’enregistrement (sonore/vidéo) à la prise de
notes.
- Durée recommandée de 1 heure.
- Neutralité de l’enquêteur.
Procédure :
✓ Poser des questions semi-directives lors de l’analyse.

89
K. Enquête / entretien
(3/3)
✓ Reformuler les réponses.
90
L. Questionnaire (1/2)
Objectif :
Résumer économiquement l’avis de nombreux utilisateurs.
Protocole :
- Panel représentatif d’utilisateurs (destinataire du questionnaire).
- Choisir des moyens de diffusion et de récupération

(Exemple :
91
application en ligne, email, version papier).
L. Questionnaire (2/2)
- Choisir comment analyser les résultats
(automatiquement / manuellement).
- Utiliser un type de questions adapté :
• Questions ouvertes, dirigées, QCM.
- Respecter certaines règles (sociologie) pour

rédiger correctement les questions (Exemple :
forme précise, concision, …).
92
M. Analyse de traces (1/2)
Objectif :
Etudier le réel des

comportement utilisateurs
sur une tâche.
Protocole :
- Choisir un ou plusieurs types de

traces.
- Préparer la méthode de collecte.

93
M. Analyse de traces (2/2)
Protocole :
- Choisir un ou plusieurs types de traces.
- Préparer la méthode de collecte.
Procédure :
✓ Récolter des traces d’un ou plusieurs types.
✓ Analyser ces traces (qualitatif et

94
3.1. En résumé
95
4. Modèle de tâches
96
4.1. Qu’est-ce qu’un modèle de tâches ?
Les modèles de tâches sont des descriptions logiques des activités
à
réaliser pour atteindre les objectifs des utilisateurs.
Les modèles de tâches décrivent comment les activités peuvent

être réalisées pour atteindre les objectifs des utilisateurs lors de
l’interaction avec l’application considérée.
97
4.2. Qu’est-ce qu’une tâche ?
Composantes d’une tâche
➢ Buts : Etat à atteindre (Exemple: Produire une lettre).
➢ Dispositifs : Méthodes, outils ou techniques pour atteindre les buts.
➢Tâches : Activités nécessaires pour atteindre les buts l’aide des
à dispositifs.
➢ Sous-tâches : Composantes des tâches.
➢ Actions : Tâches simples, qui n’ont pas de structure de 89

4.3. L’objectif du modèle de tâche
-Comprendre un domaine d’application.
- Enregistrer les résultats de discussions interdisciplinaires.
-Concevoir de nouvelles applications cohérentes avec le modèle conceptuel

de l’utilisateur.
- Analyser et évaluer l’utilisabilité d’un système interactif.
- Assister l’utilisateur pendant une session.
- Documenter le logiciel interactif. 90

4.4. Étapes de la modélisation de la tâche
100
4.4.1. Modélisation d’une tâche en utilisant les
graphes (1/2)
Une tâche Alternative
Alternative
non stricte
Suite non Boucle

Séquence
ordonnée
101
4.4.1. Modélisation d’une tâche en utilisant les
graphes (2/2)
Notations
0. Une tâche qui a 0. Une tâche finale qui n’a

une sous-tâche pas une sous-tâche
Pour planifier pour combien des sous-

tâches sont réalisées Numérotation des
Plan 0 : Faire 1-2-4-5 dans cet tâches
ordre.
Lorsque les valeurs par défaut sont incorrectes, faire
102
3.
Exemple: Manger des crêpes (1/7)
1- Séquence
Manger des crêpes
Si la pâte a
reposé 2h
Acheter les Préparer la Faire cuire Déguster les
ingrédients pâte la pâte crêpes
103
2- Suite non ordonnée

Acheter les ingrédients
Optionnelle: si
crêpes sucrées
Acheter Acheter du Acheter des Acheter de la Acheter du
Acheter de
du sel lait (1 litre) œufs (6) farine (500 g) sucre vanillé
l’huile
104
Préparer la pâte
Optionnelle: si
crêpes sucrées
Mélanger les œufs, Mélanger la farine Verser les œufs Sucrer avec 2
2 cuillères à soupe tanisée dans le lait dans le mélange sachets de sucre
d’huile et le sel farine - lait vanillé
105
3-
Alternative Acheter les ingrédients
Tamiser la farine Utiliser un

Battre avec fouet batteur électrique
106
4- Alternative non stricte
Faire cuire la pâte (une crêpe)
Jusqu’au changement
complet de texture
Verser une Faire cuire une Faire cuire
louche de pâte face Retourner les Faire sauter les l’autre face
dans la poêle crêpes avec une crêpes
chaude spatule
107
5- Boucle
Tant qu'il
reste
de la pâte
Faire cuire la pâte (une crêpe)
108
Exemple: Manger des crêpes
(7/7)
6- Le graphe final
100
101
4.4.2. Modélisation d’une tâche sans
l’utilisation des graphes (1/2)
Exemple : Faire un achat en ligne
1.Effectuer un achat en ligne.
2.Connexion : 1.1.Sélectionner l’écran de connexion.
1.2.Entrer ID.
1.3.Entrer le mot de passe.
2. Choisir l’objet : 102

4.4.2. Modélisation d’une tâche sans
l’utilisation des graphes (2/2)
1. ir la liste.
2. ctionner l’objet.
3. Payer : 3.1.Choisir l’écran de paiement.
3.2.Sélectionner la méthode de paiement.
3.3.Entrer les détails du mode de
paiement.
Exemple modèles de développement par increment
Un projet de développement de logiciel de

gestion de projet adopte une approche
itérative. Dans la première itération, seules les
fonctionnalités de base sont développées et
livrées, telles que la création de tâches. Dans
les itérations suivantes, des fonctionnalités
avancées comme la gestion des ressources ou
le suivi du temps sont ajoutées. Chaque
version livrée ajoute des fonctionnalités
supplémentaires et est testée et évaluée par les
utilisateurs, ce qui permet d'améliorer
progressivement le logiciel.
Méthodes agiles
Les méthodes agiles caractérisent un mode de gestion des
projets informatiques privilégiant le dialogue entre
toutes les parties prenantes, clients, utilisateurs,
développeurs et autres professionnels du projet, la
souplesse en cours de réalisation, la capacité à modifier
les plans et la rapidité de livraison.Il s'agit de rompre
avec les pratiques plus traditionnelles bien trop rigides et
trop exigeantes en matière de spécifications
(contractuelles). Pour cela il est important d'accorder la
priorité au relationnel et à la communication étendue sur
les processus de développement.
Outils clés : Trello, Jira, Asana, Azure DevOps, GitLab

1.Scrum :
•Nature : Scrum est un cadre de travail Agile axé sur la gestion itérative et
incrémentielle des projets.
•Rôles clés : Il définit des rôles tels que le Scrum Master, responsable de
faciliter le processus, et le Product Owner, responsable de définir les
priorités du backlog du produit.
•Éléments clés : Les sprints (itérations de développement), le backlog du
produit (liste priorisée des éléments à réaliser), les réunions quotidiennes
de stand-up, la revue de sprint et la rétrospective de sprint sont des
éléments fondamentaux de Scrum.
•Avantages : Flexibilité, adaptation aux changements, livraison continue
de fonctionnalités opérationnelles.
2.DSDM (Dynamic Systems Development Method) :
• Nature : DSDM est une méthodologie Agile axée sur la livraison rapide de logiciels
de haute qualité tout en répondant aux besoins métier.
• Caractéristiques : Elle met l'accent sur l'engagement des parties prenantes, la
collaboration entre l'équipe de développement et les utilisateurs finaux.
• Phases clés : Utilise un cycle de vie itératif et incrémentiel, comprenant des phases
telles que l'étude de faisabilité, la phase de développement itératif, la phase de
livraison et l'évaluation post-projet.
• Avantages : Structurée mais souple, intègre les retours d'information des utilisateurs,
adaptabilité aux changements de besoins.
Ces méthodes ont pour objectif commun d'améliorer la flexibilité, la collaboration et la
qualité dans le développement logiciel, mais elles adoptent des approches spécifiques pour
y parvenir, adaptées à différents contextes et types de projets.

CHAPITRE 2 - Méthodologies de Construction - IHM

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CHAPITRE 2 - Méthodologies de Construction - IHM

Transféré par

Droits d'auteur :

Formats disponibles

Centre Universitaire d’Ali Kafi –

Tindouf Institut des Sciences et de

Interface Homme Machine

1. Prise en compte de l’utilisateur.

2. Méthode de conception IHM

- L'humain doit constituer l'élément central à considérer dans

- La prise en compte des utilisateurs doit intervenir assez tôt, dès la

- Pour éviter de commettre des erreurs grossières de conception, il

Il désigne en psychologie toute activité visant à atteindre un but à

partir d'une situation courante.

➢ Décider ce que l'on va manger ce soir.

La Théorie de l'Action de Don Norman précise le déroulement

du processus mental lors d'une étape élémentaire de la

résolution de problème, dans le cas de l'interaction avec un système

La théorie de l'action qui a été élaborée par D. A. Norman, fournit

Toute action exécutée avec un certain but est un cycle itératif en

❖ Exécution d'une commande.

•Compréhension du système (élaboration du plan et évaluation

• Interaction avec le système (exécution de l'action et perception).

Symbolise la distance entre le but visé par l'utilisateur et

Représente la distance entre l'action et sa représentation

La réduction des distances sémantiques et articulatoires contribue

Exemple de cycle action-évaluation:

• Définition des sites de référence :

- Systèmes existants (concurrence).

- Contexte d'utilisation, d'organisation

- Création d'un modèle de la tâche.

• Conception du système : les concepts

- Quick and dirty. - Merise.

✓Ces méthodes poussent à impliquer fortement les utilisateurs pendant

- Implication limitée des utilisateurs (principalement lors de l’analyse

✓ Réduction des risques.

✓ Réduction des coûts de développement et de

✓ Réduction du budget et du temps pour la formation.

✓ Gain de productivité côté utilisateurs.

-Des concepts : utilisateur, tâche, contexte, phases.

-Tâche : Objectif de l’utilisateur (Exemple : rechercher un livre)

➢ Répétitive, régulière, occasionnelle, sensible aux

- Contexte : Environnement et contraintes d’utilisation :

➢ Grand public (proposer une prise en main immédiate).

➢ Systèmes critiques (assurer un risque zéro).

➢Techniques (plate-forme, taille mémoire, écran, capteurs, réutilisation

1.Analyse = Préciser les attentes et les besoins des utilisateurs, connaître

2. Développement = Réaliser tout ou partie d’une interface.

3. Évaluation = Mesurer l’utilisabilité de l’interface réalisée,

- 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.

-Travail sur une seule zone de l’interface

- Prise en compte de nouveaux objectifs.

- Prise en compte de l’avis des

✓Croquis = Aperçu global de

✓Maquette = Interface détaillée (sans

✓Logiciels de maquettage (Exemples : Invision, Maqetta, Pencil, Mocking Bird,

✓Logiciels de développement (Exemples : frameworks web, Netbeans,

✓ Prise en compte des utilisateurs dès

✓ Ne pas oublier le contexte réel d’utilisation.

Trois modèles pour spécifier les

Identifier les caractéristiques pertinentes de l’utilisateur :

- Taille, âge, genre, handicaps.

- Niveau de formation, habitudes culturelles (Exemples : format

- Usage occasionnel, quotidien.