Partie 3 Les lments dune IHM

Stphanie Jean-Daubias

INFO
SJD - LIRIS - UCBL : IHM - L3 info

Stephanie.Jean-Daubias@liris.univ-lyon1.fr http://liris.cnrs.fr/stephanie.jean-daubias/

L3

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
SJD - LIRIS - UCBL : IHM - L3 info

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 associatif favoriser lapprentissage par rptition logiciel utilisation frquente logiciel utilisation par intermittence

Consquence

3
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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, localisation

recherche squentielle oubli : 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

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Quelques principes
o o

2 secondes

ne pas attendre plus de 2 secondes les rponses du systme accder linformation souhaite en 3 clics le temps pour atteindre une cible dpend de la distance et de sa taille

3 clics

o
o

Loi de Fitts

Syndrome de loisillon

les utilisateurs ont tendance rejeter les systmes non familiers problme pour lvolution des logiciels, les innovations
interface utilisable ds la premire fois, sans formation
5

Conception intuitive

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Lisibilit des couleurs

o

Privilgier un bon contraste caractres/fond

caractres sombres sur fond clair de prfrence caractres noirs sur fond blanc

test test

o
o

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

6
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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

8
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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 L'interface Homme-machine tudie la L'interfaceHomme-machine tudie la Homme-machine tudie TUDIE dont humains interagissent faon dont les humains interagissent la faon LA FAON DONT LES dont les les humains HUMAINS INTERAGISSENT AVEC avec les ordinateurs les entre eux interagissent avecou entre eux avec les ordinateurs ou ordinateurs LES d'ordinateurs, ainsi que la faon l'aideORDINATEURS d'ordinateurs, ou entre eux l'aide OU que la faon l'aide d'ordinateurs, ainsi ENTRE EUX que la des systmes de concevoir faon de concevoir ainsi L'AIDE D'ORDINATEURS, des de concevoir des systmes AINSI QUE LA FAON ergonomiques, informatiques qui soient DE systmes informatiques qui soient informatiques qui soient CONCEVOIR DES SYSTMES ergonomiques, c'est--dire efficaces, ergonomiques, c'est--dire utiliser c'est--dire efficaces, faciles INFORMATIQUES QUI SOIENT faciles utiliser ou plus gnralement efficaces, faciles utiliser ou plus ou plus gnralement adapts leur ERGONOMIQUES, C'EST--DIRE adapts leur adapts leur gnralement contexte d'utilisation. contexte d'utilisation. EFFICACES, FACILES contexte d'utilisation. UTILISER
9

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.
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Langage employ
o o o

Utiliser le langage de lutilisateur viter les abrviations Produire des messages

concis homognes la voix active une forme affirmative

Utiliser

o o

viter les impasses Respecter lordre des actions

10

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Recommandations
o o

Mettre en vidence les lments importants Regrouper les commandes en fonction

de leur signification de lobjet auquel elles se rapportent

11
SJD - LIRIS - UCBL : IHM - L3 info

Plan du cours

Les lments dune IHM

de base les types dinteraction les composants de linterface graphique les tches de linteraction graphique aide et gestion des erreurs

principes

PLAN
SJD - LIRIS - UCBL : IHM - L3 info

12

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Les types dinteraction

o

Quel type dinteraction pour quelle commande ?

langage naturel langage de commande menus formulaires requtes manipulation directe

13
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Langage naturel
o

Dialoguer en langage naturel (rel ou via le clavier)

en thorie, le moyen le plus attractif de communiquer en pratique, trs peu utilis (surtout pour commandes de complexit restreinte) difficults de lanalyse du langage naturel problme des ambiguts, des rfrences, des sous-dialogues difficults de reconnaissance vocale difficult dutilisation du clavier erreurs lenteur dutilisation

Raisons techniques

Raisons fonctionnelles

14
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Langage de commande (1)

o

Principe

crire une ligne de commandes (avec syntaxe et vocabulaire) accs direct aux fonctionnalits du systme pour les experts mais pas utilisable par des novices delete *.* copy A:*.doc c:

Exemples : Dos, Unix

Avantages

concision (plus grande quen langage naturel) structuration possibilit dextensions (dfinition de macros, scripts) ncessite un apprentissage et une pratique rgulire
15

Inconvnients

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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, substitue B par A

Action Objet Destination

Vocabulaire

mots courts faciles taper (proximit des touches sur le clavier) 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
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Menus (1)
o

Slectionner un item dans un menu

liste de commandes dclenches par un clic mise en vidence de loption choisie hirarchies possibles normal activable gris non activable : ex. copier sans slection mais pas effac possibilit de personnaliser les menus (experts) alatoire (!) alphabtique : termes prcis (nom dune ville) par catgories, spares par un trait (couper / copier / coller)
17

Graphisme des commandes

Ordre des items de menus

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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
copier

arguments puis commande

18
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Manipulation directe (1)

o

Reprsentation permanente lcran

des objets des actions possibles pointer et cliquer illusion de travailler directement sur les objets ( transmettre une commande) rapides et rversibles avec effet visible immdiatement l'utilisateur dsigne le ou les objets quil veut manipuler puis les actions les unes la suite des autres

Actions physiques sur les objets

Oprations

Principe objet/action

exemple : slection de texte, puis centrer italique changer la casse

20

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Manipulation directe (2)

o

Avantages

plus fort engagement de lutilisateur

impression dagir sur lenvironnement

plus faible distance

entre la conception du monde 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 problme du choix de la mtaphore
21

SJD - LIRIS - UCBL : IHM - L3 info

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
SJD - LIRIS - UCBL : IHM - L3 info

22

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o

Fentres : vocabulaire
barre de titre barre de menu barres doutils

barre dtat

24
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o

Multifentrage

sans superposition : mosaque avec superposition

problmes

informations masques temps daccs la fentre masque

hirarchique

fentre dapplication avec fentres filles

25
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o

Fentres dapplications

Fentres de documents

MDI

Multiple Document Interface espace de travail contiennent les documents

la mtaphore du document remplace celle de lapplication

fentre principale

fentres filles

fentre inactive

fentre active

26
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o

Fentres utilitaires

palette doptions

fentres jaillissantes (pop-up)

infobulle, bulle daide, aide contextuelle

27
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

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
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

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
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o

Icnes : graphisme associ une signification linterface

fentres "iconises" reprsentations mtaphoriques

des objets

corbeille, disques programmes fichiers, dossiers enregistrer tracer une droite

des actions

problmes
comprhension de la reprsentation prennit

solutions
tester les reprsentations bulles daide, icnes + texte faire voluer les reprsentations

30
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o

Utilisation des icnes

pour des commandes frquentes avec un libell limiter leur nombre (12 au mieux, 20 max) ressemblance (bouton stop, corbeille) descriptif (texte justifi) exemple (souligner) caricatural (impression) analogie (couper = ciseaux, sauver = disquette) symbolique (image abstraite : organiser) arbitraire (actualisation des navigateurs)

o Difficult dinterprtation

Construction des icnes diffrents niveaux dabstraction

31
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o

Menus

droulants

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

contextuels (pop-up)

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

32

Raccourcis : Alt + caractre soulign

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o

Rgles pour les menus

entre 2 et 7 items libell en un seul mot possibilit de sous-menus (1 seul niveau) 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

Rgles pour les items de menu

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

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

WIMPS - Windows, Icons, Menus, Pointers

o o

Dispositifs de pointage (souris, trackball, joysticks) Curseurs

curseur diffrent action diffrente positionnement positionnement dans un texte attente lien hypertexte dplacement redimensionnement

34
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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) 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

Case cocher

36
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Listes
o

Liste
contenu affich en permanence (mais barre de dfilement) slection simple slection multiple (cf. 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" pour visualiser et naviguer dans une arborescence
37

Liste de choix hirarchique

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Zones de regroupement
o

Botes de regroupement

pour regrouper des cases cocher, des boutons radio, des lments divers

Barre de sparation Classeur onglets

pour regrouper dans une mme fentre des affichages rpartis sur plusieurs pages

38
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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

texte multi-lignes pour remplacer la saisie pour slectionner une valeur peu prcise pour reprsenter graphiquement un taux davancement

o o o

Molette dincrment

Curseur

Indicateur de progression

% du temps, pas du nombre dactions !

39

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Retour dinformation (feedback)

o o o o

Menu

ligne slectionne curseur changement de curseur poignes inversion vido changement de couleur, de police, clignotement, animation, son avec parcimonie, permettre darrter
40

Saisie de texte

Attente

Slection dun objet

o
o

Slection de texte

Autres possibilits

SJD - LIRIS - UCBL : IHM - L3 info

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
SJD - LIRIS - UCBL : IHM - L3 info

41

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Les tches de linteraction graphique

o

Quels composants graphiques pour quelle tche ?

saisie slection dclenchement dfilement spcification darguments et de proprits transformation

42
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Tche de saisie
o

Saisie de texte

bote de saisie + clavier

Saisie de quantits

curseur ou molette + souris

Saisie de positions

pointage

Saisie de tracs

souris

43
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Tche de slection
o

Choix dun lment dans un ensemble

boutons radio liste droulante cardinal fixe

case cocher liste slection multiple

Choix de plusieurs lments dans un ensemble

cardinal variable
liste droulante modifiable liste slection multiple + saisie dlments supplmentaires

Slection multiple

par groupe (ctrl) ou par intervalle (shift) par ajout/retrait

44

SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Tche de spcification darguments et de proprits

o

Botes de dialogue

Botes de proprits

aperu des modifications sur les objets concerns

47
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Tche de transformation
o

Poignes de manipulation

laisser la possibilit de redimensionner

fentres dessins images

redimensionnement

suivant un axe

horizontal vertical proportionnellement ou non

suivant les deux axes la fois

48
SJD - LIRIS - UCBL : IHM - L3 info

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
SJD - LIRIS - UCBL : IHM - L3 info

49

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Aide
o

Types daide

contextuelle : que puis-je faire ? factuelle : quest-ce que cest ? procdurale : comment faire ? documentation

Moyens

aide en ligne
bulles daide

50
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Gestion des erreurs : prvention

o

Empcher les erreurs

annoncer les commandes irrversibles

inactiver les commandes indisponibles contrler les saisies

51
SJD - LIRIS - UCBL : IHM - L3 info

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

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
SJD - LIRIS - UCBL : IHM - L3 info

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
SJD - LIRIS - UCBL : IHM - L3 info

53