Storyboarding

Interaction Design Khai Truong

1

Agenda
Use / background of storyboarding Elements of a storyboard Storyboarding process Advice from experts (not mereal experts) Some guidelines

Review
What are some techniques for conveying functionalities without having a prototype fully built?

These are often referred to as:

Early stage design techniques Low-fidelity prototyping techniques
3

Storyboard
What is it?

Uses / background
Very similar in nature to:
Comic art / cartoons

Used in:
Movie / multimedia design

Product / software development

5

Hmmm
Storyboarding is an established design technique Storyboards used in software development often are different those previous slide Whats different? Should they look like these storyboards? How else might they look? How should they be created?!
6

Storyboarding elements & process

Artifact analysis
(what do storyboards by novice and expert designers look like?)

Interviews
(how do novice and expert designers create storyboards?)

Web survey
(what do storyboard consumers require to understand the artifact?)

Elements of storyboard
Graphical depiction of scenarios 5 visual elements
Number of frames/panes Use of words Level of detail Inclusion of people Time passage
8

How is it done?
Novice designers process
Individual brainstorming about ideas May do some quick initial sketches Team meeting to discuss ideas / drawings Decision on what to draw Spend next ~8 hours together drawing
Co-location allows quick feedback Can also glance at what others are drawing for inspiration
9

Challenges in storyboarding
Youve done itwhat do you think? Novices say:
Determining what to draw is hard Drawing is difficult! How is it presented? (time, length, attention) Often does not show enough

Well revisit these challenges..

10

How is it done?
Expert designers process
Get assignment Individual brainstorming about ideas
Determine the story Includes a lot of sketches using pencil + paper A very iterative process through a lot of initial drafts

Team meeting to discuss ideas / drawings

Share copies of drawings Discuss what stories should be told

Repeat Generate more polished art for presentation Develop

11

Experts advice on storyboarding

Keep it short: 1 interaction/activity per storyboard More is not always better. Why?
May lose focus of story May lose readers attention

Biggest challenge? Experts say:

Must be able to succinctly tell story
12

Whats the story?

Scenario based design (Rosson & Carroll) Analyze: problem scenarios

Design:
Activity scenarios Information scenarios Interaction scenarios

can be storyboarded

Prototype & evaluate

13

But
Concrete guidelines are missing Web survey to identify the requirements of storyboard consumers
Control variables: 5 elements 20 storyboards about common & novel applications
14

Drawing is hard
But it doesnt have to be

More detail does not lead to better understanding

15

Drawing is hard
It doesnt have to be drawings..

16

Keep the drawing short

Drawing more is not always needed

I dont need the extra information in [the longer storyboard], it just makes it more confusing.
17

Use taglines / captions

Keep it short

18

Inclusion of actors and objects helps to create empathy

The first thing users will want to know is why do I even care about this application? Can show how the user interacts with the system and how the system affects the user

19

When to show time passing

Time passing is implicit Only needed when gross changes or minute changes need to be explicit Readers bring own expectations of how much time passes into the storyboard

20

Some more examples

21

Some advice
Figure out your story Identify main points in the story Draw 3-5 frames/panes (to match the main points) Keep it simple Add taglines / text to enhance understanding Pilot storyboards & iterate
22

Also remember
Different presentation format means you can do more! Think about how long you have a captive audience Think about how much you want to tell Think about options for presenting sequences of drawing
23

Nowwhy do it?
Quicker / easier than building the whole application If done right, can help gain quick invaluable user feedback
Formative evaluation tool Summative evaluation tool

24

Formative evaluation tool

How? If youre the user, how would you feel about a service:

25

Formative evaluation tool

If youre the user, how do you think the system worked?

26

Summative evaluation tool

How? If storyboard is interactive
Simulating system Less effort spend sketching than building

Silk / Denim video

27

If youre interested
Gillian Hayes, Lauren Griffin & I have been working on ways to support storyboarding process Just wrapped up formative studies Interested in developing tool to support storyboarding process Contact info: khai@cc.gatech.edu
28