UNIVERSITE NATIONALE DU VIETNAM, HANOI
INSTITUT FRANCOPHONE INTERNATIONAL

VŨ THÁI DƯƠNG

MÉTHODE DE CONCEPTION POUR IHM
ET INTERACTIONS DISTRIBUÉES
PHƯƠNG PHÁP THIẾT KẾ GIAO DIỆN NGƯỜI-MÁY
TRÊN CÁC THIẾT BỊ PHÂN TÁN

MEMOIRE DE FIN D’ETUDES DU MASTER INFORMATIQUE

HANOI - 2016


UNIVERSITE NATIONALE DU VIETNAM, HANOI
INSTITUT FRANCOPHONE INTERNATIONAL

VŨ THÁI DƯƠNG

MÉTHODE DE CONCEPTION POUR IHM
ET INTERACTIONS DISTRIBUÉES
PHƯƠNG PHÁP THIẾT KẾ GIAO DIỆN NGƯỜI - MÁY
TRÊN CÁC THIẾT BỊ PHÂN TÁN

Spécialité : Réseaux et Systèmes communicants
Code : Programme pilote

MEMOIRE DE FIN D’ETUDES DU MASTER INFORMATIQUE

Sous la direction de :

mon stage et qui m’ont aidé lors de la réalisation de mon mémoire de fin
d’étude.
Tout d’abord, j’adresse mes remerciements à M. Philippe Roose, M.
Marc Dalmau et M. Philippe Lopistéguy de l’équipe T2i à l’Université de
Pau et des Pays de l’Adour, mes encadrants qui m’ont offert la chance
de travailler dans un environnement de recherche international. Ils ont été
toujours disponibles lorsque j’ai eu besoin d’eux. Leurs connaissances, leurs
conseils et leurs propositions m’ont apporté de belles idées pour résoudre
les difficultés.
Je remercie également M. Nguyen Hong Quang, mon responsable
à l’Institut Francophone International au Vietnam qui m’a offert les
meilleures conditions pour apprendre et trouver ce stage. Il n’a pas hésité de résoudre mes demandes même le soir pour assurer la vitesse de
traitement de documents.
Je tiens à remercier vivement l’équipe T2i pour leur acceuil, leur esprit d’équipe et en particulier mes collègues Riadh et Solomon qui m’ont
beaucoup aidé lors de mon arrivée. J’adresse spécialement mes amicaux
remerciements à Chinnapong et Fawzi qui ont été toujours à mon côté, ont
partagé avec moi les joies et les tristesses.
Enfin, je remercie sincèrement ma plus grande motivation, ma famille.
Je remercie également mes amis à l’université, mes camarades à la promotion 19 à l’IFI pour toujours rester en contact avec moi pendant mes
séjours.

2


Table des matières
Table des figures

5

Liste des tableaux

2.1.3
2.1.4
2.1.5
2.2

KALIMUCHO
Définition et principe de Kalimucho . . . .
Définition de Kalimucho . . . . . . . . . . . .
Application Kalimucho . . . . . . . . . . . . .
Composants Kalimucho . . . . . . . . . . . .
Services de Kalimucho . . . . . . . . . . . . .
Exemple d’application Kalimucho . . . . . .
IHM pour les interactions distribuées dans

. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
Kalimucho

18
19
19
20
21
24
25
27

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.


3.4
3.5

Conception . . . . . . . . . . . . . . . . .
Concevoir les interfaces . . . . . . . . .
Diagrammes de classes . . . . . . . . . .
Base de données . . . . . . . . . . . . . .
Communication entre les composants
Résultats attendus . . . . . . . . . . . .
Environnement d’implémentation . . .

4
4.1
4.1.1
4.1.2
4.1.3
4.2
4.2.1
4.2.2

DÉMONSTRATION ET RÉSULTATS
Démonstration . . . . . . . . . . . . . . . .
Explication du programme . . . . . . . .
Démonstration . . . . . . . . . . . . . . . .
Evaluation . . . . . . . . . . . . . . . . . . .
Résultats . . . . . . . . . . . . . . . . . . .
Résultats . . . . . . . . . . . . . . . . . . .
Limitations . . . . . . . . . . . . . . . . . .

5

38
39
42
43

.
.
.
.
.
.
.

44
45
45
46
50
51
51
51

