Aaron Rincover and I presented this workshop at Seattle Make-a-Thon on November 6, 2010, sponsored by IxDA Seattle, AIGA Seattle, and Interact. When designing interactions that transcend singular devices and form the basis of device ecosystems, wireframes just don’t cut it. Much of the interactions you’re looking to define and refine are evoked through motion, sound, haptics, and other variables that can’t be easily documented without "dancing about architecture." In these situations, it’s often most effective to create video scenarios that describe how an interaction would happen out in the real world. These scenarios are useful not only for explaining ideas to your clients—they’re an effective way of capturing prototypes to see if they make sense and feel real. Over the course of this workshop, we explored the various flavors of video scenario that you can create, depending on the design problems you’re seeking to solve. Then we’ll spent the balance of our time working in small teams to create a short interaction vignette about gestural input to activate a teleportation device.

1. A intro B break it down C challenge D solution E show & tell
prototyping interaction with
video scenarios
David Sherwin, frog design + Aaron rincover
AIGA + IxDA + InterAct SeAttle / mAke-A-thon / 11.06.10
Prototyping Interaction with Video Scenarios Workshop ©2010 David Sherwin & Aaron rincover. All rights reserved.

2. A intro B break it down C challenge D solution E show & tell
let’s do a
warm-up
exercise

3. A intro B break it down C challenge D solution E show & tell
In 30 seconds,
visualize a gesture
to take a photograph
of your left hand
with your right hand
3

4. A intro B break it down C challenge D solution E show & tell
let’s debrief
Share out your gesture ideas…
how did we perceive each gesture?
how would you communicate your
gesture to your team? Your client?

5. A intro B break it down C challenge D solution E show & tell
what are
video scenarios?

6. video “4820842668” / Using Paper to Sketch iPad App by Alex tsayun on flickr / ©All rights reserved
http://www.targetprocess.com/blog/2010/07/using-paper-to-sketch-ipad-app.html

7. A intro B break it down C challenge D solution E show & tell
styles of video scenario
stills with v/o
stop-motion with v/o
live-action video

8. A intro B break it down C challenge D solution E show & tell
some types of video scenarios
capturing a gesture
completing a task flow
fulfilling a user goal
describing a journey

9. A intro B break it down C challenge D solution E show & tell
why use video
when prototyping an interaction?

10. photo 4327435571 on flickr by boston public library, cc share + remix

11. A intro B break it down C challenge D solution E show & tell
“…interaction design
is first and foremost
the design of behavior
that occurs over time.”
—Alan cooper, David cronin, robert reimann, About Face 3

12. A intro B break it down C challenge D solution E show & tell
video captures
ideal behavior
over time

13. A intro B break it down C challenge D solution E show & tell
video captures
what documents
only describe

14. A intro B break it down C challenge D solution E show & tell
video scenario scenario flow
easy to consume time-consuming
includes real context implies context
requires attention requires imagination
“shared vision” “build it to know it”

15. A intro B break it down C challenge D solution E show & tell
video captures
gestural
affordances

16. Phil Van Allen, “object and Screens Speculations” at http://philvanallen.com/downloads/object_videos_w_titles.mov

17. A intro B break it down C challenge D solution E show & tell
video captures
stakeholder
attention

18. A intro B break it down C challenge D solution E show & tell
video is a method
of prototyping?

19. video?
from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.com

20. A intro B break it down C challenge D solution E show & tell
video captures
prototypes

21. video “free”
video prototypes can draw from any of the above technologies
David & Aaron maul a chart from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.

22. Paper, narrative, and digital artifacts
shown in real-world use by people.
video “free”
video prototypes can draw from any of the above technologies
David & Aaron maul a chart from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.

23. Gestural input is best captured through
video or a true functional prototype.
video “free”
video prototypes can draw from any of the above technologies
David & Aaron maul a chart from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.

24. A intro B break it down C challenge D solution E show & tell
why not use video
when prototyping an interaction?

25. A intro B break it down C challenge D solution E show & tell
• not interactive
• hard to edit
• disposable
• it’s not “real”

26. A intro B break it down C challenge D solution E show & tell
• time-consuming
to make

27. A intro B break it down C challenge D solution E show & tell
• time-consuming
to make

28. A intro B break it down C challenge D solution E show & tell
example:
a teleportation system
for easy everyday use
on city streets

29. A intro B break it down C challenge D solution E show & tell
Aaron’s example video scenario: teleportation made easy

30. A intro B break it down C challenge D solution E show & tell
break it down:
video scenario
process

31. A intro B break it down C challenge D solution E show & tell
the process:
1 . plan the shoot
2. make & set-up shoot
3. shoot the scenario
4. evaluate & edit

32. A intro B break it down C challenge D solution E show & tell
1. plan the shoot
things to consider…
• Storyboard • Voiceover/sound
• User flows • Schedule
• talent • Budget
• Props • Video capture
• locations • editing methods

