IHM L3if CM3 Elements

Partie 3
Les éléments d’une IHM

Stéphanie Jean-Daubias
INFO Stephanie.Jean-Daubias@liris.univ-lyon1.fr
SJD - LIRIS - UCBL : IHM - L3 info
http://liris.cnrs.fr/stephanie.jean-daubias/
L3
Plan du cours
 Les éléments d’une IHM

 principes de base
 les types d’interaction
 les composants de l’interface graphique
 les tâches de l’interaction graphique
 aide et gestion des erreurs
PLAN
2
IHM : introduction – conception – éléments des IHM – progr. événementielle – web – handicap – évaluation
Mémoire à long terme
o Mémoire à long terme

 capacité infinie
 durée de stockage illimitée
 accès associatif
o Conséquence
 favoriser l’apprentissage par répétition
 logiciel à utilisation fréquente ≠ logiciel à utilisation par intermittence
3
Mémoire à court terme
o Mémoire à court terme

 mémorisation 7 items ( 2 selon individu, fatigue...)
 regroupement des mnèmes (unité d’information) par motifs visuels ou
acoustiques
 motifs visuels : lettres, chiffres, mots, formes, taille, couleur, localisation
 recherche séquentielle
 oubli : 15 à 30 secondes
o Conséquences
 limiter les items de menus à 7
 établir des liens entre éléments (couleurs, format, emplacements)
 utiliser des messages concis
 ne pas présenter d’informations inutiles
4
Quelques principes
o 2 secondes
 ne pas attendre plus de 2 secondes les réponses du système
o 3 clics
 accéder à l’information souhaitée en 3 clics
o Loi de Fitts
 le temps pour atteindre une cible dépend de la distance et de sa taille
o Syndrome de l’oisillon
 les utilisateurs ont tendance à rejeter les systèmes non familiers
 problème pour l’évolution des logiciels, les innovations
o Conception intuitive
 interface utilisable dès la première fois, sans formation
5
Lisibilité des couleurs
o Privilégier un bon contraste caractères/fond

 caractères sombres sur fond clair
 de préférence caractères noirs sur fond blanc test test
o Éviter certaines combinaisons de couleurs test test
o Limiter le nombre de couleurs (7 maximum)
o Attention à la portabilité des couleurs
 selon les écrans (penser au nombre de couleurs des écrans)
 selon les personnes : choisir des couleurs faciles à distinguer
 daltonisme : 8-10% des hommes, 0,5% des femmes
6
Signification des couleurs
o Respecter les habitudes culturelles

 en occident : rouge = stop / vert = go
 en chine : rouge = joie, mariage
o Utiliser les couleurs pour signifier quelque chose

 même type d’information  même couleur
 types d’information différents  couleurs contrastées
 types d’information similaires  couleurs peu contrastées
7
Lecture à l’écran
o 1ère visualisation de l’écran : parcours en Z

o Ensuite : parcours sélectif
o Meilleure visibilité et accessibilité au centre de l’écran
Commandes
Zone de
Zone de travail
sélection
Zone de messages annexes
8
Affichage de texte
o Typographie
 sur écran polices sans sérif plus lisibles à l’écran
 (Arial, Helvetica, Geneva…)
 gras, italique, souligné ralentissent la lecture
 MAJUSCULES moins lisibles que minuscules
L'interface Homme-machine étudie la L'interface Homme-machine

L'INTERFACE
L'interface Homme-machine
HOMME-MACHINE
Homme-machine étudie lala
étudie
étudie
façon dont les humains interagissent ÉTUDIE
la
façon
façon
dont
dontLA
dontFAÇON
les
les les
humainsDONT
humains
humains LES
interagissent
interagissent
avec les ordinateurs ou entre eux à HUMAINS
interagissent
avec
avec les INTERAGISSENT
lesordinateurs
ordinateurs
avecou les
ouentre
entre AVEC
ordinateurs
euxeux
à à
l'aide d'ordinateurs, ainsi que la façon LES
ou
l'aide
l'aide ORDINATEURS
entre
d'ordinateurs,
eux à l'aide
d'ordinateurs, OU
ainsi ENTRE
d'ordinateurs,
ainsi que
que lalafaçon
façon
de concevoir des systèmes EUX
ainsi
de Àque
L'AIDE
concevoir
de concevoir la façon
des
des D'ORDINATEURS,
systèmes
de concevoir des
systèmes
informatiques qui soient informatiques
AINSI
systèmes QUEinformatiques
informatiques LAqui
qui
FAÇON
soientDE
soient qui soient
ergonomiques,
ergonomiques, c'est-à-dire efficaces, CONCEVOIR
ergonomiques,
ergonomiques, DES SYSTÈMES
c'est-à-dire
c'est-à-dire efficaces, faciles efficaces,
c'est-à-dire à utiliser
faciles à utiliser ou plus généralement INFORMATIQUES
efficaces,
faciles QUI SOIENT
ou plus généralement adaptés ou
à utiliser
faciles ou àplus
utiliser
généralement
plus
à leur
adaptés à leur contexte d'utilisation. ERGONOMIQUES,
généralement
adaptés à leur contexte C'EST-À-DIRE
adaptés d'utilisation.
à leur
contexte d'utilisation.
EFFICACES,
contexte FACILES À UTILISER…
d'utilisation.
9
Langage employé
o Utiliser le langage de l’utilisateur

