Chapitre 2

Chapitre 2
Les lments d'une IHM

propos par :
Anouar Bouazza
2016 - 2017
Plan du cours
Les lments dune IHM
principes
de base
les types dinteraction
les composants de linterface graphique
les tches de linteraction graphique
aide et gestion des erreurs
PLAN
IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation
Mmoire long terme

o
Mmoire long terme
capacit infinie
dure de stockage illimite
accs rptitif
Consquence
favoriser lapprentissage par rptition

logiciel utilisation frquente logiciel utilisation par intermittence
Mmoire court terme

o
Mmoire court terme
mmorisation 7 items ( 2 selon individu, fatigue...)

regroupement des mnmes (unit dinformation) par motifs visuels ou
acoustiques
motifs visuels : lettres, chiffres, mots, formes, taille, couleur, ...
oubli : gnralement entre 15 30 secondes
Consquences
limiter les items de menus 7

tablir des liens entre lments (couleurs, format, emplacements)
utiliser des messages concis
ne pas prsenter dinformations inutiles
4
Quelques principes
o
2 secondes
3 clics
le temps pour atteindre une cible dpend de la distance et de sa taille
Syndrome de loisillon
accder linformation souhaite en 3 clics
Loi de Fitts
ne pas attendre plus de 2 secondes les rponses du systme
les utilisateurs ont tendance rejeter les systmes non familiers

problme pour lvolution des logiciels, les innovations
Conception intuitive
interface utilisable ds la premire fois, sans formation

5
Lisibilit des couleurs

o
Privilgier un bon contraste caractres/fond
o
o
caractres sombres sur fond clair

de prfrence caractres noirs sur fond blanc
test test
viter certaines combinaisons de couleurs test test

Limiter le nombre de couleurs (7 maximum)
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
Signification des couleurs

o
Respecter les habitudes culturelles
en occident : rouge = stop / vert = go

en chine : rouge = joie, mariage
Utiliser les couleurs pour signifier quelque chose
mme type dinformation mme couleur

types dinformation diffrents couleurs contrastes
types dinformation similaires couleurs peu contrastes
7
Lecture lcran
o
o
o
1re visualisation de lcran : parcours en Z

Ensuite : parcours slectif
Meilleure visibilit et accessibilit au centre de lcran
Commandes
Zone de
slection
Zone de travail
Zone de messages annexes
Affichage de texte
o
Typographie
sur cran polices sans srif plus lisibles lcran
(Arial, Helvetica, Geneva)
gras, italique, soulign ralentissent la lecture

MAJUSCULES moins lisibles que minuscules
L'interface Homme-machine tudie la

faon dont les humains interagissent
avec les ordinateurs ou entre eux
l'aide d'ordinateurs, ainsi que la faon
de concevoir des systmes
informatiques qui soient
ergonomiques, c'est--dire efficaces,
faciles utiliser ou plus gnralement
adapts leur contexte d'utilisation.
L'interface Homme-machine
L'INTERFACE
Homme-machine
HOMME-MACHINE
tudie
L'interface
Homme-machine
tudie
tudie
lala
TUDIE
LA
FAON
DONT
LES
la
faon
faon
dont
dont
les
humains
les humains
interagissent
dont
les
humains
interagissent
HUMAINS
INTERAGISSENT
AVEC
interagissent
avec
lesordinateurs
ordinateurs
avecou
les
ouentre
entre
ordinateurs
eux
avec les
eux

