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

Header Page of 113 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 Footer Page of 113 Header Page of 113 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 : 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 Footer Page of 113 Header Page of 113 ATTESTATION SUR L’HONNEUR J’atteste sur l’honneur que ce mémoire a été réalisé par moi-même et que les données et les résultats qui y sont présentés sont exacts et n’ont jamais é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 cơng trình nghiên cứu riêng Các số liệu, kết nêu Luận văn trung thực chưa cơng bố cơng trình khác Các thơng tin trích dẫn Luận văn ch rừ ngun gc Fait Hanoă, le 13 janvier 2017 Hà Nội, ngày tháng năm Etudiant Sinh viên Vũ Thái Dương Footer Page of 113 Header Page of 113 REMERCIENTS Je tiens remercier toutes les personnes qui ont contribué au succès 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 Footer Page of 113 Header Page of 113 Table des matières Table des figures Liste des tableaux Abstrait Introduction 10 1.1 1.2 1.3 LA PLASTICITÉ DES IHM ET LA MÉTHODOLOGIE Multi-modalité des IHM Plasticité des IHM Méthodologie 11 12 14 17 2.1 2.1.1 2.1.2 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.1 3.1.1 3.2 3.2.1 3.2.2 IMPLÉMENTATION Analyse d’exigences Diagramme de cas d’utilisation Diagrammes de flot (Flow Diagrams) Programme de visionneuse Programme de modification 28 29 29 31 31 32 Footer Page of 113 Header Page of 113 3.3 3.3.1 3.3.2 3.3.3 3.3.4 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.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.1 5.2 34 34 36 38 39 42 43 44 45 45 46 50 51 51 51 CONCLUSION ET PERSPECTIVES Conclusion Perspectives 53 54 55 Bibliographie 56 A A.1 A.2 A.3 A.4 A.5 Envoyer des commandes la plateforme Kalimucho Créer un composant Migrer un composant Supprimer un composant Créer un connecteur Reconnecter ou ajouter un connecteur sur une unité d’entrée d’un composant Reconnecter ou ajouter un connecteur sur une unité d’entrée d’un composant 58 58 58 59 59 Traiter les modifications Initialiser l’application de visionneuse par défaut Migrer un composant Dupliquer un composant 61 61 61 61 A.6 B B.1 B.2 B.3 Footer Page of 113 59 60 Header Page of 113 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 2.3 Connexion dans un système Kalimucho 2.4 Architecture d’un composant Kalimucho 2.5 Cycle de vie d’un composant 2.6 Nouvelle interface plastique d’une application Kalimucho 19 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 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 » Les connexions entre les composants de l’application de neuse Footer Page of 113 14 15 20 22 23 24 27 39 Header Page of 113 4.2 4.3 4.4 4.5 L’affichage du composant « Modify » L’application de visionneuse L’écran de la migration du composant « Display » Les interfaces de l’application après migration du composant « Display » 4.6 Les modalités des widgets 4.7 Les affichages de l’application sur les machines après la reconfiguration Footer Page of 113 46 47 47 48 48 49 Header Page of 113 Liste des tableaux 4.1 Evaluation du programme de test Footer Page of 113 50 Header Page 10 of 113 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 variabilité des périphériques Un prototype a été réalisé pour expérimenter cette proposition Sur la base de la plateforme Kalimucho, une application simple de type Master View (ou visionneuse) a été développée pour un contexte d’usage dans le domaine de l’e-learning Avec cette application, l’enseignant n’est pas le seul 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’affichage sur 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é Footer Page 10 of 113 Header Page 11 of 113 INTRODUCTION De nos jours, tout le monde accède des applications partir d’une multitude de périphériques (PC, tablette, smartphone, etc.) ce qui suppose des interactions nombreuses et variées (souris, écran tactiles, voix, détection de mouvement, etc.) La multiplication des périphériques mobiles offre des combinaisons riches et variées d’interactions et d’interfaces graphiques Néanmoins, les IHM actuelles ne tiennent pas, pour la plupart, compte des périphériques mobiles environnants de même qu’elles n’évoluent pas ou très peu dynamiquement (disposition/widgets, interactions, modalités) en fonction des pé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 environnants 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 conception d’IHM pour intégrer des capacités de migration et/ou de duplication d’éléments d’IHM et des capacités d’adaptation dynamique des modalités d’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 également sur un smartphone sur lequel la modalité « clic » est remplacée par l’agitation du téléphone tout en remplissant la même fonctionnalité ? La multimodalité prise en compte dès la conception de l’IHM peut permettre de résoudre ce problème La plasticité des IHM est un domaine de recherche plus vaste Son objectif est de créer une interface s’adaptant aux caractéristiques physiques 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 Footer Page 11 of 113 Header Page 12 of 113 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 grâce auxquels sont con¸cus les composants de l’application présentés dans le Chapitre Les résultats de la démonstration seront expliqués dans le Chapitre avant d’arriver aux perspectives et une conclusion au Chapitre Footer Page 12 of 113 10 Header Page 13 of 113 Chapitre 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 Footer Page 13 of 113 11 Header Page 14 of 113 1.1 Multi-modalité des IHM En 1995, Nigay et Coutaz ont défini une modalité d’interaction comme un couple où d est un dispositif physique et L est un langage d’interaction [3] Un dispositif physique définit un élément du système qui attend des informations (dispositif d’entrée) et les distribue l’utilisateur (dispositif de sortie) Les dispositifs peuvent être des souris, des écrans tactiles, des claviers, etc Par ailleurs, un langage d’interaction est un ensemble d’expressions bien formées (par exemple, un assemblage conventionnel de symboles) [7] C’est une base théorique présentant des propriétés pour la composition d’IHM Les propriétés CARE (Complémentarité, Assignation, Redondance et Equivalence) [13] permettent de classer et d’évaluer les systèmes multimodaux Elles définissent différentes compositions de modalités ayant pour objectif de passer d’un état un autre : — La complémentarité : des modalités d’un ensemble doivent être toutes utilisées pour gagner le nouvel état, autrement dit, aucune modalité de cet ensemble ne peut couvrir l’état cible — L’assignation : une modalité est assignée une tâche de changement d’état si aucune autre n’est utilisée pour le faire — La redondance : des modalités sont dupliquées, ont la même expression et sont utilisées séquentiellement ou parallèlement — L’équivalence : des modalités différentes permettent d’atteindre le même but individuellement Par exemple, nous pouvons passer au transparent suivant en cliquant sur le bouton « suivant » ou en pronon¸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 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 Footer Page 14 of 113 12 Header Page 15 of 113 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 Footer Page 15 of 113 13 Header Page 16 of 113 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 est affichée individuellement [11] Dans le domaine des IHM, l’affichage graphique d’une application est prioritaire Aujourd’hui, la plupart des applications n’ont que la possibilité d’être adaptées la taille de l’écran du dispositif physique L’interface plastique demande plus que cela La Figure 1.2 montre un exemple de modification 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 La plasticité de l’interface permet d’en modifier l’affichage selon les besoins Footer Page 16 of 113 14 Header Page 17 of 113 de l’utilisateur (écran b) Outre l’organisation de l’affichage et des widgets, le choix des widgets eux-même et de leurs modalités selon le périphérique est tout aussi important Par exemple, la fonction de réponse d’un appel via Skype fonctionne sur les PCs et les portables Sur les PCs, il faut cliquer sur le bouton « Accept » pour écouter l’appel Sur les portables en général, l’utilisateur fait glisser le bouton « Accept » au lieu de le cliquer Toutefois si l’écran de ce portable est trop petit ou si l’utilisateur les mains occupées, il lui sera difficile d’interagir avec le bouton Il alors est possible de remplacer ce bouton par une activation orale L’application peut proposer plusieurs modalités et laisser le choix l’utilisateur selon sa situation actuelle Ceci est une conséquence directe de la méthode de multi-modalité présentée ci-dessus Aujourd’hui, de nombreuses application s’adaptent la multi-vue (le changement de l’affichage selon le matériel) et la multi-modalité (plusieurs modalités pour une fonction ou la modalité la plus adéquate) – applications responsives Notre objectif est d’évoluer vers la plasticité des IHM Nous voudrions une application qui gère la multi-vue laquelle s’ajoute la multi-modalité et, de plus, nous souhaitons avoir la capacité de migrer, de dupliquer ou/et de remplacer les composants/widgets Figure 1.3 – Un cas d’utilisation d’une interface plastique 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 Footer Page 17 of 113 15 Header Page 18 of 113 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 Footer Page 18 of 113 16 Header Page 19 of 113 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 é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 — Exécuter l’application ainsi spécifiée Ainsi, notre travail s’inspire de l’approche multi-méthodique qui consiste aborder simultanément et tour de rơle de fa¸con itérative, la dimension Théorique (qui établit les fondements et les modèles), la dimension Système (qui se construit sur la base de la Théorie) et la dimension Expérimentation (qui permet d’apprécier la pertinence entre le Système et la Théorie) En effet, dans chacune des étapes ci-dessus, des éléments de Théorie, de Système et d’Expérimentation seront construits Ce sont ces apports que nous nous attacherons valoriser dans ce document Footer Page 19 of 113 17 Header Page 20 of 113 Bibliographie [1] Cyril Cassagnes, Philippe Roose, Marc Dalmau "Kalimucho software architecture for limited mobile devices" ACM SIGBED Review, 6(3):pages pp 1–6, 2009 [2] Nadia Elouali "A model-based framework for multimodal user interface generation" www.lifl.fr/˜eloualin/examples.html#exemple_five, 2014 [3] Yoann Gabillon "Composition d’interaction homme-machine par planification automatique" page pp 34, Octobre 2011 [4] Tiong T Goh "Multiplatform e-learning systems and technologies: Mobile devices for ubiquitous ICT-Based education" Information Science Reference, 2010 [5] Till Ballendat, Nicolai Marquardt, Saul Greenberg "Proxemic interaction : Designing for a proximity and orientation-aware environnement" Research Report 2010-962-11, 2010 [6] Edward T Hall "The hidden dimension" Doubleday, 1966 [7] Joăelle Coutaz, Laurence Nigay "A generic platform for addressing the multimodal challenge" Proceedings CHI’95, May 1995 [8] Keling Da, Marc Dalmau, Philippe Roose "Kalimucho : Middleware for mobile applications" ACM SAC 2014, pages pages pp.413–419, 2014 [9] Statista "Smartphone users worldwide 2014-2020" https://www.statista.com/statistics/330695/number-of-smartphoneusers-worldwide/, 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 Footer Page 20 of 113 56 Header Page 21 of 113 [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" HumanComputer Interaction INTERACT99, 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 Footer Page 21 of 113 57 ...Header Page of 113 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... faire évoluer, et d’enrichir les méthodes de conception d? ?IHM pour intégrer des capacités de migration et/ ou de duplication d’éléments d? ?IHM et des capacités d’adaptation dynamique des modalités... 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,