Successfully reported this slideshow.
Your SlideShare is downloading. ×

Cinematic Interaction Design

Ad

Cinematic  Interaction  Design

Ad

 

Ad

New Technology Creates Opportunity <ul><li>High Fidelity Graphics </li></ul><ul><li>Animation </li></ul><ul><li>Personaliz...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 29 Ad
1 of 29 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Cinematic Interaction Design

  1. Cinematic Interaction Design
  2.  
  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>
  15.  
  16.  
  17. Visual Transitions Increase Understanding <ul><li>What just happened? </li></ul><ul><li>Clarify Relationships </li></ul>
  18.  
  19.  
  20.  
  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. ...it 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>

Editor's Notes

  • Not how to make UI for movie players… A new metaphor Mostly focus on web applications, but also show non-web examples

×