Par Anne Roudaut Responsable : Joëlle Coutaz Méta-IHM pour la configuration despace interactif ambiant Université Joseph Fourier U.F.R informatique & Mathématiques

Par Anne Roudaut

Responsable : Joëlle Coutaz

Méta-IHMpour la configuration d’espace

interactif ambiant

Université Joseph FourierU.F.R informatique &

Mathématiques Appliquées

Institut National Polytechnique de Grenoble

ENSIMAG

CLIPS-IMAGCommunication langagière et Interaction Personne-Système

IIHMIngénierie de l’Interaction

Homme-Machine

• Un vaste réseau de ressources informatiques interconnectées

Contexte du travail : IHM en informatique ambiante

2

• En surface, de nouvelles possibilités d’interaction pour l’utilisateur


2



Pick & Drop [Rekimoto 98]

2



Cube TV [Block 04]

2

• Nouveaux services, techniques, ressources


3

• Nouveaux services, techniques, ressources• Frontières souples


3

• Comment contrôler, configurer, évaluer l’état de l’espace ambiant?


4

Problème

• Des solutions isolées et ad hoc

Jigsaw [Rodden 04]

5

Problème

• Des solutions isolées et ad hoc

Paris New-York

Transtick [Rekimoto 05]

5

Jigsaw [Rodden 04]

Problème

• Des solutions isolées et ad hoc• Pas de réflexion générale sur le problème

5

Jigsaw [Rodden 04] Transtick [Rekimoto 05]

Paris New-York

Ma réponse : le concept de méta-IHM

Méta-IHMMéta-IHM6

Objectifs

• Définir la notion de méta-IHM

• Identifier les implications architecturales pour l’intégration technique de méta-IHM

• Illustrer les travaux de recherche au moyen d’un démonstrateur

7

Plan

Contexte

Problème

Objectifs

Contributions Conceptuelles

Techniques

Conclusion

Perspectives

8

Plan

Contexte

Problème

Objectifs


Techniques

Conclusion

Perspectives

Définition de méta-IHM

Analyse de l’état de l’art

8


• Méta-IHM :

– Une méta-IHM recouvre l’ensemble des fonctions (et leur IHM) nécessaire et suffisant pour permettre à l’utilisateur de configurer, contrôler et évaluer l’état de l’espace ambiant.

– Méta : elle est au-dessus des services métiers de l’espace

– IHM : elle permet de configurer, de contrôler et d’évaluer l’état de cet espace

9

Définition de méta-IHM : Approche adoptée

• Puissance d’une taxonomie :

– Comprendre et cerner le sujet

– Comparer les solutions existantes

– Explorer de nouvelles pistes

10

Définition de méta-IHM : Espace taxonomique

Objets manipulés par une méta-IHM

Nature des objets Numérique-

dépendant Numérique-indépendant

Numérique

Directe

Représentation numérique

Type de manipulation des objets

Représentation physique

11





Numérique

Directe




11





Numérique

Directe




Ils perdent leur raison d’être

11





Numérique

Directe




Ils conservent leur raison d’être

11





Numérique

Directe





11





Numérique

Directe




Jigsaw [Rodden 04]

11





Numérique

Directe




Dynawall [Streitz 99]

11





Numérique

Directe




Services offerts

Assembler

Découvrir Vocabulaire

Extensibilité du langage d’interaction

Puissance d’une méta-IHM

Redistribuer

Paraméter

Syntaxe

Remodeler Sémantique

12





Numérique

Directe




Services offerts

Assembler




Redistribuer

Paraméter

Syntaxe


Speakeasy [Newman 02 ]

12





Numérique

Directe




Services offerts

Assembler




Redistribuer

Paraméter

Syntaxe


Les tablettes d’Hinckley [Hinckley 00b]

12





Numérique

Directe




Services offerts

Assembler




Redistribuer

Paraméter

Syntaxe


Pick & Drop [Rekimoto 98]

12





Numérique

Directe




Services offerts

Assembler




Redistribuer

Paraméter

Syntaxe


Plastic Clock

12





Numérique

Directe




Services offerts

Assembler




Redistribuer

Paraméter

Syntaxe


E-gadget [Marcopoulos 04]

12





Numérique

Directe




Services offerts

Assembler




Redistribuer

Paraméter

Syntaxe


12





Numérique

Directe




Services offerts

Assembler



Niveau d’intégration

Meta-IHM externe

Meta-IHM tissée Niveau de

contrôle

Observabilité Traçabilité

Qualités d’une méta-IHM


Redistribuer

Paraméter

Syntaxe


Contrôlabilité

Observabilité : percevoir l’état du service

Traçabilité : observabilité au cours du temps

Contrôlabilité : intervenir sur l’exécution du service

13





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

Editeur Jigsaw [Rodden 04]

