CSE 440: Introduction to HCI

User Interface Design, Prototyping, and Evaluation

Lecture 08:
Storyboarding

James Fogarty
Daniel Epstein
Brad Jacobson
King Xia
Tuesday/Thursday
10:30 to 11:50
MOR 234

Today
Milestones
Design Review (1x2) Due Friday
Getting the Right Design Due Tuesday
Presentations Start Thursday

Class
Storyboarding
Design Check-In (3x4) Critique

Tasks in Design
Tasks guide your exploration of a design
Creating scenarios for each task illustrates
what a person does
what they see
step-by-step performance of task

Sketching

Sketching

Sketching and Storyboards

Sketching and Storyboards

Sketching and Storyboards

Sketching and Storyboards

Sketching and Storyboards

Illustrating Time
Storyboards come from film and animation
Give a script of important events
leave out the details
concentrate on the important interactions

Storyboards
Can be used to explore
Much faster and less
expensive to produce
Can therefore explore
more potential approaches

Notes help fill in missing

pieces of the proposal

Storyboards
Can be used to convey
Effective storyboards can
quickly convey information
that would be difficult to
understand in text

Storyboards
Can illustrate
key requirements
and leave open
less important
details of design

Basic Storyboard

Storytelling
Stories have an audience
Other designers, clients, stakeholders,
managers, funding agencies, potential end-users

Stories have a purpose

Gather and share information about people, tasks, goals
Put a human face on analytic data
Spark new design concepts and encourage innovation
Share ideas and create a sense of history and purpose
Giving insight into people who are not like us
Persuade others of the value of contribution
Quesenberg and Brooks

Stories Provide Context

Characters
Who is involved

Setting
Environment

Sequence
What task is illustrated
What leads a person to use a design
What steps are involved

Satisfaction
What is the motivation
What is the end result
What need is satisified

Details of interface features and

components are not necessarily
surfaced, they can often be
developed and conveyed more
effectively with other methods
Can help surface details that
might otherwise be ignored
Grocery store application:
- use with one hand while
pushing a shopping cart
- privacy of speech input
- split attention

Amal Dar Aziz

Storytelling
Good stories
Understand audience
Provide context of use
Are well-motivated
Memorable
Evokes a reaction
Evokes empathy
Illustrate experience
Convey emotions
Short and to-the-point

Bad stories
Do not account for audience
Boring or un-engaging
Fantastical or unrealistic
Wrong story for purpose
Too long to hold attention
tl;dr

Elements of a Storyboard
Visual storytelling
5 visual elements
Level of detail
Inclusion of text
Inclusion of people and emotions
Number of frames
Portrayal of time

Truong et al, 2006

1. How Much Detail?

Guideline: too much detail can lose universality

Scott McCloud

1. How Much Detail?

2. Use of Text
Guideline: It is often necessary, but keep it short

2. Use of Text
Guideline: It is often necessary, but keep it short

3. Include People and Emotions

Guideline: Include people experiencing the
design and their reactions to it (good or bad)
Remember, the point of storyboards is to
convey the experience of using the system

4. How Many Frames?

Guideline: 4-6 frames is ideal for end-users
Less work to illustrate
Must be able to succinctly tell story
Potentially longer for design clients

More is not always better

May lose focus of story
May lose attention

4. How many frames?

4. How many frames?

5. Passage of Time
Guideline: Only use if necessary to understand

Storyboards for Comparing Ideas

Authoritative

Supportive

Storyboards for Comparing Ideas

Cooperative

Competitive

Storyboards for Comparing Ideas

Negative
Reinforcement

Positive
Reinforcement

Examples and Tricks in Storyboarding

Drawing is Hard

Will a picture work instead?

Existing Images from Other Sources

http://designcomics.org/
http://www.pdclipart.org/

Blur Out Unnecessary Detail

Using image editing
software to simplify
photos into sketches

Tracing Photos

Baudisch and Chu, 2009

Mapping the Space of Interaction

Ron Bird

Comic Presentation

