Idm et ihm

IDM & IHM un point de vue

partiel

Mireille Blay-Fornarino (octobre 2016)

1

Ingénierie des modeles et Interactions Homme-Machine ?

• Objectifs de ce cours :

• Avoir une compréhension générale de l’IDM

• Appréhender la nécessité d’utiliser l’IDM dans la construction des IHMs

• Percevoir les bouleversements logiciels induits par les IHMs

2

Survol de quelques travaux prospectifs.

IHMs : Un point de vue développeur

• IHM = Ce qui fait vendre : essentiel

• IHM : Lourd à développer, tester, déployer, ....

• IHM & adaptation aux utilisateurs :

• l’enfer du développeur.

• IHM = Point d’entrée dans le système (pour l’utilisateur, c’est le produit !!)

• Agilité du code et IHM : .... ?

3


4

the graphical user interface (GUI) of an interactive system represents about 48% of the source code, requires about 45% of the development time and 50% of the implementation time, and covers 37% of the maintenance time (Myers and Rosson, 1992)

IHMs : Un point de vue développeur, « vous modifiez vos codes pour : »

5

Sondage en coursNombrederéponses Pourcentage

Trèssouvent 34 15,9%

77,6%Souvent 57 26,6%

Régulièrement 75 35,0%

Rarement 38 17,8%22,5 %

Jamais 10 4,7%

Somme 214


6

• La complexité des UI augmente dans le temps➡ nouveaux évènements, devices, use cases, interactions• Outils de mise en oeuvre des UI peu performants ou inexistants • Les outils de modélisation généraux ne sont pas adaptés à la

production des UI «modernes».

IHMs : Un monde en

pleine évolution

«logicielle»

7

IHMs : Un monde en pleine évolution «logicielle»

• Multiplicité des supports (et de leurs capacités)

• Déplacement de la production du logiciel vers des experts «métiers»

• Démocratisation du «numérique» (accessibilité, richesse)

8

• Multi-modalités

Société du numérique

9

"Le pouvoir du Web est son Universalité. Qu'il soit accessible par n'importe qui quel que soit son handicap est un de ses aspects essentiels." Tim Berners Lee - Directeur et inventeur du World Wide Web.

Loi n° 2005-102 du 11 février 2005 « Les services de communication publique en ligne des services de l’Etat, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées.

Appel H2020 : Cyber-Physical Systems (CPS) refer to next generation embedded ICT systems that are interconnected and collaborating including through the Internet of things, and providing citizens and businesses with a wide range of innovative applications and services. These are the ICT systems increasingly embedded in all types of artefacts making "smarter", more intelligent, more energy-efficient and more comfortable our transport systems, cars, factories, hospitals, offices, homes, cities and personal devices. Focus is on both reinforcing European industrial strengths as well as exploring new markets.

=> Développement centré utilisateur

=> Langages spécifiques domaines

=> Autres approches du développement logiciel


