IHM et plasticit AnneMarie Dry pinnapolytech unice fr

IHM et plasticité Anne-Marie Déry pinna@polytech. unice. fr IHM et Différents supports Différents utilisateurs Différents environnements Problématique - aperçu des solutions industrielles et recherche

Plasticité des interfaces Un peu d’histoire … Introduction du terme à Interact’ 99 Capacité d’une interface à s’adapter à son contexte d’usage dans le respect de son utilisabilité Contexte d’usage Plate-forme Environnement Utilisateur (2001)

Contenu du module Semaine 1 Semaine 2 Semaine 3 Semaine 4 Semaine 5 Introduction au module 4 H Cours Flex xul XUL Flex sur mobile Semaine 6 Semaine 7 Semaine 8 HTML 5 IIHM ENTRETIENS Introduction : plasticité des IHMs – Page 4

Evaluation Mettre en place un site web avec : TP téléchargeables Rapport de synthèse sur les travaux de recherche de votre choix en reagrd sur le domaine de plasticité traité plateforme / environnement / utilisateur conception / exécution modèle sous jacent illustration du besoin sur un exemple avantages et inconvénients Entretien indivuel Objectif : vérifier vos acquis dans le module Déroulement : démonstrations à la demande et réponse aux questions sur le travail de recherche étudié Durée : 30 minutes

Motivations et exemples d’applications visées

Diversité des supports : intéractions Capacités d’interaction nouvelle : tactile bornes - tables – vitrines – murs interactifs Différence de taille des écrans – multi touch ou non – utilisateur experts ou non Environnement bruyant – sombre … Introduction : plasticité des IHMs – Page 7

Besoins de plasticité Entre supports tactiles : de la table au mur, du téléphone au PC ? Entre un support non tactile et un support tactile : quand changer l’interaction ? Pourquoi ? Impact sur la présentation ? Impact sur l’enchaînement des taches Besoin identifié par un changement d’environnement (arrivée dans un lieu public) - Besoin provoqué par l’utilisateur (changement de matériel, mains occupées par une tache ? ) Introduction : plasticité des IHMs – Page 8

Diversité des supports : supports dédiés Supports dédiés à une activité Niveau d’expertise des utilisateurs experts – Niveau de fiabilité En mobilité Introduction : plasticité des IHMs – Page 9

Besoins en plasticité Nouveau matériel Changement de voiture Sortie d’une nouvelle montre de plongée Changement de lieu : sur le site de dépannage ou sur le site professionnel : exemple du fontainier, du réparateur d’électroménager Choix de l’utilisateur ou de son environnement professionnel ou du niveau d’expertise Introduction : plasticité des IHMs – Page 10

Supports mobiles MÊMES USAGES ? MÊMES SERVICES ?

Besoin en plasticité Passage en mobilité En déplacement Dans les transports en commun Changement de matériel Nouvelles technologies Nouveaux services Quid de l’usage ? Quid du développeur ? Introduction : plasticité des IHMs – Page 12

IHM, utilisateurs et usages Complexification de la conception ergonomique et logicielle Continuité de service et adaptation au lieu et à l’usager Introduction : plasticité des IHMs – Page 13

Besoins en plasticité Au domicile Des utilisateurs différents du même service Des supports différents selon les pièces et l’activité A l’extérieur – dans la rue Un environnement interagissant Les sollicitations commerciales, culturelles, de déplacement Des supports privés (mobiles) ou des supports publics (bornes interactives, …. ) Des contraintes environnementales (bruit, lumière, mains occupées…) Dans l’univers professionnel Supports privés et supports professionnels : taches fixées D’un lieu à un autre Continuité de services Introduction : plasticité des IHMs – Page 14

Espace problème Domaine de plasticité Seuil de plasticité Domaine de plasticité C 1 Contexte couvert par l’IHM C 2 Introduction : plasticité des IHMs – Page 15 Contexte non couvert

Plastique pour qui et quand ? 2 cas A la conception – faciliter la vie du développeur Réutiliser un maximum pour chaque nouvelle cible Diminuer le coût de développement A l’exécution – faciliter la vie de l’utilisateur final Faire migrer une application d’un support à un autre Faciliter l’usage – conserver les habitudes tout en profitant des spécificités des supports Introduction : plasticité des IHMs – Page 16

Comment identifier le problème ? Démarche Identifier le besoin en plasticité Quand (conception et/ou exécution) ? Dans quel(s) environnent(s) ? Pour quel(s) utilisateur(s) ? Identifier les technologies adaptées Avoir une démarche modèle Introduction : plasticité des IHMs – Page 17

