Conception et Architecture d

1
Conception et Architecture d IHM
IntroductionAnne-Marie Déry pinna_at_essi.frMer
ci tout particulièrement à Laurence Nigay, Gaelle
Calvary de lIMAG et au GT Mobilité et Ubiquité

2
Quelques définitions
CHM Communication Homme Machine Etude de la
conception des systèmes informatiques contrôle
aérien, centrale nucléaire sécurité bureautiqu
e productivité jeux engagement Des
utilisateurs IHM Interface Homme Machine
(1970) contact utilisateur système langage
d'entrée de sortie gestion de
l'interaction Interaction Homme Machine
(1980) Discipline englobant la conception,
l'évaluation et le développement de systèmes
interactifs
3
Problématique actuelle
Prendre en compte les avancées technologiques nou
veaux supports matériels arrivée du net (masse
de données réseaux) nouveaux moyens
d'interactions multimédia son, images de
plus en plus d'utilisateurs des novices aux
experts Succès des interfaces ? facilité
d'utilisation même si le service offert est
complexe voiture vs électroménager téléphone
nouvelle gamme
4
Utilisabilité des interfaces
Facile à apprendre et à utiliser Retour
d'information rassurant, informatif et
immédiat La conception doit répondre aux
besoins, connaissances et Caractéristiques des
utilisateurs Objectif avoué fiabilité,
efficacité, productivité 3 aspects étudiés à
travers le module conception, évaluation,
prototypage
5
Objectifs du module
ETAPE 1 (décembre)

• Etude de marché et/ou réalisation de logiciels à
  la demande (constructeurs dapplications)
• Fournir un prototype adapté aux besoins clients
• Evaluer le coût de réalisation du produit final
• Mettre laccent sur lIHM pour le dialogue
• ETAPE 2 (février)
• Architecture logicielle pour la mise en œuvre
  réelle de lapplication

6
Cycle de vie des IHMs
7
Plan à suivre (étape 1)

• Définir le modèle conceptuel de lutilisateur
• Dégager le modèle de conception
• Charte graphique et contraintes ergonomiques
• Réaliser un prototype
• Evaluer le prototype

8
Plan à suivre (étape 2)

• Prendre en compte les retours de lévaluation
• Préparer larchitecture logicielle choix
  dimplémentation
• Réaliser un prototype plus finalisé

9
Motivations et exemples dapplications visées

10
IHM sur supports mobiles

• Complexification de la conception ergonomique et
  logicielle

11
IHM sur supports mobiles

• Complexification de la conception ergonomique et
  logicielle

12
IHM sur supports mobiles

• Complexification de la conception ergonomique et
  logicielle

13
Les enjeux de la mutation

• Ingénierie au cas par cas insuffisante
• Coûts de développement et de maintenance
• Cohérence ergonomique entre versions
• De nouveaux problèmes à résoudre
• prendre en compte le contexte dans l'interaction
• Perception/modélisation/adaptation
• Des solutions à des problèmes anciens à revoir
• les techniques d'interaction windows, icons,
  menus, pointing
• Des problèmes classiques prennent une importance
  particulière
• concevoir pour plusieurs plates-formes
• assurer la sécurité et la confidentialité

14
Dimensions de l espace problème
A
n
a
l
y
s
e

d
e
s

b
e
s
o
i
n
s
Evaluation ergonomique
T
e
s
t
s

U
t
i
l
i
s
a
t
e
u
r
s
C
o
n
c
e
p
t
i
o
n
T
e
s
t
s

d

i
n
t
é
g
r
a
t
i
o
n
C
o
n
c
e
p
t
i
o
n

l
o
g
i
c
i
e
l
l
e
T
e
s
t
s

U
n
i
t
a
i
r
e
s
C
o
d
a
g
e
15
Dimensions de l espace problème
Conception ergonomique
Conception logicielle
16
Dimensions de l espace problème

• Selon trois axes

Techniques dinteraction
Collaboration
Contexte
17
Dimensions de l espace problème

• Selon trois axes

Techniques dinteraction
Collaboration
Contexte
18
Système interactif sensible au contexte

• Système interactif sensible au contexte
• capable didentifier les circonstances qui
  entourent laction utilisateur
• en vue doffrir des services contextualisés
• offre sélective dinformation
• décoration contextuelle pour recherche ultérieure
  
• Contexte ensemble de propriétés de phénomènes
  physiques qui peuvent être captées

19
Système interactif sensible au contexte
20
Système interactif sensible au contexte

