Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques...

Introduction à l’IHM

Stéphanie Jean-Daubias

[email protected]

http://liris.cnrs.fr/stephanie.jean-daubias/

SJD

- L

IRIS

- U

CB

L : I

HM

- L

3 info

INFO

L3

mailto:[email protected]








PLAN

Plan du cours

SJD

- L

IRIS

- U

CB

L : I

HM

- L

3 info


o Historique

2

Vous avez dit IHM ?

o IHM

Interface Homme – Machine

Interactions Homme – Machine

o Mais aussi

Communication Homme – Machine

Dialogue Homme – Machine

Interaction Personne – Machine

3 SJD - LIRIS - UCBL : IHM - L3 info

IHM - définitions

o Interface homme - machine

ensemble des dispositifs matériels et logiciels permettant à un

utilisateur d’interagir avec un système interactif

o Interaction homme - machine

ensemble des aspects de la conception, de l’implémentation et de

l’évaluation des systèmes informatiques interactifs 4

SJD - LIRIS - UCBL : IHM - L3 info

homme machine

Prise en compte de l’utilisateur

o Approche technocentrée centrée sur la machine et ses possibilités

l’utilisateur doit s’adapter à la machine

o Approche anthropocentrée centrée sur l’homme et ses besoins

la machine doit s’adapter à l’utilisateur 5


Adapter l’IHM (1)

o Caractéristiques de l’utilisateur

différences physiques

âge

handicap

connaissances et expériences

dans le domaine de la tâche (novice, expert, professionnel)

en informatique, sur le système (usage occasionnel, quotidien)

caractéristiques psychologiques

visuel/auditif, logique/intuitif, analytique/synthétique…

caractéristiques socio-culturelles

sens d'écriture

format des dates

signification des icônes, des couleurs


Adapter l’IHM (2)

o Contexte

grand public (proposer une prise en main immédiate)

loisirs (rendre le produit attrayant)

industrie (augmenter la productivité)

systèmes critiques (assurer un risque zéro)

o Caractéristiques de la tâche

répétitive, régulière, occasionnelle, sensible aux modifications de

l'environnement, contrainte par le temps, risquée...

o Contraintes techniques

plate-forme

taille mémoire

écran, capteurs, effecteurs

réutilisation de code ancien


IHM, domaine pluridisciplinaire

o Informatique

programmation

IA

synthèse et reconnaissance de parole, langue naturelle

image

système...

o Psychologie cognitive

o Ergonomie cognitive, ergonomie des logiciels

o Sciences de l’éducation, didactique

o Anthropologie, sociologie, philosophie, linguistique

o …

o Communication, graphisme, audiovisuel, design 8


IHM et programmation

o La plupart des applications informatiques sont interactives

o L’IHM est souvent un élément clé du logiciel (en + ou -)

o La conception de l'interaction représente plus de 50% du

coût de développement

o L’IHM peut représenter 80% du code d’une application

elle peut être modifiée/reconstruite de multiples fois

importance de l’indépendance interface / cœur du système


Mise en œuvre de logiciels interactifs

o C’est

difficile, long, coûteux

nécessite une approche précoce, méthodique, itérative, expérimentale

o Ce n'est pas

une opération esthétique de l'écran

une affaire de goût, de bon sens, d’intuition

o Méthode ?

pas de solution clé en main

des points de repères théoriques, expérimentaux, des savoir-faire,

des questionnements

des compromis


PLAN

Plan du cours

SJD

- L

IRIS

- U

CB

L : I

HM

- L

3 info

11


Historique

Historique

1945-1970 : les prémisses

o Dispositifs d’entrée-sortie limités

perforateurs/lecteurs de cartes

tableaux de bord (voyants)

imprimantes

Langages de commandes


Historique

1970s : les ordinateurs « modernes »

o « Nouveaux » dispositifs d’entrée-sortie

1963 : écran graphique et stylo optique

1968 : première souris

1980 : applications grand public

manipulation directe

restent notre référence


Xerox 8010 Star

1981

Macintosh

1984

Apple Lisa

1982

Windows 3.0

1990

Évolution des interfaces

o Systèmes plus conviviaux, faciles à comprendre et à utiliser

o Interfaces graphiques

manipulation directe

action directe pour les objets représentés à l’écran

WYSIWYG