• Multiplicité des supports (et de leurs



• Intégration des IHMs aux environnements : documents collaboratifs; BD : phpmyadmin; Processus Métier : bonitaSoft ; googleMap ; ....

10



• Multiplicité des supports (et de leurs



• Intégration des IHMs aux environnements

➡ Exigences : Accélération de la production, grande adéquation à l’utilisateur et réduction des coûts

11


Mais ...• In many cases, the tools that exist rely on proprietary formats, or APIs

specific to particular programming languages, and this hinders developers from switching between tools, and this is increasingly a concern in a number of industries, e.g. aviation and automotive.

• The emergence of popular libraries such as jQuery demonstrate the importance of reducing the burden on developers, and the need to decouple the effort required to work on different aspects of design and implementation of interactive application front ends.

• If you are focusing on the usability or styling of a user interface, you shouldn't need to deal with the lower level details of how this will be realized on a given device or platform.

12

Une autre approche de la construction des IHMs

model-based user interface development environment (MBUIDE):

• includes a high-level, abstract and explicitly represented (declarative) model about the interactive system to be developed (either a task model or a domain model or both)”

• exploits a clear and computer-supported relation from (1) to the desired and running UI. That means that there is some kind of automatic transformation like knowledge-based generation or simple compilation to implement the running UI.“

13Past, Present, and Future of Model-BasedUser Interface , nov. 2011

(Schlungbaum, 1996)

From model-based user interface development environment (MBUIDE) to

Model Driven ....

14Past, Present, and Future of Model-BasedUser Interface , nov. 2011

Abstraction des GUI et Génération

b

Niveau sémantique : ex, modèles

de tâches

Interactions et Devices :

indépendance et choix

appropriésContext-

Sensitive & usability :

model driven and not

model based

Ingénierie des modèles : principes

http://www.theenterprisearchitect.eu/archive/2009/08/05/a-metaphor-for-model-driven-engineering

15

http://www.theenterprisearchitect.eu/archive/2009/08/05/a-metaphor-for-model-driven-engineering

L’Electricien et l’Informaticien

Un problème, des besoins

Un composant virtuel (des entrées des sorties)

Des portes AND, OR, NOR, …

Un schéma électrique

Le composant électrique Le programme informatique

Modèle

16 X. Blanc -Université Paris 6

Principes

17

From : Model-driven engineering: A survey supported by the unified conceptual model October 2015

To distinguish a model from any other type of artefact, Stachowiak proposes three criteria for their unique identification [40]: (1) Mapping criteria: It must be possible to identify the object or original phenomenon (of the system) that is represented or mapped in the model; (2) Reduction criteria: The model must be a simplified version of the original, so not all aspects of the original must be depicted in the model; and (3)Pragmatism criteria: The model has to be useful; namely it should be able to replace the original for certain purposes.

http://www.sciencedirect.com/science/article/pii/S1477842415000408#bib40

Principes

18


Principes

19


Modèles et métamodèles

20

Modèle

• définition du standard UML – "A model is an abstraction of a physical system, with a certain

purpose."

• "A model is a simplification of a system built with an intended goal in mind. The model should be able to answer questions in place of the actual system.“ : Bézivin et Gérbé

Magritte

21

Un modèle : un point de vue sur un système

Percentage of termite infestation

in France.

The System

Models

France in 1453 The cheese french map

Railroad map in western fFrance

System ModelrepOf22

http://geography.about.com/library/blank/france.jpg

Modèle : abstraction/simplification

Make everything as simple as possible, but not simpler. by Albert Einstein

Metro avant 1949

23

MDA proposed R&D Agenda : "Everything is a model"

… (or may be converted into a model), not only PIMs and PSMs 1. A process is a model 2. A platform is a model 3. A transformation is a model 4. A system is a model 5. A metamodel is a model 6. A model-element is a model 7. A program is a model 8. An execution trace is a model 9. A measure is a model 10.A test is a model 11.A decoration is a model 12.An aspect is a model 13.A pattern is a model 14.A legacy system is a model 15.etc.

24

Modèle représentant un modèle

Ce n’est pas un métamodèle !

25

Un modèle n’a pas de signification sans « son métamodèle »

Percentage of places infested by termites in France.

First round of political election in France in 2002.

26

Métamodèle dans l’IDM : vers des modèles productifs

• dans le contexte de l'IDM, Warmer et ses collègues donnent la définition suivante:

"A model is a description of (part of) a system written in a well-defined language"

• "A meta-model is a model that defines the language for expressing a model".

27

Des langages pour décrire des métamodèles

• Meta Object Facility (MOF) • Eclipse Modeling Framework (EMF) • Graph eXchange Language Metaschema (GXL) • UML 2.0 infrastructure • KM3

28

La pyramide des quatre niveaux

meta-meta modèle

meta

modèle

Données UtilisateurM0

M1

M2

M3

29

Relations entre les niveaux

the UML Meta-Model

Class Attribute*1

a UML Model

Client

Name : String

M2

M1

the MOF

Class Association

source

destination

M3

c2

c2

c2

metameta meta

metameta

metamodel

model

"the real world"

meta-meta model

The MOF

The UML metamodel

Some UML ModelsVarious usages of these modelsM0

M1

M2

M3

χ χ

χ χ χ

30

Les 4 niveaux de modélisation

• Hiérarchie à 4 niveaux existe en dehors du MOF et d'UML, dans d'autres espaces technologiques que celui de l'OMG – Langage de programmation

• M0 : l'exécution d'un programme • M1 : le programme • M2 : la grammaire du langage dans lequel est écrit le programme • M3 : le concept de grammaire EBNF

– XML • M0 : données du système • M1 : données modélisées en XML • M2 : DTD XML • M3 : le langage XML

31

Modélisation des tâches

32

http://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504/

http://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504/

MetaModèle de tâches

33

Modèle de tâches

34

<taskModel> <task id='root' name='Digital Home' type='abstract'> <relations> <enabling left='login' right='access' /> <deactivation left='access' right='close' /> </relations> </task> <task id='access' name='Control System' type='abstract' parent='root'> <relations> <choice> <task id='home' /> <task id='entmt'> <contextCondition situation='atHome' /> </task> <task id='presence' /> </choice> </relations> </task> <task id='home' name='Control Home' type='abstract' parent='access'> <relations> <choice> <task id='crooms' /> <task id='domesticappls' /> </choice> </relations> </task> <task id='croom' type='abstract' parent='home' name='Control Rooms'> <relations> <enablingInfo left='selroom' right='control' /> </relations> </task></taskModel>

Transformations de modèles

35

Write Once, Run Anywhere

CORBA

Java/EJBC#/DotNet

Web/XML/SOAP

PIM

etc.

Platform-Independent Model

Multi-target code generation

+ SVG, GML, Delphi, ASP, MySQL, PHP, etc.

data grid computing pervasive computing cluster computing

SMIL/Flash

[JB04]

Modèles neutres basés sur UML et MOF

Model Once, Generate Anywhere

36

Principes “généraux” MDA de génération de code

Conforms to Conforms to

37

Etapes du processus MDAwww.sqli.com/ressources/files/IBCom_mai2006_MDEMDA_ecourte.doc

CWM : Langage de modélisation pour les entrepôts de données, Common Warehouse Meta-model XMI : XML Model Interchange, le standard des échanges entre modèles PDM : Plateform Description Model 38

IDM pour les IHMS

39

image : http://www.festo.com/cms/fr_fr/9548.htm

http://www.festo.com/cms/fr_fr/9548.htm

Langages de descriptions

d’IHMs &

Transformations

40

Image : http://fr.wikipedia.org/wiki/Tour_de_Babel

1) MBUI &

2) FIML

