Prototyping
Sketches, storyboards, and other prototypes
Agenda







Questions?
Finish Pen Input
Prototyping
Storyboards
Interface Prototypes
Exercise if we have time
Next time: Design of Everyday Things
Free-form Ink

Ink is the data, take as is

Human is responsible for
understanding and
interpretation
Often time-stamped
Applications


–
–
–
–
Signature verification
Notetaking
Electronic whiteboards
Sketching
Electronic whiteboards



Smartboard and Mimio
Can integrate with projection
Large surface to interact with
–
Issues?
http://www.mimio.com/
http://www.smarttech.com/
Touch tables



Which techniques
might be similar to
smaller touchscreens?
Which would differ?
How similar and
different from
interactive white
boards?
Microsoft Surface
Real paper


Anoto digital paper and pen technology
(http://www.anoto.com/)
Other pens available:
http://www.logitech.com/
http://www.epos-ps.com/

Issues?
General Issues – Pen input







Initial training required
Learning time to become proficient
Speed of use
Generality/flexibility/power
Special skills - typing
Screen space required
Computational resources required
Other interesting interactions

Gesture input
–
–

Wii
Lots of other specialized hardware for tracking
3D interaction
–
–
Stereoscopic displays
Virtual reality


Augmented reality
–

Immersive displays such as glasses, caves
Head trackers and vision based tracking
Tangible interaction
–
Use physical objects to express input
Dilemma

You can’t evaluate a design until it’s built
–
But…

After building, changes to the design are
difficult

Simulate the design, in low-cost manner
Design Artifacts

Expressing design ideas:
–
–
–
–

Make it fast!!!
Allow lots of flexibility for radically different
designs
Make it cheap
Promote valuable feedback
Facilitate iterative design and evaluation
Prototype representation

How to represent the prototype?
–
–
–
–
–
–
Mockup
Storyboard
Sketches
Scenarios
Screenshots
Functional interface
Example project
Next steps: interactive prototype
Prototype scope

How much to represent?
–
Horizontal - “Broad” prototyping

–
Show much of the interface, but in a shallow manner
Vertical - “Deep” prototyping

Show only portion of interface, but large amount of those
portions
Prototype maturation

Low fidelity vs. High fidelity

Amount of polish should reflect maturity of
the prototype
Why?

Design Description

Can simply have a textual description of a
system design
–
–
–
Obvious weakness is that it’s so far from eventual
system
Doesn’t do a good job representing visual aspects
of interface
Good for accompanying visual description in
report (*hint hint*)
Scenarios


Fictional stories with characters, products, events
and environments.
Typically narratives, but can be videos,
simulations
Jane likes to take walks every morning. This
morning, as she places her hand on the door, she
hears “75% chance of rain, better bring your
umbrella.” Thankful for the notice, she grabs her
umbrella and heads out for her morning walk.
More detailed scenario

Jane’s class just got out and she wants to know
whether to take the shuttle or walk back to her dorm.
She opens her cell phone and starts the web
browser. She opens her bookmarks and clicks on
the bus location page. The page displays a list of the
shuttle lines on campus. She selects the Nugget.
The next page is a list of bus stops. She scrolls
down and selects Woodward Hall. The page then
displays that the next shuttle should arrive in 2
minutes. Jane leaves the building to head down to
the bus stop to wait for the shuttle.
Scenario Utility






Engaging and interesting
Another person’s shoes
Present to different people
Facilitates feedback and opinions
Explore errors or mistakes
Good for accompanying sketches, mockups,
etc. (*hint, hint*)
Storyboard


A story with visuals
Visuals can be almost anything:
–
–
–

Advantages:
–
–

Hand drawn with people and environment
Screenshots of a system
Combination…
Provides additional details over scenario
Can be easier to digest
Disadvantages:
–
–
Story must be concise and clear
Visuals must be developed
Storyboard

Determine the story
–
–



A very iterative process through a lot of initial
drafts
Includes a lot of brainstorming
Sketch on pen + paper
Generate more polished art for
presentation
Develop
Use taglines / captions

Keep it short: show as much as necessary
but not more
Drawing is hard…

But it doesn’t have to be
Drawing is hard…

It doesn’t have to be drawings..
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


Sketches

Generally for
depicting
physical aspects
of system
Taken from Builder Bobs team project Summer 04
Mockups / Wireframes



Good for brainstorming
Focuses people on high-level design notions
Not so good for illustrating flow and the
details
Paper prototyping

“Paper prototyping is a variation of usability testing where
representative users perform realistic tasks by interacting
with a paper version of the interface that is manipulated by a
person ‘playing computer,’ who doesn’t explain how the
interface is intended to work.”
Taken from Paper Prototyping
by Carolyn Snyder
http://www.paperprototyping.com/
The "Computer" highlights the item the user has just selected. A member of the
development team observes and takes notes. (Photo courtesy of Timo Jokela.)
Draw/Paint programs
Draw each screen, good for look
IP Address
OK
Cancel
PhotoShop, Paint,...
Thin, horizontal prototype
Simulations




Put storyboard-like views down with
(animated) transitions between them
Can give user very specific script to follow
Often called chauffeured prototyping
Examples: PowerPoint, Hypercard,
Macromedia Director, HTML
Interface Builders

Tools for laying out windows, controls, etc. of
interface
–
–
–
–

Easy to develop & modify screens
Supports type of interface you are developing
Good look and feel
Can add back-end functionality
Examples: Visual Basic, .NET, many apps for
various languages
Visual Basic
UI Controls
Design area
Control
properties
Macromedia Director


Combines various media with script written in
Lingo language
Concerned with place and time
–
–


Objects positioned in space on “stage”
Objects positioned in time on “score”
Easy to transition between screens
Can export as executable or as Web
Shockwave file
Specialized

SILK (Sketching Interfaces Like Krazy) /
DENIM
–
–
–

Sketch-based GUI builder
http://dub.washington.edu/denim/
http://www.openvideo.org/details.php?videoid=5018
by James Landay’s and his former group at UC
Berkeley
Prototyping Technique

Wizard of Oz - Person simulates and controls
system from “behind the scenes”
–
–
Use mock interface and
interact with users
Good for simulating
system that would be
difficult to build
Can be either computer-based or not
Wizard of Oz

Method:
–
–

Behavior should be algorithmic
Good for voice recognition systems
Advantages:
–
–
Allows designer to immerse oneself in situation
See how people respond, how specify tasks
Review
Medium-fidelity
Low-fidelity
Sketches, mock-ups
Slide shows
High-fidelity
System prototypes
Scenarios
Storyboards
Simulations
For more: take ITIS 3150
Rapid Prototyping and Interface Building
Offered next fall
Assignment: Storyboard


Due Oct. 15
Create a storyboard for your project
–
–

This CAN be about a potential design
4 to 6 panels is sufficient
Bring to class on paper if you do not have
access to a scanner
Crazy design time
Remember all the ways of doing interaction? Voice, pen,
gesture, and even ways we didn’t talk about
Come up with a design idea for a system at bus or train stops.
Should allow you to do useful or entertaining things –
perhaps buy tickets, check on schedules, get maps, tell you
about the area, etc...
Be a little crazy – think of the user, but don’t just do the plain
and expected kiosk.
Express your design ideas with low fidelity prototypes. Sketch.
Storyboard. Scenario.