Effective prototyping (for Vermont Code Camp)

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. 1

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


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

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?

reserved. 2

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


Effective prototyping
The difference between success and that other
outcome


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

reserved. 3

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?


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?


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

reserved. 4

9/11/2011


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?


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

reserved. 5

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


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

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?


reserved. 6

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


Good ol’ paper pros and cons You can usability test using paper!
Pros





 Enables good prototyping habits, including low commitment


 Is a good value

Cons
 Prototypes not easy to manage and maintain

Microsoft Word Microsoft Word pros and cons
Pros





 Is a good value

Cons
 Not expressive, focused on text and basic controls

 Biased towards particular designs


reserved. 7

9/11/2011

Balsamiq Mockups Balsamiq Mockups pros and cons
Pros






 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

SketchFlow SketchFlow pros and cons
Pros


 Is a good value

Marginal
 Focuses you on the design, not the tool itself



 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 Photoshop pros and cons
Pros

 Focuses you on the design, not the tool itself


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


 Not a good value (Photoshop Elements is though)

reserved. 8

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


My favorite prototype SketchFlow in action (homework)
Watch http://www.youtube.com/watch?v=kJtu5mjOYrU
Is this effective prototyping?


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?


reserved. 9

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

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


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!


reserved. 10

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?


Got feedback?
 Would love to hear it!
 Contact me at everettm@uxdesignedge.com
Questions
 Be sure to get a biz card and flyer


Thank you!

Copyright 2011 UX Design Edge. All rights reserved.

reserved. 11

Effective prototyping (for Vermont Code Camp)

More Related Content

What's hot (19)

Similar to Effective prototyping (for Vermont Code Camp) (20)

Recently uploaded (20)

Effective prototyping (for Vermont Code Camp)