A 5-minute beginner's guide to prototyping for UI, wireframes, and web design. Learn the basics and best practices of the prototype process to apply to a solid user experience strategy. Whether designing for a mobile application or website, those initial steps of jotting down layouts and conducting usability testing are imperative to creating an intuitive experience.

1. P R O T O T Y P I N G
E X P L A I N E D I N 5 M I N U T E S B Y @ G K 3
Wednesday, July 24, 13

2. WHAT IS PROTOT YPING?
It is the quickest, easiest & cheapest way to test and
prove/disprove an idea/concept/layout/anything
Wednesday, July 24, 13

3. E X P E R I E N C E T H E B E N E F I T S O F P R O T O T Y P I N G
TRY THIS EXERCISE...
Find a semi-complex photo of something (i.e. a
helicopter, motorcycle, etc.)
Give yourself 3 minutes to sketch the photo.
Sketch the photo again, but this time in 1.5 minutes.
Do it again in 1 minute.
45 seconds.
30 seconds.
20 seconds.
Notice something? They all kind of look like whatever
the photo is. Prototyping is like sketching. Get the
fastest sketch out that shows your idea, test it, and
come back and try again.
Wednesday, July 24, 13

4. Y O U M U S T F I R S T D E F I N E Q U E S T I O N S
HOW TO TEST
PROTOT YPES
- Does the user get it?
- Do they understand what they’re looking at?
- Can they find it?
- Is it obvious how to accomplish the task?
- Can they do it?
- Is it self-explanatory?
- Do they like it?
- Is the product enjoyable?
- Is it useful?
- Does it make sense?
?Wednesday, July 24, 13

5. G O F O R S P E E D
DIFFERENT T YPES
OF PROTOT YPES
- Paper Prototype
- Literally sketch the UI on paper and have someone
interact with it, with you acting as the computer.
- Click Through
- Only one path through the screens to the task goal
- Hot Spot Click Through
- Different paths leading to different goals
- Wizard of Oz
- Put someone behind the curtain, acting as the
computer reacting to unique inputs.
- Interactive
- A developed prototype
- Add Real User Data
- Users treat their own data better than your test
data, this makes them take it seriously.
Wednesday, July 24, 13

6. E A S Y I S F A S T E R
TRICKS OF THE
TRADE
- Fake it with images.
- Avoid complexity like compiled css or javascript.
- No semantic html:
- Use very simple elements (i.e. div instead of ul)
- This allows you to move elements around
without worry
- You don’t need to fit all concepts in one prototype
(you control the environment, make as many
different prototypes as needed).
- Don't adapt.
- Hacks are encouraged.
- Don't optimize.
Wednesday, July 24, 13

7. DO SOME RESEARCH
- Just ask people to sit down and show them your ideas.
- Gut checks are almost always helpful!
- 5/80 Rule:
- It only takes 5 participants to uncover 80% of your issues.
- Define the research questions.
- If possible, recruit actual users.
- Who is your target demographic?
- Pre-screen participants.
G E T I T R I G H T T H E F I R S T T I M E
Wednesday, July 24, 13

8. H A V E A P L A N O F A C T I O N
DEFINE YOUR
TASKS
- Don’t ask them what items mean -- give them
actions that they need to perform.
- Make test-tasks meaningful.
- Would this user actually perform this action
on their own?
- Use the users’ language.
- Describe the end goal, don’t provide steps.
- Let them find their way.
Wednesday, July 24, 13

9. T I M E F O R S C I E N C E
ASK THE
QUESTIONS
- Avoid leading and biasing questions. Keep things open ended.
- Don’t use words that are in the UI.
- If the button is called “Share” don’t ask them to “share
something.”
- Try to make the tasks realistic
- Give the participants time to answer. Following up too soon
could bias the response.
- Ask the participants to think aloud.
- This will help you understand their thought processes.
Wednesday, July 24, 13

10. T H E E N D
H I T M E U P O N T W I T T E R W I T H A N Y Q U E S T I O N S : @ G K 3
Wednesday, July 24, 13