Cinematic Interaction Design

Slide 1: Cinematic Interaction Design Sarah Allen, Laszlo Systems February 9, 2008

Slide 2: © 2008 Sarah Allen 2

Slide 3: New Technology Creates Opportunity  High Fidelity Graphics  Animation  Personalized Data  Smarter Applications © 2008 Sarah Allen 3

Slide 4: Simplify Discrete Pages to Continuous Motion © 2008 Sarah Allen 4

Slide 5: Desktop-like interfaces New capabilities can lead us to replicate desktop interfaces © 2008 Sarah Allen 5

Slide 6: Web applications reach beyond the desktop  Large amounts of data  Connect with real people © 2008 Sarah Allen 6

Slide 7: Elements of Cinema  Narrative  Emotional Context  Visual Cues © 2008 Sarah Allen 7

Slide 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 storyline  Developing a story helps people to successfully accomplishment a task © 2008 Sarah Allen 8

Slide 9: Emotional Context  Develop intent  Motivation  Develop a “Back story”  Environment for Learning and Exploration  Create Trust  Inspire Confidence © 2008 Sarah Allen 9

Slide 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 10

Slide 11: 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 © 2008 Sarah Allen 11

Slide 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 12

Slide 13: IBM  Continuity  Single Page  Transformation of Space © 2008 Sarah Allen 13

Slide 14: iPhone  Guide the user through a task with animated transitions  Explain a shift in context © 2008 Sarah Allen 14

Slide 17: Visual Transitions Increase Understanding  What just happened?  Clarify Relationships © 2008 Sarah Allen 17

Slide 21: Inspiration from the movies…  Example from Casablanca shows how cinematography and pacing adds to the story (Roulette Scene) © 2008 Sarah Allen 21

Slide 22: Casablanca Casablanca embraced what is now known as "invisible style” ...it seduces the viewer by creating a seamless, lush universe that gradually envelops the audience. We can use similar concepts in software design. © 2008 Sarah Allen 22

Slide 23: Pandora  Key storyline: create a personal radio station & listen to it  Emotion: conversational voice  Visual transitions: establish sense of place © 2008 Sarah Allen 23

Slide 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 24

Slide 25: Behr  Storyline: I want to paint my bathroom  Be bold, choose multiple colors © 2008 Sarah Allen 25

Slide 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 26

Slide 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 27

Slide 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 28

Slide 29: Cinema as a New Metaphor Create Fans not “Users” Support Story and Provide Emotional Context Through Visual Cues © 2008 Sarah Allen 29