View
12.912
Download
18
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
AIGA + IxDA + InterAct SeAttle / mAke-A-thon / 11.06.10
prototyping interaction with
video scenariosDavid Sherwin, frog design + Aaron rincover
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
3
A intro B break it down C challenge D solution E show & tell
In 30 seconds, visualize a gestureto take a photographof your left hand with your right hand
let’s debriefShare 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
A intro B break it down C challenge D solution E show & tell
what arevideo scenarios?
video “4820842668” / Using Paper to Sketch iPad App by Alex tsayun on flickr / ©All rights reservedhttp://www.targetprocess.com/blog/2010/07/using-paper-to-sketch-ipad-app.html
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 videowhen prototyping an interaction?
A intro B break it down C challenge D solution E show & tell
photo 4327435571 on flickr by boston public library, cc share + remix
“ …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 capturesideal behaviorover 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
easy to consume
includes real context
requires attention
“shared vision”
scenario flow
time-consuming
implies context
requires imagination
“build it to know it”
video scenario
A intro B break it down C challenge D solution E show & tell
video captures gestural affordances
A intro B break it down C challenge D solution E show & tell
Phil Van Allen, “object and Screens Speculations” at http://philvanallen.com/downloads/object_videos_w_titles.mov
video captures stakeholder attention
A intro B break it down C challenge D solution E show & tell
video is a method of prototyping?
A intro B break it down C challenge D solution E show & tell
from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.com
video?
video captures prototypes
A intro B break it down C challenge D solution E show & tell
David & Aaron maul a chart from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.
video
video prototypes can draw from any of the above technologies
“free”
David & Aaron maul a chart from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.
video
video prototypes can draw from any of the above technologies
Paper, narrative, and digital artifacts shown in real-world use by people.
“free”
David & Aaron maul a chart from “Prototyping: A Practicioner’s Guide” by todd Zaki Warfel / rosenfeldmedia.
video
video prototypes can draw from any of the above technologies
Gestural input is best captured through video or a true functional prototype.
“free”
why not use videowhen 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
• time-consuming to make
A intro B break it down C challenge D solution E show & tell
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
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
• Storyboard
• User flows
• talent
• Props
• locations
• Voiceover/sound
• Schedule
• Budget
• Video capture
• editing methods
things to consider…
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)
A intro B break it down C challenge D solution E show & tell
ActIon
______________________________
______________________________
______________________________
______________________________
ScreenS reQUIreD
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
ActIon
______________________________
______________________________
______________________________
______________________________
ScreenS reQUIreD
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
ActIon
______________________________
______________________________
______________________________
______________________________
ScreenS reQUIreD
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
client: __________________________________ Project: ________________________________ Storyboard Worksheet / Page __ of __
FrAme # FrAme # FrAme #
2. make & set-up shoot
A intro B break it down C challenge D solution E show & tell
• 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?)
3. shoot the scenario
A intro B break it down C challenge D solution E show & tell
• 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!!!
4. evaluate & edit
A intro B break it down C challenge D solution E show & tell
• 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!
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
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
• complete storyboard (limit to 6 shots or less!)
• 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
• Be sure to play with your camera as you plan!
1. plan 20 minutes
2. make 30 minutes
3. shoot 20 minutes
4. evaluate 15 minutes
A intro B break it down C challenge D solution E show & tell
1. plan 20 minutes
2. make 30 minutes
3. shoot 20 minutes
4. evaluate 15 minutes
• Draw necessary screens at size
• Build devices/props
• Set up materials on location
• check actual camera angles with stand-ins through your camera
• Adjust lighting (outdoors can be easier than indoors)
• check wardrobe—is clothing neutral and doesn’t distract from UI?
• try out a few key interactions on film
A intro B break it down C challenge D solution E show & tell
1. plan 20 minutes
2. make 30 minutes
3. shoot 20 minutes
4. evaluate 15 minutes
• Shoot your storyboard!
• Adjust UI/storyboard details when appropriate
• edit in camera for each shot (start/stop)
• Use a tripod (or similar stabilizer)
• limit location detail—this isn’t a commercial
• check each shot for technical errors afterwards
• Shoot duplicate takes for critical shots
• have fun!!!
A intro B break it down C challenge D solution E show & tell
1. plan 20 minutes
2. make 30 minutes
3. shoot 20 minutes
4. evaluate 15 minutes
• Watch all of the takes, deleting unusable ones
• Write up notes: best moments, necessary edit points
• reshoot required takes
• load best takes into editing program (FlipShare)
• Stitch best takes together
• Be aware—FlipShare adds crossfades!
share outyour videos!
A intro B break it down C challenge D solution E show & tell
A intro B break it down C challenge D solution E show & tell
let’s debriefWhat did you notice about the videos?
What worked best?
What could be improved?
will you use videowhen prototyping interaction?
A intro B break it down C challenge D solution E show & tell
QUeStIonS?
David Sherwin
dksherwin@msn.com
@changeorder
Prototyping Interaction with Video Scenarios Workshop ©2010 David Sherwin & Aaron rincover. All rights reserved.
Slides for this workshop will be posted to changeorderblog.com
QUeStIonS?
Aaron rincover
aaron@rincover.com
Recommended