Vous êtes sur la page 1sur 3

Storyboarding & Prototyping

Overview

Where normally happens ..

Storyboarding
Prototyping

DESIGN

TEST

BUILD

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


products

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


pragmatically

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


something!

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


pixels) instead of overarching concepts (users, goals,
needs)

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

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

Intended to visualize our scenarios

Provide a mechanism to gracefully move from conceptual


design to screen design

Scenes
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
Quick
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:

Quick
Portable
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
reflection

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
factors

Focus attentions on
intended emotional
responses, giving the
interface human
qualities

Solidify concepts
Determine
composition and
layout
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,
choices
Refine vocabulary
and content
placement
Solidify composition,
navigation and
layout

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
sexy

Add colors
Solidify vocabulary
and content
placement
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
stage!
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


clickthrough

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


scenario:
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
girlfriend.

IDUS315 - HCI | 17

Mental Models
Personas
Scenarios

Storyboarding
Prototyping

IDUS315 - HCI | 18