Prototyping & Storyboarding

IT2622 Chapter 4
Outline
OUTLINE
•Reminders from
the Instructor
•Storyboarding
Principles
•Activity
Storyboarding
isnt about pretty
pictures, it’s
about
communicating
ideas
-Scott Klemmer
• A storyboard is a graphic representation of how your story will unfold, shot
by shot.
• It's made up of a number of squares with illustrations or pictures
representing each shot, with notes about what's going on in the scene and
what's being said in the script during that shot.
Storyboards
should convey
1. Setting:
• people involved 3. satisfaction
• environment • what motivates people
• task being accomplished
to use the system?
2. Sequence: • what does it enable
• what steps are involved? people to accomplish?
• what leads someone to use • what need does the
the app? system fill?
• what task is being
illustrated?
Benefits of Storyboarding
• Holistic focus: helps emphasize how an interface
accomplishes a task
• avoids commitment to a particular user interface
(no buttons yet!!)
• helps get all stakeholders on the same page in
terms of the goal
time limits
help!
6 tips
Paper Prototyping Tricks
1. Keep all your materials in one place! Small interface widgets tend to
get lost or damaged easily.
2. Work quickly and make reusable components!
3. If something is difficult to simulate (progress indicators, right mouse
menus), have the user ask if it is available and then verbally describe
the interaction
4. Backgrounds can be useful to contain the prototype and provide
context for the user
5. Don’t be afraid to mix and match hard and software
6. When appropriate add context by including familiar operating system
elements
video from: http://www.youtube.com/watch?v=J-bVzUahNIg
Try your prototypes with people!
This time have them experience it! (as part of your task)

•Need a picture
•Test multiple
•Emphasis on the conversation
Test multiple prototypes simultaneously
to get the most value!
Get users to help in the
design of your app. Scaffold
their efforts.
If you’re lazy, have a digital mockup
Get creative
• Widgets: paper cardboards, transparencies
• Connectors: tape, glue, rubber, cement!
• drawing: Pen, pencil, markers!
• and many more!
 More tips
• Poster board, unlined index cards and foam core are all useful
depending on the size of your prototype
• Removable tape or restickable glue is useful for changing
components quickly
• Transparency pens allow the user to input content - use a sheet of
transparency paper for the input field
• Use wide-tipped pens and markers (think Sharpie) - smaller line
widths can be difficult to see
• Use stacks of index cards to simulate tabbed dialog boxes
For further reading
just to get you ahead of the game!
• Bill Buxton, Sketching User Experiences
• Bill Moggridge, Designing Interactions
• Carolyn Snyder, Paper Prototyping
• Michael Schrage, Serious Play
• Houde and Hill, What do Prototypes Prototype?
• Todd Zaki Warfel, Prototyping