Prototyping Interaction with Video Scenarios

13,568
-1

Published on

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.

Published in: Technology, Business, Design
1 Comment
54 Likes
Statistics
Notes
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
13,568
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
303
Comments
1
Likes
54
Embeds 0
No embeds

No notes for slide

Prototyping Interaction with Video Scenarios

  1. 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. 2. A intro B break it down C challenge D solution E show & tell let’s do a warm-up exercise
  3. 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. 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. 5. A intro B break it down C challenge D solution E show & tell what are video scenarios?
  6. 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. 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. 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. 9. A intro B break it down C challenge D solution E show & tell why use video when prototyping an interaction?
  10. 10. photo 4327435571 on flickr by boston public library, cc share + remix
  11. 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. 12. A intro B break it down C challenge D solution E show & tell video captures ideal behavior over time
  13. 13. A intro B break it down C challenge D solution E show & tell video captures what documents only describe
  14. 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. 15. A intro B break it down C challenge D solution E show & tell video captures gestural affordances
  16. 16. Phil Van Allen, “object and Screens Speculations” at http://philvanallen.com/downloads/object_videos_w_titles.mov
  17. 17. A intro B break it down C challenge D solution E show & tell video captures stakeholder attention
  18. 18. A intro B break it down C challenge D solution E show & tell video is a method of prototyping?
  19. 19. video? from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.com
  20. 20. A intro B break it down C challenge D solution E show & tell video captures prototypes
  21. 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. 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. 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. 24. A intro B break it down C challenge D solution E show & tell why not use video when prototyping an interaction?
  25. 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. 26. A intro B break it down C challenge D solution E show & tell • time-consuming to make
  27. 27. A intro B break it down C challenge D solution E show & tell • time-consuming to make
  28. 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. 29. A intro B break it down C challenge D solution E show & tell Aaron’s example video scenario: teleportation made easy
  30. 30. A intro B break it down C challenge D solution E show & tell break it down: video scenario process
  31. 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. 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. 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. 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. 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. 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. 37. FrAme # FrAme # FrAme # ActIon ActIon ActIon ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ScreenS reQUIreD ScreenS reQUIreD ScreenS reQUIreD ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ ______________________________ client: __________________________________ Project: ________________________________ Storyboard Worksheet / Page __ of __
  38. 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. 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. 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. 41. A intro B break it down C challenge D solution E show & tell ready? let’s make a video scenario!
  42. 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. 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. 44. A intro B break it down C challenge D solution E show & tell get into groups of four
  45. 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. 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. 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. 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. 49. A intro B break it down C challenge D solution E show & tell share out your videos!
  50. 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. 51. A intro B break it down C challenge D solution E show & tell will you use video when prototyping interaction?
  52. 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.

×