Conception des IHMs

Olfa Dâassi

Olfa Dâassi 1
 Quand produire un modèle de tâches?

Olfa Dâassi 2
 Développeur ≠ Utilisateur

• Se souvenir qu'en tant que concepteur et/ou développeur :

Vous n'êtes pas un utilisateur représentatif !

• Il est rarement possible de concevoir un système qui convienne à

tout le monde
• Objectif à viser: 95% de la population (dommage pour les 5% qui
ont les jambes trop longues)

Olfa Dâassi 3
 Développeur ≠ Utilisateur

Olfa Dâassi 4
 Comprendre et connaitre l’utilisateur
• L’humain face à la machine : Caractéristiques et comportement

– 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 d'analyse d'un projet logiciel. Ils doivent être impliqués
dans toutes les phases du cycle de développement

Olfa Dâassi 5
 Comprendre et connaitre l’utilisateur

Olfa Dâassi 6
 Prise en compte de l'utilisateur
• Même si la prise en compte de l'utilisateur ne facilite pas la tâche du
développeur, c'est indispensable de l'impliquer si l'on veut créer une
expérience utilisateur de qualité.

• En plus de compétences techniques, le développeur doit donc, en

plus, posséder des compétences humaines et relationnelles,
notamment :
– une bonne capacité d'écoute et de communication (savoir argumenter)
– des talents de négociateur (souplesse)
– la faculté de pouvoir extraire les informations importantes parmi des
données peu structurées
– la capacité de se mettre à la place de l'autre (empathie)
– une bonne dose de créativité et le sens de l'initiative

Olfa Dâassi 7
 Etapes de conception
• Dans une démarche de conception centrée sur l'utilisateur, on
distingue généralement trois phases dans le processus itératif de
développement :

• Phase d'analyse
– Étudier la problématique, comprendre les buts
– Préciser les attentes et les besoins des utilisateurs
– Prendre connaissance de la tâche réelle des utilisateurs
– Prendre connaissance du contexte d'utilisation

Olfa Dâassi 8
 Etapes de conception
• Phase de conception
– Se baser sur les résultats de l'analyse.
– Concevoir le style d'interaction (dialogue) en fonction des résultats de
– l'analyse de la tâche et du contexte d'utilisation.
– Élaborer et réaliser des maquettes de plus en plus précises à chaque cycle
Phase d'évaluation
• Phase d'évaluation
– Évaluer, mesurer l'utilisabilité de l'interface
• Effectuer une évaluation analytique
• Présenter le résultat de la conception à l'utilisateur, observer les difficultés
rencontrées, prendre son avis, …
– Identifier les points à améliorer dans la version suivante (prochain cycle)
(corrigées et affinées en fonction des résultats des évaluations).

Olfa Dâassi 9
 Etapes de conception

• Le nombre de cycles dépend naturellement de la complexité du

système à concevoir.
• Deux à trois itérations peuvent suffire pour une interface simple.

Olfa Dâassi 10
 Etapes de conception

Olfa Dâassi 11
 Modèle de l’utilisateur
• Objectifs
– Identifier les caractéristiques pertinentes de l’utilisateur
– Réduire les distances d'exécution et d'interprétation (Th. action,
Norman)
• Pour cela
– "Talking to users is not a luxury, it's a necessity" (Gould)
– "Early and continual focus on the user" (Schneiderman)
– "User centered design" (D. Norman)
• Problèmes
– Du choix des utilisateurs représentatifs
– D’accès aux utilisateurs

Olfa Dâassi 12
 Modèle de l’utilisateur
• Une représentation des caractéristiques pertinentes de
l’utilisateur
– Données générales
» biométriques : taille, âge, sexe, déficiences
» sociales : niveau de formation, usages culturels (nationalité, géographie)
– Données centrées sur le produit à développer
» connaissances dans le domaine (concepts et tâches)
» connaissances en informatique (en général, outils connexes)
» niveaux de compétence (expérimenté/débutant/occasionnel)

Olfa Dâassi 13
 Modèle de l’utilisateur
• Techniques pour caractériser l'utilisateur
– Utilisateur non accessible
» classification générale
– Utilisateurs disponibles (6 à 12 utilisateurs représentatifs)
» interviews
» observations en situation : analyse de l’activité
• thinking aloud (2 utilisateurs à la fois pour réduire l’effet de surcharge)
• magicien d'Oz : Le nom de l'expérience vient de l'histoire du
Magicien d'Oz, dans laquelle un homme ordinaire caché derrière un rideau se
fait passer pour un puissant magicien.
• ...
• -> alimente le modèle de tâche

Olfa Dâassi 14
 Modèle de l’utilisateur
• L'expérience du magicien d'Oz (ou technique) est
– une expérience dans le domaine de l'interaction homme-machine et de
l’ergonomie informatique dans laquelle les sujets interagissent avec un
système informatisé qu'ils croient autonome, mais qui est en fait totalement ou
partiellement contrôlé par un humain
• En ergonomie, la technique du magicien d'Oz est pratiquée dans
le cadre de tests utilisateur.
– Par exemple, un sujet d'expérience croit interagir avec une interface vocale
d'ordinateur, alors que la "voix" est créée par une personne dissimulée dans
une autre pièce (le "magicien") par traitement de texte transformé en un flux
audio
– La technique du magicien d'Oz est aujourd'hui peu utilisée avec l'avènement
de nouvelles techniques de maquettage papier et surtout les logiciels de
prototypage d'interface, permettant de simuler les interactions entre
l'utilisateur et le système.

