Cours 4

Méthodes de
conception des IHM
Les IHM dans les applications informatique
• L’écran/interface d’une application ou page d’un site web est un
artefact concret, interactif, et utilisé par les utilisatrices :
Nombreuses questions des utilisatrices sur les IHM
Développement : environ la moitié du coût pour les IHM
Maintenance : plus de 50% de changements demandés par les
utilisatrices

2
Conception en Génie logiciel
• Nombreuses méthodes de conception en génie logiciel :
Modèle en cascade,
Modèle en V
Modèle en spirale
Méthodes Agile (e.g., Scrum, DSDM)
…

3
Méthodes de Conception en GL
• Génie logiciel : modèle en cascade
• Cycle de vie en cascade (avec itérations)
• Une nouvelle étape ne commence que
lorsque la précédente est achevée.
• Les retours arrières se limitent à un
retour sur la phase immédiatement
antérieure
• évaluation en dernier

4
Méthodes de Conception en GL
• Génie logiciel : modèle en V
• L’évaluation se fait seulement après le
codage
• Le modèle ne précise pas la portée des
retours arrière
• Les documents ont un rôle important

5
Méthodes de Conception en GL
• Génie logiciel : modèle en spirale
•Prototypes successifs
•Pour chaque cycle
♦ définition des objectifs, alternatives retenues
et contraintes
♦ analyse et résolution des problèmes
♦ développement, validation et vérification de
la phase
♦ planification de la phase suivante
• Les besoins sont formulés progressivement, et
les différents risques rencontrés sont résolus
au fur et à mesure

6
Méthodes de Conception en GL
• Bilan des méthodes de génie logiciel
 Méthodes centrées système
 Les fonctionnalités du système sont mises en avant au détriment
des utilisateurs
 Principe d’indépendance entre le noyau fonctionnel et l’interface
utilisateur:
Interface et interaction ne sont définies qu’après
Mais dans les logiciels interactifs cette séparation n’est pas si nette

Il est indispensable de prévoir l’usage en même temps que les

fonctionnalités
7
Conception des IHM
• Pourquoi des méthodes de conception des IHM?

Réduction des coûts de développement et de maintenance du

logiciel
Réduction des risques
Gain de productivité côté utilisateurs
Réutilisation et améliorations des composants de base du logiciel
Réduction du budget et du temps pour la formation au logiciel
8
Méthodes de Conception des IHM
Différentes méthodes existantes:

 Conception itérative;
 Conception par prototypage;
 Conception centrée utilisateur;
 Conception par personas et scénarios.

9
Méthodes de Conception des IHM:
1. Conception itérative
 Succession des phases : la conception et le développement se font simultanément
(Mélanger) avec itérations :
 Affinements progressifs des spécifications du produit
 Évaluations des solutions retenues
 Réalisations, modifications jusqu’à obtention d’un produit satisfaisant
 Le processus de construction est itératif :
 Pour des problèmes difficiles à spécifier
 Processus de conception ni ascendant, ni descendant
 Développement de solutions partielles, intermédiaires
 Apparition en cours de développement de nouveaux objectifs
 Prise en compte de l’avis des utilisatrices qui peuvent changer
 Communication au sein de l’équipe de conception, avec les utilisateurs

Difficulté de la conception itérative : très couteuse en temps  Conception par Prototypage

10
Méthodes de conception en IHM:
2. Conception par prototypage
 Le prototypage consiste à concevoir des versions intermédiaires et donc incomplètes d'un
logiciel ou d'un site web, conçues pour tester l'utilisation avant la phase proprement dite de
programmation informatique. Dans le cadre d'une intervention ergonomique, la phase de
prototypage permet de tester l'utilisation et l'utilisabilité d'un produit auprès d'utilisateurs
(test utilisateur).
 Le prototypage permet :
 Aux concepteurs de travailler sur plusieurs ensembles de détails à la fois
 Aux utilisateurs de voir ce que sera le système final
 De se concentrer sur les parties problématiques de l’interface
 D’étudier des alternatives de conception
 De s’assurer de l’utilisabilité du système

11
 Méthodes de conception en IHM:
2. Conception par prototypage
 Types de prototypage:
1) Prototypes informels, sur papier
 Dessiner des écrans sur papier, sur logiciel (ms-visio…)
 Utiliser des transparents / présentations pour des montages dynamiques
 Exécuter un scénario et essayer des variantes pour des choix :
•de bas niveau : dessiner des idées d’icônes
•de niveau intermédiaire : dessiner une séquence d’écrans
•de haut niveau : décider des fonctionnalités qui seront disponibles
2) Prototypes vidéo
 Créer une vidéo de l’utilisation d’un prototype
 Simuler les fonctionnalités non implantées, les interactions
3) Prototypes informatiques à l’aide d’outils
 Accès direct à l’interface : Visual Basic, Delphi, javafx
12
 Méthodes de conception en IHM:
2. Conception par prototypage

La principale limite des prototypes c’est

qu’elles ne sont pas l’application finale !
Le prototype permet de recueillir des
informations clés sur les fonctionnalités et
la structure fondamentale, Mais pas de
tester les fonctions en détails ni l’impact de
l’aspect final.

13
Méthodes de conception en IHM :
3. Conception centrée utilisateur
Trois phases :
• Analyse (identification des fonctionnalités ou services, i.e., l’utilité recherchée par les
utilisateurs de l’application)
• Développement (construction de la structure des menus et découpage en fenêtres / pages Web)
• Évaluation (raffinement progressif du prototype)
Prise en compte des utilisateurs ( Dès la phase d’analyse, Étude de l’utilisateur et de sa tâche)
Nécessité de spécifier les caractéristiques : De l’utilisateur, De la tâche à réaliser et De l’interaction
Relations concepteur - utilisateur :
• Utilisateur observé dans la résolution de sa tâche
• Interrogé sur ses attentes
• Questionné sur le logiciel conçu
14
Méthodes de conception en IHM:
3. Conception centrée utilisateur
Avantages :
• Prise en compte de l’utilisateur avant la phase d’évaluation

