Cours

Interface homme machine
1
Styles d’interaction
2
La machine / L'ordinateur
 Pour un humain, c'est une boîte noire :
 Pas de feedback implicite (il faut le programmer explicitement)
 Les informations contenues ne sont pas directement visibles (opacité)
 Le déroulement des opérations ne peut pas, sans autre, être observé
 Le mode de fonctionnement n'est pas le même que le nôtre :
[+] Peut mémoriser un grand nombre d'informations et les retrouver rapidement et sans
pertes
[+] Peut exécuter des instructions autant de fois que nécessaire sans erreurs (pas de
notion de fatigue)
[] Incapable de faire certaines choses qui nous paraissent triviales (tirer des
conclusions, laisser tomber certains éléments négligeables au profit d'éléments plus
importants, comprendre le langage naturel même des phrases simples, corréler des
informations, etc.)
 Tout doit être programmé, même les actions les plus élémentaires.
 Naturellement, avec un considérable effort de programmation, on peut améliorer la
situation et tendre vers une certaine intelligence artificielle dont les objectifs visent à
rapprocher la machine de l'humain.
3
L'interface / L'interaction
Connaissant les différences (importantes) entre l'homme et la machine
comment trouver un langage commun pour communiquer au mieux ?
C'est l'interface utilisateur qui est chargé de cette tâche.
 L'interface utilisateur est constituée par les parties matérielles et
logicielles de l'ordinateur dont l'utilisateur se sert pour voir, entendre,
toucher, parler, ... et ainsi communiquer (informations bidirectionnelles)
avec la machine (et ses logiciels).
 C'est tout l'art du programmeur d'établir le lien entre ce que l'utilisateur
souhaiterait et ce que les techniques informatiques peuvent offrir.
 Il faut trouver le bon compromis entre ce qui peut être programmé
(dans un temps adapté et avec un coût raisonnable) et ce que l'utilisateur
souhaiterait dans l'idéal.
 Dans de nombreux cas, c'est une tâche difficile mais très importante
car c'est souvent sur son l'interface utilisateur qu'un logiciel est jugé.
 La qualité de l'interface utilisateur peut conditionner la réussite ou
l'échec d'un logiciel (indépendamment de la qualité de ses fonctionnalités).
4
Périphériques d'entrée
 Les périphériques d'entrée (Input Devices) sont des composants
matériels qui sont utilisés pour "parler" à l'ordinateur.
 Les périphériques d'entrée les plus courants sont :
 Clavier
 Souris (2D, 3D)
 Touchpad / Trackstick
 Écran tactile (multi-touch)
 Boule de positionnement (Trackball)
 Manette de jeu (Joystick)
 Microphone
 Tablette graphique (Pen Pad)
 Manette Wii, Kinect, . . .
 Le clavier et la souris (ainsi que ses substituts : touchpad et autres)
constituent les périphériques d'entrée principaux dans les applications
informatiques classiques.
5
Les périphériques de sortie
 Les périphériques de sortie (Output Devices) sont des
composants matériels que l'ordinateur utilise pour communiquer
avec l'utilisateur (pour l'informer).
 Les principaux périphériques de sortie sont les suivants :
 Écran
 Imprimante
 Haut-parleurs (carte audio)
 Écouteurs (carte audio)
 Manette de jeu (Joystick) avec rétroaction (retour de force)
 L'écran et l'imprimante (sortie "papier", documents imprimés)
constituent les périphériques de sortie principaux dans les
applications informatiques classiques.
6
 Commande en ligne
 Langages de requête et questions-réponses
 Interfaces WIMP (Window, Icon, Menu, Pointing
Device)
 Formulaires de sélection
 Langage naturel (écrit, parole)
 Interfaces 3D, gestuelles, réalité augmentée...
7
 Conversationnel
 langage de commandes
 dialogue imposé par le système
 Menus, formulaires
 guidage du système
 dialogue contrôlé par le système
 Question / réponse
 Langage naturel et langage écrit
8
 Navigation
 noeuds, ancres, liens
 difficultés de repérage
 Manipulation directe
 actions physiques sur des représentations d’objets
 inspire toutes les interfaces actuelles
9
Manipulation directe
Le style d'interaction appelé "Manipulation directe" caractérise un
ensemble de propriétés qui donne à l'utilisateur le sentiment d'un
engagement direct dans l'action qu'il effectue.
Trois principes directeurs :
 Représentation permanente des objets(ceux qui ont un sens pour l'utilisateur)
 Utilisation d'actions physiques pour effectuer les opérations (via un dispositif
de pointage comme la souris)
 Opérations incrémentales, réversibles et à effet visible
Ben Schneiderman (1983) : "Point and click instead of remember and type"
L'inconvénient : ne permet pas facilement la programmation des
actions par l'utilisateur.
Manipulation indirecte: les actions sont déclenchées en passant par
des menus et des boîtes de dialogue. 10
Constituants standard d’une interface graphique par manipulation
directe
fenêtres
menus
boîtes de dialogues
contrôles
souris/curseur
11
Constituants standard d’une interface graphique par manipulation
directe
 Contrôles (et panneaux de contrôle)
 boutons : sélection d’une ou plusieurs options
 ascenseurs : déplacements, quantités
 listes déroulantes : choix (prédéfinis ou non)
 zones de saisie de texte (+ validation)
 valeurs par défaut des contrôles
 métaphores...
 souris/curseur
12
Métaphores
 L'ordinateur ne fonctionne pas de la même manière que les humains et ses
données, ses actions ne sont pas directement visibles.
 Il est donc important que l'utilisateur puisse se faire une représentation
mentale (un modèle) du fonctionnement de la machine et des logiciels qu'il
utilise.
 Un bon moyen d'offrir une interface qui permette à l'utilisateur de se forger