http://fr.wikipedia.org/wiki/Tour_de_Babel

• The mission of the Model-Based UI Working Group, part of the Ubiquitous Web Applications Activity, is to develop standards as a basis for interoperability across authoring tools for context aware user interfaces for Web-based interactive applications.

41

http://www.w3.org/2011/mbui/

http://www.w3.org/2007/uwa/Activity.html

Cameleon Reference Framework

42

43

Abstraction levels for multi-platform development

http://www.w3.org/2005/Incubator/model-based-ui/wiki/Main_Page

Indépendant plateforme et

modalité

http://www.w3.org/2005/Incubator/model-based-ui/wiki/Main_Page

Exemple de transformation

44http://personales.upv.es/jopana/Files/Conferences/A_Proposal_for_Enhancing.pdf

http://personales.upv.es/jopana/Files/Conferences/A_Proposal_for_Enhancing.pdf

Cameleon Reference Framework : Transformations

45

Transformations

• Concretization : operation that transforms a particular model into another one of a lower level of abstraction, ex : the Task and Domain level (task model and/or the domain model) is “concretized” into an Abstract UI model,...

•Abstraction : operation that transforms a UI representation from any level of abstraction to a higher level of abstraction. Reverse engineering of user interfaces is a typical example of abstraction.

•Translation : operation that transforms a description intended for a particular context of use into a description at the same level of abstraction, but aimed at a different context of use.

The CAMELEON Reference Framework

46

http://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504/#crf

http://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504/#crf

Exemples à différents niveaux de modélisation

47

Digital Home

48http://www.w3.org/TR/mbui-intro/#uc2-digital-home

http://www.w3.org/TR/mbui-intro/#uc2-digital-home

IDM pour concevoir des IHM indépendante plateforme


?


The Task Model for the Digital Home.

50









UI development in the automotive industry to handle UI varieties and to increase

efficiency of UI development processes

