Vous êtes sur la page 1sur 3

Storyboarding & Prototyping


Where normally happens ..





Jon Kolko
Savannah College of Art & Design

IDUS315 - HCI | 1

What Normally Happens

IDUS315 - HCI | 2

Put Down The Laptop.

Weve collected data from real users and from competitive


No! Wait! Once we start using the computer (Photoshop,

Coding, Alias) ..

Weve determined the Mental Models our users have by

developing Personas

.. we stop thinking conceptually and start thinking


We have a good idea of the Scenarios of use that our users

will attempt

.. we focus on the software tools constraints instead of the

problems constraints

Its pretty tempting to go find a computer and start building


.. we pay attention to painstaking details (colors, font sizes,

pixels) instead of overarching concepts (users, goals,

IDUS315 - HCI | 3

Storyboarding : Overview

IDUS315 - HCI | 4

Storyboarding : General Concepts

Borrowed from the film/animation/comic industries

One panel = One Scene
Presented to a group of people
Gauge their reactions, understanding
Takes time up front, saves time later

You are not designing the detailed interface yet
Include general layout, navigation elements, core
Capture relevant information, remove extraneous

Intended to visualize our scenarios

Provide a mechanism to gracefully move from conceptual

design to screen design

Personas in their physical context
Cultural/Interpersonal relationships or handoffs

Show sequencing of main ideas

Allow us to make mistakes early, in paper (cheap and quick),

instead of later, in software (expensive and tedious)

Although these can be quite visually attractive, they are not

works of art:
Black & white, pencil
No renderings!

IDUS315 - HCI | 5

IDUS315 - HCI | 6

Storyboarding : Tips

Storyboarding : An activity

Use your scenarios and personas!

In groups of two or three, create storyboards for the

following scenario:

Use long paper

Use one square per scene
Number each scene
Visually group similar scenes into conceptual tasks
Include a text description of each scene
Call out interesting or important aspects into the margins
and annotate them

Melvin Freshman is going to check his email on the

computer in the cluster in Gulfstream. Hes
expecting a pressing email from his girlfriend.
Start as Melvin enters the computer lab; be sure to list
your assumptions as you progress.

IDUS315 - HCI | 7

Prototyping : Overview

IDUS315 - HCI | 8

Prototyping : A Progression : Paper

A Progression

A representation of the product

Determining level of fidelity required is imperative!

Iterative, so its hard to be done:

Easy to edit
Easy to annotate
Easy to copy
Can still focus on
visualizing the
concepts without
being bogged down in
the details

Sketches of main
ideas, concepts,
navigation paths
Important ideas are
annotated for later

Paper prototypes always come first.

A progression and evolution of ideas and fidelity (level of finish)

IDUS315 - HCI | 9

Prototyping : A Progression : Wireframe

IDUS315 - HCI | 10

Prototyping : A Progression : Visual Elements

A Progression

A Progression

Able to focus on
navigation and
composition while
ignoring many other

Focus attentions on
intended emotional
responses, giving the
interface human

Solidify concepts
composition and
Identify navigation
between pages as
well as navigation on
a specific page
Identify vocabulary
used for main
concepts; greek the
rest of the content

Begin to add visual,

emotional qualities
(womanly, childlike, businesslike)
Refine font sizes,
Refine vocabulary
and content
Solidify composition,
navigation and

IDUS315 - HCI | 11

IDUS315 - HCI | 12

Prototyping : A Progression : Style Refinement

Prototyping : A Progression A Cycle

A Progression

Visually complete the

interface to make it

Add colors
Solidify vocabulary
and content
Solidify font choices,
visual style

An Iterative Cycle

But really, our progression is an iterative cycle.

Its ok to go do more paper prototyping at any
Rule of thumb:
You will become emotionally attached to your visual
designs, and will be hesitant to change them even
when they are unusable! Push them off as long as
you can!

IDUS315 - HCI | 13

Prototyping : Fidelity

IDUS315 - HCI | 14

Prototyping : Some Tricks

Static vs. Dynamic

Level of polish

The photocopier is your friend

Spend as much time as possible on paper before moving to

the computer

Scan your paper prototypes, add an Image Map in

Dreamweaver, and get an instant clickthrough

Photoshop/Illustrator are great for wireframes turn layers

on/off as necessary

Powerpoint can also be used with link hotspots for a quick


What is the purpose of the prototype?

IDUS315 - HCI | 15

Prototyping : An activity

IDUS315 - HCI | 16

Wrap Up

In groups of two or three, create prototypes for the following

Melvin now wants to send his girlfriend a greeting
card. Prototype a website that allows him to create
a musical greeting card and then send it to his

IDUS315 - HCI | 17

Mental Models


IDUS315 - HCI | 18