User interface development life cycle often involves several different views of the user interface over time; these views belong sometimes to different abstraction levels. Usually the relationship between views is presented by tiling coordinated windows, which leaves to the developer the responsibility to effectively and efficiently link corresponding elements across views. This paper attempts to overcome the shortcomings posed by the coordinated visualization across views by providing UsiView, a rendering engine that ensures with one single window an animated transition between three different user interface views: the internal, the external, and the conceptual one. Examples of scenarios include: an authoring environment providing an animated transition from an internal view (e.g., HTML5) to its external view (e.g., a web page), an Integrated Development Environment providing an animated transition from its conceptual view to its external view; a model-driven engineering environment providing an animated transition from the conceptual view to an external view. A five-step methodology for specifying animated transitions between views is proposed: defining the views, their mappings, the transition expressing the mappings, and the animation technique to render such transition. This paper discusses the potential advantages of using animated transitions between user interface views during the development life cycle
AWS Community Day CPH - Three problems of Terraform
Animated Transitions between User Interface Views
1. Animated Transitions between
User Interface Views
Charles-Eric Dessart, Vivian Genaro Motti, Jean Vanderdonckt
Louvain School of Management
Université catholique de Louvain
Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium
Vivian.genaromotti@uclouvain.be
jean.vanderdonckt@uclouvain.be – http://www.uclouvain.be/jean.vanderdonckt
2. Louvain Interaction Laboratory
(LILab)
Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium
http://www.lilab.be, http://www.lilab.eu, http://www.lilab.info
3. Presentation outline
Motivations
Basic concepts
Background on UI views
Models and language
Method
Software support
Future work
AVI'2012 - Capri, May 21-25, 2012
4. 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
5. 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
6. Basic concepts
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
Semantics
Syntax
Stylistics
Concep-
tual view
External Internal
view view
AVI'2012 - Capri, May 21-25, 2012
7. Basic concepts
Possible transitions between representations:
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
Concep-
tual view
External Internal
view view
AVI'2012 - Capri, May 21-25, 2012
8. Basic concepts
Possible transitions between representations:
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
Concep-
tual view
External Internal
view view
AVI'2012 - Capri, May 21-25, 2012
9. Basic concepts
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
Concep-
tual view
External Internal
view view
AVI'2012 - Capri, May 21-25, 2012
10. Background on UI views
Typical configuration in Integrated Development
Environments
External view:
final user
interface
Conceptual
view:
hierarchical
Internal view:
description
user interface
code and
properties
AVI'2012 - Capri, May 21-25, 2012
11. Background on UI views
FormsVBT [Avrahami89] synchronizes 2 UI views
Internal view:
External view:
LaTex-like
final user
description
interface
(with structure)
External view:
final user
interface
(without
structure)
AVI'2012 - Capri, May 21-25, 2012
12. Background on UI views
Vista [Brown98] synchronizes 2 UI views in 4 windows
Conceptual view:
Conceptual
task model
view: task
(UAN tables)
model (UAN
hierarchy)
Internal view:
Clock code
Internal
view: Clock
architecture
AVI'2012 - Capri, May 21-25, 2012
13. Background on UI views
TADEUS++ [Stary00] provides 3 views
Internal view:
final user
interface
(with structure)
External view:
Conceptual final user
view: domain interface
model (UML (with structure)
Class Diagram)
AVI'2012 - Capri, May 21-25, 2012
14. Background on UI views
TADEUS++ [Stary00] provides 3 views
Conceptual view:
final user
interface
(with structure)
Conceptual
view: domain Conceptual
model (Object view: user
oriented model) model
Conceptual
view: task
model
AVI'2012 - Capri, May 21-25, 2012
15. Background on UI views
Teallach [Griffith00] has 2 views: domain and task, UI
Conceptual Conceptual view:
view: task final user
model interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012
16. Background on UI views
IdealXML [Montero06] has conceptual views
Conceptual view:
task model
Conceptual
view: domain
model (UML
Class Diagram)
Conceptual
view: abstract
user interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012
17. Background on UI views
IdealXML [Montero06] links views by a table
Conceptual view:
task model
Conceptual
view: domain Conceptual
model (UML view: abstract
Class Diagram) user interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012
18. Background on UI views
GEF3D [von Pilgrim 08] synchronizes 3 views
External view:
Conceptual
final user
view: domain
interface
model (UML
(without
Class Diagram)
structure)
External view:
final user
interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012
19. Background on UI views
GEF3D [von Pilgrim 08] synchronizes 3 views
External view:
final user
interface
(without
Conceptual
structure)
view: domain
model (UML
Class Diagram)
External view:
final user
interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012
20. Shortcomings of UI views organisation
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
AVI'2012 - Capri, May 21-25, 2012
21. Goal
Replace links between UI views by an animated
transition
AVI'2012 - Capri, May 21-25, 2012
22. Methodology
1) Define the initial view
2) Define the final view
3) Define mappings between views
4) Derive the transition based on mappings
previously defined
AVI'2012 - Capri, May 21-25, 2012
25. Methodology
5) Identify animation technique to produce the
transition
Text-to-text
Text-to-color
Text-to-shape
Disappearing elements
6) Execute the animated transition
AVI'2012 - Capri, May 21-25, 2012
28. Anim. Trans. from IV to EV (identified)
AVI'2012 - Capri, May 21-25, 2012
29. Anim. Trans. from IV to EV (Slow
down)
AVI'2012 - Capri, May 21-25, 2012
30. Results
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
AVI'2012 - Capri, May 21-25, 2012
31. Conclusion and Future Work
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
AVI'2012 - Capri, May 21-25, 2012
32. Thank you very much!
User Interface eXtensible Markup Language
http://www.usixml.org
FP7 Serenoa project
http://www.serenoa-fp7.eu
For more information and downloading,
http://www.lilab.be
Hinweis der Redaktion
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
Mapping problem consist in the need to express link between different Uis views December 6, 2010
Mapping problem consist in the need to express link between different Uis views External view: final GUI look an feel December 6, 2010
To represent a quantitative variable the position is the most precise then length, angle…. December 6, 2010
Mapping problem consist in the need to express link between different Uis views December 6, 2010
Mapping problem consist in the need to express link between different Uis views December 6, 2010
Mapping problem consist in the need to express link between different Uis views December 6, 2010
Mapping problem consist in the need to express link between different Uis views December 6, 2010
Mapping problem consist in the need to express link between different Uis views December 6, 2010
Mapping problem consist in the need to express link between different Uis views December 6, 2010
Mapping problem consist in the need to express link between different Uis views December 6, 2010