o Éviter les abréviations
o Produire des messages
 concis
 homogènes
o Utiliser
 la voix active
 une forme affirmative
o Éviter les impasses
o Respecter l’ordre
des actions
10
Recommandations
o Mettre en évidence les éléments importants

o Regrouper les commandes en fonction
 de leur signification
 de l’objet auquel elles se rapportent
11
Plan du cours

 principes de base
 les types d’interaction
PLAN
12
Les types d’interaction
o Quel type d’interaction pour quelle commande ?

 langage naturel
 langage de commande
 menus
 formulaires
 requêtes
 manipulation directe
13
Langage naturel
o Dialoguer en langage naturel (réel ou via le clavier)

 en théorie, le moyen le plus attractif de communiquer
 en pratique, très peu utilisé (surtout pour commandes de complexité
restreinte)
o Raisons techniques
 difficultés de l’analyse du langage naturel
 problème des ambiguïtés, des références, des sous-dialogues
 difficultés de reconnaissance vocale
o Raisons fonctionnelles
 difficulté d’utilisation du clavier erreurs
 lenteur d’utilisation
14
Langage de commande (1)
o Principe
 écrire une ligne de commandes (avec syntaxe et vocabulaire)
 accès direct aux fonctionnalités du système pour les experts
 mais pas utilisable par des novices
o Exemples : Dos, Unix
 delete *.*
 copy A:*.doc c:
o Avantages
 concision (plus grande qu’en langage naturel)
 structuration
 possibilité d’extensions (définition de macros, scripts)
o Inconvénients
 nécessite un apprentissage et une pratique régulière
15
Langage de commande (2)
o Syntaxe
 cohérence dans l’ordre des arguments
 même si l’ordre peut différer en langage naturel
 formes syntaxiques variées : remplace A par B, substitue B par A
 Action Objet Destination
o Vocabulaire
 mots courts
 faciles à taper (proximité des touches sur le clavier)
 spécifiques plutôt que généraux
 de préférence prononçables
 cohérence
 pour l’ensemble des commandes (haut / bas, et non monter / bas)
 pour les abréviations (MKDIR make directory, CD change directory)
16
Menus (1)
o Sélectionner un item dans un menu

 liste de commandes déclenchées par un clic
 mise en évidence de l’option choisie
 hiérarchies possibles
o Graphisme des commandes
 normal activable
 grisé non activable : ex. copier sans sélection
 mais pas effacé
 possibilité de personnaliser les menus (experts)
o Ordre des items de menus
 aléatoire (!)
 alphabétique : termes précis (nom d’une ville)
 par catégories, séparées par un trait (couper / copier / coller)
17
Menus (2)
o Nombre d’arguments de la commande

 aucun (Quitter)
 un (Rechercher)
 plusieurs (Remplacer)
 fenêtre de dialogue annoncée par …
 exemple : imprimer
o Ordre des arguments

 commande puis arguments
 remplacer
 arguments puis commande
 copier
18
Formulaires et requêtes
o Formulaires : répondre à des questions

 pour entrer des informations nombreuses
 mécanisme simple mais fonctionnalités limitées
 questions fermées
(oui/non, choix multiples, listes)
 questions ouvertes
champs à remplir
o Requêtes : poser des questions

 langages de requêtes Donner le titre et l’auteur des livres dont le titre commence par ‘L’ :
SELECT titre, auteur from LIVRES where titre LIKE ‘L*’;
 plus complexe
 utilisé en base de données
19
Manipulation directe (1)
o Représentation permanente à l’écran

 des objets
 des actions possibles
o Actions physiques sur les objets
 pointer et cliquer
 illusion de travailler directement sur les objets (≠ transmettre une commande)