What You See Is What You Get

ACAI : Affichage Conforme A l'Impression


Dispositifs de sortie

SJD - LIRIS - UCBL : IHM - L3 info 15

o Écrans

o Imprimantes 3D

o Retour tactile, retour de force

o Son : synthèse vocale

o Son spatialisé, son 3D

annonce devant : avenir

annonce derrière : passé

http://www.youtube.com/watch?v=K3UksWCJqM4

http://www.dailymotion.com/video/xjymv6_imprimante-3d-cle-anglaise_webcam

http://www.shapeways.com/model/53650/hollow-cube.html?li=moreFromShop/?material=27

http://www.disneyresearch.com/project/aireal

Sortie : visualisation d’informations 2D


fisheye : focus + contexte

http://www.tenbyten.org/10x10.html

o Entre 2D et 3D

puissance de calcul + faible

Sortie : visualisation d’informations 2,5D


représentation temporelle

Sortie : visualisation d’informations 3D


o Clavier (azerty, Dvorak…)

o Souris, trackball, joystick, pavé tactile

Dispositifs d’entrée (1)


o Reconnaissance vocale, reconnaissance de son

o Capteurs de température, hygrométrie, composition de l’air…

o Capteurs d’odeurs, de mouvement, d’altitude…

Dispositifs d’entrée (2)


Dispositifs d’entrée visuelle 2D

SJD - LIRIS - UCBL : IHM - L3 info 21

o Codes barres 2D : texte,

web, mail, carte…

o Écran tactiles

o Crayons optiques

o Reconnaissance de tracé,

d’écriture manuscrite

http://www.youtube.com/watch?v=Dn7IhFswv90

o Capteurs de position, de direction, de vitesse

Dispositifs d’entrée visuelle 3D


http://www.disneyresearch.com/project/aireal

Mets-ça…

Multimodalité

o Combinaison de moyens d’entrée

interaction à deux mains

« mets-ça ici » : voix + geste


…ici

http://www.youtube.com/watch?v=hHvLz2ryWYM

Réalité virtuelle

o Simulation informatique d’un environnement dans lequel le

sujet a l'impression d'évoluer

immersion dans un monde 3D

utilisateur représenté par un avatar


Réalité augmentée, réalité mixte

o Superposition de l'image d'un modèle virtuel

sur une image de la réalité

le virtuel est intégré dans le réel

en temps réel

sur écran

sur le réel


D:/Enseignement/L3-IHM/cours/RA-foot.mpg

http://www.opticiens-atol.com/pages/collections/adriana/?moduleTI=view

http://www.ionroad.com/

http://www.youtube.com/watch?v=S80mE3kQTJ0

Réalité diminuée

o Suppression d’un élément sur une image « réelle »

en temps réel


Interfaces tangibles

o Association d’objets réels et numériques

action directement sur les objets

interaction plus simple et intuitive


http://vimeo.com/8308494

http://www.youtube.com/watch?v=ZfV4R4x2SK0&feature=player_embedded

Informatique vestimentaire, « wearable »

o Informatique embarquée

dans les vêtements

dans les accessoires

28

o Dispositifs mobiles

petits, puissants, connectés

o Problème de compatibilité entre les différents dispositifs plateforme

contraintes techniques

bande passante

mémoire

espace de stockage

taille de l’écran plasticité des interfaces

Informatique mobile, nomade


Objets intelligents, web des objets

o Informatique dans les objets du quotidien

distance entre informatique et non-informatique


Environnements pervasifs, ubiquitaires

o Informatique diffuse

les objets communicants (ordinateurs, smartphones, objets)

se reconnaissent

se localisent

interagissent entre eux

(transfert d’information, synchronisation des données)

sans action de l'utilisateur

à tout moment


Collecticiel

o Système interactif collaboratif

ensemble sur un même lieu

table, tableau

à distance

éditeurs partagés

intégrant des moyens de communication


Réalité augmentée collaborative

http://titanpad.com/

http://www.dailymotion.com/video/xc1bzp_studios-donuts-demo-table-multitouc_tech

Retour à la réalité…

o Écran, clavier, souris…


PLAN

Plan du cours

SJD

- L

IRIS

- U

CB

L : I

HM

- L

3 info

34


Historique

Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques...

Documents

Transcript of Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques...