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

25 2.2 IHM pour les interactions distribuées dans Kalimucho 27 3 IMPLÉMENTATION 28 3.1 Analyse d’exigences.. Pour suivre ce développement, plu-sieurs axes de recherches dans le domaine d

UNIVERSITE NATIONALE DU VIETNAM, HANOI

INSTITUT FRANCOPHONE INTERNATIONAL

VŨ THÁI DƯƠNG

MÉTHODE DE CONCEPTION POUR IHM

ET INTERACTIONS DISTRIBUÉESPHƯƠ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ÉESPHƯƠ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 :

Maˆıtre de Conférences, Dr Philippe ROOSE

Maˆıtre de Conférences, Dr Philippe LOPISTEGUY

Maˆıtre de Conférences, Dr Marc DALMAU

HANOI - 2016

ATTESTATION SUR L’HONNEUR

J’atteste sur l’honneur que ce mémoire a été réalisé par moi-même etque les données et les résultats qui y sont présentés sont exacts et n’ont ja-mais été publiés ailleurs La source des informations citées dans ce mémoire

a été bien précisée

LỜI CAM ĐOAN

Tôi cam đoan đây là công trình nghiên cứu của riêng tôi Các số liệu,kết quả nêu trong Luận văn là trung thực và chưa từng được ai công bốtrong bất kỳ công trình nào khác Các thông tin trích dẫn trong Luận văn

đã được chỉ rõ nguồn gốc

Fait à Hano¨ı, le 13 janvier 2017

Hà Nội, ngày tháng năm

EtudiantSinh viên

Vũ Thái Dương

Je tiens à remercier toutes les personnes qui ont contribué au succès demon stage et qui m’ont aidé lors de la réalisation de mon mémoire de find’é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é dePau 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, leursconseils et leurs propositions m’ont apporté de belles idées pour résoudreles difficultés

Je remercie également M Nguyen Hong Quang, mon responsable

à l’Institut Francophone International au Vietnam qui m’a offert lesmeilleures 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 detraitement de documents

Je tiens à remercier vivement l’équipe T2i pour leur acceuil, leur prit d’équipe et en particulier mes collègues Riadh et Solomon qui m’ontbeaucoup aidé lors de mon arrivée J’adresse spécialement mes amicauxremerciements à Chinnapong et Fawzi qui ont été toujours à mon côté, ontpartagé avec moi les joies et les tristesses

es-Enfin, je remercie sincèrement ma plus grande motivation, ma famille

Je remercie également mes amis à l’université, mes camarades à la motion 19 à l’IFI pour toujours rester en contact avec moi pendant messéjours

pro-Table des matières

1.1 Multi-modalité des IHM 12

1.2 Plasticité des IHM 14

1.3 Méthodologie 17

2 KALIMUCHO 18 2.1 Définition et principe de Kalimucho 19

2.1.1 Définition de Kalimucho 19

2.1.2 Application Kalimucho 20

2.1.3 Composants Kalimucho 21

2.1.4 Services de Kalimucho 24

2.1.5 Exemple d’application Kalimucho 25

2.2 IHM pour les interactions distribuées dans Kalimucho 27 3 IMPLÉMENTATION 28 3.1 Analyse d’exigences 29

3.1.1 Diagramme de cas d’utilisation 29

3.2 Diagrammes de flot (Flow Diagrams) 31

3.2.1 Programme de visionneuse 31

3.2.2 Programme de modification 32

3.3 Conception 34

3.3.1 Concevoir les interfaces 34

3.3.2 Diagrammes de classes 36

3.3.3 Base de données 38

3.3.4 Communication entre les composants 39

3.4 Résultats attendus 42

3.5 Environnement d’implémentation 43

4 DÉMONSTRATION ET RÉSULTATS 44 4.1 Démonstration 45

4.1.1 Explication du programme 45

4.1.2 Démonstration 46

4.1.3 Evaluation 50

4.2 Résultats 51

4.2.1 Résultats 51

4.2.2 Limitations 51

5 CONCLUSION ET PERSPECTIVES 53 5.1 Conclusion 54

5.2 Perspectives 55

Bibliographie 56 A Envoyer des commandes à la plateforme Kalimucho 58 A.1 Créer un composant 58

A.2 Migrer un composant 58

A.3 Supprimer un composant 59

A.4 Créer un connecteur 59

A.5 Reconnecter ou ajouter un connecteur sur une unité d’entrée d’un composant 59

A.6 Reconnecter ou ajouter un connecteur sur une unité d’entrée d’un composant 60

B Traiter les modifications 61 B.1 Initialiser l’application de visionneuse par défaut 61

B.2 Migrer un composant 61

B.3 Dupliquer un composant 61

Table des figures

1.1 Modélisation d’une application mobile en utilisant MIMIC [2] 13 1.2 a) Grand écran La température de toutes les chambres est

affi-chée en même temps b) Petit écran La température de chaque

chambre est affichée individuellement [11] 14

1.3 Un cas d’utilisation d’une interface plastique 15

2.1 Modèle de composant OSAGAIA [8] 19

2.2 a) Développement d’une application normale b) Développe-ment d’une application Kalimucho 20

2.3 Connexion dans un système Kalimucho 22

2.4 Architecture d’un composant Kalimucho 23

2.5 Cycle de vie d’un composant 24

2.6 Nouvelle interface plastique d’une application Kalimucho 27

3.1 Diagramme de cas d’utilisation 29

3.2 Diagramme de flot du programme de visionneuse 31

3.3 Diagramme de flot de migration/remplacement 32

3.4 Diagramme de flot de duplication 33

3.5 Conception de l’interface de l’application principale 34

3.6 L’interface de configuration 35

3.7 L’interface de modification 36

3.8 Diagramme de classes du composant « Display » 37

3.9 Diagramme de classes du composant « Button » 37

3.10 Diagramme de classe du composant « Control » 38

3.11 Diagramme de classe du composant « Modify » 38

3.12 Les connexions entre les composants de l’application de vision-neuse 39

4.1 Différentes présentations d’affichage 45

4.2 L’affichage du composant « Modify » 464.3 L’application de visionneuse 474.4 L’écran de la migration du composant « Display » 474.5 Les interfaces de l’application après migration du composant «

Display » 484.6 Les modalités des widgets 484.7 Les affichages de l’application sur les machines après la recon-

figuration 49

Liste des tableaux

4.1 Evaluation du programme de test 50

Dans un monde qui bouge, les Interfaces Homme-Machine (IHM)constituent l’un des sujets d’importance pour le développement et l’accep-tation de nouvelles technologies Nous observons des évolutions régulièresdes IHM pour s’adapter aux changements et aux tendances technologiques.Depuis plus de 10 ans, les périphériques mobiles se démocratisent et évo-luent très rapidement, en particulier les smartphones avec 2,08 milliardsd’utilisateurs en 2016 (prévu par [9]) Pour suivre ce développement, plu-sieurs 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 thode de conception qui permet au développeur de concevoir des interfacesqui s’adaptent au périphérique sur lequel elles sont déployées L’objectif

mé-de ce travail est mé-de concevoir mé-des interfaces flexibles pour que tion qui supporte l’IHM puisse facilement remplacer, migrer, dupliquer surdifférents périphériques (PC, tablette, smartphone, etc.) les composantsqui la constituent Outre les facilités de multi-vue que cette approche ap-porte, elle intègre la multi-modalité, dimension importante en raison de lavariabilité des périphériques

l’applica-Un prototype a été réalisé pour expérimenter cette proposition Sur labase de la plateforme Kalimucho, une application simple de type MasterView (ou visionneuse) a été développée pour un contexte d’usage dans ledomaine de l’e-learning Avec cette application, l’enseignant n’est pas leseul à piloter le défilement de ses transparents Il peut migrer les boutons

de contrôle à un auditeur de même qu’il peut dupliquer l’écran d’affichagesur d’autres périphériques Enfin, selon la caractéristique de chaque pé-riphérique et/ou le profil de son utilisateur, il peut définir la modalitéd’interaction à activer en fonction du périphérique utilisé

De nos jours, tout le monde accède à des applications à partir d’unemultitude de périphériques (PC, tablette, smartphone, etc.) ce qui supposedes interactions nombreuses et variées (souris, écran tactiles, voix, détection

de mouvement, etc.)

La multiplication des périphériques mobiles offre des combinaisonsriches et variées d’interactions et d’interfaces graphiques Néanmoins, lesIHM actuelles ne tiennent pas, pour la plupart, compte des périphériquesmobiles environnants de même qu’elles n’évoluent pas ou très peu dyna-miquement (disposition/widgets, interactions, modalités) en fonction despériphériques environnants Il n’est actuellement pas possible de migrer ou

de dupliquer des parties de l’IHM sur l’un des périphériques mobiles ronnants Elles ne sont, par ailleurs, pas prévues pour ce type d’évolutions.Notre objectif est de faire évoluer, et d’enrichir les méthodes de concep-tion d’IHM pour intégrer des capacités de migration et/ou de duplicationd’éléments d’IHM et des capacités d’adaptation dynamique des modalitésd’interaction Le problème posé est, par exemple, comment une action dé-clenchée par un clic de souris sur un PC peut-elle fonctionner égalementsur un smartphone sur lequel la modalité « clic » est remplacée par l’agi-tation du téléphone tout en remplissant la même fonctionnalité ? La multi-modalité prise en compte dès la conception de l’IHM peut permettre derésoudre ce problème