une représentation mentale (un modèle du comportement) est de tenter
d'imiter le fonctionnement et les réactions de certains objets du monde réel
(que l'utilisateur est sensé bien connaître).
 On parle alors de métaphore, c'est-à-dire qu'on crée des éléments graphiques
qui ont une analogie (présentation, comportement) avec des objets du
monde réel.
 La métaphore du bureau est largement utilisée dans les interfaces graphiques.
On représente et manipule des objets qui imitent le travail au bureau
(dossiers, documents, poubelles, boîtes aux lettres, carnets de notes, horloges,
etc.). 13
Look and Feel
 La notion de "Look and Feel" est caractérisée par un ensemble cohérent de
propriétés de l'interface graphique. Il inclut notamment :
 La manière de présenter les composants graphiques (aspect) :
 Forme
 Couleur
 Texture
 La manière dont les composants réagissent (comportement) :
 Sélection
 Exécution
 Déplacement
 Menus contextuels
 Bulles d'aides
 Sons
 Le Look and Feel regroupe donc un ensemble de caractéristiques qui peuvent
parfois être définies par l'utilisateur (choix de thèmes, de peaux [skin], etc.) mais
dont certaines sont déterminées par le système d'exploitation et son sous-
système de fenêtrage (Windows, MacOS, Motif, ...). 14
Edition de document WYSIWYG

dialogue contrôlé par l’utilisateur
15
 Reconnaissance de traces
 interfaces à stylo
16
 Réalité virtuelle
 immersion sensori-motrice de l’utilisateur dans le
système
 Réalité augmentée
 intégration de capacités de traitement de
l’information dans des objets physiques
17
WIMP: Window Icon Menu Pointer
Les interfaces utilisateur qui intègrent ces éléments
graphiques (composants visuels / Widgets / Controls) sont
parfois désignées par l'acronyme WIMP.
NB: Toutes les interfaces graphiques actuelles sont

"WIMP" mais avec des variations assez importantes
18
W: Window
 Fenêtre. L’origine est les travaux sur la première
station de travail graphique Xerox Parc ~1980. Une
fenêtre est une zone d’écran autonome du point de
vue de l’affichage et de la gestion des entrées
 Système de fenêtrage. Couche logicielle qui

s’interpose entre les applications et le système
graphique qui gère les périphériques d ’E/S et qui
fournit aux applications la notion de fenêtre
19
W: Window
 Gestionnaire de fenêtres. Module logiciel qui s’occupe
d’organiser l’ensemble des fenêtres présentes à
l’écran.
20
W: Window
 Systèmes de fenêtrage > Architectures
— Une librairie chargée avec chaque application qui
repose sur une mémoire partagée c.-à-d. différentes
applications se partagent l'écran et les données des
dispositifs d'entrée.
― Systèmes client-serveur le serveur implémente le
système de fenêtrage (gestion des entrées et des
sorties) et les applications clientes, envoient des
requêtes et reçoivent des évènements.
21
W: Window
 Systèmes de fenêtrage > modèles de fenêtrage
Avec ou sans superpositionRecouvrement 2D 1/2 = rang dans la
superposition
Avec superposition 2D ½ sans superposition 2D ½

NB: opérations pour les systèmes de fenêtrage => gestion du rang affichage
seulement des parties visibles des fenêtres
22
W: Window
 Systèmes de fenêtrage > modèles de fenêtrage
Système de fenêtrage hiérarchique extension du système 2D ½.
- chaque fenêtre est vue comme un écran qui contient des fenêtres.
Une fille s’affiche dans la partie visible de sa mère.
NB: opérations pour le système de fenêtrage ré-parentage (utilisé par le

gestionnaire de fenêtre)
23
I: Icon
 Icônes de fenêtres  Icônes personnelles
 configurables  Guide de style
 placement automatique • utilisation d ’une
 Icônes standards grille objets larges,
 ISO, ANSI et brevets ligne en gras,
divers ex brevets Xerox formes simples
de 1988 pour la poubelle. • pas plus de 5
 Les icones les plus couleurs
courantes dossiers,
poubelles, disquettes,
disques,
24
M: Menu
 Différents types de menus  Séparateurs
 Menus hiérarchiques  Regrouper par fonctionnalité
 Menus détachables  Isoler les items dangereux
 Menus circulaires (restart, quit, format, etc)
• Menus à marquage  Feedback
 Principes généraux pour concevoir  visualisation de la rubrique
des menus courante, de la sélection, du
 Nombres de rubriques par chemin dans la hiérarchie
menu: 7 +/- 2 des menus
 Profondeur d ’une hiérarchie:  Rubriques grisées
max 3  Mnémoniques et raccourcis
 Cohérence des menus clavier
Standards: Fichier, Edition,
25
Fenêtre, Aide
P: Pointer
 Les différents types de sélection  • Principes généraux pour
 Sélection exclusive (boutons faciliter la sélection
radio)  gravité
 Sélection binaire (cases à • pour les petits objets,
cocher) une erreur de sélection
 Sélection dans une liste est tolérée (sélection
 Sélection dans un texte lorsque le curseur est
 Sélection dans un graphique dans le champs de
 Utilisation de la sélection gravité de l’objet)
 drag and drop  feedback
 activation de commande • surbrillance, forme du
 saisie dirigée curseur
26
Aspects humains
27
Aspects humains
Traitement de l’information
actions de clics
Récepteurs des 5
Niveau sensoriel sens: Vue, odorat, Stimulus reçus par les sens
ouïe, toucher, goût
vision et
compréhension
du contenu
Aires sensorielles et Approche intégrative des

Niveau perceptif associatives (Cortex stimulus = interprétation et
pariétal) signification
compréhension
et utilisation de
l'interface
Reconstruction: fonctions
Lobe pré-frontal,
Niveau cognitif cognitives: attention, jugement,
hippocampe…
mémoire…
28
Aspects humains
Traitement de l’information
Mémoire
visuel Mémoire
auditive
Processeur
perceptif Processeur
cognitif
Processeur
moteur
29
Aspects humains
Eléments de Psychologie appliquée aux systèmes interactifs
Perception
Action
Cognition
30
Aspects humains
Couplage Action-Perception
 Agir pour percevoir
 perception de la profondeur par des mouvements de
la tête
 perception de la texture en déplaçant le doigt à la
surface de l’objet
 Percevoir pour agir
 ajuster les mouvements du bras pour saisir un objet
31
Aspects humains
La vue
 Champ visuel de 180°
 Focus d’attention
 acuité visuelle: 0.04 mm à 50 cm
 Perception périphérique
 moins sensible aux couleurs, plus sensible aux
mouvements
 Perception de la couleur, du mouvement, de la
profondeur 32
Aspects humains
Le toucher
 Sens tactile (relatif au nerfs)
 température, pression (texture), douleur
 Sens proprioceptif (relatif à l’espace le volume )
 configuration du corps dans l’espace, appréhension
de la forme d’un objet.
 • Sens kinesthésique (relatif au mouvement et à l’effort physique)
 perception de l’effort des muscles, donc de la
résistance d’un objet 33
Aspects humains
Système moteur
 Responsable des actions, tels que les mouvement de la
souris.
 Loi de Fitts : temps de pointage
T : temps du mouvement
I : constante dépendante de l'utilisateur (env 0.1 sec)
T = I * Log (D/L) D : distance de la cible
L : largeur de la cible
NB si D=L, alors T=0
 Bi-latéralisation
 main non dominante : situe le contexte,
 main dominante : agit dans le contexte. 34
Aspects humains
Système moteur
La loi de Fitts dit que :
« Vous pouvez améliorer votre taux de cliques en
rapprochant les éléments cliquables et/ou en augmentant
leur taille ».
 plus un élément cliquable est GROS, plus il est facile de
cliquer dessus.
 plus une cible est proche, plus elle est facile à atteindre.
En d’autres mots, plus votre bouton est proche du
pointeur de la souris, plus vous obtenez de cliques.
35
Aspects humains
Mémoires
Les différentes mémoires permettent:
 De percevoir l’information:
 Mémoire sensorielle échoïque (stimulus auditif) et
iconique (stimulus visuel)
 De manipuler et stocker l’information à court terme:
 Mémoire à court terme: MCT
 Mémoire de travail : MT
 Encoder, stocker et récupérer l’information (
reconnaissance et rappel):
 Mémoire à long terme: MLT
36
Aspects humains
Mémoire et apprentissage
 Mémoire à court terme
 mémoire de travail
 capacité de quelques unités (7 +/- 2)
 durée de stockage de 10 à 30 secondes
 Mémoire à long terme
 capacité infinie
 durée de stockage illimitée
 accès associatif
 Apprentissage par répétition
37
Aspects humains
Processus interactionel
Activité de l’utilisateur: Modèle de l’action, Norman (1986)
Evaluation
exécution
38
Aspects humains
Résolution de problèmes
 Stratégies en cas d’erreurs
 Modèles mentaux
 représentations mentales permettant de résoudre les
problèmes
39
Conception
40
Introduction
La facilité d’utilisation, la convivialité, le naturel sont des qualités
importantes lorsque nous nous servons d’un logiciel. Elles vont nous
permettre de nous concentrer sur la tâche proprement dite et non sur
la manière de la réaliser. Lorsque le logiciel est simple à utiliser, nous
nous intéressons au « Quoi faire ? » et non à « Comment le faire ? »
Notre performance en est meilleure.
Dans le cadre d’un projet informatique, les méthodes de conception

ergonomique permettent de réduire les coûts de développement. En
effet, en impliquant l’utilisateur final dès la phase de conception du
logiciel, l’équipe projet peut rapidement consolider avec le client sa
compréhension du besoin. Sachant qu’en moyenne 70 % à 80 % des
coûts sont engagés au début du projet, l’enjeu est important. Une
meilleure connaissance de l’utilisation effective du logiciel et de
l’attente des utilisateurs permet d’éviter les retours en arrière, et donc
les surcoûts, dus à une mauvaise compréhension du cahier des charges. 41
Introduction
 Des problèmes d’utilisabilité ont été la source de catastrophes

humaines. Ainsi :
 l’absence d’affichage des unités sur un cadran de descente a été
l’un des éléments à l’origine de la catastrophe de l’Airbus du
Mont Sainte-Odile en 1992.
 De même, il a été montré que l’accident de la centrale nucléaire
de Three-Mile Island (Pennsylvanie, 1979) était lié à une
conception du poste de contrôle qui ne prenait pas en compte la
dimension humaine dans le processus de supervision
42
Conception
Introduction
Etapes du cycle de développement d’un logiciel :
 Analyse (spécifications,
analyse de l’existant et
conception)
 Réalisation (programmation,
bases de données, tests)
 Livraison (intégration,
validation, documentation)
 Maintenance (mises à jour,
correction de bugs)
43
Conception
 Conception en génie logiciel

 Conception IHM (centrée utilisateur)
 Techniques de recueil d’informations(Analyse)
44
Conception
Conception en génie logiciel
Nombreuses méthodes de conception en génie logiciel :
 Merise. Méthode française pour l’analyse, la conception et la gestion de
projet basée sur 03 modèles : MCD, MCT.
inconvénient. Pour des projets de grande ampleur mais souvent internes.
Inadaptée aux environnements distribués.
 Modèle en cascade. (1966) Défini pour de grands projets,
Inconvénient. Passage à l’étape suivante uniquement si l’étape précédente est
satisfaite. Retour uniquement à l’étape précédente. Implication limitée des
utilisateurs. Evaluation lors des deux dernières phases
 Modèle en V. (1980) Développement et tests sont effectués en parallèle,
retours possibles à chaque étape.
Inconvénient. Evaluation tardive du logiciel, Nouvelles fonctionnalités pendant
le développement
 Modèle par incréments, Modèle en spirale, Modèle Agile….
45
Conception
Nombreuses méthodes de conception en génie logiciel :
Modèle en V
Méthode Merise Modèle en cascade Modèle en incrément

46
Conception
Inconvénients
 Méthodes centrées système
 Utilisateur impliqué principalement en aval et en amont du projet
(analyse et évaluation)
 Principe d’indépendance entre le noyau fonctionnel et l’interface
utilisateur :
 Interface et interaction ne sont définies qu’après
 Dans les logiciels interactifs, cette séparation n’est pas si nette
 Nécessité de prévoir l’usage en même temps que les
fonctionnalités
 Fonctionnalités mises en avant au détriment des utilisateurs
47
Conception
Inconvénients
 Méthodes centrées système
 Utilisateur impliqué principalement en aval et en amont du projet
(analyse et évaluation)
 Principe d’indépendance entre le noyau fonctionnel et l’interface
utilisateur :
 Interface et interaction ne sont définies qu’après
 Dans les logiciels interactifs, cette séparation n’est pas si nette
 Nécessité de prévoir l’usage en même temps que les
fonctionnalités
 Fonctionnalités mises en avant au détriment des utilisateurs
Méthodes de conception spécifiques aux IHM
48
Conception
Méthodes de conception IHM
Pourquoi des méthodes de conception 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
49
Conception
Différentes méthodes existantes :
 Conception itérative
 Conception par prototypage
 Conception centrée utilisateur
 Conception participative
 Conception informative
 Conception par personas et scénarios
50
Conception
51
Conception
52
Conception
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). Il se distingue de la maquette fil de
fer (ou wireframe) en simulant le fonctionnement avec des données
fictives ou réelles [wikipédia].
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 53
Conception
Les degrés de prototypage :
Il existe de nombreux niveaux de finition et de démarche pour réaliser
différentes versions de maquettes et prototypes. Nielsen (1994) distingue
deux degrés de prototypage selon le niveau d’interactivité offert par le
prototype :
1. Le prototype horizontal correspond uniquement à la partie graphique
de l’interface, c’est une maquette statique. Seuls l'agencement général
et les éléments de l’interface sont présentés : boutons, menus, champs
de saisie, etc. Il permet :
 La confirmation des exigences de l'interface utilisateur et l'étendue du
produit
 Une version de démonstration pour obtenir des retours des
commanditaires du produit par rapport à leurs besoins initiaux
 Une première estimation du développement en termes de temps, de coût
