Charles-Eric Dessart, Vivian Genaro Motti, Jean VanderdoncktLouvain School of Management

Université catholique de Louvain Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium

Vivian.genaromotti@uclouvain.bejean.vanderdonckt@uclouvain.be – http://www.uclouvain.be/jean.vanderdonckt

Animated Transitions betweenUser Interface Views

Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium http://www.lilab.be, http://www.lilab.eu, http://www.lilab.info

Louvain Interaction Laboratory (LILab)

Motivations Basic concepts Background on UI views

Models and language Method Software support

Future work

Presentation outline

AVI'2012 - Capri, May 21-25, 2012

Motivations Software development life cycle typically involves many

steps at various levels of abstraction In Model-Driven Architecture (MDA), 3 levels of abstraction

Computing-Independent Model (CIM) Platform-Independent Model (PIM) Platform-Specific Model (PSM)

User Interface (UI) development life cycle is similar In UI development according to Cameleon Reference Framework

(CRF), 4 levels of abstraction Task and domain models Abstract User Interface (AUI) model Concrete User Interface (CUI) model Final User Interface

In Model-based UI design, the mapping problem Task, domain, presentation, dialog, help, tutorial

AVI'2012 - Capri, May 21-25, 2012

Motivations Transition between steps, levels is hard to grasp

(imagine, understand, maintain, evolve) Models found at each level are different: concepts, relationships,

and attributes are different Models may have different views depending on

The stakeholder (designer, marketing, end user) The step (e.g., early design vs advanced design) The concepts (e.g., level of details)

Transitions between models are complex E.g., mappings, transformations in MDA

Consequences Mode switching is frequent Cognitive load is high Learning curve is slow

AVI'2012 - Capri, May 21-25, 2012

Basic concepts

Concep-tual view

External view

Internal view

3 types of representation: Internal: UI code (in programming of markup language) External: UI as experienced by the end user Conceptual: UI representation abstracted from the UI code

SemanticsSyntaxStylistics

AVI'2012 - Capri, May 21-25, 2012

Basic concepts

Concep-tual view

External view

Internal view

Possible transitions between representations: From Conceptual to

Internal: e.g., to generate UI code from modelsExternal: e.g., to render a UI from its model

From Internal toExternal: e.g., to compile/interpret a UI from its code/markupConceptual: e.g., UI reverse engineering

AVI'2012 - Capri, May 21-25, 2012

Basic concepts

Concep-tual view

External view

Internal view

Possible transitions between representations: From External to

Internal: e.g., to draw a UI and to generate code from drawingConceptual: e.g., to infer a UI model from look and feel

AVI'2012 - Capri, May 21-25, 2012

Basic concepts

Concep-tual view

External view

Internal view

Loops on representations: From Conceptual to Conceptual: e.g., M2M in MDE From Internal to Internal: e.g., UI transcoding From External to External: e.g., image processing techniques

AVI'2012 - Capri, May 21-25, 2012

Typical configuration in Integrated Development Environments

Background on UI views

Internal view: user interface

code and properties

Conceptual view:

hierarchical description

External view: final user interface

AVI'2012 - Capri, May 21-25, 2012

FormsVBT [Avrahami89] synchronizes 2 UI views

Background on UI views

External view: final user interface

(with structure)

External view: final user interface(without

structure)

Internal view: LaTex-like description

AVI'2012 - Capri, May 21-25, 2012

Vista [Brown98] synchronizes 2 UI views in 4 windows

Background on UI views

Conceptual view: task

model (UAN hierarchy)

Conceptual view: task model

(UAN tables)

Internal view:Clock code

Internal view: Clock

architecture

AVI'2012 - Capri, May 21-25, 2012

TADEUS++ [Stary00] provides 3 views

Background on UI views

Conceptual view: domain model (UML

Class Diagram)

Internal view: final user interface

(with structure)

External view: final user interface

(with structure)

AVI'2012 - Capri, May 21-25, 2012

TADEUS++ [Stary00] provides 3 views

Background on UI views

Conceptual view: domain model (Object

oriented model)

Conceptual view: final user interface

(with structure)

Conceptual view: user

model