Les acteurs Organismes de normalisation Les RIA Les fournisseurs de services sur mobiles Les chercheurs Introduction : plasticité des IHMs – Page 18

Au début il y avait …. .

Approche à la conception basée sur des Traducteurs HTML Voice. ML XSL XML WML Au centre une interface XMLisée

Approche à l’exécution : Migration Problème ? Exemple SI la batterie du PC faiblit ALORS passer sur PDA SI condition ALORS action Action Réaction

Cadre de référence : phase “exécution” Identification du Reconnaissance de situation changement de contexte Détection de changement de contexte Capture du contexte Execution de L’épilogue Identification Des solutions candidates Calcul d’une réaction Selection d’une solution candidate Exécution du prologue Execution de la reaction Exécution de la réaction

Interventions dans le module Des solutions partielles industrielles Pour des types d’application (Site Web) Pour des types de supports (téléphones mobiles) Des projets – en recherche De la réutilisation pour la composition d’applications existantes De la migration dirigée par l’utilisateur Points communs : niveau de description des interfaces plus ou moins abstraits : Langages à balises et IHM

Bref historique concernant les acteurs

Quand les organismes de normalisation s’y mettent … OASIS et W 3 C

UIML http: //www. uiml. org/ dérivé d'XML permettant de décrire des interfaces graphiques. Il y a des outils (renderers) qui convertissent une représentation d'UIML en représentation pour divers GUI (par exemple Java awt). un langage commun de description d'interface utilisateur, ouvert et libre d'utilisation qui soit indépendants des plateformes, qu'il s'agisse des plateformes actuelles ou futures. définir un métalangage canonique qui peut décrire n'importe quelle interface utilisateur, sans être tributaire du type d'unité ou d'interface graphique utilisée. UIML peut décrire les interfaces utilisateur - interface de bureau, interface web, interface mobile, système embarqué, ou encore applications « voix » . UIML 1. 0: Décembre 1997 UIML 3. 1: Mars 2004 http: //www. oasis-open. org UIML 4

W 3 C comment trouver l’info Quelles infos et comment zoomer

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 Les 4 parties d'un document UIML: <Head> : metadata (author, date, version, . . . ) <Template> : réutilisation de fragments <Interface> : interface proprement dite <Structure> : arbre des « widgets » <Style> : styles (propriétés) des widgets <Content> : contenu (texte, image, son) <Behavior> : objet / événement / action <Peers> : mappings et liens vers l'extérieur

Traducteurs XML et XSL pour la présentation, UIML, SUNML, Xforms …. HTML Voice. ML WML XSL XML

User Interfaces langages XML dans tout ses états

Recommandations W 3 C (World Wide Web Consortium) http: //www. w 3. org/2001/di/Activity CONSTAT : multiplication des terminaux, la distribution des contenus devient plus que jamais problématique. les données doivent être filtrées et leur format modifié. Transformation ? la reconnaissance des caractéristiques de l'équipement client par le serveur. Une solution : Le projet CC/PP (pour Composite Capability/Preference Profiles) 1999. Basé sur le format de meta-données RDF (Resource Description Framework), Application de XML pour décrire : les caractéristisques logicielles et matérielles d'un terminal (Web ou WAP, capacité machine, etc. ) + les informations relatives au profil de son utilisateur. Introduction : plasticité des IHMs – Page 31

Recommandations W 3 C CC/PP (dont font parti Ericsson, IBM, Nokia, SAP et Sun), Un panel d'appareils assez large (téléphone portable, PC, assistant personnel, . . . ), Avantage de CC/PP : proposer une méthode de description des configurations - réduire la quantité d'informations échangées entre client et serveur (protocoles de transmission sans fil restent limités en bande passante). - les variables d'un profil CC/PP (capacités du terminal, préférences utilisateur, etc. ) peuvent être appliquées au sein d'une feuille de style XSLT afin de créer ou d'adapter un document. Introduction : plasticité des IHMs – Page 32

XForms http: //www. w 3. org/2002/Forms/Activity. html XForms un langage à balises pour les formulaires électroniques « modernes » Basés sur XML et renvoie les valeurs saisies dans le formulaire sous forme de document XML Il prend en compte l’authentification, l’utilisabilité et l’accessibilité, le device independence, l’internationalisation, et l’intégration pour plusieurs langages cibles tout en réduisant la mise en œuvre de traducteurs. Introduction : plasticité des IHMs – Page 33