53

Introduction to Model-Based User InterfacesW3C Working Group Note 07 January 2014

The idea was to devise a toolkit that would reduce the time it takes to develop the human machine interface, which puts controls for everything from the vehicle’s radio to advanced active-safety systems in front of the driver.

http://wardsauto.com/vehicles-amp-technology/project-aims-faster-development-hmi-systems


UI development in the automotive industry

Objectives : For example, if a designer produces a screen in Photoshop, software developed in the automotiveHMI project can pull the design data from the image, such as the color, size in pixels and location, and deliver it to the developer.

Each auto maker has its own rules for the look and feel it wants to present on its infotainment screens, and one aspect of the automotiveHMI language allows the OEM to prepare a sort of algorithm rulebook for its style and run this package of constraints on the developer’s version of a screen to identify errors early.

Orfgen says using the system should result in better quality, faster development and lower costs. Because the language is common, any supplier will be able to develop software for any auto maker, much redundancy in training will be reduced and developers will be able to spend more time improving content.

54


Sep 11, 2013 William Diem | WardsAuto

PROBLEM : «Car infotainment systems are currently developed using huge textual specifications that are refined iteratively while parallel being implemented. This approach is characterized by diverging specifications and implementation versions, change request negotiations and very late prototyping with cost-intensive bug fixing. Number and variety of involved actors and roles lead to a huge gap between what the designers and ergonomists envision as the final version, what they describe in the system specification and how the specification is understood and implemented by the developers.»


http://wardsauto.com/author/william-diem

UI development in the automotive industry to handle UI varieties and to increase

efficiency of UI development processes

55 http://www.w3.org/TR/mbui-intro/#uc6-automotive