• Exemple Plate-forme MAGIC

21
Applicatifs envisagés

• Localisation de lutilisateur
• Identification et localisation de dispositifs
  dinteraction

22
Applications de proximité

Applications de proximité centraux légers
CEP Vendeurs Clients potentiels
Centre hospitalier Serveurs BD, PC des secrétariats Médecins PDAs, PC portables Patients carte vitale
Hospitalisation à domicile  HAN fixe  du patient Médecins PDAs, PC portables
23
Dimensions de l espace problème

• Selon trois axes

Techniques dinteraction
Collaboration
Contexte
24
Mobilité nouveau découpage spatio-temporel

• Déplacement dans lespace
• Variation dans le temps synchronisme/
  asynchronisme

asynchrone
synchrone
distant
local
25
Mobilité nouveau découpage spatial

• Etude selon les lieux dinteraction et non la
  distance

26
Plate-forme Magic
Casque Ecouteurs
Capteur dorientation
Camera Micro
27
MAGIC Travail sur le terrain de fouille

• Explorer le site (Mobilité)
• Travailler en groupe sur le site (Collecticiel)
• Sinformer auprès dexperts distants (Collecticiel
  )
• Comparer des objets physiques avec des objets
  dune base de données (Augmentation)
• Accéder aux objets enlevés du site (Augmentation)

28
MAGIC vue densemble

• Sur la tablette
• Communication (forum, mail, etc.)
• Coordination (carte)
• Production (outils dédition)
• A travers le casque
• Combinaison du physique avec linformatique grâce
  à la passerelle

29
Terrain augmenté

• Un archéologue travaille
• Il trouve un objet
• La découverte est retirée du site
• Lobjet est sauvegardé dans une base de données
• Un archéologue approche de où était lobjet
• La découverte est virtuellement disponible

30
TROC Interface de la tablette tactile
Menu
Formules
Liste
Gestion des cubes
Gestion du piège
Historique
Carte
31
Interface dans le casque
Temps de jeu
Autre objet visible
Objet ciblé
Niveau dénergie magique
Description de lobjet ciblé
Formules actives
Messages
Œil magique
32
Dimensions de l espace problème

• Selon trois axes

Techniques dinteraction
Collaboration
Contexte
33
Mobilité Interface  Baby face 

• De très nombreuses techniques d interaction
• Technique d interaction plusieurs perspectives
• psychologie cognitive système sensoriel
• informatique technique dinteraction
• Technique dinteraction plusieurs niveaux
  dabstraction
• dispositif physique
• clavier, souris, écran, haut-parleur, ...
• Système représentationnel
• langue pseudo-naturelle, manipulation directe,
  ...

34
Interface  Baby face 

• Technique d interaction en sortie
• Son spatialisé T lthaut-parleur, LNgt

RDV à 15h
SoundbeamNeckset
35
Interface  Baby face  multimodalité

• Plusieurs techniques ou modalités d interaction
• Apports de la multimodalité
• Flexibilité/adaptabilité (contexte d usage)
• Robustesse (complémentarité, redondance)
• Expressivité (complémentarité)
• Problèmes posés
• Validation empirique de ces apports
• Etude de lusage des modalités (choix,
  appropriation, etc.)

36
Interface  Baby face  multimodalité

• Technique ltd, sgt

T ltcaméra-doigt, gestesgt
T ltmicro, pseudo LNgt
T ltordinateur, gestesgt
T ltstylet, manipulation directegt
37
Interface  Baby face  multimodalité

• Magicien d oz

Compère
Sujet observé
38
Interface  Baby face  multimodalité

• Usage des modalités par les sujets
• Toutes commandes / Toutes sessions

Vocale
Tactile
Gestuelle
Embodied
39
Interface  Baby face  multimodalité

• Usage des techniques d interaction par les
  sujets
• Variabilité inter-individuelle importante dans
  l usage (fréquence, préférences variées)
• Spécialisation
• Peu de redondance et de complémentarité

40
Dimensions de l espace problème

• Interaction homme-machine

Techniques dinteraction
Collaboration
Contexte
41
Les enjeux de la mutation

• Ingénierie au cas par cas insuffisante
• Coûts de développement et de maintenance
• Cohérence ergonomique entre versions
• Des problèmes classiques prennent une importance
  particulière
• concevoir pour plusieurs plates-formes
• assurer la sécurité et la confidentialité

42
Plasticité des interfaces

• Un peu dhistoire
• Introduction du terme à Interact99
• Capacité dune interface à sadapter à son
  contexte dusage dans le respect de son
  utilisabilité