Mobile Web Initiative http: //www. w 3. org/2005/MWI/Activity. html W 3 C MWI travaille actuellement à la mise en place des meilleures pratiques pour les sites web et les applications sur mobile Il propose également des tests sur l’interoperabilité entre logiciels webs et l’usage du mobile au niveau social. Ils accueillent des groupes de travail sur la thématique générale de l’utilisation des mobiles 1 ere consigne : Design for one web (cf http: //www. w 3. org/Mobile) Introduction : plasticité des IHMs – Page 34

WAI http: //www. w 3. org/WAI/ Le Web est partout : les services publics sont en ligne (impots, sncf, enseignement, etc…) Il doit donc être accessible à TOUS Comment traiter le handicap : visuel, auditif, physique, cognitif, neurologique, etc. De plus les solutions ne doivent pas handicapées les personnes non handicapées Web Content Accessibility Initiative (WAI) représente des industriels, des chercheurs et des personnes connaissant bien les handicap Donner des consignes et développer des solutions Introduction : plasticité des IHMs – Page 35

WAI http: //www. w 3. org/WAI/ Principaux résultats Outils automatiques de validation de pages webs (les sites publics ont longtemps été non conformes aux tests) Consignes pour évaluer si une page est accessible (exemple la faire lire par une synthèse vocale) Consignes pour concevoir des pages accessibles (exemple classique du tag image à renseigner correctement) Introduction : plasticité des IHMs – Page 36

http: //www. w 3. org/2005/Incubator/model-basedui/charter/ Model-based User Interfaces Incubator Group Charter Model-based User Interfaces Incubator Group, a pour mission d’évaluer les travaux en recherche autour des modèles pour la conception des IHMs pour essayer de sortir des standard Par exemple : les concepteurs d’Usi. XML font partie de ce groupe de réflexion Introduction : plasticité des IHMs – Page 37

Quand les RIA sont inspirés

RIAs RIA = le meilleur du web et du "desktop" RIA & conception des interfaces Séparer présentation - logique – données Briques d'IHM réutilisables Nécessité d'installer un plugin dans le navigateur et forte concurrence sur les technologies Multiplication des technologies sur le poste de travail ! . . . Introduction : plasticité des IHMs – Page 39

Solutions RIAs disponibles AJAX : un ensemble de techno open source éprouvées Asynchronous Javascript And XML Utilisation combinée nouvelle Autres offres Adobe Flex (2004) : http: //www. adobe. com/support/documentation/en/flex/ Microsoft Silverlight (2006) : http: //www. silverlight. net Sun Java. FX (2008) : http: //www. javafx. com/ Mozilla XUL (XML User Interface Language) http: //www. mozilla. org/projects/xul/ . . . Introduction : plasticité des IHMs – Page 40 Source : Google Insights

Exigence des supports mobiles Illustration des besoins en entreprise Pour la téléphonie Exemple d’Open Plug Introduction : plasticité des IHMs – Page 41

Elips Open-Plug Créateur d’ELIPS Créée en 2002, Open-Plug est basée à Sophia-Antipolis. Open-Plug est membre de la Fondation Li. Mo (Linux Mobile Foundation). Fruit de 5 ans de R&D et a fait l’objet de dépôts de brevets. ELIPS environnement ouvert de développement (Framework) de téléphones portables grand public. CELIPS permet aux éditeurs de logiciels, aux fabricants de téléphones et aux opérateurs de téléphonie mobile de créer et de déployer des applications mobiles, des interfaces utilisateurs riches et des solutions logicielles. Pourquoi ? Pour le développement rapide des nouveaux modèles de téléphones portables et facilite l’implémentation de nouvelles solutions logicielles et la création d’interfaces utilisateurs. Introduction : plasticité des IHMs – Page 42 Pour réutiliser leurs développements d’une plateforme de téléphone à l’autre

Quand les chercheurs s’en mêlent…

Equipes et travaux en présence Equipe IIHM Laboratoire IMAG à Grenoble Gaelle Calvary & Joelle Coutaz Equipe RAINBOW Laboratoire I 3 S à Sophia Antipolis Michel Riveill & Philippe Renevier & Audrey Occello & Anne Marie Dery Laboratoire HIIS à l’université de Pise Fabio Paterno Equipe IHM au Université de Valencienne Anas Hariri & Sophie Lepreux & Christophe Kolski Laboratoire CHI Université catholique de Louvain Jean Vanderdonckt

