Cinematic Interaction Design

New Technology Creates Opportunity High Fidelity Graphics Animation Personalized Data Smarter Applications

High Fidelity Graphics

Animation

Personalized Data

Smarter Applications

Simplify Discrete Pages to Continuous Motion

Discrete Pages to Continuous Motion

Desktop-like interfaces New capabilities can lead us to replicate desktop interfaces

New capabilities can lead us to replicate desktop interfaces

Web applications reach beyond the desktop Large amounts of data Connect with real people

Large amounts of data

Connect with real people

Elements of Cinema Narrative Emotional Context Visual Cues

Narrative

Emotional Context

Visual 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 storyline Developing a story helps people to successfully accomplishment a task

“ 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 storyline

Developing 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

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

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 Transitions Transform Space (no “page refresh”) Provide Continuity Focus Attention No gratuitous animation Use motion graphics for a purpose Not “eye candy” Not empty calories Essential nutrients for your interface

Explain Transitions

Transform Space (no “page refresh”)

Provide Continuity

Focus 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

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

Continuity

Single Page

Transformation of Space

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

Guide the user through a task with animated transitions

Explain a shift in context

Visual Transitions Increase Understanding What just happened? Clarify Relationships

What just happened?

Clarify Relationships

Inspiration from the movies… Example from Casablanca shows how cinematography and pacing adds to the story (Roulette Scene)

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.

Casablanca embraced what is now known as "invisible style”

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

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

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

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?

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?

Narrative: Ugh. I have to file taxes.

I hope I don’t owe any money.

I don’t want to get audited.

H&R Block: Tango Emotion Personal voice confidence humor Trust Delayed Save Summary Data Visual Cues Overview Single page Smooth transitions

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

Create Fans not “Users”

Support Story and Provide Emotional Context Through Visual Cues