animated transitions across ui views

Charles-‐Eric Dessart, Vivian Genaro Mo6, Jean Vanderdonckt

Louvain School of Management Université catholique de Louvain

Place des Doyens, 1 – B-‐1348 Louvain-‐la-‐Neuve, Belgium [email protected]

[email protected] – hLp://www.uclouvain.be/jean.vanderdonckt

Animated TransiSons between User Interface Views

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

Louvain InteracSon Laboratory (LILab)

ü  MoSvaSons ü  Basic concepts ü  Background on UI views

ü  Models and language ü  Method ü  SoWware support

ü  Future work

PresentaSon outline

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

MoSvaSons ü  SoWware development life cycle typically involves many

steps at various levels of abstracSon ü  In Model-‐Driven Architecture (MDA), 3 levels of abstracSon

ü  CompuSng-‐Independent Model (CIM) ü  PlaZorm-‐Independent Model (PIM) ü  PlaZorm-‐Specific Model (PSM)

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

(CRF), 4 levels of abstracSon ü  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, presentaSon, dialog, help, tutorial

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

MoSvaSons ü  TransiSon between steps, levels is hard to grasp

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

and aLributes are different ü  Models may have different views depending on

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

ü  TransiSons between models are complex ü  E.g., mappings, transformaSons in MDA

ü  Consequences ü  Mode switching is frequent ü  CogniSve 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 representaSon: ü  Internal: UI code (in programming of markup language) ü  External: UI as experienced by the end user ü  Conceptual: UI representaSon abstracted from the UI code

ü SemanScs ü Syntax ü StylisScs

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

Basic concepts

Concep-tual view

External view

Internal view

ü  Possible transiSons between representaSons: ü  From Conceptual to

ü Internal: e.g., to generate UI code from models ü External: e.g., to render a UI from its model

ü  From Internal to ü External: e.g., to compile/interpret a UI from its code/markup ü Conceptual: e.g., UI reverse engineering

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

Basic concepts

Concep-tual view

External view

Internal view

ü  Possible transiSons between representaSons: ü  From External to

ü Internal: e.g., to draw a UI and to generate code from drawing ü Conceptual: 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 representaSons: ü  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 configuraSon 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



(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


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


Conceptual view: domain model (UML

Class Diagram)

Internal view: final user interface

(with structure)


(with structure)

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

ü  TADEUS++ [Stary00] provides 3 views


Conceptual view: domain model (Object oriented model)

Conceptual view: final user interface

(with structure)

Conceptual view: user

model


model

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

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



model

Conceptual view: final user interface

(with structure)

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

ü  IdealXML [Montero06] has conceptual views



Conceptual view: abstract user interface

(with structure)


Class Diagram)

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

ü  IdealXML [Montero06] links views by a table



Class Diagram)


Conceptual view: abstract user interface

(with structure)

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

ü  GEF3D [von Pilgrim 08] synchronizes 3 views



Class Diagram)


(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

ü  VariaSon of link representaSons ü  Line, arrows, table, graph, tree

ü  No immediate feedback ü  High cogniSve load

Shortcomings of UI views organisaSon

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

ü  Replace links between UI views by an animated transiSon

Goal

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

ü  1) Define the iniSal view

ü  2) Define the final view

ü  3) Define mappings between views

ü  4) Derive the transiSon based on mappings previously defined

Methodology

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

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

T r a n s i t i o n type

Internal view External view

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

T e x t - t o -position

<textfield … col=”4”…>

T e s t - t o -length

<textfield … length=”20”.>

Text-to-color-saturation

<textfield. fgColor=”red”.>

Text-to-color-texture

< t e x t f i e l d … bgTexture=”checkerboard”…>

T e x t - t o -shape

<textfield name=”Birthdate”>

T e x t - t o -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 transiSon

ü  5) IdenSfy animaSon technique to produce the

transiSon ü  Text-‐to-‐text ü  Text-‐to-‐color ü  Text-‐to-‐shape ü  Disappearing elements

ü  6) Execute the animated transiSon

Methodology

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

Animated TransiSon from CV to EV

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

Animated TransiSon from IV to EV

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

Anim. Trans. from IV to EV (idenSfied)

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 transiSons between three UI views: internal, external, conceptual

ü  Is implemented in MicrosoW Expression Blend ü  An animated transiSon is actually a visual effect between two vectorial

graphical objects in MS Blend governed by parameters ü  LocaSon ü  Speed ü  AcceleraSon -‐ DeceleraSon

ü  Reduces the cogniSve load of mode switching

Results

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

ü  Animated transiSons are a viable approach for depicSng the behaviour of some phenomenon

ü  For a change of context ü  Between an iniSal and a final state

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

ü  TransiSon types: to be extended ü  End user studies: to be pursued ü  SSll no systemaSc approach for animated

transiSons

Conclusion and Future Work

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

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

User Interface eXtensible Markup Language http://www.usixml.org

Thank you very much!

FP7 Serenoa project http://www.serenoa-fp7.eu

animated transitions across ui views

Technology