o Opérations
 rapides et réversibles
 avec effet visible immédiatement
o Principe objet/action
 l'utilisateur désigne le ou les objets qu’il veut manipuler
 puis les actions les unes à la suite des autres
 exemple : sélection de texte, puis centrer italique changer la casse
20
Manipulation directe (2)
o Avantages
 plus fort engagement de l’utilisateur
 impression d’agir sur l’environnement
 plus faible distance
 entre la conception du monde
 et la façon dont il est représenté à l’interface
o Inconvénients
 manque d’abstraction
 difficulté de représenter des opérations abstraites
 encombrement de l’écran (tous les objets)
 ambiguïté du sens des icônes
 jugée moins rapide par les experts
 problème du choix de la métaphore
21
Plan du cours

 les types d’interaction
PLAN
22
Guidelines
o Guides de style
 références dont il faut tenir compte pour concevoir des interfaces
 définissent l’aspect des interfaces
 mais ne contiennent pas de recommandations ergonomiques
 génériques / spécifiques au système d’exploitation, à sa version
23
WIMPS - Windows, Icons, Menus, Pointers
o Fenêtres : vocabulaire
barre de titre
barre de menu
barres d’outils
barre d’état
24
o Multifenêtrage
 sans superposition : mosaïque
 avec superposition
 problèmes
 informations masquées
 temps d’accès à la fenêtre masquée
 hiérarchique
 fenêtre d’application avec fenêtres filles
25
o Fenêtres d’applications o Fenêtres de documents

 MDI  la métaphore du document
 Multiple Document Interface remplace celle de l’application
 fenêtre principale
 espace de travail
 fenêtres filles
 contiennent les documents
fenêtre inactive fenêtre active
26
o Fenêtres utilitaires
 palette d’options
 fenêtres jaillissantes (pop-up)

 infobulle, bulle d’aide, aide contextuelle
27
o Fenêtres de dialogue (1)

 fenêtre permettant l’interaction entre le système et l’utilisateur
 découplage temporel et spatial entre la spécification de la commande
(paramètres) et son exécution
 fenêtres modales
 on doit fermer le dialogue pour retourner à la fenêtre principale
 obligatoire quand la commande en cours ne peut être suspendue
 fenêtre déplaçable pour laisser l’utilisateur voir la tâche amont
 fenêtres non modales

 on peut passer de la fenêtre de dialogue à la fenêtre principale
 l’utilisateur peut abandonner temporairement la tâche en cours
28
o Fenêtres de dialogue (2)

 règles
 regroupements > succession de dialogues
 nommer les groupes
 fenêtres modales
(sauf pour les dialogues de recherche)

 pas plus de 5 boutons
 contient toujours au moins les boutons OK, Annuler (+ Aide)
 boutons concernant l'ensemble des onglets : à l'extérieur des onglets
 contrôles et erreurs
 filtres de saisie et contrôles de format en quittant le dialogue
 si une erreur est détectée : affichage d’un message d'erreur et
positionnement du curseur sur la saisie mise en cause
 Annuler : aucune entrée faite sur le dialogue ne doit être prise en compte
29
o Icônes : graphisme associé à une signification à l’interface

 fenêtres "iconisées"
 représentations métaphoriques
 des objets
 corbeille, disques
 programmes
 fichiers, dossiers
 des actions
 enregistrer tracer une droite
 problèmes
 compréhension de la représentation
 pérennité
 solutions
 bulles d’aide, icônes + texte
 tester les représentations
30
o Utilisation des icônes

 pour des commandes fréquentes
 avec un libellé
 limiter leur nombre (12 au mieux, 20 max)
o Construction des icônes à différents niveaux d’abstraction
 ressemblance (bouton stop, corbeille)
Difficulté d’interprétation
 descriptif (texte justifié)

 exemple (souligner)
 caricatural (impression)
 analogie (couper = ciseaux, sauver = disquette)
 symbolique (image abstraite : organiser)
 arbitraire (actualisation des navigateurs)
31
o Menus
 déroulants
 ensemble d’items s’ouvrant en cliquant
sur le libellé de la barre de menus
 contextuels (pop-up)
 ensemble d’items accessibles hors de la
barre de menu, là où se trouve la souris
 hiérarchiques
 proposer des options complémentaires
 indiqués par un triangle dans un item de menu
 détachables (tear-off menu)

 menu contenant généralement une palette
 qui se transforme en fenêtre utilitaire
 circulaires
 présentation originale et « économique »
