Storyboarding

1
Storyboarding

• Interaction Design
• Khai Truong

Sketching
2
Agenda

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

3
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

4
Storyboard

• What is it?

5
Uses / background

• Very similar in nature to
• Comic art / cartoons
• Used in
• Movie / multimedia design
• Product / software development

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

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

8
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

9
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

10
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..

11
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

12
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

13
Whats the story?

• Scenario based design (Rosson Carroll)
• Analyze problem scenarios
• Design
• Activity scenarios
• Information scenarios
• Interaction scenarios
• Prototype evaluate

14
But

• Concrete guidelines are missing
• Web survey to identifythe requirements of
  storyboard consumers
• Control variables 5 elements
• 20 storyboards about common novel applications

15
Drawing is hard

• But it doesnt have to be
• More detail does not lead to better understanding

16
Drawing is hard

• It doesnt have to be drawings..

17
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.

18
Use taglines / captions

• Keep it short

19
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

20
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

21
Some more examples
22
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

23
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

24
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

25
Formative evaluation tool

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

26
Formative evaluation tool

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

27
Summative evaluation tool

• How?
• If storyboard is interactive
• Simulating system
• Less effort spend sketching than building
• Silk / Denim video

28
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_at_cc.gatech.edu