LES
ORDINATEURS
OU
ENTRE
ou
l'aide
entre
d'ordinateurs,
eux l'aide
ainsi
d'ordinateurs,
que
faon
l'aide
d'ordinateurs,
ainsi
que
lalafaon
EUX
que
L'AIDE
D'ORDINATEURS,
ainsi
de
concevoir
la faon
des
systmes
de concevoir des
de concevoir
des
systmes
informatiques
AINSI
QUEinformatiques
LAqui
qui
FAON
soientDE
systmes
qui soient
informatiques
soient
ergonomiques,
CONCEVOIR
DES
SYSTMES
ergonomiques,
ergonomiques,
c'est--dire
c'est--dire
c'est--dire efficaces,
faciles efficaces,
utiliser
INFORMATIQUES
QUI
SOIENT
efficaces,
faciles
utiliser
faciles
ou
plus
utiliser
gnralement
plus
ou plus gnralement adapts ou
leur
ERGONOMIQUES,
C'EST--DIRE
gnralement
adapts
leur contexte
adapts
d'utilisation.
leur
contexte d'utilisation.
EFFICACES,
FACILES UTILISER
contexte
d'utilisation.
9
Langage employ
o
o
o
Utiliser le langage de lutilisateur

viter les abrviations
Produire des messages
Utiliser
o
o
concis
homognes
la voix active
une forme affirmative
viter les impasses

Respecter lordre
des actions
10
Recommandations
o
o
Mettre en vidence les lments importants

Regrouper les commandes en fonction
de leur signification
de lobjet auquel elles se rapportent
11
Plan du cours
Les lments dune IHM
principes
PLAN
12
de base
Les types dinteraction

o
Quel type dinteraction et pour quelle commande ?
langage naturel
langage de commande
menus
formulaires
requtes
manipulation directe
13
Langage naturel
o
Dialoguer en langage naturel (rel ou via le clavier)
Raisons techniques
en thorie, le moyen le plus attractif de communiquer

en pratique, trs peu utilis
difficults de lanalyse du langage naturel

problme des ambiguts, des rfrences, des sous-dialogues
difficults de reconnaissance vocale
Raisons fonctionnelles
difficult dutilisation du clavier erreurs

lenteur dutilisation
14
Langage de commande (1)

o
Principe
Exemples : Dos, Unix
delete *.*
copy A:*.doc C:
Avantages
crire une ligne de commandes (avec syntaxe et vocabulaire)

accs direct aux fonctionnalits du systme pour les experts
mais pas utilisable par des novices
concision (plus grande quen langage naturel)

structuration
possibilit dextensions (macros, scripts)
Inconvnients
ncessite un apprentissage et une pratique rgulire

15
Langage de commande (2)

o
Syntaxe
cohrence dans lordre des arguments
mme si lordre peut diffrer en langage naturel
formes syntaxiques varies : remplace A par B
Vocabulaire
mots courts
faciles taper
spcifiques plutt que gnraux
de prfrence prononables
cohrence
pour lensemble des commandes ("haut / bas" et non "monter / bas")
pour les abrviations ("MKDIR" make directory, "CD" change directory)
16
Menus (1)
o
Slectionner un item dans un menu
Graphisme des commandes
liste de commandes dclenches par un clic

mise en vidence de loption choisie
hirarchies possibles
normal activable
gris non activable
mais pas effac
possibilit de personnaliser les menus (experts)
Ordre des items de menus
alatoire (!)
alphabtique : termes prcis (nom dune ville)
par catgories, spares par un trait (couper / copier / coller)
17
Menus (2)
o
Nombre darguments de la commande
aucun (Quitter)
un (Rechercher)
plusieurs (Remplacer)
fentre de dialogue annonce par
exemple : imprimer
Ordre des arguments
commande puis arguments
remplacer
arguments puis commande
copier
18
Formulaires et requtes
o
Formulaires : rpondre des questions
pour entrer des informations nombreuses

mcanisme simple mais fonctionnalits limites
questions fermes
(oui/non, choix multiples, listes)
questions ouvertes
champs remplir
Requtes : poser des questions
Donner le titre et lauteur des livres dont le titre commence par L :

langages de requtes
SELECT titre, auteur from LIVRES where titre LIKE L*;
plus complexe
utilis en base de donnes
19
Manipulation directe (1)

o
Reprsentation permanente lcran
Actions physiques sur les objets
pointer et cliquer
illusion de travailler directement sur les objets ( transmettre une commande)
Oprations
des objets
des actions possibles
rapides et rversibles
avec effet visible immdiatement
Principe objet/action
l'utilisateur dsigne "le ou les" objets quil veut manipuler

