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
IHMs : Un point de vue 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 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
IHMs : Un point de vue 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
IHMs : Un monde en pleine évolution «logicielle»
• Multiplicité des supports (et de leurs
• Déplacement de la production du logiciel vers des experts «métiers»
• Démocratisation du «numérique» (accessibilité, richesse)
• Intégration des IHMs aux environnements : documents collaboratifs; BD : phpmyadmin; Processus Métier : bonitaSoft ; googleMap ; ....
10
• Multi-modalités
IHMs : Un monde en pleine évolution «logicielle»
• Multiplicité des supports (et de leurs
• Déplacement de la production du logiciel vers des experts «métiers»
• Démocratisation du «numérique» (accessibilité, richesse)
• 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
• Multi-modalités
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
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
From : Model-driven engineering: A survey supported by the unified conceptual model October 2015
Principes
19
From : Model-driven engineering: A survey supported by the unified conceptual model October 2015
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
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/
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
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
44http://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
49http://www.w3.org/TR/mbui-intro/#uc2-digital-home
?
The Task Model for the Digital Home.
50
http://www.w3.org/TR/mbui-intro/#uc2-digital-home
IDM pour concevoir des IHM indépendante plateforme
51http://www.w3.org/TR/mbui-intro/#uc2-digital-home
IDM pour concevoir des IHM indépendante plateforme
52http://www.w3.org/TR/mbui-intro/#uc2-digital-home
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
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
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
58http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
IFML Objectives: Content
Content
59http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
IFML Objectives : Navigation Path
60http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
IFML Objectives: Events
Mouse Over
61http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
IFML Objectives: Binding to Business logic
62http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
IFML Objectives: Binding to persistence
Content
Book
Title: string Cover: file List Price: currency Price: currency Save: currency Rating: integer ………
63http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
IFML Essentials (point de vue « user »)
64http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
IFML by example
BasicnavigationflowbetweenViewComponents
Artists List
Artists
Artist
Event
View Component
View Container ParameterBinding«ParameterBindingGroup» SelectedArtist -> AnArtist
65
IFML by example
66http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
67http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
68http://modeling-languages.com/ifml-interaction-flow-modeling-language-1-0-tutorial/
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
Towards optimizing the usability of user interfacegenerated with model-driven development process,
Juin 2015
80
Evaluer l’utilisabilité d’une interface => quels métrics, quelles valeurs ?
ISO/IEC 9126-1standard
Towards optimizing the usability of user interfacegenerated with model-driven development process,
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
ISO/IEC 9126-1standard
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 ?
Towards optimizing the usability of user interfacegenerated with model-driven development process,
Juin 2015
83
ISO/IEC 9126-1standard
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
84
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
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.
....
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
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"); } }
MDE en support aux applications complexes : Réalité virtuelle
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
MDE en support aux applications complexes : Réalité virtuelle
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
Réalité virtuelle : 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.
Réalité virtuelle : processus
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
UI Modeling as Ontology for Composition – Christian Brel
IntegraQonofsamefuncQonaliQesinseveralapplicaQons
110
Encyclopedia
SocialNetwork
HotelBooking
Movie Database
Travel Plan
UI Modeling as Ontology for Composition – Christian Brel
ReusefuncQonaliQeswithoutdevelopment
111
Adding Movie Theaters localization
UI Modeling as Ontology for Composition – Christian Brel
AninteracQvesystemtocomposeapplicaQons
112
UI 2
Businesspart 2
UI 1
Businesspart 1
UI Modeling as Ontology for Composition – Christian Brel
AninteracQvesystemtocomposeapplicaQons
113
New UI = UI1 + UI2
UI 2
Businesspart 2
UI 1
Businesspart 1
UI Modeling as Ontology for Composition – Christian Brel
AninteracQvesystemtocomposeapplicaQons
114
New UI = UI1 + UI2
UI 2
Businesspart 2
UI 1
Businesspart 1
UI Modeling as Ontology for Composition – Christian Brel
PortsandRoles ChoixdumétamodèleadaptéàlacomposiQon
115
Application Element
Input
Trigger
Output
UI Modeling as Ontology for Composition – Christian Brel
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
UI Modeling as Ontology for Composition – Christian Brel
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
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
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 ;
127
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
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
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
Expression & visualisation de la complexité
135http://www.iutbayonne.univ-pau.fr/~roose/gdri3/images/ThomasPolacsek.pdf
Expression & visualisation de la complexité
136http://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
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
140Designing Functional Specifications for Complex Systems, HCI 2016
Spécification d’un système complexe
141Designing Functional Specifications for Complex Systems, HCI 2016
- 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
142Designing Functional Specifications for Complex Systems, HCI 2016
Processus de production du Système
143Designing Functional Specifications for Complex Systems, HCI 2016
Systèmes complexes : de la specification par l’exemple à la génération d’IHMS
144Designing Functional Specifications for Complex Systems, HCI 2016
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