et de charge de travail
54
Conception
Les degrés de prototypage :
2. Le prototype vertical met en œuvre certaines des fonctionnalités afin
que l’utilisateur puisse dérouler un scénario d’utilisation typique du logiciel,
une tâche complète et significative du produit. Il permet :
 L'estimation du volume de données à prévoir ;
 Le dimensionnement du système de données, les besoins d'interaction de
l'interface, les dimensions du réseau et le niveau de performance ;
 Des précisions sur la complexité des exigences par rapport aux
fonctionnalités actuelles du produit (selon le cas).
55
Conception
Types de prototype
La différence en Prototype et maquette
 Une maquette effectue ses entrées-sorties sur des fichiers
simulés (par exemple en mémoire) afin de permettre quelques
tests rapides de fonctionnalités, et de prendre l'avis des futurs
utilisateurs. Il fonctionne souvent sur un système différent de
celui qui sera utilisé (par exemple sur un PC pour une application
destinée à un mainframe).
 Un prototype,, travaille sur les fichiers réels de l'entreprise ainsi
que sur le réseau réel. Il est susceptible de fonctionner
réellement dans le cadre d'un utilisateur. Il ne lui manque plus
que les optimisations (assez souvent, la réécriture de tout ou
partie du prototype en langage compilé permettant son usage
intensif sans consommation excessive de ressources).
56
Conception
Types de prototype
Prototypes informels, sur papier
 Dessiner des écrans sur papier, sur logiciel (ms visio)
 Utiliser des post-its / transparents / présentations pour des
montages dynamiques
 Exécuter un scénario et essayer des variantes pour des choix
 de haut niveau : décider des fonctionnalités qui seront
disponibles
 de niveau intermédiaire : dessiner une séquence d’écrans
 de bas niveau : dessiner des idées d’icônes
57
Conception
Types de prototype
Prototypes vidéo
 Créer une vidéo de l’utilisation d’un prototype
 Simuler les fonctionnalités non implantées, les interactions
Prototypes informatiques à l’aide d’outils :

 Accès direct à l’interface : Visual Basic, Delphi, java swing
 Assistance au prototypage : Visual C, Tcl-Tk, Pencil
Tableau comparatif des outils de prototypage

http://socialcompare.com/fr/comparison/mockup-wireframing-design-tools
58
Conception
59
Conception
Conception centrée utilisateur
Démarche :
La démarche de conception orientée utilisateur consiste à mettre en
place un processus itératif s’appuyant sur l’analyse de l’expérience
utilisateur, c’est-à-dire le comportement et les retours des utilisateurs
lorsqu’ils se servent réellement de l’application
Trois phases :
 Analyse .
 Développement
 Evaluation
60
Conception
Démarche :
La phase d’analyse: Cette première étape vise à préciser les attentes
et les besoins des utilisateurs finaux. Elle permet de prendre
connaissance de la tâche réelle des utilisateurs et d’analyser le
contexte dans lequel ils effectuent, ou vont effectuer, cette tâche. La
phase d’analyse permet de préciser l’utilité recherchée par les
utilisateurs de l’application. Les méthodes d'observation peuvent
comprendre l'utilisation de questionnaires, de grilles d'observation
heuristiques, de focus group. Il est préférable d'ordonner ces besoins
et exigences selon leur importance vis-à-vis du produit à développer,
et des éventuelles contraintes de faisabilité technique
61
Conception
Démarche :
La phase de conception: Sur la base des éléments recueillis dans la
phase d’analyse, une première maquette ou prototype du produit est
conçu. Cette maquette résulte, d’une part de l’analyse de la tâche des
utilisateurs et des spécificités du contexte de travail, et d’autre part
des principes et recommandations ergonomiques. Elle peut reposer
également sur des standards de conception. Cette première
maquette évoluera ensuite en fonction des retours de la phase
suivante d’évaluation. Chaque itération permet d'enrichir et finaliser
la maquette.
62
Conception
Démarche :
La phase d’évaluation: La phase d’évaluation consiste à mesurer
l’utilisabilité du produit, autrement dit de valider la satisfaction des
utilisateurs dans la réalisation des tâches évaluées. Parmi les
différentes méthodes d'évaluation possibles, la principale est le test
utilisateur. Celui-ci consiste à placer l’utilisateur en situation
d’utilisation réelle du produit et à observer les difficultés rencontrées.
L’évaluation permet d’identifier les points à améliorer sur la
maquette et donc de préparer la version suivante qui sera à nouveau
testée et ainsi de suite. L’expérience montre que 2 à 3 itérations
suffisent en général pour finaliser la conception de l’interface.
63
Conception
Prise en compte des utilisateurs :
 Dès la phase d’analyse
 Etude 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
 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
64
Conception
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...
Techniques de recueil d’informations associées

 Observation directe, entretiens, questionnaires
65
Conception
Modèle de l’utilisateur :
identifier les caractéristiques pertinentes de l’utilisateur
 Données générales
 taille, âge, sexe, déficiences
 niveau de formation, habitudes culturelles
 Données liées à l’application : compétences sur le domaine/en
informatique
 débutant, occasionnel, expérimenté, expert
66
Conception
Modèle de la tâche : identifier l’enchaînement des processus
d’une tâche
 Construire la hiérarchie de tâches du système
 Spécifier chaque tâche, penser aux exceptions
 Evaluer la décomposition avec l’utilisateur
Définitions :
 Tâche
 but = ce qui doit être fait
 procédure = un ensemble de sous-tâches reliées par des
relations de composition ou des relations temporelles
 Tâche élémentaire
 tâche décomposable uniquement en actions physiques
opérations d’E/S
67
Conception
Exemple
Modèle de tâche pour l’activité “envoyer un sms”
68
Conception
Modèle de l’interaction : établir une correspondance directe
entre
 Les objets conceptuels informatiques (e.g., un fichier)
 Les objets d’interaction et de présentation
 les représentations du fichier à l’écran (fermé, ouvert)
 les opérations sur le fichier (modification, suppression,
etc.)
Cette correspondance doit :
 Apparaître comme "naturelle"
 S’inscrire dans une cohérence d’ensemble : la métaphore
69
Conception
Métaphore dans le modèle de l’interaction : utilisation de
concepts connus de l’utilisateur
 Facilite l’apprentissage
 L’utilisateur anticipe le comportement du système
Exemples de métaphore du monde réel :
 Spatiales (bureau, maison, etc.)
 Sociales ou techniques (imprimante, courrier, etc.)
70
Conception
71
Conception
Méthode des personas et scenarios
Méthode des personas :
 Utilisée dans différents domaines (plans marketing, sondages,
etc.)
 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
72
Conception
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 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
73
Conception
Définition du persona (ou archétype) :
 Un prénom
 Un titre
 Une photo
 Une devise (par rapport à
l’application)
 Une description, éducation,
background social
74
Conception
Scenario :
Un scenario est une sorte d’histoire avec :
 Un persona
 Un environnement
 Un but (que le persona doit accomplir)
 Des obstacles
L’exécution d’un scénario implique une orientation pour les choix de
fonctionnalités, interactions, 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 à la playlist et
étendre cette playlist par l’ajout de musiques dans le même genre
musical.
75
Conception
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
76
Conception
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.
77
Conception
Technique 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  Tri par cartes
 Inspection cognitive  Questionnaire
 Magicien d’Oz  Remue-méninges
 Enquête / entretien  Conception en parallèle
 Observations  Audit ergonomique
 Focus group
78
Conception
Scénario de conception. Créer une description réaliste de
l’utilisation du nouveau système.
 Utiliser les scénarimages (storyboards)
 Points clés, commentaires, enchaînements
 Pour une vue d’ensemble de l’interaction
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
Caractéristiques :
 Interviewer l’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)
79
Conception
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,
Echelle, classements.
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 80
Conception
Focus group.
but
 Comprendre les motivations des utilisateurs
 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 participant-e-s (timidité, temps de parole)
 Animation du groupe :
 activité “brise-glace”, les utilisateurs font 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 81
Conception
Inspections cognitives (cognitive walkthroughs)
But : Évaluer le système en se mettant à la place de l’utilisateur
Moyen : Spécification d’une série de tâches et des séquences
d’actions pour les réaliser
Procédure :
 Évaluation en imaginant ce que ferait l’utilisateur, comprend-il les
messages, le comportement du système ?
 Interprétation et prise en compte des résultats
82
Conception
Exemple
 Conception, première itération
 méthode des personas et scénarios
 Analyse
 questionnaire (site Web) et résultats de sondages pour définir
des personas et des scénarios
 remue-méninges pour les idées et fonctionnalités prioritaires.
 Développement.
 des interfaces par prototypage
 En parallèle, diffusion et promotion (site Web, etc.)
 Phase d’évaluation
 inspection cognitive (en utilisant les personas)
83
Ergonomie des IHM 1
1) : Guide de recommandations ergonomiques pour la conception et l’évaluation d’interfaces graphiques, Centre national
de la recherche scientifique Direction des systèmes d'information, 2001 84
Ergonomie des IHM
Plan___________________________________
I. L’apparence des fenêtres.
1. la densité d’affichage.
2. La disposition des éléments dans les fenêtres.
3. La présentation des listes et des tableaux.
4. Les éléments textuels.
5. les éléments graphiques.
II. Les principes de navigation
1. la navigation intra-fenêtre
2. la navigation intra-application
III. Les principes de saisie
1. Les données saisies par frappe au clavier
2. Les données saisies par sélection dans une liste
85
Ergonomie des IHM
Plan___________________________________
86
Ergonomie des IHM
I. L’apparence des fenêtres
1. La densité d’affichage
 une forte densité d’affichage augmente le taux d’erreur et le temps
nécessaire pour repérer une information;
 une distribution de l’information dans plusieurs fenêtres gêne l’utilisateur
dans sa perception globale de l’application.
87
Ergonomie des IHM
2. La disposition des éléments dans les fenêtres
 regrouper les données en rubriques et définir leur enchaînement selon :