CONCLUSION ET PERSPECTIVES
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . .
Perspectives . . . . . . . . . . . . . . . . . . . . . . . . . .

53
54
55


.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.


Dupliquer un composant . . . . . . . . . . . . . . . . . .

61
61
61
61

A.6

B
B.1
B.2
B.3

4

59
60


Table des figures
1.1 Modélisation d’une application mobile en utilisant MIMIC [2]
1.2 a) Grand écran. La température de toutes les chambres est affichée en même temps. b) Petit écran. La température de chaque
chambre est affichée individuellement. [11] . . . . . . . . . . .
1.3 Un cas d’utilisation d’une interface plastique . . . . . . . . . .

13

2.1 Modèle de composant OSAGAIA [8] . . . . . . . . . . . . . .
2.2 a) Développement d’une application normale. b) Développement d’une application Kalimucho . . . . . . . . . . . . . . .

. . . .
vision. . . .

29
31
32
33
34
35
36
37
37
38
38

4.1 Différentes présentations d’affichage . . . . . . . . . . . . . . .

45

Diagramme de cas d’utilisation . . . . . . . . . . . . .
Diagramme de flot du programme de visionneuse . . .
Diagramme de flot de migration/remplacement . . . .
Diagramme de flot de duplication . . . . . . . . . . . .
Conception de l’interface de l’application principale . .
L’interface de configuration . . . . . . . . . . . . . . .
L’interface de modification . . . . . . . . . . . . . . . .
Diagramme de classes du composant « Display » . . .
Diagramme de classes du composant « Button » . . . .
Diagramme de classe du composant « Control » . . . .
Diagramme de classe du composant « Modify » . . . .

6

46
47
47
48
48
49


Liste des tableaux
4.1 Evaluation du programme de test . . . . . . . . . . . . . . . . .

7

50


RÉSUMÉ
Dans un monde qui bouge, les Interfaces Homme-Machine (IHM)
constituent l’un des sujets d’importance pour le développement et l’acceptation de nouvelles technologies. Nous observons des évolutions régulières
des IHM pour s’adapter aux changements et aux tendances technologiques.
Depuis plus de 10 ans, les périphériques mobiles se démocratisent et évoluent très rapidement, en particulier les smartphones avec 2,08 milliards
d’utilisateurs en 2016 (prévu par [9]). Pour suivre ce développement, plusieurs axes de recherches dans le domaine des IHM ont été ouverts tels que,
par exemple, la multi-modalité des interfaces.
Du point de vue de la conception des IHM, la plasticité est une méthode de conception qui permet au développeur de concevoir des interfaces
qui s’adaptent au périphérique sur lequel elles sont déployées. L’objectif
de ce travail est de concevoir des interfaces flexibles pour que l’application qui supporte l’IHM puisse facilement remplacer, migrer, dupliquer sur
différents périphériques (PC, tablette, smartphone, etc.) les composants
qui la constituent. Outre les facilités de multi-vue que cette approche apporte, elle intègre la multi-modalité, dimension importante en raison de la

différentes [4, Chapter 8]. Cette approche peut être très utile et intéressante
dans le domaine d’éducation, en particulier du e-learning, où plusieurs utilisateurs (les étudiants, les enseignants) utilisent différents périphériques.
Il s’agit de situations pour lesquelles les interactions d’un étudiant avec son
IHM peuvent avoir une incidence sur les IHM des autres participants. Une
9


telle situation impliqe deux types d’acteurs (enseignant et étudiant) pouvant engendrer des adaptations réciproques selon les activités des étudiants
d’une part et selon les objectifs de l’enseignant d’autre part.
L’implémentation de notre proposition est réalisée et exécutée à l’aide
de la plateforme logicielle Kalimucho qui facilite le développement d’application en Java (sur PC et Android) réparties, dynamiques et multipériphériques. Une application Kalimucho est constituée d’un ensemble de
composants et de connecteurs qui peuvent être déployés sur tout périphérique du réseau [8].
Dans le Chapitre 1, je présente quelques études sur la multi-modalité
des IHM, l’état de l’art sur la plasticité des IHM mais aussi la méthodologie
que nous avons appliquée. Je présente les principes de base de Kalimucho
dans le Chapitre 2 grâce auxquels sont con¸cus les composants de l’application présentés dans le Chapitre 3. Les résultats de la démonstration
seront expliqués dans le Chapitre 4 avant d’arriver aux perspectives et à
une conclusion au Chapitre 5.