actions les unes la suite des autres
exemple : slection de texte, puis centrer italique changer la casse

20
Manipulation directe (2)

o
Avantages
plus fort engagement de lutilisateur
impression dagir sur lenvironnement
plus faible distance

entre la conception de l'environnement
et la faon dont il est reprsent linterface
Inconvnients
manque dabstraction
difficult de reprsenter des oprations abstraites
encombrement de lcran (tous les objets)

ambigut du sens des icnes
juge moins rapide par les experts
21
Plan du cours
Les lments dune IHM
principes
de base
PLAN
22
Guidelines
o
Guides de style
rfrences dont il faut tenir compte pour concevoir des interfaces

dfinissent laspect des interfaces
mais ne contiennent pas de recommandations ergonomiques
gnriques / spcifiques au systme dexploitation, sa version
23
SJD - LIRIS - UCBL : IHM - L3 info
WIMPS - Windows, Icons, Menus, Pointers

o
Fentres : vocabulaire
barre de titre
barre de menu
barres doutils
barre dtat
24

o
Multifentrage
sans superposition : mosaque

avec superposition
problmes
informations masques
temps daccs la fentre masque
hirarchique
fentre dapplication avec fentres filles
25

o
Fentres dapplications
MDI
Fentres de documents
Actives ou Inactives
Multiple Document Interface
fentre principale
espace de travail
fentres filles
contiennent les documents
fentre inactive
fentre active
26
SJD - LIRIS - UCBL : IHM - L3 info

o
Fentres utilitaires
palette doptions
fentres jaillissantes (pop-up)
infobulle, bulle daide, aide contextuelle
27

o
Fentres de dialogue (1)
fentre permettant linteraction entre le systme et lutilisateur

dcouplage temporel et spatial entre la spcification de la commande
(paramtres) et son excution
fentres modales
on doit fermer le dialogue pour retourner la fentre principale
obligatoire quand la commande en cours ne peut tre suspendue
fentre dplaable pour laisser lutilisateur voir la tche amont
fentres non modales

on peut passer de la fentre de dialogue la fentre principale
lutilisateur peut abandonner temporairement la tche en cours
28

o
Fentres de dialogue (2)
rgles
regroupements > succession de dialogues
nommer les groupes
fentres 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'extrieur des onglets
contrles et erreurs
filtres de saisie et contrles de format en quittant le dialogue
si une erreur est dtecte : affichage dun message d'erreur et
positionnement du curseur sur la saisie mise en cause
Annuler : aucune entre faite sur le dialogue ne doit tre prise en compte
29

o
Icne : graphisme associ une signification linterface
fentres "iconises"
reprsentations mtaphoriques
des objets
des actions
corbeille, disques
programmes
fichiers, dossiers
enregistrer
tracer une droite
problmes
comprhension de la reprsentation
prennit
solutions
tester les reprsentations
bulles daide, icnes + texte
faire voluer les reprsentations
30

o
Utilisation des icnes
Difficult dinterprtation
pour des commandes frquentes

avec un libell
limiter leur nombre (12 au mieux, 20 max)
Construction des icnes diffrents niveaux dabstraction
ressemblance (bouton stop, corbeille)

descriptif (texte justifi)
exemple (souligner)
caricatural (impression)
analogie (couper = ciseaux, sauver = disquette)
symbolique (image abstraite : organiser)
arbitraire (actualisation des navigateurs)
31

o
Menus
droulants
contextuels (pop-up)
ensemble ditems souvrant en cliquant

sur le libell de la barre de menus
ensemble ditems accessibles hors de la
barre de menu, l o se trouve la souris
hirarchiques
proposer des options complmentaires
indiqus par un triangle dans un item de menu
dtachables (tear-off menu)

