Software prototyping is an important UX design skill that many people “just do” but effective prototyping requires crucial knowledge and practices that aren’t obvious. In this talk, Everett will explain prototyping and its goals, compare prototyping to sketching, and explore the different types of prototyping. He will then characterize effective prototyping and explain why those characteristics are so important.
Everett will review several commonly available prototyping tools (including SketchFlow), and evaluate their pros and cons. He will conclude by working through some examples so that you can see effective prototyping in practice.
If you or your team is prototyping now or considering prototyping in the future, this talk is for you!
Long journey of Ruby standard library at RubyConf AU 2024
Effective prototyping (for Vermont Code Camp)
1. 9/11/2011
EFFECTIVE PROTOTYPING Who is this guy?
A developer’s guide to better
Principal of UX Design Edge, a UX design training and
design through prototyping consulting company targeted at non-designers
Was a senior program manager at Microsoft for 10
years
Everett McKay Was on the Windows 7 and Windows Vista teams for 5
years, responsible for managing, writing, and driving the
UX Design Edge
Windows User Experience Interaction Guidelines
A Windows and Mac UI programmer before Microsoft
uxdesignedge.com Wrote two books
Developing User Interfaces for Microsoft Windows
(Microsoft Press)
Debugging Windows Programs (Addison Wesley)
Writing another interaction design book now
Vermont Code Camp, September 2011 Copyright 2011 UX Design Edge. All rights reserved.
Today’s agenda Quick discussion
Prototyping basics Are you or your team prototyping now?
Effective prototyping How?
Prototyping tools Do you feel it is effective?
Examples
Wrap up My claim: Many prototyping efforts aren’t effective.
From this talk, you’ll see why.
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Prototyping basics
Let’s review the fundamentals
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 1
2. 9/11/2011
What is a software prototype? Goals of prototyping
A software prototype is an interface mockup that To communicate and visualize design ideas
demonstrates how a program or feature is going To evaluate, compare, get feedback, and improve
to look and behave design ideas
To user test specific designs
…and to achieve the above goals more efficiently
than with production code
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Prototypes vs. sketches vs. mockups Levels of prototyping
Sketches: rough ideas, for Low fidelity: Rough sketch or wireframe, no
ideation/brainstorming, concepts matter but attempt to look real
everything else doesn’t Paper,Balsamiq, Axure, Mockingbird, iPlotz,
Mockflow, Word
Prototypes: for task flow and interaction
Medium fidelity: Attempt to look real, but
design, pixels don’t matter obviously not
Mockups: visual design, pixels do matter PowerPoint, Visio, Axure, OmniGraffle, SketchFlow
Code: software engineering matters, High fidelity: Looks real program, may be dynamic
investment results in commitment or have limited functionality
Is this really a prototype or a sketch? A fine line… Real code, Html/Css, SketchFlow, Photoshop,
Illustrator, Fireworks
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Wireframes vs. pixels
A wireframe is a prototype represented by rough
controls, rectangles, lines, text, and simple glyphs
Layout and element sizes are rough
Details like colors, backgrounds, fonts, graphics, and
icons are often omitted
Wireframes are the most common form of low-
fidelity prototyping
Quick and easy to do
Clear that visual design details aren’t up for discussion
But do you really need the wires?
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 2
3. 9/11/2011
Timing is everything Is saving 15 minutes really a big deal?
Time required to create each mockup: Yes!
Mid fidelity (Balsamiq, 24 minutes) It’s not 1 x 15 minutes, it’s n x 15 minutes where n is
potentially a big number
Wireframe (Balsamiq, 20 minutes)
Given a fixed amount of time, 3x faster means 3x
Wireless (Word, 12 minutes)
more design ideas or iterations
Pen on paper (Bic pen, 4 minutes)
As fast as Balsamiq is, Word took half the time
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Effective prototyping
The difference between success and that other
outcome
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Rule 1: Have clear goals Things to prototype
Effective prototypes have clear goals Product concepts
Is your goal: Home pages, landing pages
To communicate design ideas?
To improve design ideas, get feedback?
Task flows
To test design ideas? Page layouts
Can those goals be achieved efficiently without a Complex or unusual interactions
prototype?
Design alternatives (A/B testing)
Questionable goals
Always prototyping regardless of need
Perfection
Completeness
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 3
4. 9/11/2011
Some recent LinkedIn discussions Things to not prototype
Q: Should the floppy disk icon for "Save" command Design principles
be changed to something more modern? Guidelines, conventions
A: Just do a usability test (and note that doing a Minor details
usability test implies some sort of prototype)
Q: Which should be used: login, log in, logon, log
on, logout, log out, logoff, log off Your limited time is better spent elsewhere
A: Just do a usability test (again, implies a
prototype)
Discussion: What do you think? Do you agree?
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Rule 2: Determine communication Rule 3: Choose the right level
Prototyping goals boil down to communicating the Communicating design ideas is the ultimate goal
right design info to the right people Not all communication goals need fidelity
When planning your prototype, be explicit about In fact, most don’t!
this
Determine
What specific design ideas do you need to
communicate?
Whom do you need to communicate them to?
How can you best communicate to them?
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Lower is better The Windows Vista story
Use the lowest fidelity prototyping that does the The Windows Vista design team used Photoshop-
job reasonably well based task flows for design reviews
Enables quick design, faster iteration, creativity They were gorgeous! (Especially compared to XP)
Has the least investment and commitment Typical outcome
Focuses on the high-level issues instead of details Design reviews “went well” with few problems found
Perceived as unfinished and easily changeable, so The actual results were often disappointing (to me)
doesn’t discourage feedback The task flows were super high maintenance
People react emotionally to beautiful things People react emotionally to beautiful things
Beauty hides flaws Beauty hides flaws
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 4
5. 9/11/2011
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Rule 4: Choose the right tool Rule 5: Avoid tool bias
There is no single best prototyping tool, but here are Is your prototyping tool biased towards certain
some attributes designs?
Efficient (can prototype quickly) Ease of use equals use
Expressive (can prototype any ideas) Ifyour prototyping tool makes solution A easy but
solution B difficult, which do you think you will use?
Flexible (can choose your level)
Don’t let the tool determine your designs
Easy to maintain, manage (important for large
Paper has no bias!
projects)
No design bias (more later)
Do you have a personal tool bias?
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Rule 6: Avoid commitment Rule 7: Throw it away!
A prototype is a prototype only if it is easily thrown A prototype is a prototype only if:
away It is easily thrown away
This means avoiding commitment It is actually thrown away!
The goals of prototyping lead to changing or even
A common conversation with a developer…
abandoning a design idea
A test: Suppose you determine that a design isn’t Code prototypes tend to not get thrown away
working:
Is this good news or bad news?
Are you willing to start completely over or make radical
chances? (Or will you fight for just small changes?)
If bad, you have too much commitment
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 5
6. 9/11/2011
Prototypes aren’t production code What about SketchFlow?
…and vice versa Isn’t code reuse the entire point?
Problem: Goals of prototyping fundamentally Yes, but it shouldn’t be…any decisions based on a
conflict with goals of production code code reuse goal are likely to be bad
If you are writing production code “We want to reuse the prototype code, therefore…”
You aren’t really prototyping, you are coding
Better approach
You can’t achieve any goals of prototyping
Focus on the goals prototyping
If you are writing prototype code
When done, let reuse happen—don’t try to force it
The codewill be hastily written, poorly designed, poor
implemented, full of bugs
Reuse would be a mistake
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Rule 8: Watch for team culture traps Evaluate your prototyping efforts
Managers who are “visual thinkers” What were your goals?
Problem: Manager has weak design skills, demands Were they achieved?
high fidelity prototypes
Result: Design team wastes time on wrong things,
Was the prototype worth the trouble?
prototypes take too long and don’t get good feedback Could the goals be achieved more efficiently?
Higher fidelity prototypes get higher review scores Did you use the right tool?
Problem: Team claims it wants low fi prototypes, but
people who do high fi prototypes get better review
Did you consider design alternatives?
scores Did you throw the prototype away?
Result: You get what you reward
Managers who want code reuse
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Radical claim
Most prototyping efforts aren’t effective
Don’t have clear goals
Prototyping tools
Don’t achieve those goals
An agenda-free survey
Take to much time and effort
Discourages feedback and improvement
Ask yourself: how does your team’s prototyping
stack up to these rules?
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 6
7. 9/11/2011
Prototyping tool attributes Good ol’ paper
The ideal prototyping tool:
Is easy to learn and use
Enables you to communicate your ideas quickly
Is expressive, enabling a wide range of designs
Focuses on the design, not the tool itself
Isn’t biased towards particular designs
Enables good prototyping habits
Encourages feedback
Creates prototypes that are easy to manage and
maintain
Is a good value
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Good ol’ paper pros and cons You can usability test using paper!
Pros
Is easy to learn and use
Enables you to communicate your ideas quickly
Is expressive, enabling a wide range of designs
Focuses on the design, not the tool itself
Isn’t biased towards particular designs
Enables good prototyping habits, including low commitment
Encourages feedback
Is a good value
Cons
Prototypes not easy to manage and maintain
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Microsoft Word Microsoft Word pros and cons
Pros
Is easy to learn and use
Enables you to communicate your ideas quickly
Focuses on the design, not the tool itself
Enables good prototyping habits, including low commitment
Encourages feedback
Is a good value
Cons
Not expressive, focused on text and basic controls
Biased towards particular designs
Prototypes not easy to manage and maintain
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 7
8. 9/11/2011
Balsamiq Mockups Balsamiq Mockups pros and cons
Pros
Is easy to learn and use
Enables you to communicate your ideas quickly
Focuses on the design, not the tool itself
Isn’t biased towards particular designs
Enables good prototyping habits, including low commitment
Encourages feedback
Is a good value
Marginal
Try web version for free at Is expressive, enabling a wide range of designs
http://www.balsamiq.com/demos/mockups/Mockups.html Cons
Prototypes aren’t easy to manage and maintain
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
SketchFlow SketchFlow pros and cons
Pros
Is expressive, enabling a wide range of designs
Encourages feedback
Is a good value
Marginal
Focuses you on the design, not the tool itself
Isn’t biased towards particular designs
Enables good prototyping habits, including low commitment
Creates prototypes that are easy to manage and maintain
Cons
Isn’t easy to learn and use
Doesn’t enable you to communicate your ideas quickly
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Using Photoshop Photoshop pros and cons
Pros
Is expressive, enabling a wide range of designs
Focuses you on the design, not the tool itself
Isn’t biased towards particular designs
Cons
Difficult to learn and use
Doesn’t enable good prototyping habits, including low
commitment
Discourages feedback
Doesn’t enable you to communicate your ideas quickly
Prototypes not easy to manage and maintain
Not a good value (Photoshop Elements is though)
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 8
9. 9/11/2011
Other tools
More Office: Visio, PowerPoint, Excel, OneNote (on
a tablet) Examples
Windows Paint (horrible!)
Axure (expensive, not especially easy to use)
OmniGraffle (Mac)
Mockingbird (SaaS)
There is no “best” tool!
Use my pros and cons to help you decide
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
My favorite prototype SketchFlow in action (homework)
Watch http://www.youtube.com/watch?v=kJtu5mjOYrU
Is this effective prototyping?
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
SketchFlow homework questions
What was the focus of the effort?
Why were key design decisions made?
Wrap up
What is the quality of the design?
How helpful is this prototype? What was its goal,
etc.?
What could you do differently to improve the
prototyping effort?
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 9
10. 9/11/2011
Everett’s rules for effective prototyping Related things to consider
Rule 1: Have clear goals Lower is better
Rule 2: Determine the right communication Always start with paper
Rule 3: Choose the right level Consider using paper—even for user testing
More alternatives, iterations is better
Rule 4: Choose the right tool
Reconsider Photoshop
Rule 5: Avoid tool bias
Tools
Rule 6: Avoid commitment
Focus on the design, not the mechanics
Rule 7: Throw it away!
Consider using different tools for different goals
Rule 8: Watch for team culture traps Use “my favorite prototype” as an inspiration
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Prototyping resources UX Design Edge offerings
Sketching User Experiences, Bill Buxton UX Design Edge is all about helping teams without
Paper Prototyping, Carolyn Snyder design resources do their best work
Efficient,cost effective consulting
Dynamic Prototyping with SketchFlow, Chris
Bernard and Sara Summers Team, onsite, and online training
Paper Prototyping: A How-To Training Video (DVD), If you need design help, please contact me at
Jakob Nielsen everettm@uxdesignedge.com
Get Effective Prototyping deck from Subscribe to my blog and join my mailing list
http://uxdesignedge.com/EffectivePrototyping
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
UX Design Essentials Workshop New! Online UX Design Basics
Want to improve your team’s design skills? Consider An online UX design course targeted at non-
hosting a two-day UX Design Essentials Workshop at designers
your company Achieve four crucial goals!
A fun, fast paced, hands-on workshop gives you the Cover ten essential topics!
practical essentials to improve your entire team’s In three short, action packed hours
UX design skills—including management Plus virtual workshop to ask questions
Apply what you learn directly to your app or site All for only $295
Check http://uxdesignedge.com/training for details Please check it out!
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 10
11. 9/11/2011
Coming soon! UX Design for Silverlight Top UX Design Edge blog posts
Course concept: Provide developers the UX design From http://www.uxdesignedge.com/blog :
Getting started in interaction design
knowledge they need to use Silverlight to its full
Why “everybody is a designer”: The UX Design Skills Ladder
potential
Intuitive UI: What the heck is it?
With hands-on exercises using Silverlight and Blend!
Don’t design like a programmer
Partnering with RunAtServer, a Montreal-based Design scenarios—and how thrilled users ruin them
Silverlight training company Icon design for non-designers
First course scheduled for November 2011 in Are you sure? How to write effective confirmations
Montreal Interaction design interview question #1
The politics of ribbons
Vermont soon after
Personas: Dead yet?
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Got feedback?
Would love to hear it!
Contact me at everettm@uxdesignedge.com
Questions
Be sure to get a biz card and flyer
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
Thank you!
Copyright 2011 UX Design Edge. All rights reserved.
Copyright 2011 UX Design Edge. All rights
reserved. 11