La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

IHM et plasticité Anne-Marie Déry IHM et Différents supports Différents utilisateurs Différents environnements.

Présentations similaires


Présentation au sujet: "IHM et plasticité Anne-Marie Déry IHM et Différents supports Différents utilisateurs Différents environnements."— Transcription de la présentation:

1 IHM et plasticité Anne-Marie Déry IHM et Différents supports Différents utilisateurs Différents environnements Problématique - aperçu des solutions industrielles et recherche

2 Plasticité des interfaces Un peu dhistoire … Introduction du terme à Interact99 Capacité dune interface à sadapter à son contexte dusage dans le respect de son utilisabilité Contexte dusage Plate-forme Environnement Utilisateur (2001)

3

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

5 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

6 Motivations et exemples dapplications visées

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

8 Introduction : plasticité des IHMs – Page 8 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 linteraction ? Pourquoi ? Impact sur la présentation ? Impact sur lenchaînement des taches Besoin identifié par un changement denvironnement (arrivée dans un lieu public) - Besoin provoqué par lutilisateur (changement de matériel, mains occupées par une tache ?)

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

10 Introduction : plasticité des IHMs – Page 10 Besoins en plasticité Nouveau matériel Changement de voiture Sortie dune 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 lutilisateur ou de son environnement professionnel ou du niveau dexpertise

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

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

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

14 Introduction : plasticité des IHMs – Page 14 Besoins en plasticité Au domicile Des utilisateurs différents du même service Des supports différents selon les pièces et lactivité A lexté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 lunivers professionnel Supports privés et supports professionnels : taches fixées Dun lieu à un autre Continuité de services

15 Introduction : plasticité des IHMs – Page 15 Espace problème Domaine de plasticité Seuil de plasticité Domaine de plasticité C2 Contexte non couvert C1 Contexte couvert par lIHM

16 Introduction : plasticité des IHMs – Page 16 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 lexécution – faciliter la vie de lutilisateur final Faire migrer une application dun support à un autre Faciliter lusage – conserver les habitudes tout en profitant des spécificités des supports

17 Introduction : plasticité des IHMs – Page 17 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

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

19 Au début il y avait …..

20 Approche à la conception basée sur des Traducteurs XML XSL HTML VoiceML WML Au centre une interface XMLisée

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

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

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

24 Bref historique concernant les acteurs

25 Quand les organismes de normalisation sy mettent … OASIS et W3C

26 UIML dérivé d'XML permettant de décrire des interfaces graphiques.XMLinterfaces graphiques Il y a des outils (renderers) qui convertissent une représentation d'UIML en représentation pour divers GUI (par exemple Java awt).GUIJava 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.libre 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:UIML 1.0: Décembre 1997 UIML 3.1:UIML 3.1: Mars UIML 4

27 W3C comment trouver linfo Quelles infos et comment zoomer

28 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: : metadata (author, date, version,...) : réutilisation de fragments : interface proprement dite : arbre des « widgets » : styles (propriétés) des widgets : contenu (texte, image, son) : objet / événement / action : mappings et liens vers l'extérieur

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

30 User Interfaces langages XML dans tout ses états

31 Introduction : plasticité des IHMs – Page 31 Recommandations W3C (World Wide Web Consortium) 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.CC/PP 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.RDF

32 Introduction : plasticité des IHMs – Page 32 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. Recommandations W3C

33 Introduction : plasticité des IHMs – Page 33 XForms 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 lauthentification, lutilisabilité et laccessibilité, le device independence, linternationalisation, et lintégration pour plusieurs langages cibles tout en réduisant la mise en œuvre de traducteurs.

34 Introduction : plasticité des IHMs – Page 34 Mobile Web Initiative W3C 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 linteroperabilité entre logiciels webs et lusage du mobile au niveau social. Ils accueillent des groupes de travail sur la thématique générale de lutilisation des mobiles 1ere consigne : Design for one web (cf )

35 Introduction : plasticité des IHMs – Page 35 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

36 Introduction : plasticité des IHMs – Page 36 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)

37 Introduction : plasticité des IHMs – Page 37 ui/charter/ Model-based User Interfaces Incubator Group Charter Model-based User Interfaces Incubator Group, 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 dUsiXML font partie de ce groupe de réflexion

38 Quand les RIA sont inspirés

39 Introduction : plasticité des IHMs – Page 39 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 !... RIAs

40 Introduction : plasticité des IHMs – Page 40 AJAX : un ensemble de techno open source éprouvées Asynchronous Javascript And XML Utilisation combinée nouvelle Autres offres Adobe Flex (2004) : Microsoft Silverlight (2006) : Sun JavaFX (2008) : Mozilla XUL (XML User Interface Language) Solutions RIAs disponibles Source : Google Insights

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

