Genius: user interfaces design process taking into account usability and users’ feedbacks
-
Upload
interactionengineering -
Category
Science
-
view
416 -
download
0
description
Transcript of Genius: user interfaces design process taking into account usability and users’ feedbacks
The Genius Project
A Model-based methodology for the
design of user interfaces taking into
account usability and users’ feedbacks
Consortium
GENIUS
Université Catholique de LouvainLaboratory of Human-Computer
Interaction (BCHI) - Jean Vanderdonckt.
Inputs: informatic language (UsiXML) for the Model-Driven generation of interface
Université du LuxembourgEMACS Unit - Vincent Koenig.
Inputs: definition of ergonomic criteria appropriate to the automatic generation of
interfaces
CRP Henri TudorCITI
Inputs: strategic management; coordinator; model selection; software
development; case study
2
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
The proposed Design Method
10/16/2014 4Presentation Tudor
User-Centered design- Iterative cycles
- User involvement
- Useful and usable UI
Model-Driven Engineering- Rationalize design process
- Capitalize design
Knowledge and Know-how
The proposed Design Method
10/16/2014 5Presentation Tudor
UI Models :
Task, Concept abstractions,
transformations
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 6Presentation Tudor
The Genius ApproachThe almost classical transformation principle
10/16/2014 7Presentation Tudor
Task &
ConceptCUI FUIState chart
Task & Concept
Metamodel
FUI
MetamodelCUI
MetamodelState chart
Metamodel
Model Execution (Interpretation)
The Modeling SpaceThe Actors: models as a mean of integration/
communication
10/16/2014 8Presentation Tudor
Task &
ConceptCUI FUIState chart
Analyst(s)
Ergonomists
Developer
Designer
Function, Data
Wireframe design
UI Development
NF behavior dev.
Task
UI Modeler
UI Evaluation
The MDE-Genius ApproachThe Modeling Space
Coarse Grained Task Decomposition (clusters) – Software,
Functional Analyst
10/16/2014 9Presentation Tudor
Task &
Conce
pt
CUI
FUI
State
chart
The MDE-Genius ApproachThe Modeling Space
Fine Grained Task Decomposition (clusters) – Ergonomist/ Analyst
10/16/2014 10Presentation Tudor
Task &
Conce
pt
CUI
FUI
State
chart
The MDE-Genius ApproachThe Modeling Space
Domain Concept Modeling – Software, Data Analyst or can be
retrieved when reverse engineering some data oriented artifacts
10/16/2014 11Presentation Tudor
Task &
Conce
pt
CUI
FUI
State
chart
The MDE-Genius ApproachThe (Meta)Modeling Space
10/16/2014 12Presentation Tudor
Task &
Conce
pt
CUI
FUI
State
chart
association
The MDE-Genius ApproachThe Modeling Space
State chart: for developers and interaction designers
10/16/2014 13Presentation Tudor
Task &
Concep
t
CUI
FUI
State
chart
The MDE-Genius ApproachThe 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.
10/16/2014 14Presentation Tudor
Task &
Concep
t
CUI
FUI
State
chart
The MDE-Genius ApproachThe 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.
10/16/2014 15Presentation Tudor
Task &
Concep
t
CUI
FUI
State
chart
The MDE-Genius ApproachThe 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
10/16/2014 16Presentation Tudor
Task &
Concep
t
CUI
FUI
State
chart
The MDE-Genius ApproachThe 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
10/16/2014 17Presentation Tudor
Task &
Concep
t
CUI
FUI
State
chart
The MDE-Genius ApproachThe 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
10/16/2014 18Presentation Tudor
Task &
Concep
t
CUI
FUI
State
chart
The MDE-Genius ApproachThe Missing Link : Transformations
10/16/2014 19Presentation Tudor
Task &
ConceptCUI
FUIState chart
Re-tasking
The MDE-Genius ApproachThe Missing Link : Transformations
10/16/2014 20Presentation Tudor
Task &
ConceptCUI
FUIState chart
The MDE-Genius ApproachTransformations formalization of design choices
Select a Car
Selection 1/n
element
Select a
Car
Selection 1/n
element
+ guidance,
- Density of
information
The MDE-Genius ApproachThe Missing Link : Transformations
10/16/2014 22Presentation Tudor
Task &
ConceptCUI
FUIState chart
UI Evaluation
And feed-backAdd usability
To your transformation!
The MDE-Genius ApproachTransformations can be tedious to write (ex: ATL)
10/16/2014 23Presentation Tudor
Task &
ConceptCUI
FUIState chart
UI Evaluation
And feed-backAdd usability
To your transformation!
rule InputTaskToSimpleInputField {
from
in_tsk : TDA!Task( in_tsk.auiType=#"input"
and in_tsk.isInteractivelyValid())
to
out_label : CUI!Label (
name <-in_tsk.name, --+'input'
id <-in_tsk.getID(),
value <- in_tsk.associations->first().manipulatedConcepts.name,
describedInteractor <- out_field
),
out_field : CUI!Datafield (
name <- in_tsk.name,
id <-in_tsk.getID(),
dataType <-
let concept:TDA!LinkableConceptElement =
in_tsk.associations->first().manipulatedConcepts in
if(concept.oclIsKindOf(TDA!DomainAttribute)) then
concept.type.toString()
else
concept.DataType.toString()
endif)
}
The MDE-Genius ApproachWe propose a DSL for writing simple transformations
10/16/2014 24Presentation Tudor
Task &
ConceptCUI
FUIState chart
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;
UI Evaluation
And feed-backAdd usability
To your transformation!
The Design Method and Evaluation
10/16/2014 25Presentation Tudor
- 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
Thanks for your attention!