• fréquence d’utilisation,
• séquence d’utilisation dans la tâche en cours,
• importance dans le contexte (saisies obligatoires, optionnelles).
 Présenter les groupes de données les plus importants selon le critère privilégié
(par exemple, fréquence d’utilisation) vers le haut de la fenêtre.
 Remarque : si le travail de l’utilisateur s’appuie sur un formulaire papier, et si ce
formulaire est bien construit, faire en sorte que la disposition des champs dans
la fenêtre soit proche de la structure du formulaire.
 Aligner verticalement les champs de saisie et/ou d’affichage avec leurs libellés ;
la justification peut se faire de trois manières :
• Cas 1: si les libellés sont de dimension sensiblement identique, justifier les
champs et les libellés à gauche ;
• Cas 2: si les libellés sont de dimensions très variables, justifier ces libellés à
droite et les champs à gauche ;
• Cas 3: il est également possible de disposer les libellés au dessus des
88
champs de saisie ; il faut alors les justifier à gauche.
Ergonomie des IHM
89
Ergonomie des IHM
 Attribuer un libellé à chaque donnée
et à chaque groupe de données1.
 Séparer les différentes catégories
d’informations par des espaces et
éventuellement par des boîtes de
groupe (encadrements).
 Placer l’en-tête de groupe2 au dessus
de la boîte de groupe3, et en
incrustation dans le cadre s’il y en a
un.
 Ne pas utiliser de boîte de groupe pour les boutons de commande.
 Ne pas utiliser systématiquement des boîtes de groupe quand il y a un en-tête :
trop de cadres peuvent gêner la lisibilité globale de la fenêtre. Utiliser alors des
en-têtes de groupe sans représenter une boîte de groupe.
90
Ergonomie des IHM
3. La présentation des listes et des tableaux
 Attribuer un titre aux listes et aux tableaux ; permet à l’utilisateur de se
repérer facilement et rapidement.
 Si une liste ou un tableau est muni d’un ascenseur (car sa taille/format ne
permet pas de voir l’intégralité de son contenu), alors :
 ascenseur vertical : les en-têtes de lignes de données doivent défiler
mais les en-têtes de colonnes doivent toujours rester visibles;
 ascenseur horizontal : les en-têtes de colonnes doivent défiler mais
les en-têtes de lignes de données doivent toujours rester visibles.
91
Ergonomie des IHM
3. La présentation des listes et des tableaux
 Respecter les alignements standards :
 libellés en général à gauche,
 numériques à droite.
 Eviter les alignements centrés
 Les colonnes doivent être séparées par un double espace (1 caractère
blanc x 2). Si cela ne peut pas être fait, séparer les colonnes par des
traits.
 Organiser les éléments d’un tableau/d’une liste
 adopter l’ordre respectant les habitudes de travail de l’utilisateur ;
 le cas échéant, utiliser l’ordre alphabétique ou numérique.
92
Ergonomie des IHM
4. Les éléments textuels
 Utiliser le vocabulaire appartenant au domaine d’activité des utilisateurs.
 Utiliser des termes explicites et non ambigus. Faire des phrases (ou
expressions) simples, c’est-à-dire facilement compréhensibles par
l’opérateur ; préférer les formes affirmatives.
 Indiquer les unités de mesure utilisées (en abrégé si elles sont connues de
l’utilisateur).
 Eviter d’utiliser des abréviations, sinon, fournir chaque fois que c’est
possible des abréviations bien choisies :
 utiliser uniquement celles qui sont le plus largement adoptées par les
utilisateurs car ces derniers pourront avoir rencontré certaines
abréviations qui signifient autre chose ;
 préférer la contraction (omission des lettres internes) pour les mots
courts
 préférer la troncature pour les mots longs (omission des lettres
93
finales).
Ergonomie des IHM
4. Les éléments textuels
 désigner toujours un même objet ou une même action par le même
libellé. (critère d’homogénéité)
 Pour des textes trop longs, supprimer des parties de texte dans le milieu
du libellé et y insérer des points de suspension, conservant ainsi le début
et la fin du libellé de l’élément, ou conserver le début du libellé suivi par
des points de suspension.
 Repérer chaque champ, liste, tableau, colonne ou groupe de données par
un libellé. On distingue trois grands types de libellés :
 libellé de champ, identifier une donnée affichée ou à saisir
 en-tête de colonne, identifier la colonne d’un tableau ou d’une liste ;
 en-tête de groupe, identifier un ensemble de données rassemblées
sous la forme d’un groupe.
94
Ergonomie des IHM
5. Les éléments graphiques
A. La typographie
 Concernant la taille des caractères :
 taille minimum : 8 points ; des caractères de plus petite taille sont
quasiment illisibles ;
 taille maximum : 16 points ; l’utilisation de caractères de plus grande
taille gêne la lisibilité.
 Choisir la police de caractères en fonction de critères de lisibilité (éviter
l’italique).
 Eviter d’utiliser plus de trois polices de caractères différentes dans une
même fenêtre ou sur plusieurs fenêtres affichées simultanément.
95
Ergonomie des IHM
A. La typographie
 Utiliser une seule poliCe de caractères dans un champ. Toutefois, il est
possible d’utiliser des codages particuliers (police différente, couleur,
italique, gras, souligné...) pour différencier certains textes tels que des
mots clés, des liens, des libellés de champs de saisie obligatoire, etc.
 Pour tous les libellés (champs de saisie et champs d’affichage, option de

menu, boutons d’option, titre, etc.) utiliser une majuscule à l’initiale. Ne
mettre donc en majuscule que la première lettre du premier mot du
libellé et aucun autre mot de ce libellé.
96
Ergonomie des IHM
B. La couleur
la couleur peut être employée pour coder visuellement l’information :
différenciation et identification des informations affichées.
 La couleur ne doit pas être le seul moyen utilisé pour communiquer de
l’information et ne devrait pas être le seul élément qui distingue deux
objets ; il doit y avoir d’autres indicateurs (libellés, forme, disposition) ;
 appliquer ce principe surtout pour tenir compte des utilisateurs
daltoniens ou achromates mais aussi pour les écrans monochromes
(même si ces derniers sont « rares » !)
 Choisir les couleurs en gardant à l’esprit que l’objectif est de faciliter la
lisibilité des informations affichées.
97
Ergonomie des IHM
B. La couleur
C’est pourquoi certaines associations de couleurs doivent être évitées. Ainsi,
essayer de ne jamais utiliser ensemble :
 le rouge avec le bleu,
 le jaune avec le violet,
 le jaune avec le vert.
Pour le fond des fenêtres, éviter les teintes de rouge, de jaune et de ses
dérivés (vert, orange, …). Privilégier plutôt le gris pâle, sinon du bleu foncé.
Pour de l’information que l’utilisateur doit lire, éviter le bleu pâle (et les
couleurs pâles en général).
 Homogénéité : au sein d’une même application et entre différentes
applications destinées à un même groupe d’utilisateurs, toujours choisir
les mêmes “ codages couleur ”.
98
Ergonomie des IHM
B. La couleur
 Respecter les règles d’association conventionnelles entre la couleur et sa
signification :
 vert : signifie que tout se passe correctement,
 jaune ou orange : attention, vigilance,
 rouge : alerte, danger, interruption.
 Eviter d’utiliser plus de 5 ou 6 couleurs différentes dans une même
fenêtre (mais également au sein d’une même application). Au delà de 5
ou 6, cela entraîne une surcharge visuelle et l’utilisateur éprouve des
difficultés à saisir le rôle joué par la couleur au sein de l’application.
 Concernant les états sur les imprimantes noir et blanc : s’assurer que
chaque couleur reste visible sur les impressions (il doit y avoir
correspondance entre les couleurs qui apparaissent à l’écran et les
niveaux de gris des sorties papier ; si le nombre de niveaux de gris
99
disponible est insuffisant, prévoir des hachures).
Ergonomie des IHM
C. Les icones
Les icones peuvent avoir deux fonctions :
 aider à identifier la nature d’une information, sous forme d’icone,
 représenter une action par une icone associée à un bouton de
commande. Exemple : l’icone loupe (ou jumelles) est associé au
bouton de commande <Rechercher>.
 Attention, les icones utilisées doivent être représentatives de l’action ou
du concept que l’on souhaite représenter, autrement dit elles doivent
être explicites. Il paraît néanmoins « prudent » de doubler les icones d’un
libellé.
 Homogénéité : quand une icone est utilisée pour représenter quelque
chose, la conserver pour l’ensemble de l’application. Autrement dit, ne
pas utiliser deux ou plusieurs icones différentes pour désigner une seule
et même action ou un seul et même concept.
100
Ergonomie des IHM
D. L’utilisation des onglets
 Utiliser les onglets pour éviter les
successions de boîtes de dialogue ou un
trop grand nombre de boutons.
 Eviter d’utiliser plus d’une rangée d’onglets,
car la manipulation de 2 ou 3 rangées
d’onglets est complexe.
 Centrer les libellés des onglets et les
afficher sur une seule ligne.
 Aligner les languettes des onglets à gauche
et les accoler les unes aux autres.
 Quand le principe des onglets est utilisé, si ces derniers sont liés (dépendants),
les boutons <OK> et <Annuler> doivent être placés en dehors de l’onglet.
 Si les onglets sont indépendants, ces boutons doivent être placés sur chacun des
onglets : le bouton <Annuler> devient <Fermer> et la demande de confirmation
devient facultative (<OK> facultatif). 101
Ergonomie des IHM
Plan___________________________________
102
Ergonomie des IHM
1. La navigation intra-fenêtre
La navigation intra-fenêtre fait référence au déplacement du focus (curseur)
à travers les champs de saisie ou à travers les Listes de sélection de la
fenêtre. Le focus ne doit pas se positionner sur les champs d’affichage.
Pour naviguer à l’intérieur d’une fenêtre, l’utilisateur a deux possibilités :
A. utiliser la touche tabulation pour déplacer de façon séquentielle le
curseur d’un champ à l’autre,
B. Utiliser la souris pour se positionner directement sur un champ.
103
Ergonomie des IHM
A. L’utilisation de la touche tabulation (déplacement séquentiel)
 En générale, déplacer le curseur de gauche à droite et de haut en bas (sens de
lecture/écriture occidental). Utiliser en principe :
 la touche de tabulation “Tab” pour déplacer le focus d’un champ vers le