42 Introduction : plasticité des IHMs – Page 42 Elips Open-Plug Créateur dELIPS Créée en 2002, Open-Plug est basée à Sophia-Antipolis. Open-Plug est membre de la Fondation LiMo (Linux Mobile Foundation). Fruit de 5 ans de R&D et a fait lobjet 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 limplémentation de nouvelles solutions logicielles et la création dinterfaces utilisateurs. Pour réutiliser leurs développements dune plateforme de téléphone à lautre et développer des variantes de leurs produits plus rapidement.

43 Quand les chercheurs sen mêlent…

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

45 Exemples darticles EMMA pour la Plasticité en Mobilité In Actes de la 20ème Conférence francophone sur lInteraction Homme-Machine (IHM2008, Metz, France, Septembre 2008) Vincent GanneauVincent Ganneau, Rachel Demumieux, Gaëlle Calvary DemumieuxGaëlle Calvaryhttp://iihm.imag.fr/publication/GDC08a/ Model-Driven Engineering of Multi-Target Plastic User Interfaces In Proc. of 4th International Conference on Autonomic and Autonomous Systems ICAS pages Benoit CollignonBenoit Collignon, Jean Vanderdonckt, Gaëlle CalvaryJean VanderdoncktGaëlle Calvary D. Greenwood, M. Grottke, H. Lutfiyya, M. Popescu (eds.), IEEE Computer Society Press, Los Alamitos, Gosier, March 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 9th IASTED International Conference Software Engineering and Applications (SEA'08), IASTED, pages , ACTA Press, Orlando, Florida, USA, nov 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é, 2004Premières Journées Francophones: Mobilité et Ubiquité

46 VISITE DE TRAVAUX DE RECHERCHE AUTOUR DE LA PLASTICITÉ

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

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

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

50 3G Mobile Context Sensitive Adaptability - User Friendly Mobile Work Place for Seamless Enterprise Applications CONSENSUS (PROJET Européen terminé en 2004) SLIDES : CÉDRIC ULMER

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

52 Introduction : plasticité des IHMs – Page 52 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 sets of application UIs need to be created!

53 Introduction : plasticité des IHMs – Page 53 State of the Art: Adaptation - Transcoding Usability: Declined! Application-independent adaptation: mA multitude of screens m15 numbers have to be entered

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

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

56 Introduction : plasticité des IHMs – Page 56 Renderer Independent Markup Language: RIML (contnd) 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 Usability Analysis leads to a limited number of Device Classes which represent devices behaving similar from a users / usability perspective

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

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

59 Introduction : plasticité des IHMs – Page 59 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 dIHM, composants services…) Sappuyer sur les infrastructures systèmes (RMI, EJB, …) Fournir une plate-forme à composants Exemples : Agenda collaboratif Gestion commerciale (facturations, commandes, client, fournisseur)

60 Introduction : plasticité des IHMs – Page 60 Spécificités des applications et contraintes IHMs Changement du contexte d'exécution du composant (dutilisation de fonctionnalités) d'une station à un PDA, un téléphone portable … "Reconfiguration" du composant Retrait / ajout de composants (demande de fonctionnalités, de services) Composition de composants Comment réutiliser une IHM existante sur un support différent ? Comment composer les IHMs des composants métiers ? 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…

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

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

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

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

65 Introduction : plasticité des IHMs – Page 65 De lIHM abstraite vers lIHM concrète JFrame1 JPanel1 JLabel1JField1... IHM concrète (Exécution) Projection FicheClient MainDialog LabelFieldNomFieldNom... IHM abstraite (Exécution) HMI Dialog Field JFrame JPanel JTextFieldJLabel... Nom : Toto... Fichier SUNML (Spécification) Réification durand Composant métier (Exécution) ? ? ?

66 Introduction : plasticité des IHMs – Page 66 Exemple de Liste de Clients Fichier SUNML (spécification) Exemple en Swing Composition Représentant – Client (1-n) : Liste de clients

67 Introduction : plasticité des IHMs – Page 67 De lIHM abstraite vers lIHM concrète Séparation du composant dIHM du composant métier Expression des communications possibles entre ces composants avec ISL Adaptation des composants suivant le contexte dexécution durand FicheClient IHM concrète IHM abstraite Composant métier JFrame1 Légende Instance interaction Controleur

68 SERVFACE SERVICE ANNOTATIONS FOR USER INTERFACE COMPOSITION PROJET EUROPÉEN /

69 Introduction : plasticité des IHMs – Page 69 Vue densemble + Annotations de services avec des éléments dinterfaces + Composition de services + Génération de linterface 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 3/15

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

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

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

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

74 Introduction : plasticité des IHMs – Page 74 2 ième approche: Dirigée par les tâches 8/15 [Feldmann et al., 2009] [Janeiro, 2009] Transformations: 1)M2M 2)M2C Transformations: 1)M2M 2)M2C Interface Finale Services Génération dannotations (IHM + tâches) + 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 Génération des tâches intéractives + Chaque tâche dinteraction = une fenêtre (par défaut) + Intervention du développeur : enlever les doublons + Chaque tâche dinteraction = une fenêtre (par défaut) + Intervention du développeur : enlever les doublons Génération de linterface abstraite MARIA

