16-storyboarding

7/31/2019 16-storyboarding

1/28

1

Storyboarding

Interaction DesignKhai Truong


2/28

2

Agenda

Use / background of storyboarding

Elements of a storyboard

Storyboarding process Advice from experts (not mereal experts)

Some guidelines


3/28

3

Review

What are some techniques for conveyingfunctionalities without having a prototypefully built?

These are often referred to as:

Early stage design techniques

Low-fidelity prototyping techniques


4/28

4

Storyboard

What is it?


5/28

5

Uses / background

Very similar in nature to: Comic art / cartoons

Used in: Movie / multimedia

design

Product / softwaredevelopment


6/28

6

Hmmm

Storyboarding is an established designtechnique

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/28

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/28

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/28

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 forinspiration


10/28

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/28

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/28

12

Experts advice on storyboarding

Keep it short: 1 interaction/activity perstoryboard

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/28

13

Whats the story?

Scenario based design (Rosson & Carroll)

Analyze: problem scenarios

Design: Activity scenarios

Information scenarios

Interaction scenarios

Prototype & evaluate

can bestoryboarded


14/28

14

But

Concrete guidelines are missing

Web survey to identify

the requirements ofstoryboard consumers

Control variables:5 elements

20 storyboards aboutcommon & novelapplications


15/28

15

Drawing ishard

But it doesnt have to be

More detail does not lead to better

understanding


16/28

16

Drawing ishard

It doesnt have to be drawings..


17/28

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/28

18

Use taglines / captions

Keep it short


19/28

19

Inclusion of actors and objectshelps to create empathy

The first thing users willwant 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/28

20

When to show time passing

Time passing is implicit

Only needed when gross changes or minutechanges need to be explicit

Readers bring own expectations of how muchtime passes into the storyboard


21/28

21

Some more examples


22/28

22

Some advice

Figure out your story

Identify main points in the story

Draw 3-5 frames/panes (to match the mainpoints)

Keep it simple

Add taglines / text to enhanceunderstanding

Pilot storyboards & iterate


23/28

23

Also remember

Different presentation format means youcan do more!

Think about how long you have a captiveaudience

Think about how much you want to tell

Think about options for presentingsequences of drawing


24/28

24

Nowwhy do it?

Quicker / easier than building the wholeapplication

If done right, can help gain quickinvaluable user feedback

Formative evaluation tool

Summative evaluation tool


25/28

25


How?

If youre the user, how would you feelabout a service:


26/28

26


If youre the user, how do you think the

system worked?


27/28

27

Summative evaluation tool

How?

If storyboard is interactive Simulating system

Less effort spend sketching than building

Silk / Denim video


28/28

28

If youre interested

Gillian Hayes, Lauren Griffin & I have beenworking on ways to support storyboardingprocess

Just wrapped up formative studies

Interested in developing tool to support

storyboarding process

Contact info: [email protected]

16-storyboarding

Documents