Olfa Dâassi 15
 Les Scénarios d’usage
• Support à la conception et à l’évaluation
• Différents formats ;
– Texte
– Storyboards

Olfa Dâassi 16
 Storyboards

Olfa Dâassi 17
 Persona
• Créer des personnages fictifs représentatifs
– Détailler leurs compétences, métiers,
– Connaissances
– Leur contexte
– Leurs activités

• Les personas sont des personnes fictives utilisées dans le

développement de logiciels informatiques.
• Il s'agit d'archétypes d'utilisateurs possibles de l’application
développée auxquels les concepteurs pourront se référer lors de la
conception de l’interface

Olfa Dâassi 18
 Persona

Olfa Dâassi 19
 Persona

Olfa Dâassi 20
 Persona
• Les personas sont construits sur la base d’une étude précise des
utilisateurs actuels et/ou potentiels d'un produit (logiciel ou site
web)
• Le plus souvent à partir des données recueillies lors d'entretiens individuels.

• Présentés sous forme de fiche, ils comprennent différentes

informations pour les identifier : prénom, âge, profession,
compétences, traits de personnalité, environnement de vie/travail,
etc. avec un peu d'histoire personnelle pour leur donner une réalité.
Toutes ces caractéristiques sont relatives à l'usage du produit et
doivent se répercuter sur la conception du produit.

Olfa Dâassi 21
 Modèle des tâches
• Tâche
– un but (état souhaité)
– procédure pour atteindre le but
• Procédure : un ensemble de sous-tâches liées par
– des relations de composition
– des relations temporelles
• Tâche élémentaire : tâche décomposable en actions physiques
• Action physique : opération sur un dispositif d’entrée/sortie qui provoque un
changement d’état du dispositif
– clic souris ou clavier, déplacement de souris, énoncé vocal, etc.
– production d’un bip, affichage d’un cercle, etc.

Olfa Dâassi 22
 Modèle des tâches
• Une structure arborescente
– Nœud : un but
– Sous-arbre : procédure pour atteindre le but
• Décoration des nœuds
– concepts du domaine = objets référencés
– préconditions (conditions d’entrée)
– postconditions (but)
– fréquence, caractère optionnel, répétition
– complexité,
– criticité (niveau de danger)
– contraintes temporelles (durée maximale)
– acteur responsable de l’exécution de la tâche (utilisateur et/ou système)
– autres (selon le domaine)

Olfa Dâassi 23
 Modèle des tâches
• Démarche
– Constituer un recueil de données observées sur le terrain
– Identifier les concepts élémentaires
– Enumérer les opérations applicables aux concepts : tâches élémentaires
– Construire la hiérarchie de tâches : structure l’espace de résolution en termes de
relations de composition et temporelles
– Décorer chaque tâche
– Evaluer la décomposition
» détection de points singuliers via l’analyse de l’arbre (décomposition
multiple d’une même tâche, trop de parallélisme potentiel)
» évaluation avec l’utilisateur
» maquettage, etc.

Olfa Dâassi 24
 Modèle des tâches
•

Olfa Dâassi 25
 Modèle des tâches
•

Olfa Dâassi 26
 Modèle des tâches et notations
• Formalismes et notations
– UAN
– CTT
– HTA
– MAD
Ma notation : arbre et toutes ses décorations + opérateurs UAN

Olfa Dâassi 27
 Modèle des tâches et notations

Olfa Dâassi 28
 L’Ecran: agencement
• Stratégies de parcours
– Des études expérimentales ont montré que l'utilisateur adopte deux stratégies
différentes :
• Lors de la première vision de l'écran : Exploration rapide
• Lors des consultations ultérieures : Recherche sélective

– Lors de l’exploration rapide, l'utilisateur adopte un parcours en ‘Z’ (le regard

part du coin supérieur gauche de l'image, parcourt systématiquement la zone
centrale et se termine dans le coin inférieur droit).

Olfa Dâassi 29
 L’Ecran: agencement
• Stratégies de parcours
– Lors de la recherche sélective l'utilisateur connaît l'image et il positionne son
regard sur des emplacements qui lui semblent pertinents (là où il s'attend à
trouver l'information qu'il recherche).

Olfa Dâassi 30
 L’Ecran: agencement
• Sur les pages web, des études récentes ont montré que le regard d'une
majorité d'internautes suit un tracé en forme de ‘F’ (F-Pattern).

• L'utilisateur lit d'abord horizontalement les premières lignes puis

parcourt ensuite les lignes suivantes en allant toujours moins loin sur l
droite, finalement, l'utilisateur parcourt verticalement la partie gauche
de l'écran.

Olfa Dâassi 31
 L’Ecran: agencement