Conceptual view: task

model

AVI'2012 - Capri, May 21-25, 2012

Teallach [Griffith00] has 2 views: domain and task, UI

Background on UI views

Conceptual view: task

model

Conceptual view: final user interface

(with structure)

AVI'2012 - Capri, May 21-25, 2012

IdealXML [Montero06] has conceptual views

Background on UI views

Conceptual view: task model

Conceptual view: abstract user interface

(with structure)

Conceptual view: domain model (UML

Class Diagram)

AVI'2012 - Capri, May 21-25, 2012

IdealXML [Montero06] links views by a table

Background on UI views

Conceptual view: domain model (UML

Class Diagram)

Conceptual view: task model

Conceptual view: abstract user interface

(with structure)

AVI'2012 - Capri, May 21-25, 2012

GEF3D [von Pilgrim 08] synchronizes 3 views

Background on UI views

Conceptual view: domain model (UML

Class Diagram)

External view: final user interface

(with structure)

External view: final user interface(without

structure)

AVI'2012 - Capri, May 21-25, 2012

GEF3D [von Pilgrim 08] synchronizes 3 views

Background on UI views

Conceptual view: domain model (UML

Class Diagram)

External view: final user interface

(with structure)

External view: final user interface(without

structure)

AVI'2012 - Capri, May 21-25, 2012

Almost no links represented between views When links are represented

Legibility problems Scalability problems

Variation of link representations Line, arrows, table, graph, tree

No immediate feedback High cognitive load

Shortcomings of UI views organisation

AVI'2012 - Capri, May 21-25, 2012

Replace links between UI views by an animated transition

Goal

AVI'2012 - Capri, May 21-25, 2012

1) Define the initial view

2) Define the final view

3) Define mappings between views

4) Derive the transition based on mappings previously defined

Methodology

AVI'2012 - Capri, May 21-25, 2012

AVI'2012 - Capri, May 21-25, 2012

Transition type

Internal view External view

Text-to-text <label_short=”Birthdate”>

Text-to-position

<textfield … col=”4”…>

Test-to-length

<textfield … length=”20”.>

Text-to-color-saturation

<textfield. fgColor=”red”.>

Text-to-color-texture

<textfield … bgTexture=”checkerboard”…>

Text-to-shape

<textfield name=”Birthdate”>

Text-to-symbol

<textfield …required=”yes”… >

Birthdate :

Birthdate :4

Birthdate :

20

Birthdate :

Birthdate :

Birthdate :

Birthdate * :

Mappings

AVI'2012 - Capri, May 21-25, 2012

Which parameter for animated transition

5) Identify animation technique to produce the transition

Text-to-text Text-to-color Text-to-shape Disappearing elements

6) Execute the animated transition

Methodology

AVI'2012 - Capri, May 21-25, 2012

Animated Transition from CV to EV

AVI'2012 - Capri, May 21-25, 2012

Animated Transition from IV to EV

AVI'2012 - Capri, May 21-25, 2012

Anim. Trans. from IV to EV (identified)

AVI'2012 - Capri, May 21-25, 2012

Anim. Trans. from IV to EV (Slow down)

AVI'2012 - Capri, May 21-25, 2012

UsiView Supports animated transitions between three UI

views: internal, external, conceptual Is implemented in Microsoft Expression Blend

An animated transition is actually a visual effect between two vectorial graphical objects in MS Blend governed by parameters

Location Speed Acceleration - Deceleration

Reduces the cognitive load of mode switching

Results

AVI'2012 - Capri, May 21-25, 2012

Animated transitions are a viable approach for depicting the behaviour of some phenomenon

For a change of context Between an initial and a final state

Provided that Temporal aspects are well designed Spatial aspects are adequately programmed Effects are derived from the model views, not randomly

Transition types: to be extended End user studies: to be pursued Still no systematic approach for animated

transitions

Conclusion and Future Work

AVI'2012 - Capri, May 21-25, 2012

For more information and downloading,http://www.lilab.be

User Interface eXtensible Markup Languagehttp://www.usixml.org

Thank you very much!

FP7 Serenoa projecthttp://www.serenoa-fp7.eu