The Genius project was a national project funded by FNR (2010-2012). In this project we worked on automatic UI generation from models. Attempts at automatic UI generation have been made since the 1980s, however generally at the expense of usability. GENIUS was created with the goal of developing a method to automatically generate usable UIs by taking into account ergonomic, usability and user experience criteria at the beginning of the generation process. Building on previous work on user interface design by CRP Henri Tudor's Service Science and Innovation Department, this multidisciplinary method also takes into account knowledge from the field of ergonomics to improve the interface design process. The project's approach first embeds these usability criteria into the initial automatic generation rules. Then an iterative approach relies on end-user tests to optimise the selected criteria and generation rules. After developing this methodology through collaboration with the Louvain School of Management and the University of Luxembourg, which included the participation of three PhD students, a case study prototype for mobile document management for the construction sector was created and tested in the usability lab at the University of Luxembourg. This led to the development of the GENIUS tool which is based on standard model-driven engineering tools available on the eclipse platform including EMF (a modelling framework), ATL (transformation rules) and JQuery mobile (a mobile-web framework). The GENIUS platform provides a set of transformation rules annotated with the ergonomic criteria they improve or decrease as an infrastructure to transform and execute models.

1. The Genius Project
A Model-based methodology for the
design of user interfaces taking into
account usability and users’ feedbacks

2. Consortium
CRP Henri Tudor
GENIUS
Université Catholique de Louvain
Laboratory of Human-Computer
Interaction (BCHI) - Jean Vanderdonckt.
Inputs: informatic language (UsiXML) for
the Model-Driven generation of interface
CITI
Université du Luxembourg
EMACS Unit - Vincent Koenig.
Inputs: definition of ergonomic criteria
appropriate to the automatic generation of
interfaces
Inputs: strategic management;
coordinator; model selection; software
development; case study
2

3. Context
• Research topic: the user interfaces (UI) design process
• How to produce UI that are useful and usable?
• How to rationalize the design process?
• How to capitalize knowledge and know-how in this design process?
• How to produce this kind of artifact within a trans-disciplinary team?
 Goal of the project
• To build an instrumented design method that answers all these questions
• A case study
• A mobile document management system for the construction sector
10/16/2014 Presentation Tudor 3

4. The proposed Design Method
User-Centered design
- Iterative cycles
- User involvement
- Useful and usable UI
Model-Driven Engineering
- Rationalize design process
- Capitalize design
Knowledge and Know-how
10/16/2014 Presentation Tudor 4

5. The proposed Design Method
UI Models :
Task, Concept abstractions,
transformations
10/16/2014 Presentation Tudor 5

6. The Genius Approach
- Models and transformation as first class citizen in the UI design
process
- Models emerge from concrete practice
- Progressively integrating in models and in transformations from ad-hoc
code
- Models have various identified usages and modeling actors
- Models for designers, ergonomists, developers, modifiable between each
transformation steps
- Models are used for both run-time and design time
- Some models are interpreted at run-time to define the application behavior
allowing dynamic flexibility and increasing model comprehension
10/16/2014 Presentation Tudor 6

7. The Genius Approach
The almost classical transformation principle
Task & Concept
Metamodel
Task &
Concept
FUI
Metamodel
CUI
Metamodel
State chart
Metamodel
Model Execution (Interpretation)
State chart CUI FUI
10/16/2014 Presentation Tudor 7

8. The Modeling Space
The Actors: models as a mean of integration/
communication
Ergonomists
Task
Task &
Concept
Designer
UI Evaluation
Wireframe design
UI Modeler
State chart CUI FUI
Function, Data
Analyst(s)
NF behavior dev.
Developer
UI Development
10/16/2014 Presentation Tudor 8

9. The MDE-Genius Approach
The Modeling Space
Coarse Grained Task Decomposition (clusters) – Software,
Functional Analyst
Task &
Conce
10/16/2014 Presentation Tudor 9
pt
State
chart
CUI
FUI

10. The MDE-Genius Approach
The Modeling Space
Fine Grained Task Decomposition (clusters) – Ergonomist/ Analyst
Task &
Conce
10/16/2014 Presentation Tudor 10
pt
State
chart
CUI
FUI

11. The MDE-Genius Approach
The Modeling Space
Domain Concept Modeling – Software, Data Analyst or can be
retrieved when reverse engineering some data oriented artifacts
Task &
Conce
10/16/2014 Presentation Tudor 11
pt
State
chart
CUI
FUI

12. The MDE-Genius Approach
The (Meta)Modeling Space
Task &
Conce
10/16/2014 Presentation Tudor 12
pt
State
chart
CUI
FUI
association

13. The MDE-Genius Approach
The Modeling Space
State chart: for developers and interaction designers
Task &
Concep
State
chart
10/16/2014 Presentation Tudor 13
t
CUI
FUI