10


Chapitre 1

LA PLASTICITÉ DES
IHM ET LA
MÉTHODOLOGIE
Ce chapitre présente la plasticité des IHM ainsi que la multi-modalité
et la multi-vue.


C’est un produit appliqué la théorie des propriétés CARE. MIMIC offre
un environnement de modélisation des applications multimodales.
La Figure 1.1 montre un cas d’usage de MIMIC. C’est une application
qui permet d’enregistrer de la musique au travers de plusieurs modalités
offertes à l’utilisateur. L’exemple utilise deux parmi les quatre propriétés
CARE qui sont l’équivalence et la complémentarité. Au cours d’un enregistrement, la modalité « appuyer sur arrêt » ou la combinaison « couvrir
12


Figure 1.1 – Modélisation d’une application mobile en utilisant MIMIC
[2]
le téléphone » et « secouer le téléphone » indiquent la décision d’arrêter
l’enregistrement.
La modalité est un couple dispositif physique_langage d’interaction. Les
propriétés importantes et intéressantes pour regrouper et gérer les modalités dans le domaine de la multi-modalité sont la complémentarité, l’assignation, la redondance et l’équivalence (CARE). MIMIC est donc un framework de modélisation d’applications multimodales en utilisant les propriétés ci-dessus pour gérer les modalités.

13


1.2

Plasticité des IHM

La plasticité est la capacité de l’interface d’utilisateur à résister aux
variations des caractéristiques du système physique ainsi qu’à l’environnement tout en préservant son utilisabilité [12]. Autrement dit, une interface
plastique doit avoir la possibilité de fonctionner correctement et de manière
identique dans des conditions différentes.

Figure 1.2 – a) Grand écran. La température de toutes les chambres est
affichée en même temps. b) Petit écran. La température de chaque chambre

La Figure 1.3 montre un cas d’utilisation de l’interface plastique que
nous souhaitons concevoir. L’utilisateur du périphérique (a) a la capacité
de migrer son écran d’affichage sur son portable (c) et de dupliquer un
15


bouton sur son PC (b). Ces widgets seront sélectionnés en fonction du
format adapté à la cible.
En résumé, la plasticité des IHM est une méthode pour concevoir des
applications avec des interactions distribuées car elle permet de transformer
tant l’affichage que les widgets pour s’adapter aux différents périphériques.
Nous souhaitons faire évoluer cette plasticité pour que l’interface puisse être
séparée en plusieurs composants (widgets) qu’elle a la capacité de migrer,
de dupliquer et/ou de remplacer sur tout périphérique.

16


1.3

Méthodologie

Afin de nous confronter à la problématique de la conception et de l’exécution d’applications aux capacités évoquées, nous avons con¸cu une application simple en suivant une méthodologie organisée en 4 étapes :
— Définir l’ensemble des périphériques sur lesquels le système pourra
s’exécuter, en précisant les modalités disponibles pour chaque périphérique.
— Définir l’application en mode standard, à savoir comme si elle ne
s’exécutait que sur une seule machine. L’application sera construite
sur la base de composants logiciels interactifs.
— Déployer l’application et ses composants sur les périphériques identifiés en utilisant les mécanismes de migration, de duplication et de
substitution.

[9] Statista.
"Smartphone
users
worldwide
2014-2020".
October 2016.
[10] Nadia Elouali, Xavier Le Pallec, José Rouillard, Jean-Claude Tarby.
"MIMIC: Leveraging sensor-based interactions in multimodal mobile
applications". CHI 2014, 2014.
56


[11] Ga¨elle Calvary, Jo¨elle Coutaz, David Thevenin. "A unifying reference
framework for the development of plastic user interfaces". Lecture
Notes in Computer Science, pages pp. 173–192, December 2001.
[12] Jo¨elle Coutaz, David Thevenin. "Plasticity of user interfaces : Framework and research agenda". Human–Computer Interaction — INTERACT’99, 1999.
[13] Jo¨elle Coutaz, Laurence Nigay, Daniel Salber, Ann Blandford, Jon
May, Richard M. Young. "Four easy pieces for assessing the usability of multimodal interaction: the care properties". Proceedings of
INTERACT’95, June 1995.

57