Animated transitions are widely used in many different domains of human activity, ranging from cartoons and movies to computer science for powerfully conveying a message more effectively and efficiently about a phenomenon of interest. This paper reviews a series of techniques for defining, analyzing, and exploiting animated transitions in different types of interactive information systems. A general conceptual model is provided that explicitly links a model of an interactive information system, its model elements and relationships to animated transitions in order to adequately reflect any change of the model into animated transitions. Two instantiations of this conceptual framework are discussed: animated transitions for representing adaptation of the graphical user interface of an interactive system, along with its implementation; and animated transitions between user interface views during development life cycle.
Animated Transitions for Empowering Interactive Information Systems - Keynote address of RCIS'2012 conference
1. Animated Transitions for
Empowering
Interactive Information Systems
Jean Vanderdonckt
Louvain School of Management
Université catholique de Louvain
Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium
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
Why and what of animated transitions
Basic concepts
First example: web adaptation
Second example: transition between UI views
Conclusion and Future work
Keynote address - RCIS'2012 - Valencia, May 18, 2012
4. Motivations
Static display vs dynamic animation
Many domains of human activity are dynamic by definition
Air traffic control, auctions, statistics
Information systems
Information systems should have a vivid behaviour that reflects their internal
processing
Some IFIP WG 13.2 Qualities
Honesty = capability to reflect the internal state
Observability
Browsability
Why not: "behaviourability"
Keynote address - RCIS'2012 - Valencia, May 18, 2012
5. Motivations
Animation in general
Animated transition in particular
Keynote address - RCIS'2012 - Valencia, May 18, 2012
6. What and why of animated transition
What: Smooth out a startling or dislocating transition with an animation that
makes it feel natural.
When: Users move through a large virtual space, such as an image,
spreadsheet, graph, or text document. They might be able to zoom in to
varying degrees, pan or scroll, or rotate the whole thing.
Why: All of these transformations can disrupt a user's sense of where she in
in the virtual space.
Zooming in and out, for instance, can throw off her spatial sense when it's
done instantaneously, as can rotation and the closing of entire sections
that prompt a re-layout of the screen.
Moving from an initial diagram to a final diagram
Scrolling down a long page of text, when it's jumpy, can slow a reader
down. But when the shift from one state to another is continuous, it's not
so bad. In other words, you can animate the transition between states so
it looks smooth, not discontinuous. This helps keep the user oriented.
Keynote address - RCIS'2012 - Valencia, May 18, 2012
7. Related Work: PivotViewer
[www.silverlight.net/learn/pivotviewer/]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
8. Related Work: InfoVis
[Elmqvist et al., 2008]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
9. Related Work
• Mnemonic rendering
[Bezerianos, Dragicevic, Balakrishnan, 2008]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
10. Related Work
• Spatial Aspects
Initial Image Final Image
?
?
[Heer, Robertson, 2007]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
11. Related Work: AT in statistics
[Heer, Robertson,
2007]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
13. When to use an animated transition
Icon Name: definition
Horizontal scroll from right: to display the next element from a sequence of elements
Horizontal scroll from left: to display the previous element from a sequence of
elements
Vertical scroll from bottom: to proceed with a step-by-step reasoning, a continuous
subject or a long passing over, or a movement
Vertical scroll from top: to move back in a step-by-step reasoning, a continuous
subject or a long passing over, or a movement
Diagonal replacement from top/bottom left corner: to go back to the previous page
or screen or element
Diagonal replacement from top/bottom right corner: to move to next page or screen
or UI element
Venetian blinds: to present a completely different topic, to provide a feeling of
coordinated time, to convey a significant transition
Barn door close: to close a transient screen (e.g., an information screen, the About…
splash screen), to close a current scene, to signify game over
Barn door open: to open a transient screen, to initiate a new step, to open a new
window or UI element, to launch a game, a simulation
Iris open: to show more detailed information about a particular topic
Iris close: to show more general information about a particular topic
Keynote address - RCIS'2012 - Valencia, May 18, 2012
15. The problem
• What happens when a GUI is adapted?
Nothing between
⇒End user disruption
⇒Cognitive perturbation
Keynote address - RCIS'2012 - Valencia, May 18, 2012
16. Potential solution
• Use animated transition
Keynote address - RCIS'2012 - Valencia, May 18, 2012
17. Potential solution
• Use animated transition to ensure a smooth
transition between the initial UI and the final
(adapted) UI
Backward animation Forward animation
Break
Skip
Initial UI Transient UI Transient UI Transient UI
Final UI after
before … being being being
… adaptation
adaptation adapted adapted adapted
Return ith adaptation
Restart operation
Transition time for
ith adaptation operation
Total transition time for transition scenario
Keynote address - RCIS'2012 - Valencia, May 18, 2012
18. Related work on
Animated Transitions
• Use animation
– to draw the audience's attention to a single element out of several, or to alert
people to updated information
– to indicate the function of a hot spot (for example, a moving hiker could
indicate the current location of Mungo Park adventurers)
– to draw attention to changes from one state to another (for example,
animated map area changes could indicate deforestation over time).
– to demonstrate navigation in a particular direction (for example, a simple
page-flip animation could easily distinguish forward from backward movement
– to create icons for actions that can't be adequately expressed with a flat,
static picture
• Permanently moving (looping) animations should rarely be included on a Web
page because they will make it very hard for your audience to concentrate on
other page content. Research suggests that movement in our peripheral
vision can dominate our attention. Research also indicates that moving text is
harder to read than static text
[Baecker, Small, Mander ,2001]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
19. Related work on
Animated Transitions
• A number of visual effects are available. For global changes to the entire screen
these are the cut, fade in and fade out, dissolve, wipe, overlap, and multiple
exposure. Locally, within a region of the screen, pop on and pop off, pull down and
pull up, flip, and spin can be used.
• Note: Visual effects should be used carefully. When employed too often, they will
be fatiguing or even annoying or distressing to the user.
• Animation covers a range of creative techniques and media, from three-
dimensional figures captured on film to wholly computer-generated images.
Typical for animation is the rapid and continuous change of the graphical objects
making up the animation
• The dynamic of animation can be used to direct the user's attention to a specific
point.
– Time and movement can be visualised by animation.
– Animation can be used to show an invisible process. It enables the simulation of processes
which are too dangerous or difficult to perform directly.
– Animation of structures is useful for the exploration of complex environments.
– Animation can be used for gradual illustration of a content.
– Complex contents (e.g. process, function) can be simplified by animation.
– Animation can be used to show the reaction on an interaction.
[Baecker, Small, Mander ,2001]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
20. How to do an animated
transition?
• Design:
– An animation sequence should be short.
– The direction of movement influence the meaning of
the information conveyed.
– Animation should be supported by sound.
– Animation techniques for global changes to the entire
screen are cut, fade in and fade out, dissolve, wipe,
overlap, and multiple exposure.
– Animation techniques for local changes within a region
of the screen are pop on and pop off, pull down and
pull up, flip, and spin.
[Ware,2004]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
21. How to do an animated
transition?
• Interaction:
– The user should be able to interrupt the animation
sequence at any time
– The user should be able to repeat parts of the
animation
– The user should be able to control the animation
playing speed (e.g. fast forward)
– The user may manipulate an animated object
Keynote address - RCIS'2012 - Valencia, May 18, 2012
22. Related work
• DiffIE New to
you
Always on
Non-intrusive
Changes to
page since your In-
last visit situ
[Teevan, Dumais, Liebling, Hughes,2010]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
23. Related Work
• Temporal Aspects
– Slow In/Slow Out is better in all regards
– Adaptive speed performs best when complexity found
at endpoints
Slow In Fast In
Constant Adaptive
Slow Out Fast Out
Fast Fast
Slow
t Slow
→
Sp
eed
[Dragicevic, Bezerianos, Javed, Elmqvist, Fekete, 2011]
time → Keynote address - RCIS'2012 - Valencia, May 18, 2012
24. Architecture of the
system
• Flow
Keynote address - RCIS'2012 - Valencia, May 18, 2012
25. Graphical
UI Editor
UI Model
Adaptation
Editor
Adapted Transition
UI Model scenario
Keynote address - RCIS'2012 - Valencia, May 18, 2012
26. Adaptation operations
• Resizing operations: are aimed at changing a widget size in order to
optimize screen real estate, aesthetics, and visual design
– For instance, an edit field could be enlarged/shortened in height and/or length to take less
space and to be subject to various alignments.
• Relocating operations: are aimed at changing a widget location in order
to reduce the screen space consumption
– For instance, “Ok”, “Cancel”, and “Help” push buttons could be relocated to the bottom of a
dialog box.
• Widget transformations: are aimed at replacing one or a group of
widgets by another widget or another group of widgets ensuring the
same task, perhaps with some degradation
– For instance, an accumulator that consists of list boxes with possible values and chosen
values could be replaced by a multi-selection list, which could be in turn replaced by a
multi-selection drop-down list.
• Image transformations: are aimed at changing the size, surface, and
quality of an image in order to accommodate the constraints imposed by
the new context of use, namely the display/platforms constraints.
• Splitting rules: are aimed at dividing one or a group of widgets into one
or several other groups of widgets that will be displayed separately. For
instance, a dialog box is split into two tabs in a tabbed dialog box
Keynote address - RCIS'2012 - Valencia, May 18, 2012
27. How to associate an animated
transition to an adaptation operation
Adaptation Animation family, animated transition with justification
operation
SET that modifies the length of a Horizontal scroll/wipe from left (F1): this operation minimizes the visual
UI element into a larger value change since only the right part resulting from the enlarging is changing. For
(absolute or relative) edit fields, for instance, this is particularly appropriate because it gives the
feeling that the field is really expanding
SET that modifies the height of a Vertical scroll/wipe from bottom (F1): this operation minimizes the visual
UI element into a larger value change since only the right part resulting from the enlarging is changing
(absolute or relative)
DISPLAY that displays a new UI Uncover (F3), Box out (F4), or Iris open (F4): these operations all induce a
element at a certain position progressive display of a new UI element at once, thus creating the illusion that
it is coming from the empty.
UNDISPLAY that undisplays a Cover (F3), Box in (F4), or Iris close (F4): these operations all induce a
new UI element at a certain progressive disappearing of a existing UI element at once, thus creating the
position illusion that it is shrunk to an empty/white region.
REPLACE that substitutes a UI Barn door open (F2): this operation affects the entire visual aspect of the
element by another one previous one and the new one.
DISTRIBUTE that computes a Bam door open (F2) or Iris open (F4): these operations enable the
distribution of a series of UI visualization of an entire group at once, instead of showing every little display
Elements into a series of UI change individually
Containers
MOVE that moves a UI element Ideally, the UI movement could be represented by an animation depicting the
to a new location indicated by its movement itself. But practically, this would induce a very long animation, thus
coordinates x and y, possibly in a increasing again the lag. Therefore, we preferred to adopt a disappearing of
fixed amount of steps the UI element from its original location and an appearing to its target
location. Depending on these locations, vertical, horizontal or diagonal
replacements (F1) are selected.
Keynote address - RCIS'2012 - Valencia, May 18, 2012
28. Example #1
• SUBSTITUTE #listbox_component_19 BY @ComboBox IN #box3 ("newComboBox")
WHERE ROW 0, COL 0;
• CONTRACT #newComboBox OF 90 50;
• CHANGEBOX #button_1 TO #box3 WHERE ROW 0, COLINSERT 1;
• SET #button_1->Content TO "GO!";
• CHANGEBOX #button_0 TO #box3 WHERE ROW 0, COLINSERT 2;
• SET #button_0->Content TO "[X]";
• SET #label_0->FontSize TO 12;
• CONTRACT #window_0 OF 40 120;
Keynote address - RCIS'2012 - Valencia, May 18, 2012
29. Example #1
• SUBSTITUTE #listbox_component_19 BY @ComboBox IN #box3 ("newComboBox")
WHERE ROW 0, COL 0;
• CONTRACT #newComboBox OF 90 50;
• CHANGEBOX #button_1 TO #box3 WHERE ROW 0, COLINSERT 1;
• SET #button_1->Content TO "GO!";
• CHANGEBOX #button_0 TO #box3 WHERE ROW 0, COLINSERT 2;
• SET #button_0->Content TO "[X]";
• SET #label_0->FontSize TO 12;
• CONTRACT #window_0 OF 40 120;
Keynote address - RCIS'2012 - Valencia, May 18, 2012
30. Example #2
• SUBSTITUTE %SelectRadioGroup "groupeType" BY @ComboBox
IN #box110 ("newComboBoxType") WHERE ROW 0, COL 0;
• SUBSTITUTE %SelectRadioGroup "groupeEtudiant" BY
@CheckBox IN #box120 ("newCheckBoxEtudiant") WHERE ROW 0,
COL 0;
• CONTRACT #window_0 OF 50 50;
• CHANGEROWS #box1 TO 25 25 25 25;
Keynote address - RCIS'2012 - Valencia, May 18, 2012
31. Example #3
Keynote address - RCIS'2012 - Valencia, May 18, 2012
32. User study
• Design setup
20 participants
3 transition
scenarios
12 questions on a 1. I liked the animation process
2. I liked the animation interface
5-point Likert scale 3. I preferred the animation over no animation at all
(1 = strongly 4. The animation is easy to use
disagree, 5. The animation is easy to control
five = strongly agree) 6. The animation is easy to understand
7. The animation is easy to follow
8. The animation is easy to progress (forward animation)
9. The animation is easy to revert (backward animation)
10. The animation represents the adaptation
11. The animation is fast
12. I would recommend using the animation
33. User study
I strongly disagree I disagree I am so so I agree I strongly agree
• Results and discussion Q12
1. I liked the animation process Q11
2. I liked the animation interface
3. I preferred the animation over no animation at Q10
all Q9
4. The animation is easy to use
5. The animation is easy to control Q8
6. The animation is easy to understand Q7
7. The animation is easy to follow
Q6
8. The animation is easy to progress (forward
animation) Q5
9. The animation is easy to revert (backward
Q4
animation)
10. The animation represents the adaptation Q3
11. The animation is fast Q2
12. I would recommend using the animation
Q1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Keynote address - RCIS'2012 - Valencia, May 18, 2012
34. Intermediary conclusion
• Animated transition is a viable approach
provided that
– Appropriate animated transitions are adequately
mapped onto adaptation operations
– Time and space are properly regulated
• To work on:
– Minimize the lag effect that is still there
– Group similar, small adaptation operations
Keynote address - RCIS'2012 - Valencia, May 18, 2012
36. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
37. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
38. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
39. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
40. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
41. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
42. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
43. 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)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
44. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
45. 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)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
46. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
47. Background on UI views
Teallach [Griffith00] has 2 views: domain and task, UI
Conceptual Conceptual view:
view: task final user
model interface
(with structure)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
48. 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)
49. 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)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
50. 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)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
51. 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)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
52. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
53. Goal
Replace links between UI views by an animated
transition
Keynote address - RCIS'2012 - Valencia, May 18, 2012
54. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
60. Anim. Trans. from IV to EV (identified)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
61. Anim. Trans. from IV to EV (Slow
down)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
62. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
63. Final conclusion
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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
64. In memoriam: Paul Vanderdonckt
(8 May 1933 – 31 March 2012)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
65. 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Notes de l'éditeur
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
December 6, 2010
Statement #1: nobody had a negative feeling about having an animation of the transition scenario (neither orange nor red areas). Statement #2: some participants were concerned about the Animator UI (some orange area) Statement #3: follows a similar trend. Participants appear to show a preference for the animation over no animation at all. Statement #4: the animation should always come automatically, participants seemed to appreciate the animation effects, but do not appreciate the time consumed by the animation, especially when the total animation time is long. Statement #5: users prefer to keep control over the transition scenario with user actions, but it turns out that they do not know exactly what user action to undertake since they do not know what the next adaptation operations are. Statement #8: Forward animation is perceived in a better way that the backward animation (statement #9). Statement #12: verifies the results of the global perception responses by asking the participants to respond to a recommendation statement: three quarters of the participants were confident in recommending the animation transition as a mechanism for showing the adaptation. These results are more moderate than the initial statements. Keynote address - Interaccion'2010 (Valencia, 6-10 September 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
Mapping problem consist in the need to express link between different Uis views December 6, 2010