13





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

MigriXML [Molina 06]13





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

Projecteur mobile [Borkowski 06]

MigriXML [Molina 06]13





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

Speakeasy [Newman 02 ]

13





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

Editeur Jigsaw [Rodden 04]

13





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

13

Plan

Contexte

Problème

Objectifs


Techniques

Conclusion

Perspectives


Analyse de l’état de l’art

14

Analyse de l’état de l’art : Tendances

• Méta-IHM tangibles

15



• Méta-IHM tangibles• Méta-IHM pour la redistribution

15MigriXML [Molina 06]


• Méta-IHM tangibles• Méta-IHM pour la redistribution• Méta-IHM de programmation

15

Jigsaw [Rodden 04]


• Méta-IHM tangibles• Méta-IHM pour la redistribution• Méta-IHM de programmation end-user programming

16

Jigsaw [Rodden 04]



16

Coût d’apprentissage (Difficulté d’utilisation)

Puissance d’expression (Sophistication de ce qui peut être créé, high ceiling)

langage C

Visual Basic

HyperCard

Interfaces graphiques

HyperTalk

Basic

xCmds

C

Low threshold



16

Coût d’apprentissage (Difficulté d’utilisation)

Puissance d’expression (Sophistication de ce qui peut être créé, high ceiling)

langage C

Visual Basic

HyperCard

Interfaces graphiques

HyperTalk

Basic

xCmds

C

Objectif visé (EUD idéal)

Low threshold

!



Programmation visuelle

end-user programming

16

Jigsaw [Rodden 04]




Programmation textuelle


on mouseUp put "100,100" into pos repeat with x = 1 to the number of card buttons set the location of card button x to pos add 15 to item 1 of pos end repeatend mouseUp

HyperCard

16

Jigsaw [Rodden 04]




Programmation textuelle

Programmation par l’exemple


on mouseUp put "100,100" into pos repeat with x = 1 to the number of card buttons set the location of card button x to pos add 15 to item 1 of pos end repeatend mouseUp

Emacs

16

Jigsaw [Rodden 04] HyperCard




16

Environnements auteurs

Dreamweaver

Analyse de l’état de l’art : Les failles




Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

- Langage d’interaction : un réel défi

17





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité


- Absence d’intégralité des services

17





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité



- Niveaux de contrôle peu respectés

17





Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité




- Absence de méta-IHM mixte

17

Plan

Contexte

Problème

Objectifs


Techniques

Conclusion

Perspectives

Conception de CESAM

Amélioration de CESAM

18

Conception de CESAM : Les bases




Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

19





Conception de CESAM

Partie externe

Objets systèmes(Ressources d’interaction, calcul et communication)

DécouvrirAssemblerParamétrer

20

Conception de CESAM

Partie externe



Partie tissée

Objets des services métiers

Remodeler

Fusion des 2 parties

Redistribution

20

Conception de CESAM

Partie externe



Partie tissée


Remodeler


Redistribution

20

Conception de CESAM : la partie externe

• Construire des îlots d’interaction

Découverte des objets sous forme de jetons

Zone de paramétrage

21

Zone d’assemblage des jetons



Déplacement des jetons par glisser-déposer

Les jetons compatibles s’allument

21



Formation d’un îlot d’objets jeton non

compatible avec l’îlot formé

21

Conception de CESAM

Partie externe



Partie tissée


Remodeler


Redistribution

22

Conception de CESAM : la partie tissée

• Remodelage de l’application métier FunnyPic

23


• Remodelage de l’application métier FunnyPic

23


• Eclater

Second clic

Premier clic

24


• Eclater• Fusionner

Second clic

Premier clic

24


• Eclater• Fusionner• Dupliquer

clic

24


• Eclater• Fusionner• Dupliquer• Rétablir

Second clic

clic

24

Conception de CESAM

Partie externe



Partie tissée


Remodeler


Redistribution

25

Conception de CESAM : une méta-IHM mixte

• Redistribution par manipulation directe des objets numériques

Le jeton avale l’objet numérique pour le redistribuer

26

Plan

Contexte

Problème

Objectifs


Techniques

Conclusion

Perspectives

Conception de CESAM

Amélioration de CESAM

18

Amélioration de CESAM : Les bases




Numérique

Directe




Services offerts

Assembler




Meta-IHM externe


contrôle




Redistribuer

Paraméter

Syntaxe


Contrôlabilité

19





Amélioration de CESAM : programmation par macros

• Construire des macros

Macros représentées par des punaises

21

L’utilisateur punaise la macro sur un îlot

Amélioration de CESAM : programmation par macros

• Construire des macros

Macros représentées par des punaises

21

L’utilisateur punaise la macro sur un îlot

Programmation ponctuelle et programmation évènementielle

