Download - Prototyping Interaction with Video Scenarios

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


3


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?



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


some types of video scenarios

capturing a gesture

completing a task flow

fulfilling a user goal

describing a journey


why use videowhen prototyping an interaction?


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


video capturesideal behaviorover time


video captures what documents only describe


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


video captures gestural affordances


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

video captures stakeholder attention


video is a method of prototyping?


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

video?

video captures prototypes


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”


video


Paper, narrative, and digital artifacts shown in real-world use by people.

“free”


video


Gestural input is best captured through video or a true functional prototype.

“free”

why not use videowhen prototyping an interaction?


• not interactive• hard to edit• disposable• it’s not “real”


• time-consuming to make



example:

a teleportation system for easy everyday use on city streets


Aaron’s example video scenario: teleportation made easy

break it down:video scenario process


the process:

1 . plan the shoot

2. make & set-up shoot

3. shoot the scenario

4. evaluate & edit


1. plan the shoot

• Storyboard

• User flows

• talent

• Props

• locations

• Voiceover/sound

• Schedule

• Budget

• Video capture

• editing methods

things to consider…


1. plan the shoot

explore what Ux/UI screens are required


1. plan the shoot

the storyboard shows screens in context


1. plan the shoot

common shot types:

CLOSE-UP OvEr thE ShOULDEr

MEDIUM EStABLIShING


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)


ActIon

______________________________

______________________________

______________________________

______________________________

ScreenS reQUIreD

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

ActIon

______________________________

______________________________

______________________________

______________________________

ScreenS reQUIreD

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

ActIon

______________________________

______________________________

______________________________

______________________________

ScreenS reQUIreD

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

client: __________________________________ Project: ________________________________ Storyboard Worksheet / Page __ of __

FrAme # FrAme # FrAme #

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

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

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


ready?let’s make a video scenario!

challenge:

design a teleportation system for easy everyday use on city streets


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?



get into groups of four


• 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


1. plan 20 minutes

2. make 30 minutes

3. shoot 20 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


1. plan 20 minutes

2. make 30 minutes

3. shoot 20 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!!!


1. plan 20 minutes

2. make 30 minutes

3. shoot 20 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!



let’s debriefWhat did you notice about the videos?

What worked best?

What could be improved?

will you use videowhen prototyping interaction?


QUeStIonS?

David Sherwin

[email protected]

@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

[email protected]