I began college as a film student. I’ve always loved storytelling, particularly visual storytelling in the forms of film and animation. Well-made films show us that they can drive engagement, communicate in subtle ways, change attitudes, and inspire us to try to change our lives. Films succeed in evoking responses and engaging audiences only with a combination of well-written narrative and effective storytelling technique. It’s the filmmaker’s job to put this together. To do so they’ve developed processes, tools and techniques that allow them to focus attention, emphasize information, foreshadow and produce the many elements that together comprise a well-told story. We’re responsible for creating products that aren’t just easy to use, but that people appreciate using. It stands to reason that the methods used in films to communicate with and engage audiences can serve as inspiration for designers. With this presentation, we'’ll revisit the topic of using stories in design and expand on the technical aspects used in film to communicate. We’ll look at some tools used in film such as: cinematic patterns, beat sheets, and storyboards. We’ll consider why they’re used and how we might look to them for inspiration.

1. LIGHTS! CAMERA! INTERACTION!
What Designers Can Learn From Filmmakers

2. Why film?

3. Organization & Orchestration
How do you coordinate something with so many
moving parts to achieve desired effect?

4. Organization & Orchestration
How do you coordinate something with so many
moving parts to achieve desired effect?
Sound
Editing
Interface
Design
Visual
Design
Content
IxD
Usability &
Human Factors

5. Organization & Orchestration
How do you coordinate something with so many
moving parts to achieve desired effect?
Actors
Sound
Dialogue
Action
Scenery
& Sets
Editing
Cinematography

8. Who is the director?

9. The Filmmaking Process
Screenplay & Script  Storyboards & Direction 
Raw Footage  Final Edited Film

10. The Software Design Process
Task Flows  Sketches, Wireframes & Content 
Prototype & Visual Design  Final Developed Product

13. How do we keep an understanding
of emotion and feel in mind
throughout the design process?

14. Big Fish | Tim Burton | 2003

15. An abomination called Twilight | Multiple Perpetrators | 2008-2012

16. Scenarios

17. Scenes

19. Martin Hardee, Cisco, http://blogs.cisco.com/socialmedia/serious-ux-design-using-comics/

20. Beat Sheets

21. Beat Sheets
Scene-by-Scene Outline
• Plot Points
• Actions
• Effect on the Audience

22. Can we use beat sheets in design?

23. Beat Sheets
Annotated Task Flows
• Emotional state of the user
• Emotional goals of the system
To Be Replaced

24. Story vs. Storytelling

25. Story vs. Storytelling
Events vs. Structure

26. Pacing

28. How do we control pace in
digital design?

33. From The Fleischer Story by Leslie Cabarga
Foreground
Midground
Background

34. Virtual Water | Angela Morelli | http://www.angelamorelli.com/water/

35. Mise en Scène
All of the tools, other than dialogue, used by a
filmmaker to tell a story.

36. Sweeney Todd | Tim Burton | 2007

37. Is there mise en scène in digital
products and websites?

38. Static
Media
Interaction
Cinematic
Media
We are
here.

39. Motion has meaning.

40. Written by: Bill Scott & Theresa Neil
Transitions
• Show relationships
between elements
• Cause & effect
• Direct attention
• Support brand
personality

42. When adding motion to design
elements, think of them as if they
are physical objects.

43. “Anything we can do to make
something digital appear as a
physical object is delightful.”
Adam Lisagor | Sandwich Video
Video as User Experience at UX Week 2011

45. Slow In & Slow Out
Squash & Stretch
Anticipation
Staging
Straight Ahead Action
& Pose-to-pose
Arcs
Secondary Action
Timing
Exaggeration
Solid Drawing
Follow Through &
Overlapping Action
Appeal

46. Anticipation
Straight Ahead Action
& Pose-to-pose
Arcs
Secondary Action
Solid Drawing
Appeal
Squash & Stretch
Staging
Slow In & Slow Out
Timing
Exaggeration
Follow Through &
Overlapping Action

47. Squash & Stretch,
Arcs, Easing
Follow Through &
Overlapping Action

48. Physical objects move in
physical spaces.

50. Anything that appears or happens
on screen can either further the
story or recontextualize it.

51. Motion has more meaning.

52. Motion
Early filmmakers didn’t have sound, dialogue or color.
They had to find other ways to communicate.

53. The bad guy enters from the right.

55. Top to Bottom: Anticipation & Inevitability
Bottom to Top: Struggle & Otherworldliness

56. Written by: Bill Scott
& Theresa Neil
Transitions
• Show relationships
between elements
• Cause & effect
• Direct attention
• Support brand
personality
• Communicate the
character of your
design or design
elements

57. Motion is an additive
design treatment.

58. How do we develop,
practice, and explore
our use of motion in
designs.

59. Film has playbacks and test-footage.
Designers have prototyping.

61. The Camera
Control of the camera means control of the eye.

62. Rack Focus
• Little to no camera
movement
• No complex action in
the scene
• Camera shifts focus
from one element to
another within the
frame

64. Can we employ rack focus and
other camera oriented
techniques in digital design?

65. Parting Thoughts

66. Cinematic
Storytelling
Jennifer Vas Sijll
http://amzn.com/0321725522
The Illusion
of Life
Frank Thomas and Ollie
Johnston
http://amzn.com/0786860707
Directing the
Story
Francis Glebas
http://amzn.com/0240810767
Designing
Web
Interfaces
Bill Scott and Theresa Neil
http://amzn.com/0596516258

67. Reframing UX Design
Peter Merholz
http://www.peterme.com/2012/09/04/reframing-ux-design/
Thinking Like a Storyteller
Cindy Chastain
https://vimeo.com/9686849
Video as User Experience
Adam Lisagor
https://vimeo.com/30107169
Filmmaking and Design: More than just analogous
Adam Connor
http://toobigtotweet.tumblr.com/post/31461951405/filmmaking-and-design-more-than-just-analogous
Software is a movie, not a building
Tim McCoy
http://www.cooper.com/journal/2009/03/feedback_loops.html
Cinematic Interaction Design
Sarah Allen
http://www.slideshare.net/sarah.allen/cinematic-interaction-design

68. Thanks!
Get in touch:
@adamconnor
aconnor@madpow.com
madpow.com