LIFIHM - Interactions Homme Machine

Conception des IHM

Fabien Duchateau

[Link] [at] [Link]

Université Claude Bernard Lyon 1

2020 - 2021

[Link]
Positionnement dans LIFIHM

Ces transparents utilisent le genre féminin (e.g., chercheuse, développeuses) plutôt

que l’écriture inclusive (moins accessible, moins concise, et pas totalement inclusive)
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 2 / 68
Définition

IHM = ensemble des dispositifs matériels et logiciels permettant à

une utilisatrice d’interagir avec un système interactif

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 3 / 68

Des exemples de mauvaises IHM...

Confusion sur le cadran Absence de prise en compte

partagé de vitesse verticale et de la dimension humaine dans
d’angle de descente le processus de supervision
(catastrophe du mont Saint (accident nucléaire de Three
Odile en 1992) Mile Island en 1979)

[Link]
[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 4 / 68
... et des exemples de bonnes IHM

Refonte des écrans de

saisie chez Ameritech ”The beauty of data visualization”
(bénéfice de plusieurs (ou comment de bonnes interfaces
milions de dollars) facilitent des découvertes)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 5 / 68
Les IHM dans les applications informatiques

L’écran/interface d’une application ou page

d’un site web est un artefact concret, inter-
actif, et utilisé par les utilisatrices :

I Nombreuses questions des utilisatrices

sur les IHM
I Développement : environ la moitié du
coût pour les IHM
I Maintenance : plus de 50% de
changements demandés par les
utilisatrices

J. Nielsen, Usability engineering, Academic Press, 1993

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 6 / 68
Conception en génie logiciel
Nombreuses méthodes de conception en génie logiciel :
I Merise
I Modèle en cascade, en V
I Modèle en spirale
I Méthodes Agile (e.g., Scrum, DSDM)
I …

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 7 / 68
Conception en génie logiciel
Nombreuses méthodes de conception en génie logiciel :
I Merise
I Modèle en cascade, en V
I Modèle en spirale
I Méthodes Agile (e.g., Scrum, DSDM)
I …

I Implication limitée des utilisatrices

I Méthodes centrées système (garantie fonctionnelle) au
détriment des utilisatrices
I Évaluation tardive (effet ”tunnel”)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 7 / 68
Plan

Méthode de conception IHM

Techniques de recueil d’informations

Méthode de conception IHM Techniques de recueil d’informations

Pourquoi une méthode de conception IHM ?

Implication des utilisatrices + évaluation régulière des IHM :

I Réduction des risques et des coûts de maintenance
I Réduction du budget / temps de formation
I Attractivité de l’application, gain de productivité
I Réutilisation et amélioration des composants de base

D. Norman, The Design of Everyday Things, Basic Books, 2013

B. Shneiderman, Designing the User Interface : Strategies for Effective
Human-Computer Interaction, Pearson, 2014
J.F. Nogier, Ergonomie du logiciel et design Web, Dunod, 2008
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 9 / 68
Méthode de conception IHM Techniques de recueil d’informations

Aperçu de la méthode de conception IHM

Les IHM doivent être pensées dès le début (analyse) !

I Concepts : utilisatrice, tâche, contexte, phases

I Caractéristiques (inspirées des méthodes de conception GL) :

itérative, incrémentale, prototypée, centrée utilisatrice et
avec évaluation précoce

I Relation entre équipe de conception

et utilisatrices : basée sur des personas,
informative, participative

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 10 / 68
Méthode de conception IHM Techniques de recueil d’informations

Concepts - utilisatrice, tâche, contexte

Utilisatrice = plusieurs profils, caractéristiques variées

Tâche = objectif de l’utilisatrice (e.g., rechercher un livre)

I 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

I 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), en
mobilité, etc.
I Techniques (e.g., plate-forme, taille mémoire, écran, capteurs,
réutilisation d’ancien code)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 11 / 68

Méthode de conception IHM Techniques de recueil d’informations

Concepts - phases

Une méthode de conception IHM se découpe (généralement) en

trois phases :

I Analyse = préciser les attentes et les besoins des utilisatrices,

connaître leurs tâches et le contexte