champ suivant; si le curseur est positionné sur le dernier champ de la fenêtre
et que l’utilisateur appuie sur la touche «Tab», alors le focus se repositionne
sur le premier champ (déplacement en boucle) ;
 la combinaison de touches “maj + Tab” permet l’effet inverse : en déplaçant
le focus d’un champ vers le champ précédent ; si le curseur est positionné
sur le premier champ de la fenêtre et que l’utilisateur appuie sur la
combinaison de touche «maj + Tab», alors le focus se repositionne sur le
dernier champ (déplacement en boucle) ;
 Ne pas utiliser la touche “Entrée” pour permettre à l’utilisateur de valider la
saisie du champ courant et aller sur le champ suivant; à la différence des
interfaces en mode caractères, la touche «Entrée» doit, à l’intérieur d’une
fenêtre donnée, permettre d’activer l’action par défaut. 104
Ergonomie des IHM
A. Positionnement direct du curseur
 Par défaut, le curseur doit être placé sur le champ qui a les plus grandes
chances d’être choisi par l’utilisateur.
 Lorsque tous les caractères sont saisis à l’intérieur d’un champ, éviter le
déplacement automatique du curseur vers le champ suivant (auto
tabulation) sauf s’il s’agit de saisie de masse.
105
Ergonomie des IHM
C. Les barres de défilement horizontal et vertical :
 Les barres de défilement sont à utiliser :
 pour représenter, proportionnellement, au moyen de l’ascenseur, la
quantité d’information visualisée par rapport à l’information totale
qui peut être affichée dans la fenêtre ;
 quand l’utilisateur a réduit la taille de la fenêtre au point que la
visibilité de son contenu n’est plus totale.
• Donc : si le contenu de la fenêtre est entièrement visible, il n’y a pas
lieu de les utiliser.
 Disposition des barres de défilement :
- barre de défilement vertical : à droite de la fenêtre,
- barre de défilement horizontal : en bas de la fenêtre (au dessus de la barre
d’état ).
106
Ergonomie des IHM
2. La navigation intra-application
A. Le deux types de conversation
La navigation intra-application fait référence au cheminement de l’utilisateur
dans l’application. On peut aussi parler d’enchaînement d’écrans/de fenêtres.
A. La conversation libre. L’utilisateur bénéficie d’une grande liberté
dans son cheminement à l’intérieur de l’application.
B. La conversation guidée. C’est l’application qui pilote l’interface.
Question. Quel type de conversation adopter ?
Réponse.
conversation guidée. Si l’utilisateur se trouve dans un contexte où la «
rentabilité / productivité » est primordiale ou il doit impérativement
respecter une procédure dans la réalisation de sa tâche.
conversation libre. Si l’on souhaite proposer une application souple
d’utilisation ou que l’utilisateur ait une vue d’ensemble des
fonctionnalités proposées par l’application.
107
Ergonomie des IHM
2. La navigation intra-application
B. Le nombre de fenêtres
 Comment définir le nombre de fenêtres à l’intérieur de l’application et la
densité d’information affichée dans chaque fenêtre ? Pour chaque
fenêtre, il faut trouver un équilibre/compromis entre :
 le désir de présenter toutes les informations nécessaires à
l’utilisateur,
 la nécessité de présenter une fenêtre lisible (si trop d’informations
sont affichées, l’utilisateur aura du mal à se repérer).
 Dans la mesure du possible, la profondeur de l’application doit être
limitée à trois niveaux : au delà, l’utilisateur risque de « se perdre » dans
l’application et aura également des difficultés à la manipuler.
108
Ergonomie des IHM
Plan___________________________________
109
Ergonomie des IHM
La saisie de données par l’utilisateur peut s’effectuer de deux manières :
1. saisie de caractères par frappe au clavier,
2. saisie par sélection d’un (ou plusieurs) élément(s) dans une liste.
110
Ergonomie des IHM
A. Les champs de saisie
Aspect des champs de saisie
 cadrer les caractères saisis à gauche (lettres ou chiffres).
 La taille des champs doit être proportionnelle au nombre de caractères
qui peuvent être saisis.
 Lors du passage de la saisie a la consultation, modifier l’aspect des
champs de saisie qui deviennent alors des champs d’affichage.
 Si la taille de données à saisir dépasse la largeur du champ, proposer un
champ de type “explose ”. Ce type de champ s’agrandit lorsque le curseur
est positionné dessus;
 Eviter d’utiliser le défilement; si celui-ci est employé, préférer le
défilement vertical plutôt qu’horizontal.
111
Ergonomie des IHM
Initialisation des champs de saisie avec une valeur par défaut
 Initialiser les champs de saisie avec une valeur par défaut chaque fois que
cela est possible ; cette valeur doit correspondre :
 à la valeur ayant la plus grande probabilité d’être choisie par
l’utilisateur,
 ou à la valeur précédemment choisie (ou saisie) par l’utilisateur dans
le même contexte.
112
Ergonomie des IHM
Caractères à saisir
 Ne pas forcer la saisie de caractères en minuscules ou en majuscules.
 Quand des unités de mesure sont associées à un champ de saisie, les faire
apparaître dans le libellé du champ de saisie (l’utilisateur ne doit pas avoir
à saisir l’unité de mesure) ; ces unités doivent bien entendu être
familières aux utilisateurs.
 Quand le curseur est positionné sur un champ en saisie, il doit avoir un
aspect différent (forme ½) pour indiquer à l’utilisateur la possibilité de
saisir des données.
 Pour les champs qui nécessitent un format particulier (exemple : champ
date), proposer un préformatage des données à saisir ou alors formater a
posteriori (suite à la saisie de l’information par l’utilisateur).
Exemple : caractères de séparation dans une saisie de date ../../.... .
113
Ergonomie des IHM
Saisie obligatoire et saisie optionnelle
 Différencier les champs dont la saisie est obligatoire des champs dont la
saisie est facultative. Solutions proposées (par ordre de préférence) :
 libellés des champs dont la saisie est obligatoire en gras, et en maigre
pour ceux dont la saisie est facultative ;
 puce ou triangle de couleur devant les champs dont la saisie est
obligatoire et pas de marque distinctive devant les champs dont la
saisie est facultative ;
 fond des champs à saisir en couleur (discrète) ;
 encadrement gras pour les champs dont la saisie est obligatoire et
encadrement fin pour ceux dont la saisie est facultative.
114
Ergonomie des IHM
Validation de la saisie
 Lorsque l’utilisateur entre des données dans un champ de saisie, cela ne
doit jamais entraîner de modification irréversible de l’environnement de
l’application ; autrement dit, il ne doit pas y avoir de création, de mise à
jour, ni destruction de données sans une validation explicite de
l’utilisateur (message de confirmation).
115
Ergonomie des IHM
Retour système
 La frappe de chaque caractère doit entraîner un retour immédiat :
 affichage du caractère,
 affichage de code (astérisque pour les mots de passe par exemple),
 signal sonore pour indiquer un caractère interdit.
 Les erreurs de format ou de type de caractères dans un champ doivent être
détectées au moment de la saisie, ou avant le passage au champ suivant.
 Lorsqu’il y a une erreur, positionner le curseur sur ce champ. L’utilisateur doit
pouvoir corriger l’erreur sans être contraint de saisir à nouveau toute la
donnée.
 Les erreurs de type fonctionnel sur les données saisies ne devront être
signalées qu’après contrôle des données par l’application, après la validation.
 Si l’utilisateur clique sur <Annuler> dans une fenêtre contenant des erreurs
de saisie, le système doit fermer la fenêtre sans message d’erreur. 116
Ergonomie des IHM
B. La sélection d’un nombre limite d’options
Les options exclusives : boutons d’option
 Utiliser des boutons d’option pour des choix exclusifs.
 Proposer le choix entre deux options au moins, excepté dans le cas où le
choix entre les différentes options n’est pas significatif (griser alors toutes
les options).
 Il doit toujours y avoir une valeur par défaut. Si un utilisateur peut choisir
de ne sélectionner aucun des choix, ajouter une option « Aucun » ou
l’équivalent.
 Rassembler les boutons d’option dans des boîtes de groupe.
 Ecrire le libellé à droite du bouton d’option.
117
Ergonomie des IHM
B. La sélection d’un nombre limite d’options
Les options non exclusives : cases à cocher
 Eviter d’utiliser les cases à cocher pour les choix importants au niveau
fonctionnel (exemple : la sauvegarde).
 Rassembler les cases à cocher dans des boîtes de groupe.
 Ecrire le libellé à droite de la case à cocher.
 Afficher les cases à cocher pertinentes dans le contexte courant, griser le
cadre et le libellé de celles qui ne sont pas utilisables.
La liste limitée d’options liées : sélecteur rotatif
 Suivre l’ordre séquentiel habituel : la touche flèche vers le haut doit
permettre de monter dans la liste, et la touche vers le bas de descendre.
 L’utilisateur doit pouvoir parcourir toute la liste en actionnant toujours la
même touche (la touche doit permettre de boucler dans la liste).
118
Ergonomie des IHM
 L’utilisateur doit pouvoir désélectionner un élément aussi simplement et
par le même moyen qu’il peut le sélectionner.
 Mettre en évidence l’élément sélectionné de façon immédiate.
 La sélection ne doit jamais entraîner une action. La désélection d’un
élément ne doit pas avoir d’incidence sur la tâche en cours (pas de retour
au début de la tâche).
 Utiliser les listes pour afficher une suite d’éléments ; la sélection pourra
être unique ou multiple (sélection d’un ou plusieurs éléments).
 Afficher les éléments dans un ordre s’appuyant sur la logique de
