Wizard of Oz Prototyping +Making Video Scenarios

HCC 729 4/17/14

Grading schedule• Weekly assignment feedback (up to this

week) – tomorrow by 8pm

• Graded Assignment 1 write-up by midnight on Sunday

• Can resubmit

News and updates• Inspirations• Mini-lectures: Abbie, Gloria, Michiko

• Show off storyboards – Tape them up during break

Inspirations• Julia• Randy• Michiko

Today• Prototyping future technologies• Visual storytelling• Creating stories in PowerPoint• Practice storyboarding

Today• Evaluating future technologies

– Low-fidelity prototyping / “experience prototyping” (Buchenau and Suri)

– Wizard of Oz prototyping– Video prototypes

Experience prototyping• How to create the experience of using a

future technology before it exists?

Experience prototyping• How to create the experience of using a

future technology before it exists?

• For GUIs: ???• For new devices: ???

Experience prototyping• How to create the experience of using a

future technology before it exists?

• For GUIs: paper prototyping• For new devices: ???

Design considerations

http://ed.ted.com/lessons/rapid-prototyping-google-glass-tom-chi

http://www.pcmag.com/article2/0,2817,2416876,00.asp

Testing interaction• How do we prototype the experience of an

interactive system?

Wizard of Oz• A method of testing a system that does

not exist yet• Example: a system that transcribes text.

What the user sees The Wizard

Wizard of Oz• Human “Wizard” simulates system response

– Interprets user input according to an algorithm– Controls computer to simulate appropriate output– Uses real or mock interface– Wizard sometimes visible, sometimes hidden

• “pay no attention to the man behind the curtain”

How to WOZ:• A voice powered interactive agent (Siri)

• A wearable camera that can recognize signs in foreign language

• A shape changing computer display

What is WOZ good for?

Downsides?

Downsides• May appear too polished

• User’s reactions often “in the small” (details)• Users reluctant to challenge designer• Users reluctant to change the design

• Management may think it is real!• Unhappy that it isn’t ready for deployment• Unhappy you “wasted” so much time making

something that isn’t a product

Visual storytelling

Storyboards• Sketching a comic-book style visualization

of your scenario, to illustrate scenes and screens.

• Goal: Capture relevant information and remove extraneous information

Adapted from: AC4D design library, http://library.ac4d.com/

A good storyboard…1. Emphasize scenes over screens2. Advances the fidelity of an idea 3. Stands on its own, without explanation 4. Dedicates one panel to one idea, and uses

panels generously

AC4D design library

AC4D design library

AC4D design library

Storyboarding process1. Start with your scenario

1. divide it into sentences2. Put each sentence in an empty box3. Number each box

2. Write the sentence from the scenario below each box

1. Consider splitting frame into two parts

Storyboarding process• 3. Start designing the scene

1. Who is in the scene?2. What is the minimal amount of content you

need to convey the scene?3. What kind of “shot is it”?

1. Closeup (CU)2. Over the shoulder (OTS)3. Extreme closeup (ECU)4. Long shot (LS)5. Medium shot (MS)

AC4D design library

Storyboarding process4. Sketch what happens in the scene inside

each box1. Emphasize hands and eyes on people2. If there are screens, first show the context,

then fill in the screen

AC4D design library

Tying your scenarios together• But…• Therefore…• And then…

• http://www.mtvu.com/video/?vid=689002

Tying your scenarios together• But…• Therefore…• And then…

• http://www.mtvu.com/video/?vid=689002

Storyboarding Process: Next steps

• 5. Test your prototype and get feedback• What things make sense?• What things are confusing?• Where is there too much detail?• Where is there too little?

• 6. Refine the storyboard• 7. Improve the “fidelity” of your story

AC4D design library

For more information• AC4D Digital Library• http://library.ac4d.com

• Storyboarding worksheet• Scenarios worksheet

More on visual storytelling

Video Sketching

A great way to avoid the “drawing” problem with storyboarding

Limitations of storyboards

Limitations of storyboards• Lower fidelity• Pacing• Requires a lot of work to show each time

Video prototypes• Demonstrate idea• Control pacing• Easier to share

• Can be created from still images, with narration– In animation, this is called an animatic

Examples of video prototypes

For next week two weeks• Revise your storyboard (any

improvements?)

• Create a video version of your storyboard– Photographs, voice narration

• Test with 2 possible users and get feedback

Deliverables (5/2)• Make any changes to your storyboard that

make sense

• Show it to at least 2 people• Write down what they thought, what worked and

didn’t, their questions

• Replace sketches with PowerPoint narration (or other video)

Request for video• Keep video less than 3 minutes (2 is

probably ideal)

Storytelling Advice (from John Zimmerman)

• Don’t try and capture everything• Task and environment (may have multiple

users)• Leverage titles

• Sometimes it is easier to convey concepts in text than images

• Focus on everyday interactions (not the extreme) to make it relatable to the audience

Scene Advice (from John Zimmerman)

• Learn and follow the 180 degree rule• http://www.youtube.com/watch?v=

HdyyuqmCW14

Let’s try it• As a group, let’s collect some photos:

using Google Glass in the classroom

• No narration (use speech bubbles)