I Développement = réaliser tout ou partie d’une interface

(sous une forme plus ou moins aboutie)

I Évaluation = mesurer l’utilisabilité de l’interface réalisée, la

satisfaction des utilisatrices pour réaliser les tâches avec cette
interface, identifier les points à améliorer pour la version
suivante, etc.

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 12 / 68

Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - itérative
Méthodologie basée sur une succession de cycles composés des
trois phases (analyse, développement, évaluation) :
I Travail sur l’intégralité de l’interface
I Cycles répétés jusqu’à obtention d’une interface satisfaisante
I Prise en compte de nouveaux objectifs
I Prise en compte de l’avis des utilisatrices qui peuvent changer

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 13 / 68
Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - incrémentale
Méthodologie basée sur la réalisation d’une première partie, puis
d’une seconde, etc.
I Travail sur une seule zone de l’interface jusqu’à satisfaction
I Développement de solutions partielles, intermédiaires
I Prise en compte de nouveaux objectifs
I Prise en compte de l’avis des utilisatrices qui peuvent changer

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 14 / 68
Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - itérative et incrémentale

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 15 / 68
Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - prototypée

Obtenir une interface finale passe par plusieurs étapes :

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

Lors de ces étapes, faire des choix :

I de haut niveau (e.g., fonctionnalités disponibles)
I de niveau intermédiaire (e.g., enchaînement des écrans)
I de bas niveau (e.g., idées d’icônes)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 16 / 68

Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - prototypée (2)

Croquis, maquette et prototype d’une page web

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 17 / 68
Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - prototypée (3)

Outils d’aide au prototypage :

I Papier, post-its

I Transparents, vidéo (e.g., Libre Office Impress)

I Logiciels de maquettage
I haute fidélité, i.e., avec interactions (e.g., Quant-UX, Alva,
Invision, Maqetta, Zeplin)
I basse fidélité, i.e., seulement des liens entre écrans (e.g.,
[Link], Mocking Bird, Pencil, Basalmiq, Adobe XD, PenPot,
Akira, Sketch)

I Logiciels de développement (e.g., frameworks web, Netbeans,

Visual Studio)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 18 / 68
Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - prototypée (4)

Avantages du prototypage :
I Travailler sur plusieurs ensembles de détails à la fois
I Se concentrer sur les parties problématiques de l’interface
I Étudier des alternatives de conception
I S’assurer de l’utilisabilité du système
I Visualiser ce que sera le système final (utilisatrices)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 19 / 68

Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - centrée utilisatrice

Étude de l’utilisatrice et de sa tâche pour concevoir l’IHM :

I Prise en compte des utilisatrices dès l’analyse
I Difficulté à choisir des utilisatrices représentatives
I Ne pas oublier le contexte réel d’utilisation

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

I De l’utilisatrice
I De la tâche à réaliser
I De l’interaction

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 20 / 68
Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - centrée utilisatrice (2)

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

de l’utilisatrice

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

I Données liées à l’application : compétences sur le domaine,

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

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 21 / 68

Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - centrée utilisatrice (3)

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

d’une tâche
I Construire la hiérarchie de tâches du système
I Spécifier chaque tâche, penser aux exceptions
I Évaluer la décomposition avec l’utilisatrice

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

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 22 / 68

Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - centrée utilisatrice (4)

Exemple de modèle de tâche pour l’activité ”envoyer un sms”

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 23 / 68

Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - centrée utilisatrice (5)

Modèle de l’interaction : établir une correspondance intuitive et
”naturelle” (métaphore) entre :
I Les objets conceptuels manipulés (e.g., un fichier)
I La présentation et les interactions :
I les représentations de l’objet à l’écran (e.g., fichier ouvert,
verrouillé)
I les opérations sur l’objet (e.g., ouverture, modification)
I Inspirée du monde réel (e.g., spatial, technique)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 24 / 68

Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - évaluation précoce

L’évaluation des croquis, maquettes, prototypes et interfaces est

fréquente et intervient très tôt dans la conception

L’évaluation repose généralement sur des scénarios. Un scénario

associe :
I Une utilisatrice (ou un groupe)
I Un contexte (environnement et contraintes)
I Une ou plusieurs tâches (que l’utilisatrice doit accomplir)