33. A intro B break it down C challenge D solution E show & tell
1. plan the shoot
explore what Ux/UI screens are required

34. A intro B break it down C challenge D solution E show & tell
1. plan the shoot
the storyboard shows screens in context

35. A intro B break it down C challenge D solution E show & tell
1. plan the shoot
common shot types:
CLOSE-UP OvEr thE ShOULDEr
MEDIUM EStABLIShING

36. A intro B break it down C challenge D solution E show & tell
1. plan the shoot
Your planning should include:
• complete storyboard (of every key shot)
• Sketched-out flow for required UI screens
• required actions per shot: gestures, expressions,
person-to-person interaction, devices used
• “the hero UI moment” for critical shots
• location detail to pre-visualize shot type/angle
• Voice-over (we aren’t including today)

37. FrAme # FrAme # FrAme #
ActIon ActIon ActIon
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
ScreenS reQUIreD ScreenS reQUIreD ScreenS reQUIreD
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
______________________________ ______________________________ ______________________________
client: __________________________________ Project: ________________________________ Storyboard Worksheet / Page __ of __

38. A intro B break it down C challenge D solution E show & tell
2. make & set-up shoot
• Draw necessary screens at size
• Build devices/props
• Set up materials on location
• check actual camera angles w/stand-ins
• Adjust lighting (outdoors can be easier)
• check wardrobe (neutral clothing?)

39. A intro B break it down C challenge D solution E show & tell
3. shoot the scenario
• Adjust details when appropriate
• edit in camera for each shot
• Use a tripod
• limit location detail
• check each shot for technical errors
• Shoot duplicate takes for critical shots
• have fun!!!

40. A intro B break it down C challenge D solution E show & tell
4. evaluate & edit
• Watch all of the takes
• Write up notes: best moments, redos
• reshoot required takes
• load best takes into editing program
• Stitch best takes together

41. A intro B break it down C challenge D solution E show & tell
ready?
let’s make a
video scenario!

42. A intro B break it down C challenge D solution E show & tell
challenge:
design a teleportation
system for easy
everyday use
on city streets

43. A intro B break it down C challenge D solution E show & tell
but unlike our example,
gestural input must
be used to cue and
start transport
how would you describe this interaction
in a 60 second or less video scenario?

44. A intro B break it down C challenge D solution E show & tell
get into groups
of four

45. A intro B break it down C challenge D solution E show & tell
1. plan • complete storyboard
(limit to 6 shots or less!)
20 minutes
• Sketched-out flow for required
UI screens
2. make • required actions per shot:
gestures, expressions, person-to-
30 minutes
person interaction, devices used
3. shoot • “the hero UI moment”
for critical shots
20 minutes • location detail to pre-visualize
shot type/angle
4. evaluate • Be sure to play with your
camera as you plan!
15 minutes

46. A intro B break it down C challenge D solution E show & tell
1. plan • Draw necessary screens at size
20 minutes • Build devices/props
• Set up materials on location
2. make • check actual camera angles with
stand-ins through your camera
30 minutes
• Adjust lighting (outdoors can
be easier than indoors)
3. shoot • check wardrobe—is clothing
20 minutes neutral and doesn’t distract
from UI?
4. evaluate • try out a few key interactions
on film
15 minutes

47. A intro B break it down C challenge D solution E show & tell
1. plan • Shoot your storyboard!
20 minutes • Adjust UI/storyboard details
when appropriate
2. make • edit in camera for each shot
(start/stop)
30 minutes • Use a tripod (or similar stabilizer)
• limit location detail—this isn’t
3. shoot a commercial
20 minutes • check each shot for technical
errors afterwards
4. evaluate • Shoot duplicate takes for
critical shots
15 minutes • have fun!!!

48. A intro B break it down C challenge D solution E show & tell
1. plan • Watch all of the takes, deleting
unusable ones
20 minutes
• Write up notes: best moments,
necessary edit points
2. make • reshoot required takes
30 minutes • load best takes into editing
program (FlipShare)
3. shoot • Stitch best takes together
20 minutes • Be aware—FlipShare adds
crossfades!
4. evaluate
15 minutes

49. A intro B break it down C challenge D solution E show & tell
share out
your videos!

50. A intro B break it down C challenge D solution E show & tell
let’s debrief
What did you notice about the videos?
What worked best?
What could be improved?

51. A intro B break it down C challenge D solution E show & tell
will you use video
when prototyping interaction?

52. QUeStIonS? QUeStIonS?
David Sherwin Aaron rincover
dksherwin@msn.com aaron@rincover.com
@changeorder
Slides for this workshop will be posted to
changeorderblog.com
Prototyping Interaction with Video Scenarios Workshop ©2010 David Sherwin & Aaron rincover. All rights reserved.