14. The MDE-Genius Approach
The Modeling Space
CUI: can be provided by automatic transformation from
Task&Concept+type or can be provided by external design tool
(e.g., a graphical designer)
- Wireframe representation of User Interface
- We have a very generic CUI metamodel that can be refined
later to drive FUI interpretation.
Task &
Concep
State
chart
10/16/2014 Presentation Tudor 14
t
CUI
FUI

15. The MDE-Genius Approach
The Modeling Space
CUI: can be provided by automatic transformation from
Task&Concept+type or can be provided by external design tool
(e.g., a graphical designer)
- Wireframe representation of User Interface
- We have a very generic CUI metamodel that can be refined
later to drive FUI interpretation.
Task &
Concep
State
chart
10/16/2014 Presentation Tudor 15
t
CUI
FUI

16. The MDE-Genius Approach
The Modeling Space
FUI: is the interface that everyone can see… Here it is the
execution of a JQuery Mobile base application. But what is
original here:
- Interpretation the CUI information (JQuery template that
parses the CUI model).
- Interpretation at run-time of the State chart to determine
execution paths
Task &
Concep
State
chart
10/16/2014 Presentation Tudor 16
t
CUI
FUI

17. The MDE-Genius Approach
The Modeling Space
FUI: is the interface that everyone can see… Here it is the
execution of a JQuery Mobile base application. But what is
original here:
- Interpretation the CUI information (JQuery template that
parses the CUI model).
- Interpretation at run-time of the State chart to determine
execution paths
Task &
Concep
State
chart
10/16/2014 Presentation Tudor 17
t
CUI
FUI

18. The MDE-Genius Approach
The Missing Link: Transformations
Transformations are key for having “productive” models
e.g., models that can be used in a MDE production process
Indeed the models should keep their contemplative aspects:
- For specifications, explanations, self reflexing, etc..
Transformations occurs at each step:
- Inside a same model: e.g., task refactoring
- Between different models: task to CUI
Task &
Concep
State
chart
10/16/2014 Presentation Tudor 18
t
CUI
FUI

19. The MDE-Genius Approach
The Missing Link : Transformations
Task &
Concept
State chart FUI
CUI
Re-tasking
10/16/2014 Presentation Tudor 19

20. The MDE-Genius Approach
The Missing Link : Transformations
Task &
Concept
State chart FUI
CUI
10/16/2014 Presentation Tudor 20

21. The MDE-Genius Approach
Transformations formalization of design choices
Select a Car
Selection 1/n
element
Select a
Car
Selection 1/n
element
+ guidance,
- Density of
information

22. The MDE-Genius Approach
The Missing Link : Transformations
Task &
Concept
State chart FUI
CUI
UI Evaluation
Add usability And feed-back
To your transformation!
10/16/2014 Presentation Tudor 22

23. The MDE-Genius Approach
Transformations can be tedious to write (ex: ATL)
Task &
Concept
rule InputTaskToSimpleInputField {
from
in_tsk : TDA!Task( in_tsk.auiType=#"input"
and in_tsk.isInteractivelyValid())
to
out_label : CUI!Label (
State chart FUI
name <-in_tsk.name, --+'input'
id <-in_tsk.getID(),
value <- in_tsk.associations->first().manipulatedConcepts.name,
describedInteractor <- out_field
),
out_field : CUI!Datafield (
CUI
name <- in_tsk.name,
id <-in_tsk.getID(),
dataType <-
let concept:TDA!LinkableConceptElement =
in_tsk.associations->UI first().Evaluation
manipulatedConcepts in
if(concept.oclIsKindOf(TDA!DomainAttribute)) then
Add usability And feed-back
To your transformation!
concept.type.toString()
else
concept.DataType.toString()
endif)
}
10/16/2014 Presentation Tudor 23

24. The MDE-Genius Approach
We propose a DSL for writing simple transformations
rule from Container interative to Window with All Concepts;
rule from Container notinteractive to Panel with No Concepts;
rule from Output interative to Panel with All Concepts;
rule from Input interative to DataField;
rule from Choice 1/n interative to ListElementSelector with All
Concepts;
rule from Choice n/n interative to ListElementSelector with All
Concepts;
Task &
Concept
State chart FUI
CUI
UI Evaluation
Add usability And feed-back
To your transformation!
10/16/2014 Presentation Tudor 24

25. The Design Method and Evaluation
- Design Method, Instrumented
with an MDE approach
(Modeling Artifacts) that
improve usability of User
Interfaces
- Validation 3 iterations with
end-user tests
- Enhancing usability in UI
transformation rules ( in a
generic way)
- Capitalize usability know-how
UI Models :
Task, Concept
abstractions,
transformations
10/16/2014 Presentation Tudor 25

26. Thanks for your attention!