In the automotive industry UIs are developed starting at the CUI level. Normally developers start with sketches, mock-ups or paper prototypes and iterate. On the basis of mock-ups interaction and graphical designers refine the mock-ups to wireframes and finally develop the graphical design e.g., with Adobe Photoshop. In the end the prototypes are manually transferred into a final UI for a specific infotainment system. The project automotiveHMI (http://www.automotive-hmi.org/) is developing a process and a UIDL to integrate the working artifacts of the involved developers to generate the FUI automatically.

http://www.w3.org/TR/mbui-intro/#uc6-automotive

http://www.automotive-hmi.org/

Différentes mises en oeuvre compatibles avec le Framework de Reference Cameleon

56

57http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/

Février 2015

http://www.omg.org/spec/IFML/

The UI Design solution: IFML

No model driven

engineering

Platform independent description of UIs

Focused on user interactions

No definition of graphics and styles

Reference external models

http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/


IFML Objectives: Content

Content



IFML Objectives : Navigation Path



IFML Objectives: Events

Mouse Over



IFML Objectives: Binding to Business logic



IFML Objectives: Binding to persistence

Content

Book

Title: string Cover: file List Price: currency Price: currency Save: currency Rating: integer ………



IFML Essentials (point de vue « user »)



IFML by example

BasicnavigationflowbetweenViewComponents

Artists List

Artists

Artist

Event

View Component

View Container ParameterBinding«ParameterBindingGroup» SelectedArtist -> AnArtist


65

IFML by example







69

IFML : Metamodels

70

IFML : Metamodels

InteractionFlowModel

71

ACER

72

ACER

73

ACER

74

ACER

Difficultés

• La transformation de modèles peut faire passer X à Z ... mais comment pouvons-nous assurer que l’utilisabilité n'est pas perdue dans ce processus?

• Comment combiner les transformations de modèles et l'intention des designers? quid des interaction à grains fins,...

• Dure de gérer les erreurs si les développeurs doivent passer par dans le code pour voir et corriger les spécifications

• Les langages de descriptions d’UI sont une des solutions adéquates pour le développement des interfaces utilisateur multi-plateformes, mais une étude plus approfondie devrait être menée pour comprendre comment les développeurs et les concepteurs les emploient dans la pratique

75

Mireille Blay-Fornarino – 2012 EPU département SI, Master STIC

MDD Principles

76

IDM pour améliorer la construction

des IHMs

77

Image : http://www.sapdesignguild.org/editions/edition3/interact_design.asp


78

Towards optimizing the usability of user interfacegenerated with model-driven development process,

Juin 2015

- Comment prendre en compte l’utilisabilité d’une IHM dès le début du développement?

- Comment contrôler sa génération pour assurer son utilisabilité?

79


Juin 2015

80

Evaluer l’utilisabilité d’une interface => quels métrics, quelles valeurs ?

ISO/IEC 9126-1standard


Juin 2015

Wi : Poids des paramètres d’utilisabilité (préférence utilisateur, caractéristique du device, ) Vi : sa valeur

The Information Density of a user interface can be measured by the number of elements per user interface:

where n represents the total number of UI elements per interface.81

Towards optimizing the usability of user interface generated with model-driven development process, Juin 2015

Critères d’utilisabilité basés sur l’interface concrète


The Prompting presented by a user in te r face can be measured in terms of the proportion of label that displays supplementary information:

where StaticField() returns the number of labels which displaythe supplementary information and n is the total number ofstatic field (label).

Brevity attribute (BR) can be quantified by the number of steps required to accomplish a task:

whe re d i s tance (x , y ) returns the distance between source screen(x) and the target screen (y).

The error prevention can be quantified by the percentage of the list primitive used instead of text field when the input e l e m e n t h a s a s e t o f enumerated values:

where list(x) returns the number of the list primitive and n is the number of input data elements with limited possible values.

The user control actions can be measured according to the degree of control assigned by the system which includes cancellability, undoability and explicit user actions:

where xi represents the action elements and n represents the total number of elements.

82

Quelle priorité en fonction des utilisateurs ?


Juin 2015

83




84



Expert InterfaceNovice Interface

Un exemple d’atelier dédié aux IHMs basé

sur l’IDM

85

Image : http://www.sapdesignguild.org/editions/edition3/interact_design.asp


Un exemple d’atelier basé sur l’IDM

86

On stories, models and notations: Storyboard creation as an entry point for model-based interface development with UsiXML

In Faure, D., Vanderdonckt, J., (Eds.), Proc. of 1st Int. Workshop on User Interface Extensible Markup Language UsiXML’2010 (Berlin,20 June 2010), Thales Research and Technology France, Paris, 2010

StoryBoard

http://research.edm.uhasselt.be/~kris/research/projects/StoryBoardML/

87

«To enable integration of ... storyboards with other models, we need a meta-model for these storyboards.»

http://research.edm.uhasselt.be/~kris/research/projects/StoryBoardML/

Un métamodele

pour les storyborad

88

89

l Set of models for describing UI (structure, presentation and dialog) at different abstract levels, including: l UI Model l Mapping Model l Domain Model l AUI Model l CUI Model l Task Model l Context Model l Transformation Model l Resource Model

Task Model Generation

90

module activity2task; create OUT : MUsiXmlTask from IN : Mstoryboard2; rule activity2task{ from a : Mstoryboard2!Activity to t : MUsiXmlTask!Task (name <- a.title) }

- Activités ➥ tâches- Scène ➥ structuration des tâches- Relations entre les scènes induisent des relations d’ordre entre les tâches

91

The meta-model for the UsiXML context model.

Partial Context Model Generation

92

- Persona ➥ userStereoType - Device element ➥ hardwarePlatform and softwarePlatform - Annotations

* Noise ➥ isNoisy property and set it to true. * Light ➥ lightningLevel property.

....

Mapping editor ;-)

93

IDM en support aux applications

complexes : Réalité

virtuelle

94

Image : http://www.irisa.fr/immersia/collaviz/


MDE en support aux applications complexes : Réalité virtuelle

95