envi-La plasticité des IHM est un domaine de recherche plus vaste Son jectif est de créer une interface s’adaptant aux caractéristiques physiquesdifférentes [4, Chapter 8] Cette approche peut être très utile et intéressantedans le domaine d’éducation, en particulier du e-learning, ó plusieurs uti-lisateurs (les étudiants, les enseignants) utilisent différents périphériques

ob-Il s’agit de situations pour lesquelles les interactions d’un étudiant avec sonIHM peuvent avoir une incidence sur les IHM des autres participants Une

telle situation impliqe deux types d’acteurs (enseignant et étudiant) vant engendrer des adaptations réciproques selon les activités des étudiantsd’une part et selon les objectifs de l’enseignant d’autre part.

pou-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 plication en Java (sur PC et Android) réparties, dynamiques et multi-périphériques Une application Kalimucho est constituée d’un ensemble decomposants et de connecteurs qui peuvent être déployés sur tout périphé-rique du réseau [8]

d’ap-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éthodologieque nous avons appliquée Je présente les principes de base de Kalimuchodans le Chapitre 2 grâce auxquels sont con¸cus les composants de l’ap-plication présentés dans le Chapitre 3 Les résultats de la démonstrationseront expliqués dans le Chapitre 4 avant d’arriver aux perspectives et àune conclusion au Chapitre 5

1.1 Multi-modalité des IHM

En 1995, Nigay et Coutaz ont défini une modalité d’interaction comme

un couple <d,L> ó d est un dispositif physique et L est un langage action [3] Un dispositif physique définit un élément du système qui attenddes informations (dispositif d’entrée) et les distribue à l’utilisateur (dispo-sitif de sortie) Les dispositifs peuvent être des souris, des écrans tactiles,des claviers, etc Par ailleurs, un langage d’interaction est un ensembled’expressions bien formées (par exemple, un assemblage conventionnel desymboles) [7] C’est une base théorique présentant des propriétés pour lacomposition d’IHM

d’inter-Les propriétés CARE (Complémentarité, Assignation, Redondance etEquivalence) [13] permettent de classer et d’évaluer les systèmes multimo-daux Elles définissent différentes compositions de modalités ayant pourobjectif de passer d’un état à un autre :

— La complémentarité : des modalités d’un ensemble doivent êtretoutes utilisées pour gagner le nouvel état, autrement dit, aucunemodalité de cet ensemble ne peut couvrir l’état cible

— L’assignation : une modalité est assignée à une tâche de changementd’état si aucune autre n’est utilisée pour le faire

— La redondance : des modalités sont dupliquées, ont la même sion et sont utilisées séquentiellement ou parallèlement

expres-— L’équivalence : des modalités différentes permettent d’atteindre lemême but individuellement Par exemple, nous pouvons passer autransparent suivant en cliquant sur le bouton « suivant » ou enpronon¸cant le mot « aller »

Ces propriétés sont utiles pour gérer des combinaisons entre modalités

et faciliter les synchronisations MIMIC (MobIle MultI-modality Creator)[10] est un framework réalisé au laboratoire LIFL de l’université Lille 1.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 applicationqui permet d’enregistrer de la musique au travers de plusieurs modalitésoffertes à l’utilisateur L’exemple utilise deux parmi les quatre propriétésCARE qui sont l’équivalence et la complémentarité Au cours d’un enre-gistrement, la modalité « appuyer sur arrêt » ou la combinaison « couvrir

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êterl’enregistrement

La modalité est un couple dispositif physique_langage d’interaction Lespropriétés importantes et intéressantes pour regrouper et gérer les moda-lités dans le domaine de la multi-modalité sont la complémentarité, l’assi-gnation, la redondance et l’équivalence (CARE) MIMIC est donc un fra-mework de modélisation d’applications multimodales en utilisant les pro-priétés ci-dessus pour gérer les modalités

1.2 Plasticité des IHM

La plasticité est la capacité de l’interface d’utilisateur à résister auxvariations des caractéristiques du système physique ainsi qu’à l’environne-ment tout en préservant son utilisabilité [12] Autrement dit, une interfaceplastique doit avoir la possibilité de fonctionner correctement et de manièreidentique dans des conditions différentes

Figure 1.2 – a) Grand écran La température de toutes les chambres estaffichée en même temps b) Petit écran La température de chaque chambreest affichée individuellement [11]

Dans le domaine des IHM, l’affichage graphique d’une application estprioritaire Aujourd’hui, la plupart des applications n’ont que la possibi-lité d’être adaptées à la taille de l’écran du dispositif physique L’interfaceplastique demande plus que cela La Figure 1.2 montre un exemple de mo-dification de l’affichage d’une application selon la capacité du périphérique

Un grand écran (a) a assez d’espace pour afficher toutes les informations.Pourtant, si cette application ne connaˆıt que cet affichage, le fait de réduire

la place disponible rendra difficile aux utilisateurs l’accès aux informations