Prototyping Interaction with Video Scenarios

52
AIGA + IXDA + INTERACT SEATTLE / MAKE-A-THON / 11.06.10 prototyping interaction with video scenarios David 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

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.

Transcript of Prototyping Interaction with Video Scenarios

Page 1: 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

Page 2: Prototyping Interaction with Video Scenarios

let’s do a warm-up exercise

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

Page 3: Prototyping Interaction with Video Scenarios

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

Page 4: Prototyping Interaction with Video Scenarios

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

Page 5: Prototyping Interaction with Video Scenarios

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

what arevideo scenarios?

Page 6: Prototyping Interaction with Video 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

Page 7: Prototyping Interaction with Video Scenarios

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

Page 8: Prototyping Interaction with Video Scenarios

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

Page 9: Prototyping Interaction with Video Scenarios

why use videowhen prototyping an interaction?

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

Page 10: Prototyping Interaction with Video Scenarios

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

Page 11: Prototyping Interaction with Video Scenarios

“ …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

Page 12: Prototyping Interaction with Video Scenarios

video capturesideal behaviorover time

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

Page 13: Prototyping Interaction with Video Scenarios

video captures what documents only describe

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

Page 14: Prototyping Interaction with Video Scenarios

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

Page 15: Prototyping Interaction with Video Scenarios

video captures gestural affordances

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

Page 16: Prototyping Interaction with Video Scenarios

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

Page 17: Prototyping Interaction with Video Scenarios

video captures stakeholder attention

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

Page 18: Prototyping Interaction with Video Scenarios

video is a method of prototyping?

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

Page 19: Prototyping Interaction with Video Scenarios

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

video?

Page 20: Prototyping Interaction with Video Scenarios

video captures prototypes

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

Page 21: Prototyping Interaction with Video Scenarios

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”

Page 22: Prototyping Interaction with Video Scenarios

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”

Page 23: Prototyping Interaction with Video Scenarios

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”

Page 24: Prototyping Interaction with Video Scenarios

why not use videowhen prototyping an interaction?

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

Page 25: Prototyping Interaction with Video Scenarios

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

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

Page 26: Prototyping Interaction with Video Scenarios

• time-consuming to make

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

Page 27: Prototyping Interaction with Video Scenarios

• time-consuming to make

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

Page 28: Prototyping Interaction with Video Scenarios

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

example:

a teleportation system for easy everyday use on city streets

Page 29: Prototyping Interaction with Video Scenarios

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

Aaron’s example video scenario: teleportation made easy

Page 30: Prototyping Interaction with Video Scenarios

break it down:video scenario process

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

Page 31: Prototyping Interaction with Video Scenarios

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

Page 32: Prototyping Interaction with Video Scenarios

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

Page 33: Prototyping Interaction with Video Scenarios

1. plan the shoot

explore what Ux/UI screens are required

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

Page 34: Prototyping Interaction with Video Scenarios

1. plan the shoot

the storyboard shows screens in context

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

Page 35: Prototyping Interaction with Video Scenarios

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

Page 36: Prototyping Interaction with Video Scenarios

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

Page 37: Prototyping Interaction with Video Scenarios

ActIon

______________________________

______________________________

______________________________

______________________________

ScreenS reQUIreD

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

ActIon

______________________________

______________________________

______________________________

______________________________

ScreenS reQUIreD

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

ActIon

______________________________

______________________________

______________________________

______________________________

ScreenS reQUIreD

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

______________________________

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

FrAme # FrAme # FrAme #

Page 38: Prototyping Interaction with Video Scenarios

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

Page 39: Prototyping Interaction with Video Scenarios

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

Page 40: Prototyping Interaction with Video Scenarios

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

Page 41: Prototyping Interaction with Video Scenarios

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

ready?let’s make a video scenario!

Page 42: Prototyping Interaction with Video Scenarios

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

Page 43: Prototyping Interaction with Video Scenarios

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

Page 44: Prototyping Interaction with Video Scenarios

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

get into groups of four

Page 45: Prototyping Interaction with Video Scenarios

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

Page 46: Prototyping Interaction with Video Scenarios

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

Page 47: Prototyping Interaction with Video Scenarios

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

Page 48: Prototyping Interaction with Video Scenarios

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!

Page 49: Prototyping Interaction with Video Scenarios

share outyour videos!

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

Page 50: Prototyping Interaction with Video Scenarios

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?

Page 51: Prototyping Interaction with Video Scenarios

will you use videowhen prototyping interaction?

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

Page 52: Prototyping Interaction with Video Scenarios

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]