l’utilisateur ou la fréquence d’utilisation.
Le cas échéant, utiliser l’ordre alphabétique.
 Ne pas permettre au curseur de boucler sur la liste : lorsque l’extrémité
est atteinte, laisser le curseur dessus.
119
Ergonomie des IHM
 Dans le cas des listes longues :
 Permettre un positionnement direct basé sur la frappe du premier
caractère de l’élément voulu,
 Mettre l'initiale de chaque élément en majuscules pour favoriser la
lisibilité.
 Indiquer le nombre d’éléments sélectionnés.
 Si la saisie est optionnelle, une boîte à liste déroulante doit contenir
obligatoirement un élément “Aucun” positionné en première ligne qui
sera sélectionné par défaut.
 La sélection multiple doit être mise en œuvre quand l’utilisateur doit
sélectionner des éléments séparés de la liste (c’est-à-dire situés non à la
suite les uns des autres).
 La sélection étendue doit être mise en œuvre quand l’utilisateur doit
sélectionner plusieurs éléments consécutifs dans la liste.
120
Ergonomie des IHM
Plan_________________________________________
I. Actions par menu ou bouton de commande
1. Recommandations générales.
2. Les menus.
3. Les boutons de commande
II. Actions du système
1. Les messages
2. Le curseur/pointeur
3. Les temps de réponse
4. Le signal sonore
5. La confidentialité des informations
121
Ergonomie des IHM
Plan___________________________________
2. Les menus.
1. Les messages
4. Le signal sonore
122
Ergonomie des IHM
IV. Actions par menu ou bouton de commande
1. Recommandations générales
A. le libelle des actions
 Pour représenter l’action, employer des libellés (et/ou des icones)
aisément compréhensibles. Choisir un Vocabulaire non ambigu et connu
de l’utilisateur.
 Utiliser plutôt des verbes à l’infinitif. Validation , Valider
 Mettre l’initiale du verbe en capitale. valider , Valider
 Eviter les libellés trop longs.
 Homogénéité : au sein d’une même application, toujours utiliser le même
libellé pour désigner la même Action : ne pas utiliser de synonymes.
Ex : Valider, Ok, Appliquer
 Lorsqu’une action implique une étape de dialogue supplémentaire avant
d’être réalisée, faire suivre le libellé Par des points de suspension.
Confirmer…
123
Ergonomie des IHM
B. Les raccourcis clavier
 Déclencher une action par raccourci clavier ne doit pas changer son mode de
fonctionnement. Exemple : si le déclenchement d’une action de suppression (clic
sur le bouton <Supprimer>) entraîne l’apparition d’un message de confirmation
(du type « Voulez-vous vraiment supprimer... ? »), alors ce message doit
également apparaître lorsque l’utilisateur déclenche cette action par son
raccourci clavier.
 Tous les raccourcis clavier d’une fenêtre donnée doivent être actifs lorsque cette
fenêtre est active.
 Toutefois, si une de ces actions n’est pas accessible pour une raison donnée, le
raccourci clavier correspondant ne doit pas être disponible (l’activation du
raccourci-clavier non disponible doit entraîner l’émission d’un bip).
 Copier : Ctrl + C, Couper : Ctrl + X, Coller : Ctrl + V, Annuler : Ctrl + Z, Ouvrir : Ctrl +
O, Imprimer : Ctrl + P, Enregistrer : Ctrl + S, Affichage de l’aide : F1, Fermeture de
l’application ou d’un dialogue : Alt + F4, Activation/désactivation de l’aide
contextuelle : Shift + F1. 124
Ergonomie des IHM
C. Les actions interdites ou indisponibles
 Pour les actions pouvant varier selon le contexte, utiliser un affichage
grisé.
 Pour les options qui ne sont jamais accessibles à l’utilisateur, utiliser si
possible le non-affichage, sinon utiliser l’affichage grisé.
 Lorsque l’utilisateur appelle une action interdite (par utilisation de la
Souris ou par raccourci clavier) l’application doit réagir par un
avertissement sonore. Dans le cas où l’utilisateur a la possibilité de
modifier l’environnement pour rendre cette action disponible, coupler le
signal sonore avec l’affichage d’une fenêtre de message.
125
Ergonomie des IHM
D. Le retour-arrière
 Si l’utilisateur effectue une action par erreur ou déclenche une action
dont le traitement peut être long, il doit pouvoir retourner à l’état
précédant le déclenchement. Si l’action concernait un objet sélectionné,
conserver la sélection.
 Dans le cas où une action peut entraîner une destruction physique des
données, il est impératif :
 d’informer préalablement l’utilisateur des conséquences de l’action
qu’il a choisie,
 de lui demander une confirmation explicite de son choix (message de
confirmation).
126
Ergonomie des IHM
E. Les actions par défaut
 Pour différencier le bouton de commande par défaut des autres boutons,
utiliser généralement un encadrement sombre et encadrer le libellé d’une
ligne pointillée.
 Quand une fenêtre est iconisée, ses actions par défaut ne doivent pas
pouvoir être déclenchées. Seule action par défaut possible sur la fenêtre
iconisée : restauration de la fenêtre. Au moment de la restauration de la
fenêtre (récupération du contexte), l’action par défaut de celle-ci sera
rétablie.
 Utilisation de la touche « Entrée » :
 fenêtre contenant des boutons de commande avec une action par défaut
: actionner la touche Entrée = activer l’action par défaut de la fenêtre ;
 fenêtre contenant des boutons de commande sans action par défaut :
actionner la touche Entrée = activer l’action associée à l’objet sur lequel
est positionné le curseur. 127
Ergonomie des IHM
F. Les accès aux actions
 Eviter de proposer une action par bouton de commande si cette action
est déjà accessible par menu. Réserver les boutons de commande aux
actions fréquemment effectuées (usage répétitif).
128
Ergonomie des IHM
2. Les menus
Il existe plusieurs types de menus, tels que les menus déroulants, les menus en
cascade, les menus contextuels.
A. la barre de menus
 Proposer au moins deux menus (sans compter le menu système) mais pas
plus de dix dans la barre de menus. Pour cela, grouper ou hiérarchiser les
actions et utiliser les menus déroulants.
 Associer un raccourci clavier à tous les menus.
 Les menus de la barre de menus ne doivent pas être des actions directes : ils
doivent donner accès à des menus déroulants.
 Utiliser si possible un seul mot pour le libellé de chaque menu. L’initiale du
mot doit être en majuscule.
 Si un menu n’est jamais proposé à l’utilisateur (parce que le profil de
l’utilisateur ne le justifie pas par exemple), ne pas afficher ce menu et ne pas
laisser son emplacement vide. Si c’est impossible à appliquer, griser le menu.
 L’utilisateur doit pouvoir accéder aux menus déroulants par le clavier 129
en
utilisant les touches flèche gauche et droite.
Ergonomie des IHM
2. Les menus
B. Les options de menu
 Les libellés des options de menu peuvent
être composées de plusieurs mots mais pas plus
de 4 (article compris).
 Si l’option de menu est une commande qui requiert une(des)
information(s) supplémentaire(s) pour compléter son exécution, ajouter
… à la fin du libellé. Les … informent l’utilisateur qu’il manque de
l’information et qu’il aura à en fournir en complément. Ces options de
menus suivie de … entraînent généralement l’affichage d’une boîte de
dialogue, mais toutes les options qui entraînent l’affichage d’une boîte de
dialogue ne doivent pas comprendre des …. (les … sont donc inutiles s’il
n’y a pas de paramétrages supplémentaires à fournir ou d’actions
complémentaires à effectuer).
130
Ergonomie des IHM
2. Les menus
Les menus déroulants
 Proposer au moins 2 options dans chaque menu mais pas plus de 10 par menu.
Pour cela, grouper ou hiérarchiser les actions ou modifier la barre de menus.
 Essayer de ne pas dépasser deux niveaux d’enchaînement de menus (menu
déroulant + menu en cascade).
 Regrouper les options et les classer par des critères définis à partir de la logique
de l’utilisateur (exemple : fréquence d’utilisation, ordre d’utilisation).
 Séparer les groupes d’options par des lignes continues (séparateur de menus).
 Si une option de menu permet à l’opérateur de sélectionner un mode de
fonctionnement avec une logique du genre actif/non actif, employer un
indicateur visuel positionné à gauche de l’option activée pour indiquer son
statut actif :
 pour une suite d’options avec une logique exclusive (une seule option peut
être choisie dans la liste), utiliser une puce ronde ;
 pour les options ayant un statut actif/non actif, utiliser la coche . 131
Ergonomie des IHM
2. Les menus
Les menus déroulants
 Quand une action appelle un menu en cascade, ajouter le signe “ ” à droite de
l’option.
 Ne pas numéroter les options, excepté dans le cas où l’on souhaite l’accès par un
raccourci clavier basé sur le nombre.
 Si une option menu n’est jamais proposée à l’utilisateur (parce que le profil de
l’utilisateur ne le justifie pas par exemple), ne pas afficher cette option et ne pas
laisser son emplacement vide. Le cas échéant (si cette recommandation est «
techniquement » impossible à appliquer), griser l’option.
 Le curseur doit boucler sur le menu.
 Le libellé d’une option de menu peut être changé ou reformulé en fonction de
l’état du système. Par exemple, le nom d’une commande peut être modifié pour
en clarifier le sens. Exemple : <Annuler> peut devenir <Annuler fractionner>.
 Dans un menu déroulant déjà ouvert, les flèches haut et bas du clavier doivent
permettre de se déplacer dans les options de menu. 132
Ergonomie des IHM
2. Les menus
Les menus en cascade
 Suivre les mêmes recommandations que pour les menus déroulants.
 Utiliser un menu en cascade pour réduire la taille d’un menu déroulant.
Les menus contextuels (ou menus d’incrustation)

 Suivre les mêmes recommandations que pour les menus déroulants.
 Afficher le menu contextuel à côté de l’objet auquel il est associé et sur
