Idm et ihm

IDM & IHM un point de vue

partiel

Mireille Blay-Fornarino (octobre 2016)

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

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

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 : »

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

• 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»

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)

• Multi-modalités

Société du numérique

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

• 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

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.

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

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

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

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

Modèles et métamodèles

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

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

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.

Modèle représentant un modèle

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

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.

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

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

La pyramide des quatre niveaux

meta-meta modèle

modèle

Données UtilisateurM0

Relations entre les niveaux

the UML Meta-Model

Class Attribute*1

a UML Model

Client

Name : String

the MOF

Class Association

source

destination

metameta meta

metameta

metamodel

"the real world"

meta-meta model

The MOF

The UML metamodel

Some UML ModelsVarious usages of these modelsM0

χ χ χ

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

Modélisation des tâches

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

MetaModèle de tâches

Modèle de tâches

Transformations de modèles

Write Once, Run Anywhere

Java/EJBC#/DotNet

Web/XML/SOAP

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

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

Conforms to Conforms to

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

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

Langages de descriptions

d’IHMs &

Transformations

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.

Cameleon Reference Framework

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

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

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

Exemples à différents niveaux de modélisation

Digital Home

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

IDM pour concevoir des IHM indépendante plateforme

The Task Model for the Digital Home.

http://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

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.

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

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

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

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

View Component

View Container ParameterBinding«ParameterBindingGroup» SelectedArtist -> AnArtist

IFML by example

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

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

MDD Principles

IDM pour améliorer la construction

des IHMs

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

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é?

Juin 2015

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.

Quelle priorité en fonction des utilisateurs ?

Juin 2015

Expert InterfaceNovice Interface

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

sur l’IDM

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

Un exemple d’atelier basé sur l’IDM

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/

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

Un métamodele

pour les storyborad

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

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

The meta-model for the UsiXML context model.

Partial Context Model Generation

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

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

Mapping editor ;-)

IDM en support aux applications

complexes : Réalité

virtuelle

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

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

• 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

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"); } }

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

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

Instanciation des objets virtuels

processus pour aider la génération des composants

DSL pour les

designers

1- Modéliser les objets virtuels

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

Un modèle d’objet virtuel

Utilisation de l’éditeur basé sur

le MM.

Réalité virtuelle : processus

2- Associer les objets virtuels

et leur représentation

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.

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?

Comment?

Interfaceauto-explicaQve

...ÀsélecQonnerl’horairedelasaisied’absences

Aquoiserventlescasesvertes?

Auto-explicaQonparlesmodèles

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

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

Desktop/Mobile/Web

IntegraQonofsamefuncQonaliQesinseveralapplicaQons

Encyclopedia

SocialNetwork

HotelBooking

Movie Database

Travel Plan

ReusefuncQonaliQeswithoutdevelopment

Adding Movie Theaters localization

AninteracQvesystemtocomposeapplicaQons

Businesspart 2

Businesspart 1

New UI = UI1 + UI2

Businesspart 2

Businesspart 1

New UI = UI1 + UI2

Businesspart 2

Businesspart 1

PortsandRoles ChoixdumétamodèleadaptéàlacomposiQon

Application Element

Trigger

Output

PortsandRoles ChoixdumétamodèleadaptéàlacomposiQon

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

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.

Adaptation au contexte d’usage par les modèles

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

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

Travaux de S. Urli, Sophia Antipolis

Ligne de produits

Production manuelleProduction personnalisée

Production de masse

Ligne de produits

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

alternative

orrequire

Modélisation de la variabilité :

Feature Models

Des modèles de variabilité aux codes

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 ;

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

Modélisation des layout comme une ligne de produits ;

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

Ligne de produits Logiciels et Configurateurs ?

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

alternative

orrequire

Modélisation de la variabilité :

Feature Models

Des modèles aux IHMs de configuration

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.

En conclusion Usine logicielle & IHM : PBME

DIFFICLE !!

IHMS pour l’IDM

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

Model driven software migration : Abstraction

• 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 ?

134https://openflexo.org

Expression & visualisation de la complexité

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

Spécification dirigée par les IHMs

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

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

Des widgets dédiées

1,790,000 results for Data Visualization Tools

HIER !

Des Besoins «utilisateurs» variés

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

A Unified framework for the comprehension of software’s

Time dimension (ICSE ’15)

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

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

Pour continuer

➡ Une étude plus approfondie du sujet

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

Idm et ihm

Education

Développement d'une électronique embarquée et d'une IHM

Opdrachtgever IDM Den Haag IDM-1 Deskresearch

Resumé IDM

IHM et plasticité ou Adaptation des IHMs aux supports IHM et Différents supports Différents utilisateurs Différents environnements Problématique - aperçu

SUPERBIKE-IDM V5-Schleizresultscdn.getraceresults.com/idm/2016/IDM... · SUPERBIKE-IDM V5-Schleiz HMP MotorEvents GMBH IDM Superstock 1000 - Rennen 2 29 - 31 July 2016 Schleiz - 3805

Idm Groningen

ARYTHMIES VENTRICULAIRES ET MORT SUBITE · JUIN 2015: IDM ASA non thrombolysé. 22/7/2015: post IDM ASA compliqué d’angor résiduel. Coronarographie : atteinte tritronculaire relevant

Idm suulgah

IDm Snatcher

IDM-IHM M-learning situé pour des contextes domestiques, publics et professionnels Bertrand DAVID LIESP (ex ICTT) Ecole Centrale de Lyon Bertrand.David@ec-lyon.fr

Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Introduction et panorama des méthodes

Atelier IDM

Intro conception et évaluation des IHM

IHM Pro Aide au diagnostic et à la remise en cycle IHM PRO 10-2003 - 1 Interface Homme Machine IHM Pro Îlot IHM Pro : Pour laide au dépannage et à la remise

La mémoire et l'ergonomie IHM par antoine borzeix

Pr esentation d’OCL 2 - cregut.perso.enseeiht.frcregut.perso.enseeiht.fr/ENS/2016-insa-idm/BETP01/IDM-OCL.pdf · Sommaire 1 Contexte et Motivation Int er^et des mod eles Mod eles

IDM-IHM M-learning situé pour des contextes domestiques, publics et professionnels

Manual de instrucciones IDM 503 & IDM 505

Ergonomie et modélisation des utilisateurs d'une ihm 2014

IdM FinalVer