Conception des IHMs
Chapitre 4
Module: Interactions Homme Machine (IHM)
Département Mathématiques et Informatique
Université d’Alger 1- Benyoucef BENKHEDDA
DR. BELATTAR Khadidja
[Link]@[Link]
2020-2021
Interactions Homme Machine
Constat et problématique
Conception du système interactif : on ne peut pas implémenter qu’après
avoir conçu.
Conception du système interactif est coûteuse : on ne peut rien implémenté
avant d’avoir dépensé beaucoup d’efforts, et consacré beaucoup de temps pour
la conception.
Résultats :
Problèmes de l’utilisabilité d’IHM : 33% de debugging (due aux
erreurs de la conception d’IHM), et 67% des interfaces non utilisable.
C’est très difficile/coûteux de faire la maintenance.
Interactions Homme Machine 2
Solution: La conception
Une meilleure pensée à la conception de l’IHM permet alors d’obtenir
un système ergonomique avec des performances optimales (minimum
de coûts).
Concevoir un logiciel interactif nécessite une équipe pluridisciplinaire, au moins :
- Un informaticien
- Un ergonome
- Utilisateur
- Graphiste
Intégrer des méthodes de conception issues:
(1) De la génie logiciel Produire une représentation perceptuelle (interface
perceptuelle) ≈ représentation mentale (interface
(2) De l’ergonomie conceptuelle)
Interactions Homme Machine 3
Cycle de développement des logiciels
Processus de développement d’un logiciel
un ensemble structuré d’activités (et des résultats
associés) pour développer un logiciel:
(1) Analyse des besoins (établir le cahier des charges)
(2) Spécification (conception générale)
(3) Conception détaillée (architecture détaillée du
système à réalisé)
(4) Codage (et test unitaire)
(5) Intégration des modules et tests
(6) Mise en production
(7) Maintenance (évolution, mises à jours correctives)
Méthodes classiques de conception
Conception en génie logiciel Analyse des besoins
Nombreuses méthodes de conception
en génie logiciel : Spécification
Modèle en cascade
Conception détaillée
Modèle incrémental
Modèle spirale (en étoile) Codage
Modèle en V Intégration et test Utilisateur
…….
Mise en production
Maintenance
Modèle en cascade
Méthodes classiques de conception
Analyse
Analysedes
desbesoins
besoins
Spécification
Conception détaillée Conception d’un seul
incrément
Codage
Intégration et test Utilisateur
Non Système Oui
complet
Mise en production
Maintenance
Modèle incrémental
Méthodes classiques de conception
Maintenance Analyse des besoins
Utilisateur
Spécification
Evaluation
Mise en production et analyse des
risques
Conception détaillée
Intégration et test Codage
Modèle spirale
Méthodes classiques de conception
Limites
(-) Implication limitée des utilisateurs (principalement lors de l’analyse et de
l’évaluation)
(-) Méthodes centrées système au détriment des utilisateurs
(-) Principe d’indépendance entre le noyau fonctionnel et l’interface utilisateur
(-) Réalisation de l’IHM est reportée à la fin du processus de développement
(évaluation tardive)
⇒ Méthodes de conception spécifiques aux IHMs (centrées sur l’utilisateur)
Méthodes de conception spécifiques aux IHMs
Les IHM doivent être pensées dès le début (analyse) !
Objectifs :
Meilleure compréhension des systèmes interactifs
Réduction des risques
Réduction des coûts de développement
Réduction des coûts de maintenance
Réduction du budget et le temps (la méthode de conception à un coût de
6% du budget global du projet)
Gain de la productivité
Réutilisation et amélioration des composants de base
Interactions Homme Machine 9
Méthodes de conception spécifiques aux IHMs
Principes :
Le processus de développement des IHMs consiste à mettre en place un
processus itératif (succession de cycles composés de trois phases: analyse,
conception, évaluation) en s’appuyant sur l’analyse précoce de l’expérience
de l’utilisateur (besoins des utilisateurs, leurs tâches et de leur contexte de
travail) afin de fournir un système utilisable.
L’intervention d’une équipe de conception multi-disciplinaire
Analyse Conception Evaluation
Interactions Homme Machine 10
Démarche ergonomique de conception
Démarche ergonomique (démarche centrée utilisateur) Processus de réduction des risques
Recueillir les retours
d'utilisateur
Développer une Enrichir les règles de
nouvelle version de conception
Faire évoluer la base
des composants
réutilisables
Interactions Homme Machine 11
Démarche ergonomique de conception
Phase d’analyse :
Comprendre les objectifs du système interactif
Préciser les attentes et les besoins des utilisateurs
Connaitre leurs tâches et le contexte d’utilisation
Etapes d’analyse :
(1) Recueil de données sur les utilisateurs, sur tâches ou sur les évaluations
des interfaces techniques de recueil de données (utilisateur, activités)
(2) Analyse (tâche, utilisateur et contexte)
Démarche ergonomique de conception
(1) Techniques de recueil de données :
Observation
Objectif : Identifier les problèmes d’une application
Choisir au moins deux utilisateurs qui agiront indépendamment
Définir la mission de l’utilisateur (en laboratoire, ou sur terrain)
Demander à l’utilisateur de réaliser la mission
Observer et enregistrer les interactions de l’utilisateur puis les analyser
Démarche ergonomique de conception
(1) Techniques de recueil de données :
Questionnaires
Objectif : Résumer l’avis de nombreux utilisateurs
Choisir un panel représentatif des utilisateurs
Choisir des méthodes d’analyse automatique/
manuelle des résultats
Choisir le type de questions adaptées: questions
ouvertes, QCM, échelle,…
Respecter certains règles de rédaction des
questions (forme affirmative, concision,…)
Choisir les moyens de diffusion et de récupération
Démarche ergonomique de conception
(1) Techniques de recueil de données :
Enquête/interview
Objectif : Identifier des pistes de conception pour
les prochaines itérations ou des problèmes rencontrés
par les utilisateurs
Choisir un panel représentatif des utilisateurs
Poser des questions (face à face, directives/non
directives) à l’utilisateur dans son environnement de
travail/reformuler ses réponses
Analyse qualitative des résultats
Privilégier l’enregistrement (sonore/vidéo) à la
prise de notes
Application de services pour
Durée recommandée d’interview de 45 mn-1heure les usagers de l’université
Démarche ergonomique de conception
(1) Techniques de recueil de données :
Focus group
Objectif : recueillir l’opinion et motivations des utilisateurs sur un produit informatique.
Choisir un groupe représentatif des participants (7-10)
Introduire les objectifs de la séance de discussion (relatifs
au produit)
Aborder de différents (5-6) thèmes lors de la séance de
discussion
Synthétiser les résultats
Application de services pour
les usagers de l’université
Démarche ergonomique de conception
(2) Analyse (utilisateur, tâche et contexte) :
Structurer les besoins et les exigences de l’utilisateur afin de faciliter leurs
compréhension, préparation, modification et leur réutilisation.
f (U, A, S, M)/
f : fonction d’analyse de l’Utilisateur, Activité, Situation et Matériel
U : Connaitre l’utilisateur (Qui?)
- Population visée (âge, niveau d’expérience, utilisateur formé),
- Capacités cognitives (erreurs commises, connaissances du domaine),
-…
A : Connaitre l’activité (Quoi ?)
- Tâche réelle /non prescrite, Analyse de tâches
- Fréquence d’utilisation du système,
-….
Démarche ergonomique de conception
S
(2) Analyse (utilisateur, tâche et contexte) :
S : Connaitre les situations d’usage (Comment?)
- Posture (assis, debout),
- Environnement de travail: poussière, éclairage, bruit,
-…
M : Connaitre le matériel
- Hardware,
- Software.
Démarche ergonomique de conception
Phase de conception :
Sur la base des informations recueillies dans la phase d’analyse, une
première maquette/ prototype du produit est conçue en respectant les
principes ergonomiques.
Obtenir une IHM finale, passe généralement par plusieurs étapes :
Croquis d’écran (screen 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)
Evoluer les prototypes proposés en fonction de évaluations ergonomiques
des utilisateurs afin de finaliser l’IHM
Démarche ergonomique de conception
Croquis, maquette et prototype d’une page web
Démarche ergonomique de conception
Phase de conception :
Explorer les détails (spécifications) avant le développement de l’IHM
finale:
- Nombre d’écran à utiliser
- Architecture du système interactif
- Modalité de dialogue Homme Machine
- Mode de présentation des informations
- Mode d’activation de différents outils d’aide
- Attributs graphiques et règles de comportement des objets de l’IHM
Aider les utilisateurs à imaginer
Assurer l’utilisabilité du système dans des conditions variées
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
(1) Personas/scénario:
Fournit des archétypes d’utilisateur (personas) qui guident la conception de
l’IHM et partager une certaine vision des utilisateurs du système
Personas : sont des personnes fictives (imaginaires) qui représentent
un groupe cible et pour lesquels le logiciel sera conçu.
Des données générales (prénom, photo, devise, etc).
Des objectifs, contraintes, environnement de travail
Scénario : Capturer et communiquer en texte une histoire d’interaction avec
le système (persona, environnement, but, obstacles)
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
(2) Tri par cartes :
Objectif : construire l’architecture de l’information
Panel représentatif d’utilisateurs (en individuel ou en groupe de 6-8
utilisateurs)
Effectuer plusieurs tris des cartes (de 3 à 10 selon la convergence des
résultats)
Préparer des cartes avec une information ou une fonctionnalité
(décrite par 1 ou 2 mots-clés)
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
(2) Tri par cartes :
1. Validation du contenu des cartes (au
niveau utilité et appellation) par les
participants
2. Regroupement des cartes similaires
3. Labellisation de chaque groupe établi
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
(3) Remue-méninges (brainstorming) :
Objectif : générer un grand nombre d’idées créatives
1. Réunir un petit groupe avec différents rôles
et expertises (séance d’une heure)
2.Générer une grande quantité de solutions
relatif à un problème spécifique de conception
3. Classer les idées en fonction de leur qualité
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
(4) Conception en parallèle :
Objectif : créer plusieurs IHMs et sélectionner la meilleure interface
Panel représentatif d’utilisateurs et/ou de concepteurs (en individuel ou
en groupe)
[Link] utilisateur (ou groupe) réalise indépendamment une interface (papier,
logiciel, etc.)
2. Discuter et comparer les différentes interfaces réalisées
3. Conserver les meilleurs idées
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
(4) Conception en parallèle :
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
(5) Prototypage/maquettage:
Processus de développement des prototypes (un prototype à chaque cycle)
Démarche ergonomique de conception
Phase de conception :
Méthodes de conception
(5) Prototypage/maquettage :
Objectif : concevoir des versions intermédiaires de l’IHM avec le clients avant de finaliser
les spécifications (qui serviront de base au développement du produit finale).
(+) Etudier des alternatives de conception
(+) Améliorer l’utilisabilité du système (détecter les erreurs/oublis le plus tôt
et avant l’implémentation des IHMs)
(+) Impliquer les utilisateurs dans le développement des IHMs à un stade
précoce
(+) Meilleur satisfaction de l’utilisateur
Démarche ergonomique de conception
Phase de conception :
Prototype papier Prototype généré par logiciel
Démarche ergonomique de conception
Phase de conception :
Storyboard
Démarche ergonomique de conception
Phase d’évaluation :
Evaluer des croquis, maquettes, prototypes et interfaces
Exécuter des scénarios (un utilisateur/groupe, contexte, tâches)
- Taux de succès
- Nombre d’erreurs
- Temps d’exécution des tâches (modèles GOMS,…)
- Nombre d’étapes nécessaires à la réussite du scénario
- Rythme d’apprentissage
- Satisfaction des utilisateurs
- ….
Identifier les aspects à améliorer dans la version suivante
Démarche ergonomique de conception
Phase d’évaluation :
Exemple de scenario :
- Utilisateur = sans connaissance sur le site de musique « Grooveshark »
- Contexte = un ordinateur standard équipé de Firefox
- Tâches = se connecter à un site de musique « 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
Démarche ergonomique de conception
Phase d’évaluation :
Méthodes d’évaluation
(1) Inspection cognitive :
Objectif : évaluer le système en se mettant à la place de l’utilisateur
1. Spécifier des scénarios relatif au système
2. Evaluer le système
3. Interpréter et prendre en compte des résultats
Cas concret: démarche de conception des IHMs
Proposer une amélioration de l’interface suivante en utilisant la démarche
de conception des IHMs .
Description du système, public cible, dispositif technique, liste des
fonctionnalités
Cas concret: démarche de conception des IHMs
Description du système interactif
Le système permet de naviguer entre les chaines de la télévision du
CanaSat (par exemple)
Objectif de l’amélioration
Construire un système de navigation de chaines plus intuitif
Public cible
Adolescent ou adulte
Dispositif technique
Télévision avec la télécommande
Liste de fonctionnalités offertes
(1) Rechercher une chaine par Nom
(2) Recherche une chaine par numéro
(3) Naviguer les chaines via le menu « mosaïque des chaines »
Cas concret: démarche de conception des IHMs
Démarche de conception du système
Première itération :
(1) Analyse
Questionnaire (sites web, forums, etc.) et résultats de sondages pour définir des
personas et des scénarios
Exemple de scénario (première itération) : Steve, 22 ans,
Souhaite regarder le macth « Real Madrid -Barcalona » sur une chaine de
sport. Il allume la télévision et il ne sait pas où il peut trouver la chaine.
Heureusement, il se souvient avoir utilisé un système de navigation de
chaines « mosaïque de chaines ».
Cas concret: démarche de conception des IHMs
Démarche de conception du système
Première itération :
(2) Conception
Développement des interfaces par prototypage
(3) Evaluation
Inspection cognitive en utilisant les personas et les différents scénarios
- Scénarios :
(1) Accéder à une chaine par son nom
(2) Accéder à une chaine par son numéro
(3) Accéder à une chaine par son thème (catégorie)
(4) Naviguer via un système de navigation de chaines « mosaique de chaines »
-Evaluation des scénarios : temps nécessaire pour passer à ce système de navigation
des chaine
Cas concret: démarche de conception des IHMs
Démarche de conception du système
Seconde itération :
(1) Analyse
- Utilisateurs (5 participants) attiré par le système de navigation des chaines
« Mosaique des chaines »
- Entretiens avec les utilisateurs pour définir le modèle de tâches
Cas concret: démarche de conception des IHMs
Démarche de conception du système
Seconde itération :
(1) Analyse
Cas concret: démarche de conception des IHMs
Démarche de conception du système
Seconde itération :
(2) Conception
Développement des interfaces par prototypage
Cas concret: démarche de conception des IHMs
Démarche de conception du système
Seconde itération :
(3) Evaluation
Observation des utilisateurs (insatisfaits)
Mettre ne place des nouveaux scénarios (3ème itération)
Clé succès d’un système interactif
Cycle de développement
Conception centrée utilisateur et itérative
Prototypage
Programmation de qualité
