Download - Cinematic Interaction Design
Sarah Allen, Laszlo SystemsFebruary 9, 2008
Cinematic Interaction Design
© 2008 Sarah Allen 2
© 2008 Sarah Allen 3
New Technology Creates Opportunity
High Fidelity GraphicsAnimationPersonalized DataSmarter Applications
© 2008 Sarah Allen 4
Simplify
Discrete Pages to Continuous Motion
© 2008 Sarah Allen 5
Desktop-like interfaces
New capabilities can lead us to replicate desktop interfaces
© 2008 Sarah Allen 6
Web applications reach beyond the desktop
Large amounts of data
Connect with real people
© 2008 Sarah Allen 7
Elements of Cinema
NarrativeEmotional ContextVisual Cues
© 2008 Sarah Allen 8
Narrative
“If you don't have a story, no amount of graphic trickery will make it interesting” – Harry Marks
Story = task + context
Interactivity does not preclude a storylineDeveloping a story helps people to successfully
accomplishment a task
© 2008 Sarah Allen 9
Emotional Context
Develop intent Motivation Develop a “Back story”
Environment for Learning and Exploration Create Trust Inspire Confidence
© 2008 Sarah Allen 10
Optimal State of Mind
Relaxed Alertness Moderate to High Challenge Low Threat Sense of Well-being
Enables learning Allow people to access what they already know Think Creatively Tolerate Ambiguity Delay Gratification
Making Connections: Teaching and the Human Brain
by Renate Nummela Caine, Geoffrey Caine
© 2008 Sarah Allen 11
Visual Cues
Explain TransitionsTransform Space (no “page refresh”)Provide ContinuityFocus Attention
No gratuitous animation Use motion graphics for a purpose
Not “eye candy” Not empty calories Essential nutrients for your interface
© 2008 Sarah Allen 12
How Does Animation Help?
By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain.
-- Animation: From Cartoons to the User Interface
Bay-Wei Chang, David Ungar, 1995
© 2008 Sarah Allen 13
IBM
Continuity Single Page Transformation of Space
© 2008 Sarah Allen 14
iPhone
Guide the user through a task with animated transitions Explain a shift in context
© 2008 Sarah Allen 17
Visual Transitions Increase Understanding
What just happened? Clarify Relationships
© 2008 Sarah Allen 21
Inspiration from the movies…
Example from Casablanca shows how cinematography and pacing adds to the story
(Roulette Scene)
© 2008 Sarah Allen 22
Casablanca
Casablanca embraced what is now known as "invisible style”
We can use similar concepts in software design.
...it seduces the viewer by creating a seamless, lush universe that gradually envelops the audience.
© 2008 Sarah Allen 23
Pandora
Key storyline: create a personal radio station & listen to it Emotion: conversational voice Visual transitions: establish sense of place
© 2008 Sarah Allen 24
Pandora
Narrative Focuses Attention on the Primary task
Emotion: Conversational voice Makes complex technology seem comfortable Technology is supportive of the primary task Choices are easy and “human”
Visual transitions Create a sense of place Teach where to find UI Elements
“Pandora doesn’t have users; Pandora has fans”— Inc Magazine
© 2008 Sarah Allen 25
Behr
Storyline: I want to paint my bathroom Be bold, choose multiple colors
© 2008 Sarah Allen 26
Behr
Narrative transforms primary task
Emotion Feel Safe Making Bold
Choices Visual language of
colors tied to real-world images
Visual transitions Explain transitions Explain: What just
happened?
© 2008 Sarah Allen 27
H&R Block: Tango
Narrative: Ugh. I have to file taxes. I hope I don’t owe any money.
I don’t want to get audited.
Could paying your taxes be fun?
Or at least not scary?
© 2008 Sarah Allen 28
H&R Block: Tango
Emotion Personal voice
confidence
humor Trust
Delayed Save
Summary Data
Visual Cues Overview Single page Smooth transitions
© 2008 Sarah Allen 29
Cinema as a New Metaphor
Create Fans not “Users”
Support Story and Provide Emotional Context Through Visual Cues