Thought bubbles argue for the design

Gukeisen et al, 2007

Route Maps

Route Maps

Route Maps

Route Maps

Value of Animation or Video

Can illustrate critical timing
Can be more engaging than written or storyboard
Can more easily convey emotion (e.g., voice, music)

Can show interactive elements more clearly

Can be self-explanatory
If done well, can be an effective pitch

Most Important Trick: Stop Motion

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Mackay-StopAction.mp4

Mackay

Most Important Trick: Stop Motion

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Mackay-StopActionResult.mp4

Mackay

Video Prototypes
May build upon paper prototypes,
existing software, and images of real settings
Narration optional
Narrator explains, actors move or illustrate interaction
Actors perform movements and viewer
expected to understand without voice-over

Steps to Create a Video Prototype

Review field data
Review ideas from brainstorm
Create text for usage scenarios

Develop storyboard, with each scene on a card,

illustrating each action/event with annotations
explaining what is happening

Steps to Create a Video Prototype

Steps to Create a Video Prototype

Steps to Create a Video Prototype

Shoot a video clip for each storyboard card
Avoid editing in the camera, just shoot your scenes

Use titles to separate clips

Like a silent movie

Digital changes these tradeoffs a little, but respect

the spirit of doing this quickly to get point across
If you make an error, just reshoot it

Prototyping Microsoft Surface

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Surface-Document-Interaction.mp4

Prototyping Microsoft Surface

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Surface-Context-Lens.mp4

Lessons from Prior Video Prototypes

Narration, Pace, and Flair
Three versions of Dont Forget

Using Projectors and Simple Props

Buddy Map

Watch for Pace and Scene Relevance

Consumester

Narration, Pace, and Flair

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Don't-Forget-1.mp4

Dont Forget Version 1

Narration, Pace, and Flair

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Don't-Forget-2.mp4

Dont Forget Version 2

Narration, Pace, and Flair

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Don't-Forget-3.mp4

Dont Forget Version 3

Using Projectors and Simple Props

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Buddy-Map-Backcountry.mp4

Buddy Map

Watch for Pace and Scene Relevance

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Consumester.mp4

Consumester

Lessons from Prior Video Prototypes

Split Presentation, Simple Effects
PickUp

Still-Frame, More Effects

Graffiti Karma

Split Presentation, Simple Effects

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Pickup.mp4

Pickup

Still-Frame, More Effects

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Graffiti.mp4

Graffiti Karma

Lessons from Prior Video Prototypes

Scenario with a Contrast
ParkSmart (note that screens are static images)

Playful while Keeping Pace

Plantr

Scenario with a Contrast

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Parksmart.mp4

But watch for pace and scene relevance

ParkSmart

Playful while Keeping Pace

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Plantr.mp4

Plantr

Range of Purposes
Illustrating Low-Level Techniques
Microsoft Surface examples convey timing

Illustrate Designs
Focus in this course

High-Level Visions
StarFire, Knowledge Navigator, A Day Made of Glass

Suns Starfire (1994)

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Vision-Sun-Starfire.mp4

Apples Knowledge Navigator (1987)

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Vision-Apple-Knowledge-Navigator.mp4

Cornings A Day Made of Glass (2011)

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Vision-Corning-A-Day-Made-Of-Glass.mp4

LuciaMug Sketch: A Contrast

http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Mug-Sketch.mp4
http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Mug-HiFi.mp4

Fidelity Takes Times: Stay Low Fidelity

time to create
words
diagrams
images

If you need a video, do

you really need footage?
If you need an animation,
do you really need Flash?

video

If you need a photo, do

you really need to shoot?

Summary
Think about your audience
Think about your time constraints
Think about how much you want to tell

Think about options for presenting your story

CSE 440: Introduction to HCI

User Interface Design, Prototyping, and Evaluation
Lecture 08:
Storyboarding

James Fogarty
Daniel Epstein
Brad Jacobson
King Xia
Tuesday/Thursday
10:30 to 11:50
MOR 234