SLIDE 1
Improving Engagement of Animated Visualization with Visual Foreshadowing
Wenchao Li1, Yun Wang2, Haitong Zhang2, Huamin Qu1
1 2
Animated Visualization
Hans Rosling's influential animated data presentation1
1https://www.gapminder.org
Improving Engagement of Animated Visualization with Visual - - PowerPoint PPT Presentation
Improving Engagement of Animated Visualization with Visual - - PowerPoint PPT Presentation
Improving Engagement of Animated Visualization with Visual Foreshadowing Wenchao Li 1 , Yun Wang 2 , Haitong Zhang 2 , Huamin Qu 1 1 2 Animated Visualization Hans Rosling's influential animated data presentation 1 1 https://www.gapminder.org
SLIDE 2
SLIDE 3
Hard to Maintain the Focus
Viewers are likely to become distracted and bored during the ever-changing animated visualization
The history of the world's best Go players1 (Abacaba, 2016)
1https://www.youtube.com/watch?v=oRvlyEpOQ-8
SLIDE 4
Foreshadowing in Film and Literature
SLIDE 5
Visual Foreshadowing Definition
Fork of Bar Chart Race1 by Mike Bostock
1https://observablehq.com/@d3/bar-chart-race
SLIDE 6
Definition
Visual Foreshadowing := (visual effect(s), timing(s), duration(s))
Textual element Visual element
SLIDE 7
Definition
Visual Foreshadowing := (visual effect(s), timing(s), duration(s)) Visual Foreshadowing := (visual effect(s), timing(s), duration(s))
SLIDE 8
Visual Foreshadowing Examples
(Explicit: Prologue) (Explicit: Pre-scene) (Implicit: Contour) (Implicit: De-emphasis) Explicit: openly suggests the
- utcome
Implicit: leaves subtle clues by hinting the relevant items
SLIDE 9
Explicit: Prologue
SLIDE 10
Explicit: Pre-scene
SLIDE 11
Implicit: Contour
SLIDE 12
Implicit: De-emphasis
SLIDE 13
Proof-of-concept Authoring Tool
SLIDE 14
Proof-of-concept Authoring Tool
SLIDE 15
Proof-of-concept Authoring Tool
SLIDE 16
Proof-of-concept Authoring Tool
SLIDE 17
Proof-of-concept Authoring Tool
SLIDE 18
Proof-of-concept Authoring Tool
SLIDE 19
4X
SLIDE 20
2X
SLIDE 21
SLIDE 22
User Study
With foreshadowing Without foreshadowing
VS.
SLIDE 23
Study Design
- 12 Participants (5 males and 7 females; aged 20 - 27)
- 2 different ranking animated visualizations
- 2 visual foreshadowing settings (with and without)
SLIDE 24
Study Design
- A survey consists of 12 questions (referenced from previous study [1])
- A semi-structured interview for collecting feedback
- 20 minutes to complete the whole study
[1] Amini et al., Hooked on data videos: assessing the effect of animation and pictographs on viewer engagement, AVI 2018.
SLIDE 25
- Average ratings of the user engagement survey questions
Study Results
(7-point Likert scale)
“The additional visual effects are useful and make the animation more like a story. Otherwise, I don’t know where to look at and forget almost all the changes.”
- Interview feedback
SLIDE 26
- Visual Foreshadowing (explicit and implicit)
- A proof-of-concept animated visualization authoring tool
- Initial evaluation on improving engagement for animated
visualization
Conclusion
SLIDE 27
- Future extensions of visual foreshadowing
- Visual effects
- Animated visualization types
Future work
SLIDE 28
- Future extensions of visual foreshadowing
- Visual effects
- Animated visualization types
- In-depth Investigation on Effectiveness
- Which is the most effective visual foreshadowing design?
- Which is the most effective setting (in terms of timing and duration)?
- …
Future work
SLIDE 29
THANK YOU!
Improving Engagement of Animated Visualization with Visual Foreshadowing
(Explicit) (Implicit)