Amélioration de CESAM : programmation ponctuelle

• Construire une macro par l’exemple

Découverte Les macros sont stoquées dans la liste des objets manipulables

Bouton de début et de fin d’enregistrement de macros

21

Amélioration de CESAM : programmation ponctuelle

• Construire une macro par l’exemple

Découverte Les macros sont stoquées dans la liste des objets manipulables

Bouton de début et de fin d’enregistrement de macros

21

Accès à la zone de programmation évènementielle

Amélioration de CESAM : programmation évènementielle

• Construire une macro en visuel ou textuel

21Principe d’égale opportunité



21



21

("Le 28/09/2006" et 13h30")

ilot1 = PDA et OrdinateurPDA = ZoneNavigation de Powerpoint

Ordinateur = ZoneRestante de Powerpoint

Plan

Contexte

Problème

Objectifs

Contributions

Conclusion

Perspectives

33

Conclusion

• Contributions conceptuelles [Roudaut 06]– Espace taxonomique pour la définition d’une méta-IHM– Analyse de l’état de l’art – Analyse poussée d’une tendance : end-user programming

• Contributions techniques– Conception du prototype CESAM

• Méta-IHM mixte offrant tous les services

– Amélioration de CESAM• Environnement de programmation auteur

– Mise en place de CESAM dans l’infrastructure conceptuelle CAMELEON-RT

34

Conclusion

• Contributions conceptuelles [Roudaut 06]– Espace taxonomique pour la définition d’une méta-IHM– Analyse de l’état de l’art – Analyse poussée d’une tendance : end-user programming

• Contributions techniques– Conception du prototype CESAM

• Méta-IHM mixte offrant tous les services

– Amélioration de CESAM• Environnement de programmation auteur

– Mise en place de CESAM dans l’infrastructure conceptuelle CAMELEON-RT

34

Perspectives

• A court terme :– Valider les choix de CESAM par une évaluation

expérimentale– Etudier le critère de traçabilité

• A long terme :

35

Merci de votre attention

Plan

Contexte

Problème

Objectifs


Techniques

Conclusion

Perspectives

Conception de CESAM

Implications architecturales

27

Implications architecturales : CAMELEON-RT

28


28


28


28


• Un exemple de fonctionnement :

29



1. Découverte du contexte d’interaction

Utilisateur

Plate-forme

Environnement

30



2. Synthèse des données recueillies

Situation

30



3. Création d’un plan de configuration

Plan de configuration :

Remplacer

par

30



4. Mise en œuvre du plan

Rechercher :

30



5. Recherche de composants

Vide !

30



6. Mise en œuvre du plan

Générer :

30



7. Génération du composant

Dessiner sur la zone de

dessin

*

Choisir une couleur

Choisir un outils

Dessiner

// //

* * *

30



8. Exécution du plan

30

Implications architecturales : retour sur la méta-IHM

• Cas du système autonome

31


• Contrôle grâce à la méta-IHM

31


Observabilité : Pour chaque flèche du diagramme, la méta-IHM est avertie :

32


Traçabilité : Pour chaque parcours dans le diagramme, une flèche atteint la méta-IHM. S’il n’y a pas de rupture dans le chemin, la traçabilité est respectées..


32


Contrôlabilité : Pour chaque flèche du diagramme atteignant la méta-IHM, un contrôle est possible.

Traçabilité : Pour chaque parcours dans le diagramme, une flèche atteint la méta-IHM. S’il n’y a pas de rupture dans le chemin, la traçabilité est respectées..


32

Perspectives

• A court terme :– Etendre le langage d’interaction de CESAM avec de la

programmation par exemple, textuelle et visuelle– Compléter CESAM par tous les niveaux de contrôle– Valider les choix de CESAM par une évaluation

expérimentale • A long terme :

35

Perspectives

• Du consommateur d’application au designer d’espace ambiant

36

Perspectives


36

Perspectives


FunnyPic


dessin

Percevoir

// //

*

* *

- Joueurs - Scores - Sablier

En début de partie Designer un

joueur

Choisir le gagnant

Choisir aléatoirement

ou

Choisir une couleur

Choisir un outils

Dessiner

// //

* * *

36

Perspectives


FunnyPic


dessin

Percevoir

// //

*

* *



joueur

Choisir le gagnant


ou

Choisir une couleur

Choisir un outils

Dessiner

// //

* * *

36

Perspectives


FunnyPic


dessin

Percevoir

// //

*

* *



joueur

Choisir le gagnant


ou

Choisir une couleur

Choisir un outils

Dessiner

// //

* * *

?36

Documents

Par Anne Roudaut Responsable : Joëlle Coutaz Méta-IHM pour la configuration despace interactif ambiant Université Joseph Fourier U.F.R informatique & Mathématiques