Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cinematic Interaction Design


Published on

Inspirations from cinema for web application design. Interaction08 by Sarah Allen, Laszlo Systems.

Published in: Technology, Business

Cinematic Interaction Design

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