• Pour organiser l'écran, il faut également prendre en compte non
seulement la visibilité des zones mais également leur accessibilité
à l'aide de la souris (dans les coins, les mouvements sont plus
contraignants).

Olfa Dâassi 32
 L’Ecran: agencement
• Le positionnement est un des moyens les plus efficaces pour mettre
en évidence une information
• Plus la charge de travail augmente et plus l'utilisateur standardise ses
procédures d'exploration et s'achemine vers de la recherche sélective
en se focalisant sur certaines zones de l'écran.
• Il est donc important de faciliter le parcours visuel et les
mouvements de la souris en prenant en compte les aspects de
visibilité et d'accessibilité lors du placement des composants sur
l'écran
• Un point important à considérer est la cohérence du positionnement
entre les différentes fenêtres d'une application ou même d'un
ensemble d'applications

Olfa Dâassi 33
 L’Ecran: agencement
• Cette cohérence du positionnement vise à satisfaire le critère
ergonomique d'homogénéité (qui comprend également la cohérence
du comportement)
• Pour assurer cette cohérence, on utilise fréquemment un tracé
régulateur (appelé également gabarit d'écran).
• Appliqué à l'IHM, le tracé régulateur ou gabarit d'écran qui fait
souvent partie d'une charte graphique détermine un schéma standard
de disposition des éléments dans les fenêtres de l'application

Olfa Dâassi 34
 L’Ecran: agencement
• Tracé régulateur (position standard des écrans et fenêtres)

Olfa Dâassi 35
 L’Ecran: agencement
• Dans les zones manipulation :
– Les éléments importants doivent apparaître en premier (dans le sens de la
lecture)
– Ceux qui sont fréquemment utilisés seront placés ensuite
– Les autres éléments seront placés à la fin

Olfa Dâassi 36
 L’Ecran: graphisme
• Couleur
– Minimiser le nombre de couleurs (7+-2)
– Codage couleur simple
• Lors de l'application d'un codage couleur, il faut s'assurer que l'utilisateur
n'associe pas déjà une autre signification aux couleurs choisies.
• Dans certaines professions, il existe des codages couleur plus ou moins explicites
qu'il faut respecter (il existe des normes à ce sujet).

Olfa Dâassi 37
 L’Ecran: graphisme
• Couleur (suite)
– Les couleurs doivent être identifiables littéralement par l'utilisateur et
différenciées en teinte, saturation et intensité
– Un bleu périphérique améliore la vision centrale -> utiliser le bleu pour encadrer

Olfa Dâassi 38
 L’Ecran: graphisme
• Couleur (suite)
– Les couleurs doivent être identifiables littéralement par l'utilisateur et
différenciées en teinte, saturation et intensité
– Un bleu périphérique améliore la vision centrale -> utiliser le bleu pour encadrer
– Éviter les fonds marrons et verts
– Utiliser une couleur neutre et claire pour le fond de l'écran
– Éviter un fond gris ou coloré pour de petits objets
– Éviter le bleu saturé pour les textes ou les petits objets
– Combiner la couleur + un autre moyen pour afficher une info important
➢ D'autre part, il faut tenir compte du fait que tout le monde ne perçoit pas les
couleurs de la même manière. Le daltonisme touche une proportion non
négligeable de personnes (env. 8% des hommes et 0.5% des femmes).

Olfa Dâassi 39
 L’Ecran: graphisme
• Couleur (suite)
– Les couleurs doivent être identifiables littéralement par l'utilisateur et
différenciées en teinte, saturation et intensité
– Un bleu périphérique améliore la vision centrale -> utiliser le bleu pour encadrer
– Éviter les fonds marrons et verts
– Utiliser une couleur neutre et claire pour le fond de l'écran
– Éviter un fond gris ou coloré pour de petits objets
– Éviter le bleu saturé pour les textes ou les petits objets
– Combiner la couleur + un autre moyen pour afficher une info importante
– Utiliser des couleurs très contrastées pour exprimer une différence
– Choisir des couleurs peu contrastées pour exprimer une similarité

➢ Éviter les écrans carnavalesques qui donnent un aspect très amateur aux
applications (effet "sapin de Noël”).

Olfa Dâassi 40
 L’Ecran: graphisme
• Polices de caractères
– Ne pas utiliser plus de 4 polices
– Associer une police à chaque type d'objet
– Les textes doivent être écrits en minuscule, la première lettre en majuscule
– Utiliser une police droite
– Utiliser des lettres sombres sur fond clair
– Aérer le texte

Olfa Dâassi 41
 L’Ecran: langage
• Employer le langage de l'utilisateur
• Libellé des commandes
– Un seul et unique libellé pour chaque commande
– Utiliser une syntaxe homogène pour le libellé des commandes
– Éviter les abréviations
• Messages
– Définir le rôle et le contenu des messages de façon homogène
– Éviter les messages longs quand charge de travail importante
– Utiliser la zone de messages pour les messages optionnels
– Employer une fenêtre de message lorsqu'on veut que le message soit lu
– Afficher le message près de l'objet auquel il est lié
– Produire des messages brefs, concis et pertinents

Olfa Dâassi 42