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

développeur
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 coursNombre de
réponses
Pourcentage
Très souvent 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

développeur
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
speciﬁc 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.“
13
Past, Present, and Future of Model-Based
User Interface , nov. 2011
(Schlungbaum, 1996)

From model-based user interface
development environment (MBUIDE) to
Model Driven ....
14
Past, Present, and Future of Model-Based
User Interface , nov. 2011
Abstraction
des GUI et
Génération
b
Niveau
sémantique :
ex, modèles
de tâches
Interactions
et Devices :
indépendanc
e et choix
appropriés
Context-
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

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.

Principes
18

Principes
19

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 ModelrepOf
22

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 Utilisateur
M0
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 Models
Various 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/

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/EJB
C#/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 MDA
www.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

Langages de
descriptions
d’IHMs
&
Transformations
40
Image : http://fr.wikipedia.org/wiki/Tour_de_Babel
1) MBUI
&
2) FIML

• 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

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é

Exemple de transformation
44
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

Exemples à différents
niveaux de modélisation
47

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

IDM pour concevoir des IHM
indépendante plateforme
49
http://www.w3.org/TR/mbui-intro/#uc2-digital-home
?

The Task Model for the
Digital Home.
50

51

52

UI development in the automotive industry
to handle UI varieties and to increase
efficiency of UI development processes
53
Introduction to Model-Based
User Interfaces
W3C 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
http://wardsauto.com/vehicles-amp-technology/project-aims-faster-development-hmi-systems
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.»

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.

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

57
http://modeling-languages.com/ifml-interaction-ﬂow-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

58
IFML Objectives: Content
Content

59
IFML Objectives : Navigation Path

60
IFML Objectives: Events
Mouse Over

61
IFML Objectives: Binding to Business logic

62
IFML Objectives: Binding to persistence
Content
Book
Title: string
Cover: file
List Price: currency
Price: currency
Save: currency
Rating: integer
………

63
IFML Essentials (point de vue « user »)

64
IFML by example
Basic navigation flow between ViewComponents
Artists
List
Artists
Artist
Event
View Component
View Container ParameterBinding«ParameterBindingGroup»
SelectedArtist -> AnArtist

66

67

68

70
IFML : Metamodels
InteractionFlowModel

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 ﬁns,...
• Dure de gérer les erreurs si les développeurs doivent passer par
dans le code pour voir et corriger les spéciﬁcations
• 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 interface
generated 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 interface can be
measured in terms of the
proportion of label that displays
supplementary information:
where StaticField() returns the
number of labels which display
the supplementary information
and n is the total number of
static field (label).
Brevity attribute (BR)
can be quantified by the
number of steps required
to accomplish a task:
where distance(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
process, Juin 2015

84
process, Juin 2015
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.»

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.
....

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 6074
Arnaud Blouin†
INSA Rennes
IRISA – UMR CNRS 6074

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

processus
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.

processus
104
Instanciations

Enrichissement des
IHMs par l’IDM
105
Travaux de S. Dupuy-Chessa, Grenoble
Les grandes
personnes ne
comprennent
jamais rien toutes
seules, et
c’est fatigant, pour
les enfants, de
toujours et toujours
leur donner
des explications.
Antoine de Saint-
Exupéry

Using So)ware Metrics in
the Evalua6on of a
Conceptual Component
Model
IHM auto-explica;ves
Pourquoi?
Quoi?
Où?
Comment?
Interface auto-explicaQve
... À sélecQonner l’horaire de la
saisie d’absences
A quoi servent les cases
vertes?
Auto-explicaQon par les modèles
106

Exploitation du modèle d’Interface
Concrète Utilisateur (CUI)
107
Users need your models!
Exploiting Design Models for Explanations
Garc´ıa Frey
Calvary
Dupuy-Chessa

IDM pour raisonner
sur les IHMS
108
Travaux de Ch. Brel, Sophia Antipolis

UI Modeling as Ontology for Composition – Christian Brel
Increasing number of applicaQons
109
Desktop/Mobile/Web

IntegraQon of same funcQonaliQes in several
applicaQons
110
Encyclopedia
Social 
Network
Hotel 
Booking
Movie 
Database
Travel 
Plan

Reuse funcQonaliQes without development
111
Adding Movie Theaters localization

An interacQve system to compose applicaQons
112
UI 2
Business 
part 2
UI 1
Business 
part 1

113
New UI =  
UI1 + UI2
UI 2
Business 
part 2
UI 1
Business 
part 1

114
New UI =  
UI1 + UI2
UI 2
Business 
part 2
UI 1
Business 
part 1

Ports and Roles
Choix du métamodèle adapté à la composiQon
115
Application Element
Input
Trigger
Output

Ports and Roles
Choix du métamodèle adapté à la composiQon
116
E1,
Controller
ComboBox1,
View
E2,
Functionality
E3,
Functionality
TextField1,
View
Button1,
View
TextArea1,
View
Button2,
View
Input1
Input2
Trigger1
Trigger2
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

ComposiQon par subsQtuQon
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

Ligne de produits
122
Production manuelle
Production personnalisée
Production de masse

Ligne de produits
123
logiciels
Programmation
graph-add graph-movegraph-select
graph-manipulate
moving-mode
moving-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
or
require
mutex
Modélisation de
la variabilité :
Feature Models

Des modèles de
variabilité aux codes
124

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 ;

Une IHM, des Styles, ... des IHMs* !
*IHM : Interaction Homme-Machine
Règles d’ergonomie?
Contexte d’usage ?

Ligne de produits Logiciels
et Configurateurs ?
128
Programmation
graph-add graph-movegraph-select
graph-manipulate
moving-mode
moving-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
or
require
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éﬁs 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

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

Emergence du métamodèle ?
134
https://openﬂexo.org

Expression & visualisation de
la complexité
135
http://www.iutbayonne.univ-pau.fr/~roose/gdri3/images/ThomasPolacsek.pdf

Expression & visualisation de
la complexité
136
http://www.iutbayonne.univ-pau.fr/~roose/gdri3/images/ThomasPolacsek.pdf

Expression & visualisation
de la complexité
137http://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
139
Designing 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
140

Spécification d’un système complexe
141
- 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
142

Processus de production du Système
143

Systèmes complexes : de la specification par
l’exemple à la génération d’IHMS
144
Où est l’IDM?

IDM & IHMS pour maitriser
les nouvelles applications
145
Travaux 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

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

Idm et ihm

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Idm et ihm

Similaire à Idm et ihm (20)

Dernier

Dernier (20)

Idm et ihm