Difficultés :
• Choisir des utilisateurs représentatifs et disponibles
• Ne pas oublier le contexte réel d’utilisation
• Expliciter les comportements, les connaissances mises en jeu...

15
Méthodes de conception en IHM:
4. Conception par personas et scénarios
Méthode des personas et scénarios :
• Utilisée dans différents domaines (plans marketing, site web, plateformes
réseaux sociaux, etc.) qui sont basés sur les sondages pour construire une
interface utilisateur
• Introduite aux débuts des années 1990 pour la conception d’IHM

Objectifs de la méthode :
• Meilleure compréhension des utilisateurs et de leurs buts
• Vision partagée des utilisateurs
• Création de scénarios à partir des personas

16
Méthodes de conception en IHM :
4. Conception par personas et scénarios
Définition du persona (ou archétype) :

Pas un utilisateur réel, mais une abstraction de plusieurs

Regroupe les traits caractéristiques les plus fréquents des utilisateurs

La description d’un persona peut inclure :

Des données générales (prénom, photo, devise, etc.)

Des objectifs, contraintes, environnement de travail
Ce qui va déclencher leurs actions
Ce qui peut les influencer
Ce qui peut les freiner ou les faire fuir

17
Méthodes de conception en IHM:
4. Conception par personas et scénarios

18
Méthodes de conception en IHM :
4. Conception par personas et scénarios
• Un scénario est une sorte d’histoire avec:
Un persona
Un environnement
Un but (que le persona doit accomplir)
Des obstacles partagé par des personas

Exécution d’un scénario=> orientation pour les choix de fonctionnalités,

interaction, interfaces (et plus tard évaluation de l’interface réalisée)
Example de scenario : Se connecter au site Grooveshark, chercher des musiques par titre,
auteur ou album, les ajouter à l’interface de la playlist puis l’étendre par d’autres musiques
dans le même genre musical.

19
Méthodes de conception en IHM:
4. Conception par personas et scénarios
 Avantages :
• Empathie cognitive (comprendre les états ou croyances d’une autre
personne)
• Applicable au Web / large échelle.
 Inconvénient :
• Mauvaise définition des personas induit un échec du modèle
• Distance par rapport aux utilisateurs réel
• Besoin de modifier les personas en cas de nouveaux résultats ou
d’environnement différent
20
Méthodes de conception en IHM

La plupart des méthodes de conception pour IHM nécessitent de

collecter des informations sur les utilisateurs et leurs activités avec

des techniques.

21
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 :
 Sur les utilisateurs (e.g., pour construire des personas)
 Sur les tâches (e.g., enchaînement des actions, vocabulaire métier)
 Sur les interfaces, notamment en évaluation (e.g., idées, points
forts/faibles)

Choisir une technique adaptée selon le contexte, les utilisateurs

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

22
Techniques de recueil d’informations
Il existe plusieurs techniques de recueil et de collection d’information. Les techniques se distinguent par leurs
buts et la procédure suivie:
 Scénario de conception
 Inspection cognitive
 Magicien d’Oz
 Enquête / entretien
 Observations
 Focus group
 Tri par cartes
 Questionnaire
 Remue-méninges
 Conception en parallèle
 Audit ergonomique
23
 Techniques de recueil d’informations

1) Scénario de conception: Créer une description réaliste de l’utilisation du nouveau système à base de
discussions avec les utilisateurs.
 en utilisant les scénarimages (storyboards)
 définir les points clés attendus par les utilisateurs et les enchainements des opérations à réaliser
 représenter une vue d’ensemble de l’interaction
2) Enquête / entretien: Identifier des pistes de conception pour les prochaines itérations ou des exemples
spécifiques de problèmes rencontrés par les utilisateurs
 Interviewer chaque utilisateur dans son environnement de travail.
 Durée recommandée de 45 minutes / une heure
 Privilégier le magnétophone à la prise de notes (traces et concentration sur l’échange)

24
 Techniques de recueil d’informations
3) Questionnaire: Résumer économiquement l’avis de nombreux utilisateurs suivant les étapes :
 Déterminer le public (représentatif) destinataire du questionnaire
 Comment diffuser/récupérer
 Comment analyser les résultats (automatiquement/manuellement)
 Types de questions : Informations générales, Questions ouvertes, dirigées, QCM

4) Remue-méninges (brainstorming)
 But : Générer un grand nombre d’idées créatives
 Procédure :
 Réunir un petit groupe avec différents rôles et expertises
 Limiter le temps (1h)
 Décrire un problème de conception spécifique

25
 Techniques de recueil d’informations
5) Focus group
 But :
 Comprendre les motivations des utilisateurs en les observant
 En groupe, et donc bénéfice de la dynamique de groupe
 Séance filmée, paperboards, et/ou assistants
 Procédure
 Définir différents thèmes à aborder (5 ou 6 recommandés)
 Limiter le groupe à 7-10 participants
 Animation du groupe :
- définir les règles à respecter par le système
- 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
26
 Techniques de recueil d’informations
6) Observations
 But : Identifier les gros problèmes du logiciel
 Procédure:
 En laboratoire ou sur le terrain
Définir une mission spécifique
Choisir au moins 2 utilisateurs: Observation directe simple, avec explication à haute voix ou à
deux pour observer leurs interactions
7) Conception en parallèle
 Objectif : créer plusieurs interfaces et sélectionner leurs points forts
 Protocole :
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.
27
 Techniques de recueil d’informations
7) Conception en parallèle

28