Prototyping Interaction with Video Scenarios

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.

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

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

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?

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

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

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

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

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

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

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

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

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”

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

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

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

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

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

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

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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)

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

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?)

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!!!

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

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

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

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?

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

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

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

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!!!

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

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

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?

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

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.

http://designmind.frogdesign.com	2933
http://changeorder.typepad.com	824
http://kernel-kumar.blogspot.com	146
http://designit.posterous.com	76
http://www.typepad.com	40
http://www.typepad.com	40
http://renatofillinich.wordpress.com	34
http://kernel-kumar.blogspot.in	33
http://www.kernel-kumar.blogspot.com	9
http://feeds.frogdesign.com	7
http://translate.googleusercontent.com	6
http://blog.freecalum.co.uk	6
http://www.chaosudesign.com	5
http://journal.olishaw.com	5
http://www.netvibes.com	4
https://ymodules.yammer.com	3
http://www.kernel-kumar.blogspot.in	3
http://static.slidesharecdn.com	3
http://stream.olishaw.com	3
http://josefjaud.posterous.com	2
http://independentimagination.com	2
http://posterous.com	2
http://busk.com	2
http://kernel-kumar.blogspot.co.uk	2
http://thinkemotions.blogspot.com	2
http://www.twylah.com	1
http://www.planetaki.com	1
http://anonymouse.org	1
http://twitter.com	1
http://kernel-kumar.blogspot.ca	1
http://kernel-kumar.blogspot.de	1
http://us-w1.rockmelt.com	1

Prototyping Interaction with Video Scenarios

by David Sherwin on Nov 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

32 Embeds 4,199

Statistics

Prototyping Interaction with Video Scenarios — Presentation Transcript