• Contexte dusage
• Plate-forme
• Environnement
• Utilisateur (2001)

43
Traducteurs
XML et XSL pour la présentation, UIML, SUNML,
Xforms .
XSL
HTML
XML
VoiceML
WML
44
Langage de description dinterfaces
45
UIML

• User Interface Markup Language
• Langage multi-interface (graphique, voix, ...)
• Une norme UIML (uiml.org)
• Des implémentations ou renderers
• Harmonia Awt/Swing, HTML, WML, VXML, ...
• Rubico Visual Basic, GUI builder
• TV Server, AG C for embedded systems

Jeremy Fierstone / Equipe Rainbow / 45
46
Document UIML

• Les 4 parties d'un document UIML
• ltHeadgt metadata (author, date, version, ...)
• ltTemplategt réutilisation de fragments
• ltInterfacegt interface proprement dite
• ltStructuregt arbre des widgets
• ltStylegt styles (propriétés) des widgets
• ltContentgt contenu (texte, image, son)
• ltBehaviorgt objet / événement / action
• ltPeersgt mappings et liens vers l'extérieur

Jeremy Fierstone / Equipe Rainbow / 46
47
De lIHM abstraite vers lIHM concrète
IHM abstraite (Exécution)
Fichier SUNML (Spécification)
ltsunmlgt ltinterface id"FicheClient"gt
ltstructuregt ltdialog id"MainDialog"
sequence"true"gt ... ltfield
id"LabelFieldNom" mode"read"gt
ltelement type"String"gtNom lt/elementgt
lt/fieldgt ltfield id"FieldNom"
mode"read-write"gt ltelement
type"String"gtTotolt/elementgt lt/fieldgt
... lt/dialoggt lt/structuregt
lt/interfacegt lt/sunmlgt
HMI
FicheClient
Réification
MainDialog
Dialog
...
LabelFieldNom
FieldNom
Field
Field
Projection
IHM concrète (Exécution)
JFrame1
JFrame
JPanel1
JPanel
...
JField1
JLabel1
JTextField
JLabel
Légende
Instance
48
Exemple de Liste de Clients
Composition Représentant Client (1-n) Liste
de clients
Fichier SUNML (spécification)
ltsunmlgt ltinterface id"ListeClients"gt
ltstructuregt ltdialog id"MainDialog"
sequence"true"gt ltlist id"ListeClients"
reference"FicheClient"
select"FieldFieldNom"/gt lt/listgt
lt/structuregt lt/interfacegt lt/sunmlgt
Exemple en Swing
49
Les enjeux de la mutation

• Traductions automatiques insufisantes
• Ergonomie des versions
• Multiplicité des traducteurs

50
Espace problème

• Domaine de plasticité

51
Cadre de référence principes

• Spécifier 1 fois -gt N Interfaces ? approche par
  modèles
• Trois groupes de modèles
• Domaine
• Contexte
• Adaptation
• Trois instanciations
• Ontologiques Métadescriptifs, théorie
• Archetypes spécifiques au contexte ciblé, phase
  conception
• Observés exécutables, phase exécution

52
Cadre de référence phase conception
Modèles archétypes
Config 1
Modèle Tâches et Concepts
Modèle Tâches et Concepts
Config 2

Concepts
Concepts
Tâches
Tâches
IHM abstraite

IHM abstraite
User
User
Plate-forme
Plate-forme
IHM concrète
IHM concrète
Environment
Environment
Evolution
Evolution
IHM finale
IHM finale
Transition
Transition
Réification, Factorisation, Traduction,
Abstraction / Reconception, Crossing,
Intervention Humaine
53
Cadre de référence phase conception
Config 1
Tâches Concepts
54
Consensus et RIML (SAP)

• Même principe que ArtStudio un moteur
  d'adaptation basé sur une catégorisation des
  devices (analyse d'utilisabilité donne un nombre
  de classes de devices limité qui représente des
  devices se comportant de façon similaire pour les
  utilisateurs)
• Avantages pour les programmeurs d'application
• Abstraction des devices
• Inutile d'apprendre de nouveaux langages, de
  connaître de nouveaux devices
• Facilité d'intégration
• Meilleure usabilité que les traducteurs
• libre choix de devices
• Rapidité de développement sur de nouveaux
  devices
• Ajout d'un render

55
Adaptation
Adaptation syntaxique En fonction du
device Règles d'encodage

Adaptation sémantique Filtrage des données

