Chapitre I

Introduction lIHM
& historique
propos par :

Anouar Bouazza
2016 - 2017

Plan du cours
Introduction lIHM
o

PLAN

Historique

IHM : introduction

conception
lments des IHM progr. vnementielle web handicap valuation

Vous avez dit IHM ?

o

IHM

Interface Homme Machine

Interactions Homme Machine

Mais aussi

Communication Homme Machine

Dialogue Homme Machine
Interaction Personne Machine

IHM : introduction

conception
lments des IHM progr. vnementielle web handicap valuation

IHM - dfinitions
o

Interface homme - machine

ensemble des dispositifs matriels et logiciels permettant un

utilisateur dinteragir avec un systme interactif

homme

machine

Interaction homme - machine

ensemble des aspects de la conception, de limplmentation et de

lvaluation des systmes informatiques interactifs
4

IHM : introduction

conception
lments des IHM progr. vnementielle web handicap valuation

Prise en compte de lutilisateur

o

Approche technocentre

centre sur la machine et ses possibilits

lutilisateur doit sadapter la machine

Approche anthropocentre

centre sur lhomme et ses besoins

la machine doit sadapter lutilisateur
5

IHM : introduction

conception
lments des IHM progr. vnementielle web handicap valuation

Adapter lIHM (1)

o

Caractristiques de lutilisateur

diffrences physiques
ge
handicap

connaissances et expriences
dans le domaine de la tche (novice, expert, professionnel)
en informatique, sur le systme (usage occasionnel, quotidien)

caractristiques psychologiques

visuel/auditif, logique/intuitif, analytique/synthtique

caractristiques socio-culturelles
sens d'criture
format des dates
signification des icnes, des couleurs

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

Adapter lIHM (2)

o

Contexte

Caractristiques de la tche

grand public (proposer une prise en main immdiate)

loisirs (rendre le produit attrayant)
industrie (augmenter la productivit)
systmes critiques (assurer un risque zro)
rptitive, rgulire, occasionnelle, sensible aux modifications de
l'environnement, contrainte par le temps, risque...

Contraintes techniques

plate-forme
taille mmoire
cran, capteurs, effecteurs
rutilisation de code ancien
7

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

IHM, domaine pluridisciplinaire

o

Informatique

o
o
o
o
o
o

programmation
IA
synthse et reconnaissance de la parole, langue naturelle
image
systme...

Psychologie cognitive
Ergonomie cognitive, ergonomie des logiciels
Sciences de lducation, didactique
Anthropologie, sociologie, philosophie, linguistique

Communication, graphisme, audiovisuel, design

8

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

IHM et programmation
o
o
o

La plupart des applications informatiques sont interactives

LIHM est souvent un lment cl du logiciel
La conception de l'interaction reprsente plus de 50% du
cot de dveloppement
LIHM peut reprsenter 80% du code dune application

elle peut tre modifie/reconstruite de multiples fois

importance de lindpendance interface / cur du systme

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

Mise en uvre de logiciels interactifs

o

Cest

Ce n'est pas

o
o

difficile, long, coteux

ncessite une approche prcoce, mthodique, itrative, exprimentale

une opration esthtique de l'cran

une affaire de got, de bon sens, dintuition

Il faut prendre en compte lIHM ds le dbut

Mthode ?

pas toujours de solution prte l'emploi

des points de repres thoriques, exprimentaux, des '' savoir-faire' ,
des questionnements
trouver des compromis
10

Plan du cours
Introduction lIHM
Historique

PLAN

11

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

Historique
1945-1970 : les prmisses
o

Dispositifs dentre-sortie limits

perforateurs/lecteurs de cartes
tableaux de bord (voyants)
imprimantes

Langages de commandes

12

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

Historique
1970s : les ordinateurs modernes
o

Nouveaux dispositifs dentre-sortie

1963 : cran graphique et stylo optique

1968 : premire souris
1980 : applications grand public

Xerox 8010 Star

1981

Apple Lisa
1982

Macintosh
1984

Windows 3.0
1990

13

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

volution des interfaces (1)

o
o

Systmes plus conviviaux, faciles comprendre et utiliser

Interfaces graphiques

manipulation directe

action directe pour les objets reprsents lcran

WYSIWYG
What You See Is What You Get
ACAI : Affichage Conforme A l'Impression

14

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

volution des interfaces (2)

o

Dispositifs de sortie

crans

visualisation dinformations

vision 3D
imprimantes 3D
son
synthse vocale
son spatialis

si lannonce semble devant, elle concerne lavenir

si elle est derrire, elle concerne le pass

retour tactile, retour de force

15

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

Sortie : visualisation dinformations

o
o
o

2D
2,5D
3D

focus + contexte

reprsentation temporelle

16

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

volution des interfaces (3)

o

Dispositifs dentre

clavier (azerty, Dvorak)

souris, joystick, pav tactile
reconnaissance de parole
cran tactile
entre visuelle

2D : cran tactiles, crayons optiques

reconnaissance de trac
reconnaissance dcriture

3D : capteurs de position et de direction

17

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

volution des interfaces (4)

o

Multimdia

combinaison de types de donnes /

de supports de donnes

texte, graphique, animation, son, vido

Multimodalit

combinaison des moyens dentre

interaction deux mains

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

volution des interfaces (5)

o

Ralit virtuelle

Ralit augmente, ralit mixte

simulation dun environnement dans lequel

le sujet a l'impression d'voluer (avatar)
immersion dans un monde 3D
superposition de l'image d'un modle virtuel
sur une image de la ralit en temps rel
le virtuel est intgr dans le rel

Ralit diminue

suppression dun lment de

limage sur une image de la ralit en temps rel

19

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

volution des interfaces (6)

o

Interfaces tangibles

association dobjets rels et numriques pour une interaction plus

simple et intuitive

Ralit cliquable

manipulation virtuelle du monde rel

dsignation dune zone du monde rel

par un geste

20

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

volution des interfaces (7)

o

Informatique mobile, nomade, vestimentaire,

diffuse, systmes pervasifs

informatique prsente dans les objets du quotidien

problme de compatibilit entre les diffrents dispositifs

contraintes techniques

taille de lcran, mmoire, espace de stockage

21