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


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


The Genius ApproachThe almost classical transformation principle


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


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


Task &

Conce

pt

CUI

FUI

State

chart


Fine Grained Task Decomposition (clusters) – Ergonomist/ Analyst


Task &

Conce

pt

CUI

FUI

State

chart


Domain Concept Modeling – Software, Data Analyst or can be

retrieved when reverse engineering some data oriented artifacts


Task &

Conce

pt

CUI

FUI

State

chart

The MDE-Genius ApproachThe (Meta)Modeling Space


Task &

Conce

pt

CUI

FUI

State

chart

association


State chart: for developers and interaction designers


Task &

Concep

t

CUI

FUI

State

chart


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

t

CUI

FUI

State

chart


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

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


Task &

Concep

t

CUI

FUI

State

chart

The MDE-Genius ApproachThe Missing Link : Transformations


Task &

ConceptCUI

FUIState chart

Re-tasking



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



Task &

ConceptCUI

FUIState chart

UI Evaluation

And feed-backAdd usability

To your transformation!

The MDE-Genius ApproachTransformations can be tedious to write (ex: ATL)


Task &

ConceptCUI

FUIState chart

UI Evaluation



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


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



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

Thanks for your attention!

genius: user interfaces design process taking into account usability and users’ feedbacks

Science