o Raccourcis : Alt + caractère souligné
32
o Règles pour les menus

 entre 2 et 7 items
 libellé en un seul mot
 possibilité de sous-menus (1 seul niveau)
o Règles pour les items de menu
 grisé si l'action est indisponible
 marquer les items de menu
des propriétés ou modes actifs
 actif / non actif 
 sélection de la propriété active
parmi plusieurs
 items de même nature regroupés et séparés par un trait horizontal
 items de menus qui conduisent à un dialogue suivis de …
 libellé possible en plusieurs mots (max 4)
 groupement par fréquence d’usage, ordre alphabétique, d’utilisation
33
o Dispositifs de pointage (souris, trackball, joysticks…)

o Curseurs
 curseur différent → action différente
 positionnement
 positionnement dans un texte
 attente
 lien hypertexte
 déplacement
 redimensionnement
 …
34
Boutons (1)
o Métaphore
 représentent les boutons que l’on manipule
sur les objets réels (TV, hi-fi)
o Bouton d’action
 effet 3D et 4 états
 relâché
 relâché avec focus
 enfoncé
 inactif
 si un bouton ouvre un dialogue, intitulé suivi de …

 raccourcis : Alt + caractère souligné
o Boutons graphiques d'une barre d'outils
35
Boutons (2)
o Bouton radio
 pour faire un choix parmi des alternatives exclusives
 cocher un bouton enlève le choix antérieur
 possibilité de bouton radio graphique
(choix d’une couleur)
o Case à cocher
 pour sélectionner des options non exclusives dans une liste
 chaque case est une bascule
 2 états : coché / non coché
 3 états : coché / non coché / grisé
36
Listes
o Liste
 contenu affiché en permanence (mais barre de défilement)
 sélection simple
 sélection multiple (cf. case à cocher)
 pour visualiser entre 3 et 8 éléments
o Liste déroulante
 pour obtenir la liste cliquer sur le triangle à droite
 sélection d’un seul élément
 non modifiable (sélection simple)
 modifiable (permet la saisie directe)
 si la zone est facultative
doit contenir en premier l’item "Aucun"
o Liste de choix hiérarchique
 pour visualiser et naviguer dans une arborescence
37
Zones de regroupement
o Boîtes de regroupement
 pour regrouper des cases à cocher,
des boutons radio, des éléments divers
o Barre de séparation
o Classeur à onglets
 pour regrouper dans une même fenêtre
des affichages répartis sur plusieurs pages
38
Autres composants
o Zones de saisie
 texte sur une seule ligne
 si un type précis est attendu, le système doit contrôler la saisie
 le curseur change de forme
 texte multi-lignes
o Molette d’incrément
 pour remplacer la saisie
o Curseur
 pour sélectionner une valeur peu précise
o Indicateur de progression
 pour représenter graphiquement un taux d’avancement
 % du temps, pas du nombre d’actions !
39
Retour d’information (feedback)
o Menu
 ligne sélectionnée
o Saisie de texte
 curseur
o Attente
 changement de curseur
o Sélection d’un objet
 poignées
o Sélection de texte
 inversion vidéo
o Autres possibilités
 changement de couleur, de police, clignotement, animation, son
 avec parcimonie, permettre d’arrêter 
40
Plan du cours

 les composants de l’interface graphique
PLAN
41
Les tâches de l’interaction graphique
o Quels composants graphiques pour quelle tâche ?

 saisie
 sélection
 déclenchement
 défilement
 spécification d’arguments
et de propriétés
 transformation
42
Tâche de saisie
o Saisie de texte
 boîte de saisie + clavier
o Saisie de quantités
 curseur ou molette + souris
o Saisie de positions
 pointage
o Saisie de tracés
 souris
43
Tâche de sélection
o Choix d’un élément dans un ensemble

 boutons radio
 liste déroulante
o Choix de plusieurs éléments dans un ensemble
 cardinal fixe
 case à cocher
 liste à sélection multiple
 cardinal variable
 liste déroulante modifiable
 liste à sélection multiple
+ saisie d’éléments supplémentaires
o Sélection multiple
 par groupe (ctrl) ou par intervalle (shift)
 par ajout/retrait
44
Tâche de déclenchement
o Boutons
o Menus
o Glisser - déposer
 glisser - lâcher, glisser - déplacer, drag and drop
 cliquer sur un objet graphique et maintenir le bouton enfoncé
 déplacer la souris
 lâcher le bouton une fois arrivé à destination
 l’action dépend de la source et de la destination

 exemple : glisser - déposer un fichier
 sous Windows sur un même disque : déplacement
 sous Windows sur des disques différents : copie