Exemples d’articles EMMA pour la Plasticité en Mobilité In Actes de la 20ème Conférence francophone sur l’Interaction Homme-Machine (IHM’ 2008, Metz, France, Septembre 2008). 2008. Vincent Ganneau, Rachel Demumieux, Gaëlle Calvary http: //iihm. imag. fr/publication/GDC 08 a/ Model-Driven Engineering of Multi-Target Plastic User Interfaces In Proc. of 4 th International Conference on Autonomic and Autonomous Systems ICAS 2008. pages 7 -14. 2008. Benoit Collignon, Jean Vanderdonckt, Gaëlle Calvary D. Greenwood, M. Grottke, H. Lutfiyya, M. Popescu (eds. ), IEEE Computer Society Press, Los Alamitos, Gosier, 16 -21 March 2008 http: //iihm. imag. fr/publication/CVC 08 a/ Anne-Marie Pinna-Déry, Cédric Joffroy, Philippe Renevier, Michel Riveill, Christophe Vergoni. "ALIAS: A Set of Abstract Languages for User Interface Assembly" in Proceedings of the 9 th IASTED International Conference Software Engineering and Applications (SEA'08), IASTED, pages 77 --82, ACTA Press, Orlando, Florida, USA, 16 -17 nov 2008 http: //rainbow. polytech. unice. fr/publis/pinna-dery-joffroy-etal: 2008. pdf Anne-Marie Pinna-Déry, Jérémy Fierstone. "Construction d'Interfaces Utilisateurs Par Fusion de Composants d'IHM : un Atout Pour la Mobilité" in Proceedings of the Premières Journées Francophones: Mobilité et Ubiquité, 2004

VISITE DE TRAVAUX DE RECHERCHE AUTOUR DE LA PLASTICITÉ

Un cadre de référence : Cameleon Context Aware Modelling for Enabling and Leveraging Effective interaction (IST R&D 2001 -2004).

Cadre de référence : phase “conception” “Spécifier 1 fois -> N Interfaces approche par modèles ARTStudio Modèles archétypes D. Thevenin Modèles ontologiques Config 1 Domaine Concepts User Plate-forme User IHM abstraite Evolution IHM abstraite Plate-forme Environment Config 2 Concepts Tâches IHM concrète Environment Adaptation Modèle Tâches et Concepts Tâches Contexte Modèle Tâches et Concepts IHM concrète Evolution IHM finale Transition IHM finale User Plate-forme Environment Evolution Transition Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine Introduction : plasticité des IHMs – Page 48

Cadre de référence : phase “conception” Config 1 Tâches & Concepts IHM abstraite IHM concrète IHM finale Introduction : plasticité des IHMs – Page 49

3 G Mobile Context Sensitive Adaptability - User Friendly Mobile Work Place for Seamless Enterprise Applications CONSENSUS (PROJET Européen terminé en 2004) www. consensus-online. org SLIDES : CÉDRIC ULMER cedric. ulmer@sap. com

Objective Cost-efficient development of usable device independent Applications Introduction : plasticité des IHMs – Page 51

Challenge is. . . to bring (potentially) all applications to (potentially) all devices different mobile devices with different device capabilities – voice comes on top of that For a single application to be displayed on 50 devices 50 sets of application UI need to be created! Some enterprises are maintaining hundreds of applications – customer developments & customization comes on top of that Example: For all SAP applications being able to be displayed on all devices 50. 000 sets of application UIs need to be created! Introduction : plasticité des IHMs – Page 52

Us De ab cl ilit in y: ed ! State of the Art: Adaptation - Transcoding Application-independent adaptation: m A multitude of screens m 15 numbers have to be entered Introduction : plasticité des IHMs – Page 53

State of the Art: Dilemma - Cost vs. Usability Integrated adaptation Integrated Adaptation l semantic information l context information Transcoding • syntactic adaptation • technology specific Cost Introduction : plasticité des IHMs – Page 54 Recoding • semantic adaptation • device & application specific

Renderer Independent Markup Language: RIML Tools: Context-sensitive Annotation Editor Semantic Information: Relevance, splitting hints, context conditions, . . . Augment applications with metadata for adaptation engines to prepare presentation context- and device-specific Context: User Prefs, bandwith, . . Introduction : plasticité des IHMs – Page 55 Device Classes: UI/Technical aspects

Renderer Independent Markup Language: RIML (contn’d) UI-Info to be expressed with application data In order to define RIML, we needed: Language Research Existing MLs Requirements Extensions Usability Research based on Focus on mobile devices How easy / hard is it to use specific UI Components on different devices (not usability on application / process level) Definition of device classes Introduction : plasticité des IHMs – Page 56

