Slideshow transcript
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




Add a comment on Slide 1
If you have a SlideShare account, login to comment; else you can comment as a guest- Favorites & Groups
Showing 1-50 of 7 (more)