75 Introduction : plasticité des IHMs – Page 75 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 9/15

76 Introduction : plasticité des IHMs – Page 76 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

77 Introduction : plasticité des IHMs – Page 77 Etude de cas privilégiée : les bâtiments équipés Un bâtiment universitaire équipé : SEDUITE Des services métiers : News, Timetable, Marks,.. Des devices variés : écrans plasma, PDA, téléphone mobile, ordinateur personel,...)

78 Introduction : plasticité des IHMs – Page 78 Problématiques liées au domaine de lutilisateur Adapter linterface utilisateur à lévolution du système Comment modifier lIHM pour intégrer un nouveau service ? Adapter linterface 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 Construire des applications personnalisées à partir des IHM

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

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

81 Quid des assemblages Comment fusionner 2 services respectant lArche ? Composition darches ? Assemblage des services fonctionnels Quid des dialogues ? Expression et fusion Quid des IHM? Expression et fusion

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

83 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 : sappuyer sur un modèle Etre indépendant dispositifs : sappuyer sur les modèles dIHM pour la plasticité Faire collaborer des modèles et pouvoir les changer Assurer la dynamique de lapplication : assembler à tous les niveaux Déduire au maximum les assemblages Trouver le bon niveau dIHM abstrait

84 Introduction : plasticité des IHMs – Page 84 Adapter linterface à lévolution du système (priorité 1) déduction Assemblage de services (Orchestrations, fusion daspects, Composants hiérarchiques) Assemblage dIHMs (Utilisation dIHMs abstraites, puis Projection sur devices) Intervention Si conflits Dialogues Sadresse au développeur

85 Adapter linterface aux besoins utilisateurs (priorité 2) 2 utilisateurs : le développeur ou lutilisateur final Choix des services – organisation de lIHM Choix des devices Dialogue Device IS Service Marks Service IS Service WebCal Service IS Service WebCal Service

86 Adaptation du système (priorité 3) Déduire lassemblage pour un utilisateur

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

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

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

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

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

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

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

94 Introduction : plasticité des IHMs – Page 94 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? 94

95 Introduction : plasticité des IHMs – Page 95 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], ComposiXML[4]): Describes structural composition based on operations (union, intersection…) Uses UI description with a simple representation of UI (SunML[3], UsiXML[5]) 95

96 Introduction : plasticité des IHMs – Page 96 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 96

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

98 Introduction : plasticité des IHMs – Page 98 AliasComponent: 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 98

99 Introduction : plasticité des IHMs – Page 99 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 99

100 Introduction : plasticité des IHMs – Page 100 Description of a FC inside AliasComponent 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

101 Introduction : plasticité des IHMs – Page 101 Example of the Hotel representation in AliasComponent Hotel FCComponent Input Id: fc_input1 Name: country Type: string Arity: SINGLE_REQUIRED 101

102 Introduction : plasticité des IHMs – Page 102 Abstraction of a Web Service WSDL service binding portType message types (internal or in a XSD) FCComponent id Action1 Action2 InputsOutputs InputsOutputs 102

103 Introduction : plasticité des IHMs – Page 103 Description of a UI inside AliasComponent 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, Output and Action 103

104 Introduction : plasticité des IHMs – Page 104 Example of the research hotel UI in AliasComponent Hotel UIComponent Input Id: ui_input1 Name: Country Type: string Arity: SINGLE 104

105 Introduction : plasticité des IHMs – Page 105 Description of an application inside AliasComponent 105

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

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

108 Introduction : plasticité des IHMs – Page 108 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

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

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

111 Introduction : plasticité des IHMs – Page 111 Other transformations on AliasComponent 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

112 Introduction : plasticité des IHMs – Page 112 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

113 Introduction : plasticité des IHMs – Page 113 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 HCI03, volume LNCS 2795, pages 456–460, Udine, Italy, September 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, IEEE Computer Society. [7] Gabillon, Y., Calvary, G., and Fiorino, H. Composing interactive systems by planning. In UbiMob08, pages 37–40, Saint Malo, France, mai

114 Existing solutions to compose applications SOAPlanningServFaceMashup Work SOAUI [6]Compose[7]Task driven [8] UI driven [9] iGoogle, Yahoo Pipes Principle 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 Limitations Compose only known UI No reuse of existing UI Dedicated to technology Annotation of services No Merge of UI 114

115 IHM Abstraite: Structure en espaces de dialogue Concrète : Fait le choix des interacteurs Finale: Fait le choix de lenvironnement de programmation et dexécution Contexte dusage Environnement Utilisateur Plate-forme Composant dIHM Abstrait


Télécharger ppt "IHM et plasticité Anne-Marie Déry IHM et Différents supports Différents utilisateurs Différents environnements."

Présentations similaires


Annonces Google