Adaptation Concept • T 1/T 2 = UI info Templates • Colors indicate importance • Mandatory • Optional Backend Data Application-specific Adaptation SEMANTIC ADAPTATION T 1 T 2 T 1 Template Editor T 1 T 2 T 1 other filters. . . Information Pruning Filter Information Splitting Filter T 1 T 2 Application data outbound processing Introduction : plasticité des IHMs – Page 57 Device-specific fine-grained Adaptation SYNTACTIC ADAPTATION WML Transcoding Rules

Projet ASPECT Composition de composants et de leurs IHMs 2003 Introduction : plasticité des IHMs – Page 58 23/05/2002 Jeremy Fierstone / Equipe Rainbow / 58

Applications visées Problématique Applications évolutives et adaptables accessibles via un PDA, un portable ou une station variabilité des fonctionnalités selon le contexte d'utilisation (mode dégradé, connecté ou déconnecté, dépendance des ressources…) Applications construites à base de composants (composants métiers, composants d’IHM, composants services…) S’appuyer sur les infrastructures systèmes (RMI, EJB, …) Fournir une plate-forme à composants Exemples : Agenda collaboratif Gestion commerciale (facturations, commandes, client, fournisseur) Introduction : plasticité des IHMs – Page 59

Spécificités des applications et contraintes IHMs Changement du contexte d'exécution du composant (d’utilisation de fonctionnalités) d'une station à un PDA, un téléphone portable … Comment réutiliser une IHM existante sur un support différent ? Comment composer les IHMs des "Reconfiguration" du composants métiers ? Retrait / ajout de composants (demande de fonctionnalités, de services) Composition de composants Déporter le composant prise de commande sur un PDA pour le consultant sur site Ajouter dynamiquement le service de gestion de stock pour informer du délai… Introduction : plasticité des IHMs – Page 60

Composition de composants " Composants indépendants, composables " Mais interactions possibles Composants Composite Jeremy Fierstone / Equipe Rainbow / 61

Composition de composants " Fusion de menus correspondants aux composants (1) Jeremy Fierstone / Equipe Rainbow / 62

Composition de composants " Fusion de menus correspondants aux composants (2) Jeremy Fierstone / Equipe Rainbow / 63

Proposition : modèle de composants et abstraction Réutiliser des composants métiers Spécification d ’ IHM indépendantes du support Composer les IHMs des composants métiers Un modèle de composant + ISL + SUNML Un modèle de composants qui découple composant métier et composants d ’IHM. La communication entre composants IHM et métier est exprimée par des interactions Composition de composants métiers par interactions Règles de composition adaptées aux Un langage abstrait de description structurelle des IHMs : SUNML dans la lignée de XForms, RIML, . . . (inspiré de UIML) IHMs Fusion de règles vérifiant la cohérence de la composition Atelier de composition : Amusing Introduction : plasticité des IHMs – Page 64

De l’IHM abstraite vers l’IHM concrète IHM abstraite (Exécution) Fiche. Client HMI Fichier SUNML (Spécification) <sunml> <interface id="Fiche. Client"> <structure> <dialog id="Main. Dialog" sequence="true">. . . <field id="Label. Field. Nom" mode="read"> <element type="String">Nom : </element> </field> <field id="Field. Nom" mode="read-write"> <element type="String">Toto</element> </field>. . . </dialog> </structure> </interface> </sunml> Réification Main. Dialog Label. Field. Nom Field ? Dialog Field Projection ? IHM concrète (Exécution) JFrame 1 JFrame ? JPanel 1 JPanel durand Composant métier (Exécution) Introduction : plasticité des IHMs – Page 65 . . . JLabel 1 JField 1 JLabel JText. Field . . .

Exemple de Liste de Clients Composition Représentant – Client (1 -n) : Liste de clients Fichier SUNML (spécification) <sunml> <interface id="Liste. Clients"> <structure> <dialog id="Main. Dialog" sequence="true"> <list id="Liste. Clients" reference="Fiche. Client" select="Field[Field. Nom]"/> </list> </structure> </interface> </sunml> Introduction : plasticité des IHMs – Page 66 Exemple en Swing

De l’IHM abstraite vers l’IHM concrète Séparation du composant d’IHM du composant métier Expression des communications possibles entre ces composants avec ISL Adaptation des composants suivant le contexte d’exécution Instance Légende interaction Controleur Fiche. Client IHM abstraite durand Composant métier Introduction : plasticité des IHMs – Page 67 JFrame 1 IHM concrète

SERVFACE SERVICE ANNOTATIONS FOR USER INTERFACE COMPOSITION PROJET EUROPÉEN HTTP: //141. 76. 40. 158/SERVFACE /

