Presentation for the "Modèle pour la conception et l'évaluation des logiciels" class (Mar. 2009) at Université Paul Verlaine - Metz, based on HCI and Software Engineering:
Designing for User Interface Plasticity by Jöelle Coutaz and Gäelle Calvary [from "The Human–Computer Interaction Handbook"]
Maquettes IHM - Présentation USE AGE - 20-02-2014Use Age
Petit Déj' Maquettes IHM organisé par Use Age le 20 Février 2014 à Sophia Antipolis : "Maquettes IHM : outils et méthodes". Présentation de Leonid Synyukov - Introduction par Sophie de Bonis.
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...Anthony Gelibert
Les environnements confinés sont caractérisés par un ensemble de normes d’usage et de conception très strictes. Dans les environnements confinés médicaux, où il s’agit notamment de lutter contre les infections liées aux soins, il n’existe actuellement pas d’outil permettant d’en réaliser la qualification avant usage, la supervision pendant usage et l’audit après usage. Cette lacune tient à la difficulté de rassembler les différents éléments intriqués constituant le profil de l’environnement confiné médical (l’arrangement des locaux, les normes de conception et d’usage, l’instrumentation y étant déployée) en un seul modèle qu’il serait possible de valider statiquement et d’utiliser dynamiquement afin de le confronter à un flot d’évènements. Cette problématique constitue le cadre d’une thèse de doctorat, débutée récemment en partenariat avec un industriel de la santé, visant à définir une plateforme logicielle ouverte permettant de satisfaire les besoins de traçabilité avant, pendant et après usage. Cet article s’attachera à introduire le contexte, détailler les besoins et la problématique, et présenter les axes de recherche envisagés et les travaux en cours.
Comment devenir architecte ? Comment progresser dans ce domaine ? A quoi reconnait-on une bonne ou une mauvaise architecture ? Il existe certes un certain nombre d' ouvrages et formations sur le sujet, mais le mieux est quand même de pratiquer ! A la manière des coding dojos, je vais vous présenter les Architecture Katas. Ces derniers ont été initiés par Ted Neward. Son idée est venue du constat suivant :
"So how are we supposed to get great architects, if they only get the chance to architect fewer than a half-dozen times in their career?"
La solution à ce problème est donc de pratiquer régulièrement sur des sujets très différents pour gagner en expérience.
Après une présentation qui permettra dans un premier temps de donner un retour d'expérience sur ce domaine et de répondre à certaines questions, j'exposerai la démarche du hands'on et le résultat final attendu.
Ensuite, par équipe de 4-5 personnes équipées d'un papier et d'un crayon ( pas besoin de plus ! ), plusieurs sujets seront proposés. Chaque équipe devra en choisir un, définir l' architecture la plus pertinente et la présenter aux équipes adverses.
Un vote définira la meilleure architecture.
Il n'est pas nécessaire d'être architecte pour participer !
Que la meilleure équipe gagne !
Presentation for the "Modèle pour la conception et l'évaluation des logiciels" class (Mar. 2009) at Université Paul Verlaine - Metz, based on HCI and Software Engineering:
Designing for User Interface Plasticity by Jöelle Coutaz and Gäelle Calvary [from "The Human–Computer Interaction Handbook"]
Maquettes IHM - Présentation USE AGE - 20-02-2014Use Age
Petit Déj' Maquettes IHM organisé par Use Age le 20 Février 2014 à Sophia Antipolis : "Maquettes IHM : outils et méthodes". Présentation de Leonid Synyukov - Introduction par Sophie de Bonis.
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...Anthony Gelibert
Les environnements confinés sont caractérisés par un ensemble de normes d’usage et de conception très strictes. Dans les environnements confinés médicaux, où il s’agit notamment de lutter contre les infections liées aux soins, il n’existe actuellement pas d’outil permettant d’en réaliser la qualification avant usage, la supervision pendant usage et l’audit après usage. Cette lacune tient à la difficulté de rassembler les différents éléments intriqués constituant le profil de l’environnement confiné médical (l’arrangement des locaux, les normes de conception et d’usage, l’instrumentation y étant déployée) en un seul modèle qu’il serait possible de valider statiquement et d’utiliser dynamiquement afin de le confronter à un flot d’évènements. Cette problématique constitue le cadre d’une thèse de doctorat, débutée récemment en partenariat avec un industriel de la santé, visant à définir une plateforme logicielle ouverte permettant de satisfaire les besoins de traçabilité avant, pendant et après usage. Cet article s’attachera à introduire le contexte, détailler les besoins et la problématique, et présenter les axes de recherche envisagés et les travaux en cours.
Comment devenir architecte ? Comment progresser dans ce domaine ? A quoi reconnait-on une bonne ou une mauvaise architecture ? Il existe certes un certain nombre d' ouvrages et formations sur le sujet, mais le mieux est quand même de pratiquer ! A la manière des coding dojos, je vais vous présenter les Architecture Katas. Ces derniers ont été initiés par Ted Neward. Son idée est venue du constat suivant :
"So how are we supposed to get great architects, if they only get the chance to architect fewer than a half-dozen times in their career?"
La solution à ce problème est donc de pratiquer régulièrement sur des sujets très différents pour gagner en expérience.
Après une présentation qui permettra dans un premier temps de donner un retour d'expérience sur ce domaine et de répondre à certaines questions, j'exposerai la démarche du hands'on et le résultat final attendu.
Ensuite, par équipe de 4-5 personnes équipées d'un papier et d'un crayon ( pas besoin de plus ! ), plusieurs sujets seront proposés. Chaque équipe devra en choisir un, définir l' architecture la plus pertinente et la présenter aux équipes adverses.
Un vote définira la meilleure architecture.
Il n'est pas nécessaire d'être architecte pour participer !
Que la meilleure équipe gagne !
Modélisation et simulation des réseaux L2 Info UKA 2024.pptxBernardKabuatila
Le but de ce cours est d’aider l’Ingénieur réseautiste qui est presque à la porte de sortie de la faculté informatique de l’U.KA; à développer des qualifications nécessaires pour modéliser, analyser le processus de la conception et la simulation des architectures des grands réseaux.
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Ardesi Midi-Pyrénées
Présentation des points essentiels à l’analyse des besoins. Dans le cadre de la mise en œuvre d’un projet il faut prendre en compte : son environnement, la constitution de son équipe projet, la communication …
Chap10 : Outils de Simulation Cas des CAD 3D Concepts de base & fondements.Mohammed TAMALI
Les outils utilisés par les humains et issus d’une production technologique laisse un arrière goût fugitif mais répété alors que la recherche scientifique fondamentale le fait d’une manière pressante, à l’action, mais trop espacée pour la réaction.
Le niveau de complexité de ces technologies est très fort à niveau où toute intégration sociale des produits résultants ne se ferait sans dégâts ni sans effets secondaires. En contre partie, la majorité des produits technologiques sont juste la solution immédiate de bon nombre de problèmes de la vie courante, en zone urbaine ou rurale. Une sensibilisation pour le compte de l’environnement et sa préservation reste le souci majeur des observateurs.
L'avènement de produits, de grande consommation, comme l'informatique, l'internet et les télécommunications, à chacun ses outils, a révolutionné les méthodologies de travail des équipes et laboratoires de recherches. Les outils et suites logiciels sont d’un grand secours aux travaux de modélisation et de simulation des processus. L'informatique et les moyens de conception sont les vecteurs qui ont provoqué une amélioration nette à la vitesse de mise en œuvre de moyens exploitables.
Les logiciels de CAO (Conception Assistée par Ordinateur) ont joué un grand rôle dans le cours de développement de beaucoup de procédés (Modélisation) et ont facilité la compréhension de beaucoup phénomènes (Simulation).
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...mrelmejri
J'ai réalisé ce projet pour obtenir mon diplôme en licence en sciences de gestion, spécialité management, à l'ISCAE Manouba. Au cours de mon stage chez Attijari Bank, j'ai été particulièrement intéressé par l'impact des critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les décisions d'investissement dans le secteur bancaire. Cette étude explore comment ces critères influencent les stratégies et les choix d'investissement des banques.
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La JeunesseOscar Smith
Besoin des conseils pour les Jeunes ? Le document suivant est plein des conseils de la Vie ! C’est vraiment un document conseil de la jeunesse que tout jeune devrait consulter.
Voir version video:
➡https://youtu.be/7ED4uTW0x1I
Sur la chaine:👇
👉https://youtube.com/@kbgestiondeprojets
Aimeriez-vous donc…
-réussir quand on est jeune ?
-avoir de meilleurs conseils pour réussir jeune ?
- qu’on vous offre des conseils de la vie ?
Ce document est une ressource qui met en évidence deux obstacles qui empêchent les jeunes de mener une vie épanouie : l'inaction et le pessimisme.
1) Découvrez comment l'inaction, c'est-à-dire le fait de ne pas agir ou d'agir alors qu'on le devrait ou qu'on est censé le faire, est un obstacle à une vie épanouie ;
> Comment l'inaction affecte-t-elle l'avenir du jeune ? Que devraient plutôt faire les jeunes pour se racheter et récupérer ce qui leur appartient ? A découvrir dans le document ;
2) Le pessimisme, c'est douter de tout ! Les jeunes doutent que la génération plus âgée ne soit jamais orientée vers la bonne volonté. Les jeunes se sentent toujours mal à l'aise face à la ruse et la volonté politique de la génération plus âgée ! Cet état de doute extrême empêche les jeunes de découvrir les opportunités offertes par les politiques et les dispositifs en faveur de la jeunesse. Voulez-vous en savoir plus sur ces opportunités que la plupart des jeunes ne découvrent pas à cause de leur pessimisme ? Consultez cette ressource gratuite et profitez-en !
En rapport avec les " conseils pour les jeunes, " cette ressource peut aussi aider les internautes cherchant :
➡les conseils pratiques pour les jeunes
➡conseils pour réussir
➡jeune investisseur conseil
➡comment investir son argent quand on est jeune
➡conseils d'écriture jeunes auteurs
➡conseils pour les jeunes auteurs
➡comment aller vers les jeunes
➡conseil des jeunes citoyens
➡les conseils municipaux des jeunes
➡conseils municipaux des jeunes
➡conseil des jeunes en mairie
➡qui sont les jeunes
➡projet pour les jeunes
➡conseil des jeunes paris
➡infos pour les jeunes
➡conseils pour les jeunes
➡Quels sont les bienfaits de la jeunesse ?
➡Quels sont les 3 qualités de la jeunesse ?
➡Comment gérer les problèmes des adolescents ?
➡les conseils de jeunes
➡guide de conseils de jeunes
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Idm et ihm
1. IDM & IHM
un point de vue
partiel
Mireille Blay-Fornarino
(octobre 2016)
1
2. 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.
3. IHMs : Un point de vue
développeur
• IHM = Ce qui fait vendre : essentiel
• IHM : Lourd à développer, tester, déployer, ....
• IHM & adaptation aux utilisateurs :
• l’enfer du développeur.
• IHM = Point d’entrée dans le système (pour
l’utilisateur, c’est le produit !!)
• Agilité du code et IHM : .... ?
3
4. 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)
5. 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
6. 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».
8. 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
9. 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
10. 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
11. 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
12. 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
13. 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)
14. 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
15. Ingénierie des
modèles : principes
http://www.theenterprisearchitect.eu/archive/2009/08/05/a-metaphor-for-model-driven-engineering
15
16. 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
17. 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.
21. 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
22. 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
24. 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
26. 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
27. 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
28. 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
29. La pyramide des quatre niveaux
meta-meta modèle
meta
modèle
Données Utilisateur
M0
M1
M2
M3
29
30. 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
31. 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
38. 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
39. IDM pour les IHMS
39
image : http://www.festo.com/cms/fr_fr/9548.htm
41. • 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
45. 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.
46. The CAMELEON Reference Framework
46
http://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504/#crf
49. IDM pour concevoir des IHM
indépendante plateforme
49
http://www.w3.org/TR/mbui-intro/#uc2-digital-home
?
50. The Task Model for the
Digital Home.
50
http://www.w3.org/TR/mbui-intro/#uc2-digital-home
51. IDM pour concevoir des IHM
indépendante plateforme
51
http://www.w3.org/TR/mbui-intro/#uc2-digital-home
52. IDM pour concevoir des IHM
indépendante plateforme
52
http://www.w3.org/TR/mbui-intro/#uc2-digital-home
53. 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
54. 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.»
55. 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.
56. Différentes mises en oeuvre compatibles avec
le Framework de Reference Cameleon
56
75. 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
78. 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. 79
Towards optimizing the usability of user interface
generated with model-driven development process,
Juin 2015
80. 80
Evaluer l’utilisabilité d’une interface
=> quels métrics, quelles valeurs ?
ISO/IEC 9126-1standard
Towards optimizing the usability of user interface
generated 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
81. 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 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. 82
Quelle priorité en fonction des utilisateurs ?
Towards optimizing the usability of user interface
generated with model-driven development process,
Juin 2015
83. 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. 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
85. Un exemple
d’atelier dédié
aux IHMs basé
sur l’IDM
85
Image : http://www.sapdesignguild.org/editions/edition3/interact_design.asp
86. 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
89. 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
90. 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
92. Partial Context Model
Generation
92
- Persona ➥ userStereoType
- Device element ➥ hardwarePlatform and softwarePlatform
- Annotations
* Noise ➥ isNoisy property and set it to true.
* Light ➥ lightningLevel property.
....
94. IDM en support
aux applications
complexes :
Réalité
virtuelle
94
Image : http://www.irisa.fr/immersia/collaviz/
95. 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
96. 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. 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
105. 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
109. UI Modeling as Ontology for Composition – Christian Brel
Increasing number of applicaQons
109
Desktop/Mobile/Web
110. UI Modeling as Ontology for Composition – Christian Brel
IntegraQon of same funcQonaliQes in several
applicaQons
110
Encyclopedia
Social
Network
Hotel
Booking
Movie
Database
Travel
Plan
111. UI Modeling as Ontology for Composition – Christian Brel
Reuse funcQonaliQes without development
111
Adding Movie Theaters localization
112. UI Modeling as Ontology for Composition – Christian Brel
An interacQve system to compose applicaQons
112
UI 2
Business
part 2
UI 1
Business
part 1
113. UI Modeling as Ontology for Composition – Christian Brel
An interacQve system to compose applicaQons
113
New UI =
UI1 + UI2
UI 2
Business
part 2
UI 1
Business
part 1
114. UI Modeling as Ontology for Composition – Christian Brel
An interacQve system to compose applicaQons
114
New UI =
UI1 + UI2
UI 2
Business
part 2
UI 1
Business
part 1
115. UI Modeling as Ontology for Composition – Christian Brel
Ports and Roles
Choix du métamodèle adapté à la composiQon
115
Application Element
Input
Trigger
Output
116. UI Modeling as Ontology for Composition – Christian Brel
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
117. UI Modeling as Ontology for Composition – Christian Brel 117
Element2,
Role2
Element,
Role
Element3,
Role3
Element4,
Role4
Element5,
Role5
118. UI Modeling as Ontology for Composition – Christian Brel
ComposiQon par subsQtuQon
118
Element2,
Role2
Element,
Role
Element3,
Role3
Element4,
Role4
Element5,
Role5
119. 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
120. 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
121. Usines logicielles
Pour et par les IHMs
121
image : http://blog.valtech.fr/2009/09/
Travaux de S. Urli, Sophia Antipolis
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 ?
128. Ligne de produits Logiciels
et Configurateurs ?
128
Programmation
Production personnalisée
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
129. Des modèles aux IHMs de
configuration
129
Enrichir les Feature Models
par des annotations
graphiques
Génération
Ergonomie, passage à
l’échelle, ...
130. En conclusion
Usine logicielle & IHM
• Un rapprochement évident pour les
deux «partis»
• De beaux défis pour les deux partis.
130
132. IHMS pour l’IDM
132
IMAGES : http://www.123rf.com/photo_15881605_illustration-of-people-doing-business-inside-the-virtual-world-of-
internet.html
133. 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
139. 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
141. Spécification d’un système complexe
141
Designing 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.
142. Processus de production du Système : exemple
142
Designing Functional Specifications for Complex Systems, HCI 2016
143. Processus de production du Système
143
Designing Functional Specifications for Complex Systems, HCI 2016
144. Systèmes complexes : de la specification par
l’exemple à la génération d’IHMS
144
Designing Functional Specifications for Complex Systems, HCI 2016
Où est l’IDM?
145. IDM & IHMS pour maitriser
les nouvelles applications
145
Travaux de Ivan Logre, Sophia Antipolis
150. 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
154. 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
155. 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