lequel le curseur est positionné lorsque l’utilisateur clique sur la souris.
L’objet ne doit pas être recouvert par le menu contextuel.
 Faire disparaître le menu contextuel lorsque l’utilisateur :
 choisit une action du menu contextuel,
 sélectionne un autre objet,
 actionne la touche < Echappement >.
133
Ergonomie des IHM
2. Les menus
La barre d’outils
 Pour représenter les outils, utiliser des icones explicites.
 Lorsque l’utilisateur choisit un outil, il est possible d’attribuer au curseur la
forme de l’outil afin de permettre la visualisation directe de l’action en
cours.
 Le contenu de la barre d’outil est invariable mais il peut être contextuel
(estompé, inactif).
 Quand le curseur est placé dans une zone de la fenêtre extérieure au
champ d’application de l’outil, modifier la forme du curseur pour montrer
qu’il n’est pas utilisable. Par exemple, lui donner la forme de “
stationnement interdit ”.
 Quand le curseur se déplace sur la barre d’outils, lui donner la forme d’une
flèche de sélection.
134
Ergonomie des IHM
2. Les menus
La barre d’outils
 L’utilisateur ne doit pouvoir sélectionner qu’un seul outil à la fois.
 Donner à l’utilisateur le choix d’afficher ou de ne pas afficher la barre
d’outils. Ces boutons correspondront uniquement aux options de menu les
plus fréquemment utilisées.
 Placer les boutons d’action de la barre d’outils dans l’ordre des menus.
Grouper les options d’un même menu et les séparer des autres par six
pixels.
 Donner à l’utilisateur la possibilité de positionner la barre d’outils aux
quatre coins de la fenêtre : horizontalement en haut ou en bas de la
fenêtre ou verticalement à droite ou à gauche.
135
Ergonomie des IHM
Les boutons déclenchent des actions ou modifient des propriétés.
A. la présentation des boutons de commande
 Lorsque l’activation d’un bouton de commande entraîne l’ouverture d’une
fenêtre de dialogue, ajouter “ ... ” À droite de son libellé.
 Pour les boutons de commande, éviter les dimensions « fantaisistes ».
représenter les boutons de commande Par un rectangle. La largeur des
boutons doit être dans la mesure du possible unique pour l’ensemble des
Boutons du dialogue ou à défaut pour les boutons d’un même groupe.
 Grouper les boutons de même nature fonctionnelle et les distinguer des
autres boutons par un écart plus Important.
 Pour les boutons de commande concernant l’ensemble de la fenêtre,
déterminer une zone où ils seront Présentés. Disposer la zone d’action en
bas de la zone client ou verticalement à droite de la zone client.
 Homogénéité : conserver la disposition choisie pour l’ensemble de
136
l’application.
Ergonomie des IHM
Les boutons déclenchent des actions ou modifient des propriétés.
A. la présentation des boutons de commande
 Respecter un ordre homogène dans la disposition des boutons : de
gauche à droite <OK> puis <annuler> Puis <aide>.
 Placer les boutons de commande spécifiques à un élément de la fenêtre
juste à côté de celui-ci.
 Eviter d’encadrer les boutons de commande dans une boîte de groupe.
Leur représentation graphique est en Effet suffisamment explicite.
 Si la fenêtre contient une barre de défilement horizontal, les boutons de
commande doivent toujours rester Visibles.
 Dans le cas d’une fenêtre avec onglets, les boutons d’action associés à
l’ensemble des onglets doivent être Placés à l’extérieur des onglets ; les
boutons d’action associés à un seul onglet doivent être positionnés sur Ce
seul onglet.
137
Ergonomie des IHM
B. Le comportement des boutons de commande
 Proposer un bouton de commande par défaut. Ce bouton sera celui qui a
la plus forte probabilité d’être choisi dans le contexte du dialogue (ou
celui qui, s’il est choisi, aura le moins de conséquences).
 Utiliser des raccourcis clavier standards pour les boutons de commande :
 - touche <Echappement> équivalente au bouton de commande
<Annuler>,
 - touche < Entrée > équivalente au clic sur l’objet sélectionné (bouton,
item...).
138
Ergonomie des IHM
B. Le choix des boutons de commande
En association avec les boutons spécifiques à l’application, utiliser les
boutons de commande prédéfinis. Les Principaux boutons de commande
prédéfinis sont présentés ci-dessous par ordre alphabétique :
 <Aide> : permet l’accès à l’aide contextuelle rapide ; l’activation du
bouton <aide> entraîne l’affichage de L’aide contextuelle relative à la
fenêtre active.
 <Action> : permet d’effectuer l’action désignée par le nom. Si ce bouton
est le seul bouton de la fenêtre, Effectuer l’action et fermer la fenêtre.
<Ajouter > est un exemple d’action. Un bouton exprimant l’action Inverse
(ex : <enlever>) pourrait être utilisé simultanément.
 <Appliquer> : permet d’effectuer les modifications en attente de
traitement et ferme la fenêtre.
139
Ergonomie des IHM
 <Annuler> : permet d’annuler le dialogue en cours ; l’activation du bouton
<annuler> annule le dialogue et Ferme la fenêtre sans valider les choix ou
les modifications effectués ; si des modifications ont été effectuées Dans
la fenêtre mais non pas été enregistrées, le système doit émettre une
demande de confirmation (message Du type “ voulez-vous enregistrer les
dernières modifications? ”) . Note: si des modifications ont déjà été
Enregistrées avec <appliquer>, ces modifications ne seront pas affectées
par l’action <annuler>.
 <Arrêter> : permet d’arrêter l’action en cours de façon définitive.
Remarque : il est nécessaire de préciser le nom de l’action (exemple :
<Arrêter transférer>).
 <Coller> : permet d’insérer un objet situé dans le presse-papiers à
l’endroit où le curseur est positionné.
140
Ergonomie des IHM
 <Défaire>: permet d’annuler les modifications effectuées par
<Appliquer>, <OK> ou <Oui> ; l’activation du bouton <Défaire> ne ferme
pas la boîte de dialogue. Après activation, le bouton <Défaire> devient
<Refaire>.
 <Détruire>/<Supprimer> : permet de supprimer un objet (élément,
fichier ou autre)
 <Enregistrer> : permet de sauvegarder sur le disque toutes les éditions
effectuées depuis le dernier enregistrement (ou lecture) et commence
une nouvelle séance d’édition.
 <Enregistrer sous> : permet de sauvegarder le fichier sous un nouveau
nom et commence une nouvelle séance d’édition.
 <Imprimer> : permet d’imprimer les objets sélectionnés sur l’imprimante
par défaut.
141
Ergonomie des IHM
 <Fermer> : permet de fermer l’objet courant. Après activation du bouton
<Fermer> par l’utilisateur, le système propose à l’utilisateur d’enregistrer
toutes les nouvelles éditions réalisées depuis le dernier enregistrement. Si
l’utilisateur répond par l’affirmative, les éditions sont enregistrées et la
fenêtre est fermée.
 Note : éviter au maximum d’utiliser <Fermer> et <Annuler> dans la même
fenêtre parce que ces deux termes ont tendance à être équivalents pour
l’utilisateur.
 <Oui> : dans une boîte de dialogue, permet de donner une réponse
affirmative à une question. Lorsque l’utilisateur clique sur ce bouton, la
boîte de dialogue disparaît. Note : n’utiliser le bouton <Oui> que si la
réponse à la question est précise.
142
Ergonomie des IHM
 <Non> : dans une boîte de dialogue, permet de donner une réponse
négative à une question. Lorsque l’utilisateur clique sur ce bouton, la
boîte de dialogue disparaît. Note : n’utiliser le bouton <Non> que si la
réponse est précise.
 <OK> :
 dans une boîte de dialogue, permet de rendre les modifications
demandées effectives, ou indique que l’utilisateur a lu et compris un
message. Une fois que l’utilisateur a cliqué sur <OK>, la boîte de
dialogue se ferme. Note : éviter au maximum d’utiliser <OK> pour
répondre à une question, préférer les boutons <Oui> et <Non>.
 dans une fenêtre, permet de valider une action ou un ensemble
d’actions. Exécute les informations en attente de traitement et ferme
éventuellement la fenêtre.
143
Ergonomie des IHM
 <Recommencer> Tente d’appliquer à nouveau la dernière action
demandée. Peut être utilisée par exemple dans le cas d’une erreur dans le
dialogue, comme lorsque l’utilisateur demande accès à un serveur vide et
doit insérer une disquette dans le lecteur.
144
Ergonomie des IHM
Plan___________________________________
2. Les menus.
1. Les messages
4. Le signal sonore
145
Ergonomie des IHM
IV. Actions du système
1. Les messages
A. Recommandations générales
 Présenter les messages dans une boîte de message (ou fenêtre de
message). Une boîte de message doit Contenir les éléments suivants :
 une barre de titre : indique l’origine du message,
 Une icone : permet d’identifier rapidement et visuellement le type de
message,
 Le texte du message : explique brièvement la situation ou pose une question
à l’utilisateur,
 Des boutons de commande spécifiques au type de message : permettent à
l’utilisateur de répondre.
 Pour rédiger le texte du message, utiliser des mots non ambigus, issus du
domaine de l’utilisateur.
 En règle générale, éviter de formuler des questions auxquelles l’utilisateur
ne peut répondre que par “ oui ” Ou par “ non ”. préférer les réponses
sous forme de verbes représentant des actions. 146
Ergonomie des IHM
1. Les messages
A. Recommandations générales
 Décrire la cause du message et proposer des possibilités ou des actions à
l’utilisateur. Proposer Éventuellement un bouton d’aide à partir duquel il
accédera à une aide de type applicative et contextuelle.
 Afin de faciliter l’identification visuelle du type de message, employer des
icones. Placer l’icone à gauche Du texte, sur le côté gauche de la fenêtre.
 Dans le cas où le message est associé à un identifiant (numéro ou code),
disposer cet identifiant en bas à Droite de la fenêtre de message (ce n’est
pas une information significative pour l’utilisateur).
 Rédiger le texte du message dans un style concis, non vexatoire. Le texte