Vue d’ensemble + + Annotations de services avec des éléments d’interfaces Composition de services Génération de l’interface du service « composite » à partir des annotations 2 approches: 1 ière approche : composition visuelle des services + 2 ième approche : composition dirigée par les tâches + Introduction : plasticité des IHMs – Page 69 3/15

[Izquierdo et al. , 2009] Annotations de services 4/15

[Nestler et al. , 2009] [Feldmann et al. , 2009] End-User Programming 1 ière approche: Composition Visuelle 5/15

1 ière approche: Composition Visuelle Auto-génération d’annotations + Annotations par un “Expert” Service Annotator Services (WSDL) Services Annotés [Nestler et al. , 2009] [Feldmann et al. , 2009] Génération de l’interface “abstraite” MARIA Transformations: 1)M 2 M 2)M 2 C Interface Finale Service Composer Introduction : plasticité des IHMs – Page 72 6/15

[Feldmann et al. , 2009] ième 2 [Janeiro, 2009] approche: Dirigée par les tâches 7/15

2 ième approche: Dirigée par les tâches Services Génération d’annotations (IHM + tâches) Génération des tâches intéractives + A partir des opérations du service + Une opération = une “tâche annotée” + Une “tâche annotée” = une tâche système MARIA Génération de l’interface “abstraite” Transformations: 1)M 2 M 2)M 2 C Interface Finale + Chaque tâche d’interaction = une fenêtre (par défaut) + Intervention du développeur : enlever les doublons Introduction : plasticité des IHMs – Page 74 [Feldmann et al. , 2009] [Janeiro, 2009] 8/15

Références [Nestler et al. , 2009] Service Composition at the Presentation Layer using Web Service Annotations [Feldmann et al. , 2009] Improving Task-driven Software Development Approaches for Creating Service-based Interactive Applications by using Annotated Web Services [Izquierdo et al. , 2009] An Annotation tool for enhancing the user interface generation for services [Feldmann et al. , 2009] An Integrated Approach for Creating Service-Based Interactive Applications [Janeiro, 2009] Retrieval of User Interface Templates Based on Tasks Introduction : plasticité des IHMs – Page 75 9/15

Projet RAINBOW : Besoins en informatique ambiante De nombreux services Des services métiers (apparition et disparition de fonctionnalités) Des services pour gérer les supports physiques et les interacteurs Des services contraints Des services sur l’étagère “boites noires” Des devices avec leurs caratéristiques Des usages variés Des utilisateurs nombreux et variés Chaque utilisateur a ses propres intérets et besoins Introduction : plasticité des IHMs – Page 76

Problématiques liées au domaine de l’utilisateur Adapter l’interface utilisateur à l’évolution du système Comment modifier l’IHM pour intégrer un nouveau service ? Adapter l’interface aux besoins utilisateurs Adaptation aux supports physiques : travaux sur les IHMs plastiques (IHMs abstraites et rendering, expression du modèle de tâches) Adaptation aux utilisateurs : travaux sur les IHMs (introduction de modèles de tâches, de profis) Adapter le système aux besoins utilisateurs Introduction : plasticité des IHMs – Page 78

Patterns Architecturaux de construction d’IHMs MVC (1979) (Model-View-Controller) PAC (1987) (Presentation-Abstraction-Control) C Controller P View A Model C P Arch Model (1992) C P C A . . . Introduction : plasticité des IHMs – Page 79 A P A . . .

Un modèle inspiré d’Arche pour les services Dialogue 1 Arche pour 1 service interactif Adaptor Services Fonctionnel Adaptor Services D’interaction N services fonctionnels et leurs interactions utilisateurs : comment fusionner le tout ? Introduction : plasticité des IHMs – Page 80

Quid des assemblages Comment fusionner 2 services respectant l’Arche ? Composition d’arches ? Assemblage des services fonctionnels Quid des dialogues ? Expression et fusion Quid des IHM? Expression et fusion

Travaux de références pour le domaine utilisateur Travaux composants (Fractal, SOA, Noah, WCOMP MODEL) Gestion de la dynamique de l’application (apparition et disparition de composants et de services) Expression des assemblages (orchestration, règles isl, langages d’aspects…) Sureté des assemblages Travaux sur l’IDM Modèles et transformation de modèles Fusion de modèles Travaux en IHMs Plasticité des interfaces Expression de modèles pour l’IHM (taches, dialogues…)

Nos spécificités Etre centré sur le dialogue : relation « fonctionnel et IHM » Déterminer le bon modèle de dialogue et avoir une architecture N-Arches Etre indépendant plateforme : s’appuyer sur un modèle Etre indépendant dispositifs : s’appuyer sur les modèles d’IHM pour la plasticité Faire collaborer des modèles et pouvoir les changer Assurer la dynamique de l’application : assembler à tous les niveaux Déduire au maximum les assemblages Trouver le bon niveau d’IHM abstrait