Editeur RIML
56
Les enjeux de la mutation

• De nouveaux problèmes à résoudre
• prendre en compte le contexte dans l'interaction

57
Plasticité des interfaces une nécessité

• Problème ?
• Exemple
• SI la batterie du PC faiblit ALORS passer sur PDA
• SI condition ALORS action

Action ? Réaction
58
Espace problème
59
Cadre de référence phase exécution
Identification
Identification du
Reconnaissance de situation
Des solutions
Calcul dune réaction
changement de
contexte
candidates
Détection de
changement de
contexte
Capture du
Exécution du
prologue
contexte
Execution de la
Execution de
Exécution de la réaction
reaction
Lépilogue
60
Ingénierie Capture de contexte

• Donnée captée et méta-donnée
• Précision
• Fréquence
• Stabilité
• Zone de couverture
• Complétude
• Ambiguïté
• Complémentarité
• Redondance
• Architecture logicielle

61
Contexte Absence de consensus mais des leçons

• Leçon 1 Le contexte peut seulement être défini
  pour une finalité
• Leçon 2 Le contexte est un espace d'informations
  qui sert l'interprétation
• Leçon 3 Le contexte est un espace d'informations
  partagé
• Leçon 4 Le contexte est un espace dinformations
  infini et évolutif

62
Ontologie

• Contexte (U,T) ensemble de rôles et de
  relations entre entités pour la réalisation de T
  par U
• Changement de Contexte lensemble des rôles
  change,et/ou lensemble des relations change
• Tâches et activités ont lieu dans un réseau de
  contextes
• Contexte (U,T) un réseau de situations qui
  partagent le même ensemble de rôles et de
  relations

• Les tâches mettent en jeu des entités (ex. une
  table, un crayon, une couleur)
• Entité un regroupement dobservables
• Entités peuvent jouer un rôle une fonction
  relative à une tâche, qui est satisfaite par une
  entité, (par exemple, une table satisfait la
  fonction  surface de dépôt )
• Entités peuvent entretenir des relations

• Domaine (monde) un réseau détats reliés par
  des actions
• État un prédicat sur des observables
• But état souhaité
• Tâche ltétat courant, butgt, c.-à-d. absence de
  plan
• Activité lttâche courante, tâches de fondgt

63
Les enjeux de la mutation

• Des solutions à des problèmes anciens à revoir
• les techniques d'interaction windows, icons,
  menus, pointing

64
Ordinateur, ubiquité et mobilité
Mobilité (utilisateur équipé)
Ubiquité (environnement équipé)
65
Ordinateur Vestimentaire

• L ordinateur vestimentaire apparaît donc comme
  lordinateur de lutilisateur mobile
• Encore souvent son téléphone, son ordinateur de
  bureau...
• Or la mobilité appelle dautres applications pour
  l ordinateur ordinateur de plongée, ...
• Il s agit souvent de systèmes Ad-Hoc, non
  ouverts, non flexibles

66
Mini Projets d'IHM
Par groupe de 4 au plus Sujets accessibles à
l'adresse http//www.essi.fr/pinna/MODULEIHM/
Choix par mail avant mercredi prochain A priori
1 groupe pour un sujet
67
Merci à

• Laurence Nigay (IMAG)
• Exposé de synthèse aux Asisses I3
• Marie THILLIEZ (Université de Valenciennes)
• LES APPLICATIONS DE PROXIMITE
• Gaëtan Rey, Joëlle Coutaz (IMAG)
• LE CONTEXTEUR UN MODELE COMPUTATIONEL POUR LE
  CONTEXTE
• Joelle Coutaz et Gaelle Calvary (IMAG)
• Plasticité des interfaces
• Philippe Renevier, Laurence Nigay, Pascal
  Salembier,
• Jullien Bouchet, Laurence Pasqualetti(IMAG)
• SYSTEMES MIXTES MOBILES ET COLLABORATIFS
• TROC UN JEU COLLABORATIF SUR SUPPORT
  MOBILEEXPLOITANT DES TECHNIQUES DE REALITE
  AUGMENTEE
• Jean-Yves Tigli (I3S)
• WCOMP UNE PLATE-FORME EXPERIMENTALE OUVERTE
  D'ORDINATEUR VESTIMENTAIRE
• Anne-Marie Dery-Pinna et Jérémy Fierstone (I3S)
  
• COMPOSANTS ADAPTABLES ET MOBILES
• Et tout le groupe http//iihm.imag.fr/nigay/GTM
  OB/Dec2002/