ne doit pas contenir de mots tels Que “ faute ”, “ mauvaise manipulation ”
ou “ illégal ”.
147
Ergonomie des IHM
1. Les messages
B. Les messages d’information ou de simple mise en garde
 Utilisation : ce message indique à l’utilisateur le résultat pour
l’achèvement d’une action ; action qui ne présente aucun risque de
menace pour l’utilisateur telle qu’une destruction éventuelle de données.
 Fonctionnement : donner uniquement à l’utilisateur la possibilité de
cliquer sur <OK>.
 Contenu :
 texte du message,
 icone du type message d’information (I),
 bouton <OK> (= action par défaut).
 Cette boîte de message pourra être recouverte par une autre fenêtre.
148
Ergonomie des IHM
1. Les messages
C. Les messages d’avertissement
 Utilisation : pour signaler à l’avance une action qui peut s’avérer dangereuse si
elle est effectuée. Ce type de message constitue une sorte de “ filet de sécurité ”
pour l’utilisateur ; il permet à ce dernier de poursuivre dans l’action
potentiellement dangereuse ou d’annuler l’action en cours et de passer à une
autre tâche
 Fonctionnement : donner le choix à l’utilisateur entre deux possibilités (le
message peut avoir la forme d’une question) :
 continuer la tâche malgré l’avertissement et prendre le risque d’un problème
plus sérieux,
 annuler l’action en cours.
 Contenu :
 texte du message (forme affirmative),
 icone de type “ danger ” dans la signalisation routière (!),
 boutons :
 - <OK> ou <Continuer>, <Annuler> (= action par défaut), <Aide>. 149
Ergonomie des IHM
1. Les messages
B. Les messages d’avertissement
 Cette boîte de message peut généralement être recouverte par une autre fenêtre
; toutefois, si l’action en cours est importante pour l’application ou si le problème
évoqué peut entraîner des conséquences jugées graves, utiliser une boîte de
message modale, c’est-à-dire à laquelle l’utilisateur est obligé de répondre avant
de poursuivre son action.
 Si nécessaire, coupler l’affichage de la boîte de message avec l’émission d’un
signal sonore. A noter toutefois que l’émission du signal sonore est paramétrable
par l’utilisateur (qui peut choisir de désactiver le son associé au message).
150
Ergonomie des IHM
1. Les messages
D. Les messages de confirmation
 Utilisation : obligatoire pour les opérations irréversibles ; c’est toujours une
question.
 Fonctionnement : donner uniquement à l’utilisateur la possibilité de cliquer sur
<Arrêter> ou <Continuer> (ou <Annuler>), ou éventuellement <Oui> ou <Non>
(mais à éviter).
 Contenu :
 icone ,
 boutons :
 <Continuer> (= action par défaut),
 <Arrêter> ou <Annuler>.
 Cette boîte de message ne pourra pas être recouverte par une autre fenêtre ;
l’utilisateur est obligé de répondre pour poursuivre sa tâche.
 Si nécessaire, coupler l’affichage de la boîte de message avec l’émission d’un
signal sonore. 151
Ergonomie des IHM
1. Les messages
E. Les messages d’arrêt immédiat/bloquants
 Utilisation : pour signaler à l’utilisateur qu’une action ne peut pas être
réalisée. L’utilisateur ne peut répondre qu’en signalant qu’il a bien pris
connaissance du message et en supprimant le message. Se servir de ce
type de message chaque fois que l’utilisateur veut effectuer une action
irréalisable dans le contexte courant, autrement dit, pour des problèmes
sérieux qui empêchent l’utilisateur d’aller plus en avant dans l’application.
 Fonctionnement : donner uniquement à l’utilisateur la possibilité de
cliquer sur <OK>.
 Contenu :
 icone ,
 bouton : <OK> (= action par défaut).
152
Ergonomie des IHM
 Modifier la forme du curseur pour des attentes supérieures à 1 seconde.
 Modifier la forme du curseur en sablier dès qu’une action est lancée et
qu’aucune autre action ne peut être Lancée dans l’application.
 Pc : modifier le curseur en curseur + sablier lorsqu’une action est
lancée et qu’une autre action peut être Réalisée dans l’application.
 Limiter la modification du curseur à la fenêtre active directement liée à la
tâche en cours. A l’extérieur de cette fenêtre, le curseur doit reprendre sa
forme normale.
Les formes de curseur les plus courantes:
 flèche : Pointe, sélectionne et déplace.
 tiret vertical: Sélectionne du texte.
 sablier : Indique qu’un traitement est en cours.
 loupe : Agrandit l’affichage.
 Etc…
153
Ergonomie des IHM
 Modifier la forme du curseur pour des attentes supérieures à 1 seconde.
 Modifier la forme du curseur en sablier dès qu’une action est lancée et
qu’aucune autre action ne peut être Lancée dans l’application.
 Pc : modifier le curseur en curseur + sablier lorsqu’une action est
lancée et qu’une autre action peut être Réalisée dans l’application.
 Limiter la modification du curseur à la fenêtre active directement liée à la
tâche en cours. A l’extérieur de cette fenêtre, le curseur doit reprendre sa
forme normale.
Les formes de curseur les plus courantes:
 flèche : Pointe, sélectionne et déplace.
 tiret vertical: Sélectionne du texte.
 sablier : Indique qu’un traitement est en cours.
 loupe : Agrandit l’affichage.
 Etc…
154
Ergonomie des IHM
A. Généralités
 Quelques indications sur la longueur des temps de réponse :
– 0,1 seconde : au delà de ce délai, l’utilisateur peut avoir l’impression
que le système ne réagit pas de manière instantanée à l’action qu’il vient
d’effectuer ;
– 1 seconde : au delà de ce délai, l’utilisateur a l’impression de ne plus
contrôler le système ;
– 10 secondes : au delà de ce délai, l’utilisateur n’est plus attentif à
l’interaction en cours. Dans ce cas de figure, il est nécessaire que le
système affiche un retour visuel (indicateur de progression).
155
Ergonomie des IHM
B. Indicateur de progression
 Informer visuellement l’utilisateur du temps écoulé en utilisant par
exemple un sablier ou un indicateur de progression. Utiliser l’indicateur
de progression pour des attentes longues, supérieures à 6 secondes.
Actualiser l’affichage de la barre d’indicateur de progression en fonction
de l’avancement du traitement. Indiquer, au moyen d’une valeur textuelle,
le pourcentage d’avancement ou le temps écoulé depuis le
commencement de la tâche. Quand le traitement est achevé, en informer
l’utilisateur par un message.
 Informer l’utilisateur de la raison à l’origine du temps de réponse du
système (l’utilisateur acceptera plus facilement d’attendre s’il sait
pourquoi il attend, ce qui se passe au niveau du système ; il n’aura pas
l’impression de perdre le contrôle de l’application).
156
Ergonomie des IHM
B. Indicateur de progression
 Si le traitement est en cours, en arrière plan mais que l’utilisateur peut
effectuer d’autres actions, placer l’indicateur de progression dans la barre
d’état. Si le traitement est en cours et que l’utilisateur ne peut pas utiliser
l’application tant que le traitement n’est pas terminé, placer l’indicateur
de progression dans une boîte de dialogue.
 Les boutons d’action <Annuler> ou <Arrêter> doivent interrompre le
processus en cours et rendre la main à l’utilisateur.
157
Ergonomie des IHM
4. Le signal sonore
 Eviter l’utilisation intensive du signal sonore.
 Proposer la possibilité de le supprimer.
 Si le signal est utilisé, il devra avoir la même signification dans l’ensemble
de l’application et devra être couplé à une information visuelle.
 Le signal sonore peut être utilisé :
 lorsque l’utilisateur tente d’effectuer une action interdite ou
impossible ;
 associé à l’affichage d’une fenêtre de message d’avertissement ou
d’action ;
 à la fin de l’attente de l’achèvement d’une tâche de longue durée,
représentée par un indicateur de progression.
158
Ergonomie des IHM
 Permettre aux utilisateurs de choisir leur propre mot de passe (ceci les
aidera à s’en rappeler).
 Permettre aux utilisateurs de changer leur mot de passe quand ils le
veulent, au cas où l’utilisateur craint que son mot de passe ait été dévoilé.
 Ne pas afficher le mot de passe entré par l’utilisateur. Afficher seulement
un caractère spécial pour chaque caractère saisi, afin de donner un retour
d’information sur le nombre de caractères entrés.
 Limiter le nombre de tentatives d’accès consécutives.
 Après une période sans activité, geler l’écran et exiger une nouvelle
entrée du mot de passe. La durée de non-activité est à déterminer par
une analyse du contexte d’utilisation du système.
159

Cours

Transféré par

Informations du document

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

Cours

Transféré par

Droits d'auteur :

Formats disponibles

Interface homme machine

Edition de document WYSIWYG

NB: Toutes les interfaces graphiques actuelles sont

 Système de fenêtrage. Couche logicielle qui

Avec superposition 2D ½ sans superposition 2D ½

NB: opérations pour le système de fenêtrage ré-parentage (utilisé par le

Aires sensorielles et Approche intégrative des

Eléments de Psychologie appliquée aux systèmes interactifs

Dans le cadre d’un projet informatique, les méthodes de conception

 Des problèmes d’utilisabilité ont été la source de catastrophes

 Conception en génie logiciel

Méthode Merise Modèle en cascade Modèle en incrément

Prototypes informatiques à l’aide d’outils :

Tableau comparatif des outils de prototypage

Techniques de recueil d’informations associées

Modèle de tâche pour l’activité “envoyer un sms”

 Meilleure compréhension des utilisateurs et de leurs buts

La description d’un persona peut inclure :

 Des objectifs, contraintes, environnement de travail

La plupart des méthodes de

 Pour tous les libellés (champs de saisie et champs d’affichage, option de

Les menus contextuels (ou menus d’incrustation)

Vous aimerez peut-être aussi