Cinematic Interaction Design

7,698 views
7,335 views

Published on

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

Published in: Technology, Business
1 Comment
24 Likes
Statistics
Notes
No Downloads
Views
Total views
7,698
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
277
Comments
1
Likes
24
Embeds 0
No embeds

No notes for slide
  • Not how to make UI for movie players… A new metaphor Mostly focus on web applications, but also show non-web examples
  • 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>

    ×