jean vanderdonckt louvain school of management université catholique de louvain place des doyens, 1...
TRANSCRIPT
Jean VanderdoncktLouvain School of Management
Université catholique de Louvain Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium
[email protected] – http://www.uclouvain.be/jean.vanderdonckt
Animated Transitions for Empowering
Interactive Information Systems
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 Why and what of animated transitions Basic concepts First example: web adaptation Second example: transition between UI views Conclusion and Future work
Presentation outline
Keynote address - RCIS'2012 - Valencia, May 18, 2012
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
Motivations
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Animation in general Animated transition in particular
What and why of animated transition
Keynote address - RCIS'2012 - Valencia, May 18, 2012
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.
Related Work: PivotViewer
Keynote address - RCIS'2012 - Valencia, May 18, 2012
[www.silverlight.net/learn/pivotviewer/]
[Elmqvist et al., 2008]
Related Work: InfoVis
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Related Work
• Mnemonic rendering
[Bezerianos, Dragicevic, Balakrishnan, 2008]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
• Spatial Aspects
?
?
Initial Image Final Image
[Heer, Robertson, 2007]
Related Work
Keynote address - RCIS'2012 - Valencia, May 18, 2012
[Heer, Robertson,2007]
Related Work: AT in statistics
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Related Work: Phosphor widgets
Keynote address - RCIS'2012 - Valencia, May 18, 2012
When to use an animated transition
Keynote address - RCIS'2012 - Valencia, May 18, 2012
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
First example: user interface adaptation
Keynote address - RCIS'2012 - Valencia, May 18, 2012
The problem
• What happens when a GUI is adapted?
Nothing betweenEnd user disruptionCognitive perturbation
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Potential solution
• Use animated transition
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Potential solution
• Use animated transition to ensure a smooth transition between the initial UI and the final (adapted) UI
Initial UI before
adaptation
Final UI afteradaptation
Transient UI being
adapted
Transient UI being
adapted
Forward animation
Transient UI being
adapted
Backward animation
ith adaptationoperation
BreakSkip
RestartReturn
Transition time forith adaptation operation
… …
Total transition time for transition scenario
Keynote address - RCIS'2012 - Valencia, May 18, 2012
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
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
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
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
Related work
• DiffIE
Always onAlways on
In-In-situsitu
New to New to youyou
Non-intrusiveNon-intrusive
Changes to Changes to page since your page since your
last visitlast visit
[Teevan, Dumais, Liebling, Hughes,2010]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Related Work
• Temporal Aspects– Slow In/Slow Out is better in all regards– Adaptive speed performs best when complexity found
at endpoints
time →
→ Speed
Slow InSlow Out
Constant Fast InFast Out Adaptive
Fast
Slow
Fast
Slowt
[Dragicevic, Bezerianos, Javed, Elmqvist, Fekete, 2011]
Keynote address - RCIS'2012 - Valencia, May 18, 2012
• Flow
Architecture of the system
Keynote address - RCIS'2012 - Valencia, May 18, 2012
GraphicalUI Editor
UI Model
Adaptation Editor
AdaptedUI Model
Transitionscenario
Keynote address - RCIS'2012 - Valencia, May 18, 2012
• 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
Adaptation operations
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Adaptation operation
Animation family, animated transition with justification
SET that modifies the length of a UI element into a larger value (absolute or relative)
Horizontal scroll/wipe from left (F1): this operation minimizes the visual change since only the right part resulting from the enlarging is changing. For 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 UI element into a larger value (absolute or relative)
Vertical scroll/wipe from bottom (F1): this operation minimizes the visual change since only the right part resulting from the enlarging is changing
DISPLAY that displays a new UI element at a certain position
Uncover (F3), Box out (F4), or Iris open (F4): these operations all induce a progressive display of a new UI element at once, thus creating the illusion that it is coming from the empty.
UNDISPLAY that undisplays a new UI element at a certain position
Cover (F3), Box in (F4), or Iris close (F4): these operations all induce a progressive disappearing of a existing UI element at once, thus creating the illusion that it is shrunk to an empty/white region.
REPLACE that substitutes a UI element by another one
Barn door open (F2): this operation affects the entire visual aspect of the previous one and the new one.
DISTRIBUTE that computes a distribution of a series of UI Elements into a series of UI Containers
Bam door open (F2) or Iris open (F4): these operations enable the visualization of an entire group at once, instead of showing every little display change individually
MOVE that moves a UI element to a new location indicated by its coordinates x and y, possibly in a fixed amount of steps
Ideally, the UI movement could be represented by an animation depicting the movement itself. But practically, this would induce a very long animation, thus increasing again the lag. Therefore, we preferred to adopt a disappearing of 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.
How to associate an animated transition to an adaptation operation
Keynote address - RCIS'2012 - Valencia, May 18, 2012
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
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
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
Example #3
Keynote address - RCIS'2012 - Valencia, May 18, 2012
• Design setup
20 participants
3 transitionscenarios
1. I liked the animation process2. I liked the animation interface3. I preferred the animation over no animation at all4. The animation is easy to use5. The animation is easy to control6. The animation is easy to understand7. The animation is easy to follow8. The animation is easy to progress (forward animation)9. The animation is easy to revert (backward animation)10. The animation represents the adaptation11. The animation is fast12. I would recommend using the animation
12 questions on a5-point Likert scale
(1 = strongly disagree,five = strongly agree)
User study
• Results and discussion
1 2 3 4 5 6 7 8 9 1011121314151617181920
Q1
Q2
Q3
Q4
Q5
Q6
Q7
Q8
Q9
Q10
Q11
Q12
I strongly disagree I disagree I am so so I agree I strongly agree
1. I liked the animation process2. I liked the animation interface3. I preferred the animation over no animation at
all4. The animation is easy to use5. The animation is easy to control6. The animation is easy to understand7. The animation is easy to follow8. The animation is easy to progress (forward
animation)9. The animation is easy to revert (backward
animation)10. The animation represents the adaptation11. The animation is fast12. I would recommend using the animation
User study
Keynote address - RCIS'2012 - Valencia, May 18, 2012
• 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
Intermediary conclusion
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Second example: transitions between UI
views
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
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
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
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 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)
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 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)
Keynote address - RCIS'2012 - Valencia, May 18, 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)
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)
Keynote address - RCIS'2012 - Valencia, May 18, 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)
Keynote address - RCIS'2012 - Valencia, May 18, 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)
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Replace links between UI views by an animated transition
Goal
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Keynote address - RCIS'2012 - Valencia, May 18, 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 * :
Keynote address - RCIS'2012 - Valencia, May 18, 2012
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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Animated Transition from CV to EV
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Animated Transition from IV to EV
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Anim. Trans. from IV to EV (identified)
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Anim. Trans. from IV to EV (Slow down)
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012
Final conclusion
Keynote address - RCIS'2012 - Valencia, May 18, 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
In memoriam: Paul Vanderdonckt(8 May 1933 – 31 March 2012)
Keynote address - RCIS'2012 - Valencia, May 18, 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
Keynote address - RCIS'2012 - Valencia, May 18, 2012