Adapter l’interface à l’évolution du système (priorité 1) S’adresse au développeur s gue o l a i D Intervention Si conflits Assemblage d’IHMs (Utilisation d’IHMs abstraites, puis Projection sur devices) Assemblage de services (Orchestrations, fusion d’aspects, Composants hiérarchiques) déduction Introduction : plasticité des IHMs – Page 84

Adapter l’interface aux besoins utilisateurs (priorité 2) 2 utilisateurs : le développeur ou l’utilisateur final Dialogue Choix des services – organisation de l’IHM Choix des devices IS Service Marks Service IS Service Web. Cal Service Device

Adaptation du système (priorité 3) Déduire l’assemblage pour un utilisateur

Points communs aux adaptations visées Conception Nouvelles Utilisations Exécution M IHMPréférences, Contexte d’utilisation … IHM Adaptation MPI MD Adaptation Noyau Fonctionnel Apparition, disparition de services. MP Evolution Noyau Fonctionnel Un langage abstrait orienté composition : SUNML puis LAIM / Flex Un composant d’IHM : représentation fractal Un modèle de dialogue et un modèle de plateforme Une collaboration entre les modèles

User Interfaces composition driven by the Functional Core composition SLIDES : CÉDRIC JOFFROY JOURNÉE DU PÔLE GLC 2010

Objective: compose existing applications Flight Application Compose these two applications to obtain a new one Virtual Travel Agency Application Introduction : plasticité des IHMs – Page 8989 Hotel Application

What is an application? User Interface part Application Interaction part Functional Core part Introduction : plasticité des IHMs – Page 9090 User can give input data User can see result User can trigger an event Exchange between the UI and the FC Trigger an operation call Contain the business logic Manipulate data Compute a result

Example of the hotel application User Interface Part (Flex) Hotel Application Interaction part Functional Core part (WSDL) Introduction : plasticité des IHMs – Page 9191

How can the developer compose applications? Flight Application UI FC She can create business process to describe functional core composition using BPEL (Web. Service) or Composite Component (SCA, Fractal…) Hotel Application UI FC Composed FC VTA Application What is happening to associate User Interfaces? Introduction : plasticité des IHMs – Page 9292

Future of existing UI for the composed FC Flight Application UI FC Loose of existing UI Rewriting or generating a new UI from scratch for the Composed FC Possibility of reuse in homogeneous UI New UI Composed FC VTA Application Introduction : plasticité des IHMs – Page 9393 Hotel Application UI FC

Problems encountered with the composition of applications How to keep the consistency between the functional part and the User Interface part after a composition? How to keep the way that user interacts with a known application? How to reuse existing user interfaces inside the composition? Introduction : plasticité des IHMs – Page 9494

Existing solutions to compose UI and FC independently FC composition (WS-BPEL[1], Fractal [2]): Describes interactions between components or services Describes usage of data in the services orchestration Uses services or components that describe operation prototypes UI composition (Amusing[3], Composi. XML[4]): Describes structural composition based on operations (union, intersection…) Uses UI description with a simple representation of UI (Sun. ML[3], Usi. XML[5]) Introduction : plasticité des IHMs – Page 9595

My solution to deal with applications composition Take advantages of functional composition that describe what is needed to use the new FC created Deduce from the functional composition UI elements to keep Have an homogeneous way to represent UI, FC and composition Create a framework to deal with all composition process with: A composition engine to manage the composition A metamodel to deal with application and FC composition Transformations to obtain information to compose Introduction : plasticité des IHMs – Page 9696

Framework to deal with applications composition Flight Application Hotel Application UI UI FC Composition FC FC VTA Application Composition engine . Deduction of UI elements to keep. Creation of the interaction links Obtain a new application Introduction : plasticité des IHMs – Page 9797 Composed UI FC FC

Alias. Component: a way to describe application and composition Describe UI and FC in terms of component Components contains two types of ports: Data port Action/Event port Describe an application as a FC component, a set of UI components and a set of bindings Describe an FC composition as a composite component that contains a set of FC components and bindings Introduction : plasticité des IHMs – Page 9898

Problems resolved by this metamodel Keep only information needed for the composition process UI elements that interact with the FC Links between UI and FC Functional composition with data and control flow Independant of any technologies Can manage multiple kind of FC or UI Keep the consistency between UI and FC by describing directly FC composition and application are in the same metamodels Introduction : plasticité des IHMs – Page 9999

