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