1. The document discusses using principles from cinema and narrative design in digital interfaces to improve user experience and engagement. 2. Elements like narrative, emotional context, and visual cues can simplify complex tasks, focus user attention, and make the experience feel more natural and comfortable. 3. Examples like Pandora, Behr, and H&R Block Tango show how storytelling techniques like establishing context and smooth transitions between states can guide users and increase understanding.

1. Cinematic Interaction Design

3. New Technology Creates Opportunity High Fidelity Graphics Animation Personalized Data Smarter Applications

4. Simplify Discrete Pages to Continuous Motion

5. Desktop-like interfaces New capabilities can lead us to replicate desktop interfaces

6. Web applications reach beyond the desktop Large amounts of data Connect with real people

7. Elements of Cinema Narrative Emotional Context Visual Cues

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

9. Emotional Context Develop intent Motivation Develop a “Back story” Environment for Learning and Exploration Create Trust Inspire Confidence

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

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

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

13. IBM Continuity Single Page Transformation of Space

14. iPhone Guide the user through a task with animated transitions Explain a shift in context

17. Visual Transitions Increase Understanding What just happened? Clarify Relationships

21. Inspiration from the movies… Example from Casablanca shows how cinematography and pacing adds to the story (Roulette Scene)

22. Casablanca Casablanca embraced what is now known as "invisible style” 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 Key storyline: create a personal radio station & listen to it Emotion: conversational voice Visual transitions: establish sense of place

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

25. Behr Storyline: I want to paint my bathroom Be bold, choose multiple colors

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?

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?

28. H&R Block: Tango Emotion Personal voice confidence humor Trust Delayed Save Summary Data Visual Cues Overview Single page Smooth transitions

29. Cinema as a New Metaphor Create Fans not “Users” Support Story and Provide Emotional Context Through Visual Cues