menu contenant gnralement une palette
qui se transforme en fentre utilitaire
circulaires
prsentation originale et conomique
Raccourcis : Alt + caractre soulign

32

o
Rgles pour les menus
entre 2 et 7 items
libell en un seul mot
possibilit de sous-menus (1 seul niveau)
Rgles pour les items de menu
gris si l'action est indisponible

marquer les items de menu
des proprits ou modes actifs
actif / non actif
slection de la proprit active
parmi plusieurs
items de mme nature regroups et spars par un trait horizontal

items de menus qui conduisent un dialogue suivis de ""
libell possible en plusieurs mots (max 4)
groupement par frquence dusage, ordre alphabtique, dutilisation
33

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

Curseurs
curseur diffrent action diffrente

positionnement
positionnement dans un texte
attente
lien hypertexte
dplacement
redimensionnement
34
Boutons (1)
o
Mtaphore
reprsentent les boutons que lon manipule

sur les objets rels (TV, hi-fi)
Bouton daction
effet 3D et 4 tats
relch
relch avec focus
enfonc
inactif
si un bouton ouvre un dialogue, intitul suivi de

raccourcis : Alt + caractre soulign
Boutons graphiques d'une barre d'outils

35
Boutons (2)
o
Bouton radio
pour faire un choix parmi des alternatives exclusives

cocher un bouton enlve le choix antrieur
possibilit de bouton radio graphique
(choix dune couleur)
Case cocher
pour slectionner 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 dfilement)

slection simple
slection multiple (case cocher)
pour visualiser entre 3 et 8 lments
Liste droulante
pour obtenir la liste cliquer sur le triangle droite

slection dun seul lment
non modifiable (slection simple)

modifiable (permet la saisie directe)
si la zone est facultative

doit contenir en premier litem "Aucun"
Liste de choix hirarchique
pour visualiser et naviguer dans une arborescence

37
Zones de regroupement
o
Botes de regroupement
pour regrouper des cases cocher,

des boutons, des lments divers
Barre de sparation
Classeur onglets
pour regrouper dans une mme fentre

des affichages rpartis sur plusieurs pages
38
Autres composants
o
Zones de saisie
texte sur une seule ligne

si un type prcis est attendu, le systme doit contrler la saisie
le curseur change de forme
Molette dincrment
pour remplacer la saisie
Curseur
texte multi-lignes
pour slectionner une valeur peu prcise
Indicateur de progression
pour reprsenter graphiquement un taux davancement
% du temps, pas du nombre dactions !

39
Retour dinformation (feedback)

o
Menu
Saisie de texte
poignes
Slection de texte
changement de curseur
Slection dun objet
curseur
Attente
ligne slectionne
inversion vido
Autres possibilits
changement de couleur, de police, clignotement, animation, son

40
Plan du cours
Les lments dune IHM
principes
de base
PLAN
41
Les tches de linteraction graphique

o
Quels composants graphiques et pour quelle tche ?
saisie
slection
dclenchement
dfilement
spcification darguments
et de proprits
transformation
42
Tche de saisie
o
Saisie de texte
Saisie de quantits
curseur ou molette + souris
Saisie de positions
bote de saisie + clavier
pointage
Saisie de tracs
souris
43
Tche de slection
o
Choix dun lment dans un ensemble
boutons radio
liste droulante
Choix de plusieurs lments dans un ensemble
cardinal fixe
case cocher
liste slection multiple
cardinal variable
liste droulante modifiable
liste slection multiple
+ saisie dlments supplmentaires
Slection multiple
par groupe (ctrl) ou par intervalle (shift)

par ajout/retrait
44
Tche de dclenchement
o
o
o
Boutons
Menus
Glisser - dposer
glisser - lcher, glisser - dplacer, drag and drop

cliquer sur un objet graphique et maintenir le bouton enfonc
dplacer la souris
lcher le bouton une fois arriv destination
laction dpend de la source et de la destination
exemple : glisser - dposer un fichier
sous Windows sur un mme disque : dplacement