Description of a FC inside Alias. Component A FC is described in terms of: Inputs Outputs Actions that corresponds to an operation An Action is associated to inputs and outputs to keep the prototype Keep only information about operation prototype 100 Introduction : plasticité des IHMs – Page 100

Example of the Hotel representation in Alias. Component Input Id: fc_input 1 Name: country Type: string Arity: SINGLE_REQUIRED Hotel FCComponent 101 Introduction : plasticité des IHMs – Page 101

Abstraction of a Web Service Action 1 types (internal or in a XSD) Inputs Outputs message port. Type binding service WSDL 102 Introduction : plasticité des IHMs – Page 102 Action 2 Inputs Outputs FCComponent id

Description of a UI inside Alias. Component A user interface is represented by: Inputs where user can put data Outputs to display a result Event to trigger a call of operation We keep only elements connected to the FC that correpsonds to Input, 103 Introduction : plasticité des IHMs – Page 103 Output and Action

Example of the research hotel UI in Alias. Component Input Id: ui_input 1 Name: Country Type: string Arity: SINGLE Hotel UIComponent 104 Introduction : plasticité des IHMs – Page 104

Description of an application inside Alias. Component 105 Introduction : plasticité des IHMs – Page 105

Example of the Hotel application Hotel UIComponent 106 Introduction : plasticité des IHMs – Page 106 Hotel FCComponent

Description of a FC Composition inside Alias. Component FC composition is represented by a composite component Subcomponents correspond to composed FC Links describe data exchange and operation calls 107 Introduction : plasticité des IHMs – Page 107

Example of BPEL control flow abstraction A BPEL workflow is transformed in a FCComposition Here, flow activity is transformed into a dispatch action link to trigger both operation in the same time 108 Introduction : plasticité des IHMs – Page 108

Example of BPEL dataflow abstraction Zoom on assign 109 Introduction : plasticité des IHMs – Page 109 activity Description of the dataflow Correspond to data. Link (between inputs, outputs, input -output) Here inputs are merged

Alias. Component: a full view of the metamodel ba 110 Introduction : plasticité des IHMs – Page 110

Other transformations on Alias. Component Interaction with the composition engine To put Prolog facts in entry of the composition engine To retrieve the result of the composition engine Concretization of the resulting UI To validate results by a visualization in some concrete UI like Java Swing or Flex 111 Introduction : plasticité des IHMs – Page 111

To summarize This metamodel covers the description of: Application with an FC, mutliple UI and interactions between both Functionnal Composition It is in the center of the composition process It is associated with transformations (abstraction, concretization and engine interaction) 112 Introduction : plasticité des IHMs – Page 112

References • [1]Diane Jordan, John Evdemon, Alexandre Alves, Assaf Arkin, Sid Askary, Charlton Barreto, Ben Bloch, Francisco Curbera, Mark Ford, Yaron Goland, et al. Web services business process execution language version 2. 0. OASIS Standard, 11, 2007 • [2]Objectweb Consortium. The Fractal Component Model, 2008 • [3]Anne-Marie Pinna-Dery and Jérémy Fierstone. Component model and programming : a first step to manage Human Computer Interaction Adaptation. In Mobile HCI’ 03, volume LNCS 2795, pages 456– 460, Udine, Italy, September 2003. L. Chittaro (Ed. ), Springer Verlag. • [6]Tsai, W. -T. , Huang, Q. , Elston, J. , and Chen, Y. Service-oriented user interface modeling and composition. In ICEBE ’ 08, pages 21– 28, Washington, DC, USA, 2008. IEEE Computer Society. • [7] Gabillon, Y. , Calvary, G. , and Fiorino, H. Composing interactive systems by planning. In Ubi. Mob’ 08, pages 37– 40, Saint Malo, France, 28 - 30 mai 2008. 113 Introduction : plasticité des IHMs – Page 113

Existing solutions to compose applications Work Principle Limitations SOA Planning Serv. Face SOAUI [6] Compose[7] Task driven [8] UI driven [9] Composition of known UI after the creation of a workflow Answer to a user need by creating all combination of UI Decoration of task trees with UI element + binding between system tasks and operations Give the possibility to have different kind of information on a same window No reuse of existing UI Dedicated to technology Annotation of services No Merge of UI Compose only known UI 114 Mashup i. Google, Yahoo Pipes

IHM • Abstraite: Structure en espaces de dialogue • Concrète : Fait le choix des interacteurs • Finale: Fait le choix de l’environnement de programmation et d’exécution Contexte d’usage • Environnement • Utilisateur • Plate-forme • Composant d’IHM Abstrait