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

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

23. Mappings
Transition Internal view External view
Birthdate :
type
Text-to-text <label_short=”Birthdate”>
4
Text-to- <textfield … col=”4”…> Birthdate :
position
20
Test-to- <textfield … length=”20”.> Birthdate :
length
Birthdate :
Text-to- <textfield. fgColor=”red”.>
color-
saturation
Text-to- <textfield … Birthdate :
color-texture bgTexture=”checkerboard”…>
Birthdate :
Text-to- <textfield name=”Birthdate”>
shape
Birthdate *:
Text-to- <textfield …
symbol required=”yes”… >
AVI'2012 - Capri, May 21-25, 2012

24. Which parameter for animated transition
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

26. Animated Transition from CV to EV
AVI'2012 - Capri, May 21-25, 2012

27. Animated Transition from IV to EV
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