• Collaviz framework (http://www.irisa.fr/immersia/collaviz/)

- création d’objets virtuels

- création de mondes virtuels- associations entre des objets physiques et des objets

virtuels

- interactions via les objets physiques avec les objets virtuels.

When Model Driven Engineering meets Virtual Reality:Feedback from Application to the Collaviz Framework

Thierry Duval∗Université Rennes 1

IRISA – UMR CNRS 6074Arnaud Blouin†

INSA RennesIRISA – UMR CNRS 6074

http://www.irisa.fr/immersia/collaviz/

public class A_Compass extends A_Tool implements IA_Compass { protected String northId ; protected IA_SupportedObject north; protected Transform targetTransform = null ; public A_Compass (String objectType, String objectName, IC_ObjectManager objectManager) { super (objectType, objectName, objectManager) ; parameters.put("North",northId); registerModificationCallback ("setNorth", new ICallbackHandler () { @Override public void callback (Object [] args) { setNorth((String)args[0]); } }); } ETC...

Un objet Virtuel dans Collaviz

96

public interface IA_Compass extends IA_Tool { void setNorth (String target); }

public interface IC_Compass extends IA_Compass, IC_Tool{}

public class CService_Compass extends CService_Tool

implements IC_Compass { public CService_Compass (IA_SharedObject abstraction, boolean referentProxyArchi, int accessLevel, CService_ObjectManager objectManager) { super (abstraction, referentProxyArchi, accessLevel, objectManager) ; } @Override public void setNorth (){ callModificationMethod ("setNorth"); } }


97

package org.collaviz.clientJava3D.pJava3D ; public interface IP_Compass extends IP_Tool, ISceneGraphObject {

public class PJava3D_Compass extends PJava3D_Tool implements IP_Compass { public PJava3D_Compass (IC_SharedObject ctr, Vector3d translation, Quat4d rotation, Vector3d scale, PJava3D_ObjectManager presObjManager, String geometry){ super (ctr, translation, rotation, scale, geometry, presObjManager) ; }

Présentation


98

<virtualObject id="compass1" type="Compass"> <owners>All</owners> <accessLevel>3</accessLevel> <param name="Support" type="String">support</param> <param name="north" type="String">north</param> </virtualObject>

<virtualObject id="support" type="Tool"> ...</virtualObject>

<virtualObject id="north" type="SupportedObject">... </virtualObject>

<virtualObject id="Hand1_User1" type="Cursor3D"> <param name="Offset" type="Transform"> 0 0 0 0 0 0 0.03 0.03 0.03</param> <param name="Color" type="Color">1.0 0.0 0.0</param> <param name="Geometry" type="String">cube</param> </virtualObject>

Instanciation des objets virtuels

processus pour aider la génération des composants

99

DSL pour les

designers

1- Modéliser les objets virtuels

Un métamodèle dédié à Collaviz

100

Un modèle d’objet virtuel

101

Utilisation de l’éditeur basé sur

le MM.

Réalité virtuelle : processus

102

2- Associer les objets virtuels

et leur représentation


103

http://www.eclipse.org/sirius/

Association des représentations 2D dans un atelier dédié pour lequel le modèle du domaine a été généré.

Construction «automatique» d’un «éditeur» pour construire les mondes virtuels.

http://www.eclipse.org/sirius/


104

Instanciations

Enrichissement des IHMs par l’IDM

105Travaux de S. Dupuy-Chessa, Grenoble

Les grandes personnes ne comprennent jamais rien toutes seules, etc’est fatigant, pour les enfants, de toujours et toujours leur donnerdes explications.Antoine de Saint-Exupéry

UsingSo)wareMetricsintheEvalua6onofa

ConceptualComponentModel

IHMauto-explica;ves

Pourquoi?Quoi?

Où?

Comment?

Interfaceauto-explicaQve

...ÀsélecQonnerl’horairedelasaisied’absences

Aquoiserventlescasesvertes?

Auto-explicaQonparlesmodèles

106

Exploitation du modèle d’Interface Concrète Utilisateur (CUI)

107

Users need your models!Exploiting Design Models for ExplanationsGarc´ıa Frey Calvary Dupuy-Chessa

IDM pour raisonner sur les IHMS

108Travaux de Ch. Brel, Sophia Antipolis

UI Modeling as Ontology for Composition – Christian Brel

IncreasingnumberofapplicaQons

109

Desktop/Mobile/Web


IntegraQonofsamefuncQonaliQesinseveralapplicaQons

110

Encyclopedia

SocialNetwork

HotelBooking

Movie Database

Travel Plan


ReusefuncQonaliQeswithoutdevelopment

111

Adding Movie Theaters localization


AninteracQvesystemtocomposeapplicaQons

112

UI 2

Businesspart 2

UI 1

Businesspart 1



113

New UI = UI1 + UI2

UI 2

Businesspart 2

UI 1

Businesspart 1



114

New UI = UI1 + UI2

UI 2

Businesspart 2

UI 1

Businesspart 1


PortsandRoles ChoixdumétamodèleadaptéàlacomposiQon

115

Application Element

Input

Trigger

Output


PortsandRoles ChoixdumétamodèleadaptéàlacomposiQon

116

E1,Controller

ComboBox1,View

E2,Functionality

E3,Functionality

TextField1,View

Button1,View

TextArea1,View

Button2,View

Input1

Input2

Trigger1Trigger2

Output1

Output2

Trigger3

Output3 Output4

Trigger4

UI Modeling as Ontology for Composition – Christian Brel 117

Element2,Role2

Element,Role

Element3,Role3

Element4,Role4

Element5,Role5


ComposiQonparsubsQtuQon

118

Element2,Role2

Element,Role

Element3,Role3

Element4,Role4

Element5,Role5

IDM support au raisonnement

• Réutilisation d’applications et des Interfaces utilisateur associées.

• Les modèles capturent les éléments essentiels au raisonnement et son évolution.

119

Adaptation au contexte d’usage par les modèles

120

At the Cross-Roads between Human-Computer Interaction and Model Driven Engineering

Gaëlle Calvary, Anne-Marie Dery-Pinna, Audrey Occello, Philippe Renevier-Gonin, Michel Riveill

in ARPN Journal of Systems and Software (AJSS), 4 (3), pages 64-76, ARPN, May 2014

Usines logicielles Pour et par les IHMs

121

image : http://blog.valtech.fr/2009/09/

Travaux de S. Urli, Sophia Antipolis

http://blog.valtech.fr/2009/09/

Ligne de produits

122

Production manuelleProduction personnalisée

Production de masse

Ligne de produits

123

logiciels

Programmation

Production personnalisée

graph-add graph-movegraph-select

graph-manipulate

moving-modemoving-constraint

outline-move content-move

graph-delete

entity-add connector-add

graph-compose

select-mode

increment-select nonincrement-select

hori-constraint verti-constraint

dimension-valuefeature

whole-part relationoptional

graph-dim

3D 2D

alternative

orrequire

mutex

Modélisation de la variabilité :

Feature Models

Des modèles de variabilité aux codes

124

125

Une IHM, des Styles, ... des IHMs* !

*IHM : Interaction Homme-Machine

Modélisation des «renderers» comme une ligne de produit ;

Modélisation des layout comme une ligne de produits ;

126



Modélisation des «renderers» comme une ligne de produit ;

Modélisation des layout comme une ligne de produits ;

127



Règles d’ergonomie? Contexte d’usage ?

Ligne de produits Logiciels et Configurateurs ?

128

Programmation

Production personnalisée

graph-add graph-movegraph-select

graph-manipulate

moving-modemoving-constraint

outline-move content-move

graph-delete

entity-add connector-add

graph-compose

select-mode

increment-select nonincrement-select

hori-constraint verti-constraint

dimension-valuefeature

whole-part relationoptional

graph-dim

3D 2D

alternative

orrequire

mutex

Modélisation de la variabilité :

Feature Models

Des modèles aux IHMs de configuration

129

Enrichir les Feature Models par des annotations

graphiques

Génération

Ergonomie, passage à l’échelle, ...

En conclusion Usine logicielle & IHM

• Un rapprochement évident pour les deux «partis»

• De beaux défis pour les deux partis.

130

131

En conclusion Usine logicielle & IHM : PBME

DIFFICLE !!

IHMS pour l’IDM

132

IMAGES : http://www.123rf.com/photo_15881605_illustration-of-people-doing-business-inside-the-virtual-world-of-internet.html

http://www.123rf.com/photo_15881605_illustration-of-people-doing-business-inside-the-virtual-world-of-internet.html

Model driven software migration : Abstraction

133

• Code = la logique applicative, la persistance, la gestion des erreurs, ...➡ on attend d’un modèle de réduire la complexité en allant à l’essentiel.

• Deux points de départ à l’abstraction : ➡ la structuration des codes et ➡ les interfaces internes et externes des programmes : en particulier les

GUI !Les menus, options, .. représentent des points d’entrées d’actions utilisateurs possibles : l’ensemble des points d’entrées dans les processus métier!

➡Un modèle du code est obtenu par «abstraction» des codes sous-jacent aux GUI.

Model-Driven Software Migration: A Methodology: Reengineering, Recovery and Modernization of Legacy Systems (Google eBook), Christian Wagner, Springer Science & Business Media, Mar 10, 2014

http://www.google.fr/search?tbo=p&tbm=bks&q=inauthor:%22Christian+Wagner%22

Emergence du métamodèle ?

134https://openflexo.org

https://openflexo.org

Expression & visualisation de la complexité

135http://www.iutbayonne.univ-pau.fr/~roose/gdri3/images/ThomasPolacsek.pdf

http://www.iutbayonne.univ-pau.fr/~roose/gdri3/images/ThomasPolacsek.pdf







Spécification dirigée par les IHMs

138

http://arstechnica.com/science/2015/08/mit-claims-to-have-found-a-language-universal-that-ties-all-languages-together/

Systèmes complexes : de la specification par l’exemple à la génération d’IHMS

139Designing Functional Specifications for Complex Systems, HCI 2016

- Controlling such a system onboard requires widgets for high-level control and monitoring, allowing functions to be run more easily. - Functional specifications are user’s sequences of actions on the system, required for

performing functions taking into account all possibilities (configurations).

- The task of the expert in system design is to define these functional specifications. S/he writes these latter in natural language, and then provides them to the designers of the supervision interface and the control-command code. - The designers’ job is to implement and integrate these specifications into the system.- - Specification interpretation errors come from the difference of technical knowledge

between prescribers (mechanic engineers) and designers (computer system engineers and/or control-command engineers)

Case Study : a system for the production, storage and distribution of fresh water, onboard a ship

Spécification d’un système complexe


Spécification d’un système complexe


- 7 functions to be specified (transfer, treatment, embedded distribution, distribution from quay, production, loading and unloading)

- Each function can be performed according to several configurations.

- Possibility of performing several functions simultaneously.

- The expert’s task is to define

- 73 unit configurations (functional specification)

- and simultaneous executions

- S/He provides them to the designers of the supervision interface and the control-command code. The designer’s job is then to implement and integrate these specifications into the system.

Processus de production du Système : exemple


Processus de production du Système


Systèmes complexes : de la specification par l’exemple à la génération d’IHMS


Où est l’IDM?

IDM & IHMS pour maitriser les nouvelles applications

145Travaux de Ivan Logre, Sophia Antipolis

Des millions d’«objets» connectés

➡ Dashboards : pour «analyser», «comprendre», «apprendre», ....

146

Des widgets dédiées

147

1,790,000 results for Data Visualization Tools

HIER !

Des Besoins «utilisateurs» variés

148

Une approche basée sur la composition de modeles «as services»

149

A Unified framework for the comprehension of software’s

Time dimension (ICSE ’15)

150

Software development Teams in different locations Long period of time: team restructuring Rarely from scratch

Software engineering tools and techniques Two research communities

Evolution comprehension Execution comprehension

Time representation •Visualization ‣ Axis ‣Graphical attribute ‣ Animation •Automatic approaches ‣ Sequence of events ‣ Comprehension models

Color Weaving

152

153

https://youtu.be/eSijgKLV_zQ

DSL & IHM



En conclusion

• DES Standards, langages, .... • Ingénierie des modèles : un outil (pas

seulement «statique»)➡ Monter en abstraction pour améliorer la

production logicielle de l’IHM➡ Intégrer la prise en compte de l’IHM comme

une activité première de la construction d’un logiciel

154

Pour continuer

➡ Une étude plus approfondie du sujet

155

At the Cross-Roads between Human-Computer Interaction and Model

Driven Engineering Gaëlle Calvary, Anne-Marie Dery-Pinna, Audrey Occello, Philippe Renevier-Gonin, Michel Riveill

in ARPN Journal of Systems and Software (AJSS), 4 (3), pages 64-76, ARPN, May 2014

Pedagogical Issues

156

Education

Idm et ihm