sous Windows sur des disques diffrents : copie
45
Tche de dfilement
o
Barre de dfilement (ascenseur)
dfilement direct
1 seule unit dinformation
1 page cran
en % du document
dfilement automatique
lorsque la commande effectue

engendre une modification de la
quantit dinformation, un
dplacement du curseur
46
Tche de spcification darguments et de

proprits
o
Botes de dialogue
Botes de proprits
aperu des modifications sur les

objets concerns
47
Tche de transformation
o
Poignes de manipulation
laisser la possibilit de redimensionner

fentres
dessins
images
redimensionnement
suivant un axe
horizontal
vertical
suivant les deux axes la fois
proportionnellement
ou non
48
Plan du cours
Les lments dune IHM
principes
de base
PLAN
49
Aide
o
Types daide
contextuelle : que puis-je faire ?

factuelle : quest-ce que cest ?
procdurale : comment faire ?
Moyens
documentation
aide en ligne
bulles daide
50
Gestion des erreurs : prvention

o
Empcher les erreurs
annoncer les commandes irrversibles
inactiver les commandes indisponibles
contrler les saisies
51
Gestion des erreurs : correction

o
Permettre la correction des erreurs
signaler lerreur au plus tt

placer le message dans la zone concerne /
marquer la zone concerne
saisie facilement modifiable

permettre le retour arrire
autoriser les interruptions pour les commandes longues
52

Chapitre 2 - Les Eléments D'une IHM

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

Chapitre 2 - Les Eléments D'une IHM

Transféré par

Droits d'auteur :

Formats disponibles

Les lments d'une IHM

Les lments dune IHM

Mmoire long terme

Mmoire long terme

favoriser lapprentissage par rptition

Mmoire court terme

Mmoire court terme

mmorisation 7 items ( 2 selon individu, fatigue...)

motifs visuels : lettres, chiffres, mots, formes, taille, couleur, ...

oubli : gnralement entre 15 30 secondes

limiter les items de menus 7

le temps pour atteindre une cible dpend de la distance et de sa taille

accder linformation souhaite en 3 clics

ne pas attendre plus de 2 secondes les rponses du systme

les utilisateurs ont tendance rejeter les systmes non familiers

interface utilisable ds la premire fois, sans formation

Lisibilit des couleurs

Privilgier un bon contraste caractres/fond

caractres sombres sur fond clair

viter certaines combinaisons de couleurs test test

selon les crans (penser au nombre de couleurs des crans)

daltonisme : 8-10% des hommes, 0,5% des femmes

Signification des couleurs

Respecter les habitudes culturelles

en occident : rouge = stop / vert = go

Utiliser les couleurs pour signifier quelque chose

mme type dinformation mme couleur

1re visualisation de lcran : parcours en Z

Zone de messages annexes

sur cran polices sans srif plus lisibles lcran

(Arial, Helvetica, Geneva)

gras, italique, soulign ralentissent la lecture

L'interface Homme-machine tudie la

Utiliser le langage de lutilisateur

viter les impasses

Mettre en vidence les lments importants

Les lments dune IHM

Les types dinteraction

Quel type dinteraction et pour quelle commande ?

Dialoguer en langage naturel (rel ou via le clavier)

en thorie, le moyen le plus attractif de communiquer

difficults de lanalyse du langage naturel

difficult dutilisation du clavier erreurs

Langage de commande (1)

Exemples : Dos, Unix

crire une ligne de commandes (avec syntaxe et vocabulaire)

concision (plus grande quen langage naturel)

ncessite un apprentissage et une pratique rgulire

Langage de commande (2)

cohrence dans lordre des arguments

mme si lordre peut diffrer en langage naturel

formes syntaxiques varies : remplace A par B

Slectionner un item dans un menu

Graphisme des commandes

liste de commandes dclenches par un clic

Ordre des items de menus

Nombre darguments de la commande

Ordre des arguments

commande puis arguments

arguments puis commande

Formulaires : rpondre des questions

pour entrer des informations nombreuses