cinematic interaction design

Sarah Allen, Laszlo SystemsFebruary 9, 2008

Cinematic Interaction Design


New Technology Creates Opportunity

High Fidelity GraphicsAnimationPersonalized DataSmarter Applications


Simplify

Discrete Pages to Continuous Motion


Desktop-like interfaces

New capabilities can lead us to replicate desktop interfaces


Web applications reach beyond the desktop

Large amounts of data

Connect with real people


Elements of Cinema

NarrativeEmotional ContextVisual Cues


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


Emotional Context

Develop intent Motivation Develop a “Back story”

Environment for Learning and Exploration Create Trust Inspire Confidence


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


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


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


IBM

Continuity Single Page Transformation of Space


iPhone

Guide the user through a task with animated transitions Explain a shift in context


Visual Transitions Increase Understanding

What just happened? Clarify Relationships


Inspiration from the movies…

Example from Casablanca shows how cinematography and pacing adds to the story

(Roulette Scene)


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.


Pandora

Key storyline: create a personal radio station & listen to it Emotion: conversational voice Visual transitions: establish sense of place


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


Behr

Storyline: I want to paint my bathroom Be bold, choose multiple colors


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?


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?


H&R Block: Tango

Emotion Personal voice

confidence

humor Trust

Delayed Save

Summary Data

Visual Cues Overview Single page Smooth transitions


Cinema as a New Metaphor

Create Fans not “Users”

Support Story and Provide Emotional Context Through Visual Cues

cinematic interaction design

Technology

human visual transitions

primary task emotion

animated transitions

task domain

pandora narrative

primary task choices

story environment

tango narrative