45
Tâche de défilement
o Barre de défilement (ascenseur)

 défilement direct
 1 seule unité d’information
 1 page écran
 en % du document
 défilement automatique
 lorsque la commande effectuée
engendre une modification de la
quantité d’information, un
déplacement du curseur…
46
Tâche de spécification d’arguments et de

propriétés
o Boîtes de dialogue o Boîtes de propriétés
 aperçu des modifications sur les
objets concernés
47
Tâche de transformation
o Poignées de manipulation
 laisser la possibilité de redimensionner
 fenêtres
 dessins
 images
 redimensionnement
 suivant un axe
 horizontal
 vertical
 suivant les deux axes à la fois
 proportionnellement
 ou non
48
Plan du cours

 les tâches de l’interaction graphique
PLAN
49
Aide
o Types d’aide
 contextuelle : que puis-je faire ?
 factuelle : qu’est-ce que c’est ?
 procédurale : comment faire ?
o Moyens
 documentation
 aide en ligne
 bulles d’aide
50
Gestion des erreurs : prévention
o Empêcher les erreurs

 annoncer les commandes irréversibles
 inactiver les commandes indisponibles
 contrôler les saisies
51
Gestion des erreurs : correction
o Permettre la correction des erreurs

 signaler l’erreur au plus tôt
 placer le message dans la zone concernée /
marquer la zone concernée
 saisie facilement modifiable

 permettre le retour arrière
 autoriser les interruptions pour les commandes longues
52
Plan du cours
 Les éléments d’une IHM

 les tâches de l’interaction graphique
 aide et gestion des erreurs
PLAN
53

IHM L3if CM3 Elements

Transféré par

Informations du document

Titre original

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

IHM L3if CM3 Elements

Transféré par

Droits d'auteur :

Formats disponibles

Partie 3

Les éléments d’une IHM

 Les éléments d’une IHM

Mémoire à long terme

o Mémoire à long terme

Mémoire à court terme

o Mémoire à court terme

Lisibilité des couleurs

o Privilégier un bon contraste caractères/fond

Signification des couleurs

o Respecter les habitudes culturelles

o Utiliser les couleurs pour signifier quelque chose

o 1ère visualisation de l’écran : parcours en Z

Zone de messages annexes

L'interface Homme-machine étudie la L'interface Homme-machine

o Utiliser le langage de l’utilisateur

o Mettre en évidence les éléments importants

 Les éléments d’une IHM

Les types d’interaction

o Quel type d’interaction pour quelle commande ?

o Dialoguer en langage naturel (réel ou via le clavier)

Langage de commande (1)

Langage de commande (2)

o Sélectionner un item dans un menu

o Nombre d’arguments de la commande

o Ordre des arguments

o Formulaires : répondre à des questions

o Requêtes : poser des questions

Manipulation directe (1)

o Représentation permanente à l’écran

Manipulation directe (2)

 Les éléments d’une IHM

 génériques / spécifiques au système d’exploitation, à sa version

WIMPS - Windows, Icons, Menus, Pointers

WIMPS - Windows, Icons, Menus, Pointers

WIMPS - Windows, Icons, Menus, Pointers

o Fenêtres d’applications o Fenêtres de documents

fenêtre inactive fenêtre active

WIMPS - Windows, Icons, Menus, Pointers

 fenêtres jaillissantes (pop-up)

WIMPS - Windows, Icons, Menus, Pointers

o Fenêtres de dialogue (1)

 fenêtre déplaçable pour laisser l’utilisateur voir la tâche amont

 fenêtres non modales

WIMPS - Windows, Icons, Menus, Pointers

o Fenêtres de dialogue (2)

(sauf pour les dialogues de recherche)

 contient toujours au moins les boutons OK, Annuler (+ Aide)

 boutons concernant l'ensemble des onglets : à l'extérieur des onglets

WIMPS - Windows, Icons, Menus, Pointers

o Icônes : graphisme associé à une signification à l’interface

WIMPS - Windows, Icons, Menus, Pointers

o Utilisation des icônes

 descriptif (texte justifié)

WIMPS - Windows, Icons, Menus, Pointers

 détachables (tear-off menu)

WIMPS - Windows, Icons, Menus, Pointers

o Règles pour les menus

WIMPS - Windows, Icons, Menus, Pointers

o Dispositifs de pointage (souris, trackball, joysticks…)

 si un bouton ouvre un dialogue, intitulé suivi de …

Retour d’information (feedback)

 Les éléments d’une IHM