Exécution d’un scénario ⇒ idées et pistes d’améliorations pour

concevoir les interfaces

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 25 / 68

Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - évaluation précoce (2)

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 :
I Taux de succès
I Nombre d’erreurs
I Temps d’exécution des tâches (e.g., modèles GOMS, KLM)
I Nombre d’étapes nécessaires à la réussite du scénario
I Rythme d’apprentissage
I Satisfaction des utilisatrices
I …

[Link]
[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 26 / 68
Méthode de conception IHM Techniques de recueil d’informations

Caractéristiques - évaluation précoce (3)

Exemple de scénario :
I Utilisatrice = sans connaissance sur le site Grooveshark
I Contexte = un ordinateur standard équipé de Firefox
I Tâches = se connecter à Grooveshark, chercher des musiques
par titre et auteur, les ajouter à la playlist et étendre cette
playlist par l’ajout de musiques dans le même genre musical

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 27 / 68

Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - personas

Un persona n’est pas une utilisatrice réelle, mais une abstraction

de plusieurs (i.e., traits caractéristiques les plus fréquents)
I Meilleure compréhension des utilisatrices et de leurs objectifs
I Vision partagée des utilisatrices

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

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 28 / 68

Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - personas (2)

Exemples de personas
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 29 / 68
Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - personas (2)

Exemples de personas
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 29 / 68
Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - personas (3)

I Empathie cognitive
I Particulièrement adaptée au web (passage à l’échelle)

I Distance par rapport aux utilisatrices réelles

I Besoin de modifier les personas en cas de nouveaux résultats
ou de contexte différent
I Mauvaise définition des personas ⇒ échec

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 30 / 68

Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - personas (3)

I Empathie cognitive
I Particulièrement adaptée au web (passage à l’échelle)

I Distance par rapport aux utilisatrices réelles

I Besoin de modifier les personas en cas de nouveaux résultats
ou de contexte différent
I Mauvaise définition des personas ⇒ échec

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 30 / 68

Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - utilisatrices réelles

Dans une relation informative ou participative, les utilisatrices
n’interviennent pas que pour tester :
I Observées dans la résolution des tâches (analyse)
I Interrogées sur leurs attentes (développement)
I Questionnées sur les interfaces (évaluation)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 31 / 68

Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - utilisatrices réelles

Dans une relation informative ou participative, les utilisatrices
n’interviennent pas que pour tester :
I Observées dans la résolution des tâches (analyse)
I Interrogées sur leurs attentes (développement)
I Questionnées sur les interfaces (évaluation)

I Seules les utilisatrices connaissent la réalité des tâches (crucial

pour les tâches mal identifiées, et source d’innovations)
I Facilite l’acceptation du logiciel

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 31 / 68

Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - utilisatrices réelles

Dans une relation informative ou participative, les utilisatrices
n’interviennent pas que pour tester :
I Observées dans la résolution des tâches (analyse)
I Interrogées sur leurs attentes (développement)
I Questionnées sur les interfaces (évaluation)

I Seules les utilisatrices connaissent la réalité des tâches (crucial

pour les tâches mal identifiées, et source d’innovations)
I Facilite l’acceptation du logiciel

I Augmentation des coûts de développement

I Contradictions possibles entre les utilisatrices participant-e-s
et les autres

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 31 / 68

Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - informative

L’utilisatrice est intégrée dans l’équipe de conception, mais ne

participe pas aux choix finaux (imaginée pour la conception avec
des enfants)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 32 / 68

Méthode de conception IHM Techniques de recueil d’informations

Relations conceptrice/utilisatrice - participative

L’utilisatrice est intégrée dans l’équipe de conception comme

partenaire de conception à part entière, et participe donc aux choix
de conception finaux
I Obligation d’accepter des compromis pour satisfaire des
participantes, même si elles ont tort

Une interface utilisateur, c’est comme une blague. Si vous devez

l’expliquer, c’est qu’elle n’est pas si bonne.

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 33 / 68
Méthode de conception IHM Techniques de recueil d’informations

En résumé

I Méthode de conception
itérative, incrémentale,
prototypée, centrée utilisatrice
et prise en compte précoce de
l’évaluation
I Relation forte entre équipe de
conception et utilisatrice

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 34 / 68

Méthode de conception IHM Techniques de recueil d’informations

En résumé

I Méthode de conception
itérative, incrémentale,
prototypée, centrée utilisatrice
et prise en compte précoce de
l’évaluation
I Relation forte entre équipe de
conception et utilisatrice

Une méthode de conception IHM nécessite de collecter des

informations sur les utilisatrices, leurs tâches ou sur les évaluations
des interfaces ⇒ techniques de recueil d’informations

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 34 / 68

Plan

Méthode de conception IHM

Techniques de recueil d’informations

Méthode de conception IHM Techniques de recueil d’informations

Techniques de recueil d’informations

Les techniques de recueil d’informations sont utilisées lors de la

méthode de conception IHM pour récolter des informations :
I Sur les utilisatrices (e.g., pour construire des personas)
I Sur les tâches (e.g., enchaînement des actions, vocabulaire
métier)
I Sur les interfaces, notamment en évaluation (e.g., idées,
points forts/faibles)

Choisir une technique adaptée selon le contexte, les utilisatrices et

la phase active (analyse, développement ou évaluation)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 36 / 68

Méthode de conception IHM Techniques de recueil d’informations

Remue-méninges (brainstorming)
Objectif : générer un grand nombre d’idées créatives

Protocole :
I Réunir un petit groupe avec différents rôles et expertises
I Limiter le temps (1 heure)
I Aborder / traiter un problème de conception spécifique

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 37 / 68

Méthode de conception IHM Techniques de recueil d’informations

Remue-méninges (2)

Procédure :
1. Générer une grande quantité de solutions
I enregistrer toutes les idées sans les évaluer (e.g., sur post-its)
2. Classer les idées en fonction de leur qualité
I les idées sont classées par nombre de votes
I ne pas oublier les idées insolites

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 38 / 68

Méthode de conception IHM Techniques de recueil d’informations

Focus group

Objectif : comprendre les motivations des utilisatrices

Protocole :
I Définir différents thèmes à aborder (5 ou 6 recommandés)
I Limiter le groupe à 7-10 participantes (timidité, temps de
parole)
I Séance filmée, utilisation de tableaux et/ou assistantes

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 39 / 68

Méthode de conception IHM Techniques de recueil d’informations

Focus group (2)

Procédure :
1. Activité ”brise-glace”, les utilisatrices font connaissance
2. Rappeler les règles à respecter
3. Exercices de difficulté croissante, et portant sur des points de
plus en plus précis du système
4. Synthèse des résultats et discussions

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 40 / 68

Méthode de conception IHM Techniques de recueil d’informations

Focus group (2)

Procédure :
1. Activité ”brise-glace”, les utilisatrices font connaissance
2. Rappeler les règles à respecter
3. Exercices de difficulté croissante, et portant sur des points de
plus en plus précis du système
4. Synthèse des résultats et discussions

Vision globale sur le système en terme de motivations, préférences,

priorités, attentes voire conflits
Émergence d’idées nouvelles (dynamique de groupe)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 40 / 68

Méthode de conception IHM Techniques de recueil d’informations

Magicien d’Oz

Objectif : obtenir des informations sur un système inexistant ou

partiellement développé en simulant les fonctionnalités absentes

Protocole :
I Adapté à des systèmes lourds, difficiles à développer
I Une compère (magicienne) effectue les actions à la place du
système

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 41 / 68
Méthode de conception IHM Techniques de recueil d’informations

Magicien d’Oz (2)

Procédure :
1. La magicienne interprète les entrées de l’utilisatrice
2. Elle supplée aux manques du prototype et contrôle le
comportement du système
Exemple : projet DIALORS, un système pour réserver un billet de
train en langage naturel
I Expérimentations réelles en 1984 avec ”magicien d’Oz”
I Face à la machine, les utilisatrices ont adopté un langage
haché ⇒ simplification du modèle pour le langage naturel

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 42 / 68
Méthode de conception IHM Techniques de recueil d’informations

Magicien d’Oz (2)

Procédure :
1. La magicienne interprète les entrées de l’utilisatrice
2. Elle supplée aux manques du prototype et contrôle le
comportement du système
Exemple : projet DIALORS, un système pour réserver un billet de
train en langage naturel
I Expérimentations réelles en 1984 avec ”magicien d’Oz”
I Face à la machine, les utilisatrices ont adopté un langage
haché ⇒ simplification du modèle pour le langage naturel

De moins en moins utilisé (logiciels de protypage d’interface)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 42 / 68
Méthode de conception IHM Techniques de recueil d’informations

Tri par cartes

Objectif : construire l’architecture de l’information

Protocole :
I Panel représentatif d’utilisatrices (en individuel ou en groupe)
I Effectuer plusieurs tris (de 3 à 10 selon la convergence des
résultats)
I Préparer des cartes avec une information ou une fonctionnalité
(décrite par 1 ou 2 mots-clés)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 43 / 68

Méthode de conception IHM Techniques de recueil d’informations

Tri par cartes (2)

Procédure :
1. Validation des mots-clés sur les cartes (réécriture au besoin)
2. Regroupement des cartes ”qui se ressemblent”
3. Choix d’un nom pour chaque groupe construit

Analyse des résultats :

I Statistique (groupes les plus fréquemment formés)
I Qualitative, basée sur les observations lors des séances

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 44 / 68

Méthode de conception IHM Techniques de recueil d’informations

Tri par cartes (2)

Procédure :
1. Validation des mots-clés sur les cartes (réécriture au besoin)
2. Regroupement des cartes ”qui se ressemblent”
3. Choix d’un nom pour chaque groupe construit

Analyse des résultats :

I Statistique (groupes les plus fréquemment formés)
I Qualitative, basée sur les observations lors des séances

Convergence rapide vers une organisation pertinente du contenu

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 44 / 68

Méthode de conception IHM Techniques de recueil d’informations

Scénarimage (storyboard)

Objectif : créer une description réaliste de l’utilisation du système

Protocole :
I Utiliser les storyboards du monde du cinéma pour une vue
d’ensemble des interactions pour résoudre une tâche

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 45 / 68
Méthode de conception IHM Techniques de recueil d’informations

Scénarimage (2)

Procédure :
1. Identifier des tâches existantes (typiques et inhabituelles)
2. Créer des scénarios de travail en généralisant les histoires
I mélanger les événements de différentes provenances
I incorporer des situations inhabituelles dans des activités
typiques
I inclure des situations qui aboutissent et d’autres pas

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 46 / 68

Méthode de conception IHM Techniques de recueil d’informations

Conception en parallèle

Objectif : créer plusieurs interfaces et sélectionner leurs points

forts

Protocole :
I Panel représentatif d’utilisatrices et/ou de conceptrices (en
individuel ou en groupe)

Procédure :
1. Chaque utilisatrice (ou groupe) réalise indépendamment une
interface (papier, logiciel, etc.)
2. Discussion et comparaison des interfaces réalisées
3. Les meilleures idées sont conservées

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 47 / 68
Méthode de conception IHM Techniques de recueil d’informations

Conception en parallèle (2)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 48 / 68

Méthode de conception IHM Techniques de recueil d’informations

Inspection cognitive (cognitive walkthrough)

Objectif : évaluer le système en se mettant à la place de

l’utilisatrice

Protocole :
I Spécifier des scénarios (tâches et contexte)

Procédure :
1. Évaluation en imaginant ce que ferait l’utilisatrice pour
résoudre la tâche
I comprend-elle les messages, le comportement du système ?
2. Interprétation et prise en compte des résultats

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 49 / 68

Méthode de conception IHM Techniques de recueil d’informations

Inspection cognitive (2)

Example d’inspection cognitive pour l’utilisabilité d’iTunes

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 50 / 68
Méthode de conception IHM Techniques de recueil d’informations

Observation

Objectif : identifier les problèmes d’une application

Protocole :
I En laboratoire ou sur le terrain
I Choisir au moins 2 utilisatrices qui agiront indépendamment

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 51 / 68
Méthode de conception IHM Techniques de recueil d’informations

Observation (2)

Procédure :
1. Définir une mission spécifique (résoudre un problème, suivre
un scénario)
2. Décider de ce que l’on veut mesurer
3. Demander à l’utilisatrice d’effectuer la mission (méthode
intrusive)
I observation directe simple
I avec explicitation à haute voix
I à deux pour observer les interactions (interrogations,
explications)
4. Enregistrer les interactions, puis les analyser
I papier, audio, vidéo, trace informatique

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 52 / 68

Méthode de conception IHM Techniques de recueil d’informations

Test A/B

Objectif : évaluer les performances de deux alternatives de

conception pour un composant

Protocole :
I Deux versions d’une même interface, chacune avec une
variante du composant à tester (e.g., la couleur d’un bouton)
I Définir un objectif (e.g., un clic sur le bouton testé, une vente)
I Choisir une métrique pour quantifier l’intérêt pour chaque
version (e.g., le nombre de clics sur le bouton divisé par le
nombre de vues)
I Extensions pour tester plus de deux versions ou plus de deux
composants (tests A/Z, multivarié)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 53 / 68
Méthode de conception IHM Techniques de recueil d’informations

Test A/B (2)

Procédure :
1. Quand une utilisatrice arrive sur l’interface, proposer au
hasard l’une des deux versions
2. Calculer le nombre d’objectifs atteints pour chaque version

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 54 / 68
Méthode de conception IHM Techniques de recueil d’informations

Test A/B (3)

Exemple : pour la campagne présidentielle de B. Obama en 2008,
plusieurs versions de la page d’accueil :
I Six médias différents (images et vidéos)
I Quatre labels sur le bouton ”call-to-action”
I Métrique utilisée = nombre d’inscriptions / nombre de vues
I Meilleur résultat = le label ”learn more” et une image

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 55 / 68
Méthode de conception IHM Techniques de recueil d’informations

Test A/B (4)

Un exemple de test A/B

(application de services pour les usagers de l’université)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 56 / 68
Méthode de conception IHM Techniques de recueil d’informations

Audit ergonomique

Objectif : évaluation des interfaces par des experts en ergonomie

Protocole :
I Dans l’idéal, évaluation par plusieurs experts indépendants et
confrontation de leurs résultats
I En pratique, évaluation par un expert en ergonomie et
relecture par un expert du domaine

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 57 / 68

Méthode de conception IHM Techniques de recueil d’informations

Audit ergonomique

Objectif : évaluation des interfaces par des experts en ergonomie

Protocole :
I Dans l’idéal, évaluation par plusieurs experts indépendants et
confrontation de leurs résultats
I En pratique, évaluation par un expert en ergonomie et
relecture par un expert du domaine

Rapidité de l’audit
Pistes pour prioritiser les étapes suivantes

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 57 / 68

Méthode de conception IHM Techniques de recueil d’informations

Audit ergonomique

Objectif : évaluation des interfaces par des experts en ergonomie

Protocole :
I Dans l’idéal, évaluation par plusieurs experts indépendants et
confrontation de leurs résultats
I En pratique, évaluation par un expert en ergonomie et
relecture par un expert du domaine

Rapidité de l’audit
Pistes pour prioritiser les étapes suivantes

Coût de l’audit
Aucun retour des utilisatrices

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 57 / 68

Méthode de conception IHM Techniques de recueil d’informations

Audit ergonomique (2)

Un exemple d’audit ergonomique

(application ”Perrotix”)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 58 / 68
Méthode de conception IHM Techniques de recueil d’informations

Enquête / entretien

Objectif : identifier des pistes de conception pour les prochaines

itérations ou des problèmes rencontrés par les utilisatrices

Protocole :
I Panel représentatif d’utilisatrices (en mode individuel)
I Interviewer l’utilisatrice dans son environnement de travail
(face à face)
I Privilégier l’enregistrement (sonore/vidéo) à la prise de notes
(traces et concentration sur l’échange)
I Durée recommandée de 1 heure
I Neutralité de l’enquêtrice

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 59 / 68
Méthode de conception IHM Techniques de recueil d’informations

Enquête / entretien (2)

Procédure :
1. Poser des questions semi-directives lors de l’analyse (degré de
liberté)
2. Poser des questions plutôt directives lors de l’évaluation (e.g.,
cibler un élément)
3. Reformuler les réponses

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 60 / 68

Méthode de conception IHM Techniques de recueil d’informations

Enquête / entretien (2)

Procédure :
1. Poser des questions semi-directives lors de l’analyse (degré de
liberté)
2. Poser des questions plutôt directives lors de l’évaluation (e.g.,
cibler un élément)
3. Reformuler les réponses

Analyse qualitative des résultats

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 60 / 68

Méthode de conception IHM Techniques de recueil d’informations

Enquête / entretien (2)

Procédure :
1. Poser des questions semi-directives lors de l’analyse (degré de
liberté)
2. Poser des questions plutôt directives lors de l’évaluation (e.g.,
cibler un élément)
3. Reformuler les réponses

Analyse qualitative des résultats

Vision subjective (ne pas en tirer des conclusions chiffrées)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 60 / 68

Méthode de conception IHM Techniques de recueil d’informations

Enquête/entretien (3)

Un exemple d’entretien
(application de services pour les usagers de l’université)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 61 / 68
Méthode de conception IHM Techniques de recueil d’informations

Questionnaire

Objectif : résumer économiquement l’avis de nombreuses

utilisatrices

Protocole :
I Panel représentatif d’utilisatrices (destinataire du
questionnaire)
I Choisir des moyens de diffusion et de récupération (e.g.,
application en ligne, email, version papier)
I Choisir comment analyser les résultats
(automatiquement/manuellement)

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 62 / 68
Méthode de conception IHM Techniques de recueil d’informations

Questionnaire (2)

Protocole (suite)

I Utiliser un type de questions

adapté :
I Questions ouvertes,
dirigées, QCM
I Échelle, classements

I Respecter certaines règles

(sociologie) pour rédiger
correctement les questions
(e.g., forme affirmative,
concision, sens équivalent
quelque soit l’utilisatrice)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 63 / 68

Méthode de conception IHM Techniques de recueil d’informations

Analyse de traces

Objectif : étudier le comportement réel des utilisatrices sur une

tâche

Protocole :
I Choisir un ou plusieurs types de traces
I Préparer la méthode de collecte

Procédure :
1. Récolter des traces d’un ou plusieurs types
2. Analyser ces traces (qualitatif et quantitatif)

Les techniques précédentes (e.g., observation, focus group, inspection)

permettent de collecter des traces sur l’activité réalisée
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 64 / 68
Méthode de conception IHM Techniques de recueil d’informations

Analyse de traces (2)

Types de traces :

I Papier (analyse acceptable,

mais un seul point de vue)

I Enregistrements vidéo ou audio,

oculométrie (longue analyse)

I Informatiques (mémorisation
des traces de l’utilisatrice,
analyse automatique et donc
prévue avant)

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 65 / 68

Méthode de conception IHM Techniques de recueil d’informations

En résumé

Analyse Développement Évaluation

√ √
Remue-méninges
√ √
Focus group
√ √ √
Magicien d’Oz
√ √
Tri par cartes
√ √
Scénarimage
√ √
Conception en parallèle
√ √ √
Inspection cognitive
√ √ √
Observation
√
Test A/B
√ √
Audit ergonomique
√ √ √
Enquête / entretien
√ √ √
Questionnaire
√ √
Analyse de traces

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 66 / 68
Bilan

I Méthode de conception pour l’IHM ⇒ itérative, incrémentale,

prototypée, centrée utilisatrice, avec évaluation précoce, et
forte relation entre équipe de conception et utilisatrices

I Pas de méthode scientifique analytique, mais empirique

I Des techniques de recueil d’informations associées

à la méthode afin de récolter des informations
sur les tâches, les interfaces, les utilisatrices, etc.

I Choix pertinent d’une technique selon l’information à récolter,

la phase courante, le contexte, etc.

LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 67 / 68

Des questions, commentaires ?

[Link]
LIFIHM - Interactions Homme Machine // Conception des IHM UCBL Lyon 1 68 / 68