Effective prototyping

10/25/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
 Was on the Windows 7 and Windows Vista teams for 5 years,
Everett McKay responsible for managing, writing, and driving the Windows
User Experience Interaction Guidelines
UX Design Edge  A Windows and Mac UI programmer before Microsoft
 Wrote two books
uxdesignedge.com  Developing User Interfaces for Microsoft Windows (Microsoft
Press)
 Debugging Windows Programs (Addison Wesley)
 Writing another interaction design book now
Copyright 2011 UX Design Edge. All rights reserved.

Warm-up discussion

Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.

Let’s talk about prototyping Some observations
 What is a prototype?  Everyone has a good understanding of prototyping
 Why do we prototype? basics
 Must we prototype?  Effective prototyping requires crucial knowledge and
 What are the different kinds of prototypes? practices that aren’t obvious
 What is the difference between a good prototype  My top goal for you today is to understand how to
and a poor one? make your prototyping efforts as effective as you can
 What makes a good prototyping tool?
 Do you often prototype now?

Copyright 2011 UX Design Edge. All rights
reserved. 1

10/25/2011

How important is prototyping? Today’s agenda
 Not in top 10, but easily in top 15  Prototyping basics
 Top of the list for design techniques, which if done  Effective prototyping
incorrectly, could be catastrophic  Prototyping tools
 The KnowledgeSet story  Examples
 Founded by Gary Kildall  Everett’s rules for effective prototyping
 A prototype made the company
 Wrap up
 …and later destroyed it!
 Any idea why?


Prototyping basics
Let’s review the fundamentals


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  To evaluate, compare, get feedback, and improve
look and behave design ideas
 To user test specific designs
 …and to achieve the above goals more efficiently than
with production code

 And no, we don’t have to prototype

reserved. 2

10/25/2011

Prototypes vs. sketches vs. mockups Basic design process steps
 Sketches: rough ideas, for ideation/brainstorming,  Plan
 Determine target users, their tasks and goals
concepts matter but everything else doesn’t  Determine problems to solve
 Set themes, priorities, resources (budgets, schedules)
 Prototypes: for task flow and interaction design,
 Design
pixels don’t matter  Generate ideas, filter
 Mockups: visual design, pixels do matter
 Propose alternative designs
 Make choices
 Code: software engineering matters, investment  Refine
results in commitment  Evaluate
 Iterate until done
Is this really a prototype or a sketch? A fine line…  Communicate results (throughout)

Levels of prototyping Wireframes vs. pixels
 Low fidelity: Rough sketch or wireframe, no attempt to  A wireframe is a prototype represented by rough controls,
look real rectangles, lines, text, and simple glyphs
 Paper, Balsamiq, Axure, Mockingbird, iPlotz, Mockflow,  Lines vs. pixels
Word  Rough vs. precise layout and sizes
 Medium fidelity: Attempt to look real, but obviously not  Details like colors, backgrounds, fonts, graphics, and icons are
 PowerPoint, Visio, Axure, OmniGraffle, SketchFlow often omitted
 High fidelity: Looks real program, may be dynamic or  Wireframes are the most common form of low-fidelity
have limited functionality prototyping
 Real code, Html/Css, SketchFlow, Photoshop, Illustrator,  Quick and easy to do
Fireworks  Clear that visual design details aren’t up for discussion
 But do you really need the wires?

Timing is everything
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


reserved. 3

10/25/2011

Is saving 15 minutes really a big deal? What’s up with Lorem Ipsum?
 Yes!  Lorem Ipsum is standard placeholder text of the
 It’s not 1 x 15 minutes, it’s n x 15 minutes where n is printing and typesetting industry
 Lorem ipsum dolor sit amet...
potentially a big number
 Often used in prototypes
 Given a fixed amount of time, 3x faster means 3x more
 OK to use for placeholder document content
design ideas or iterations
 Not OK to use for UI text and labels
 Generic text (“Option 1”) isn’t any better
 Interaction design requires real UI text
 Only visual design can use fake UI text

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:
 To communicate design ideas?
 Home pages, landing pages
 To improve design ideas, get feedback?  Task flows
 To test design ideas?
 Page layouts
 Can those goals be achieved efficiently without a
prototype?  Complex or unusual interactions
 Poor goals  Design alternatives
 Always prototyping regardless of need
 Perfection
 Completeness


reserved. 4

10/25/2011

Some recent LinkedIn discussions Things to not prototype
 Q: Should the floppy disk icon for "Save" command be  Design principles
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 this  In fact, most don’t!
 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 job  The Windows Vista design team used Photoshop-
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
 Beauty hides flaws
 People react emotionally to beautiful things
 Beauty hides flaws

reserved. 5

10/25/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 projects)
 Paper has no bias!
 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 away  A prototype is a prototype only if:
 This means avoiding commitment  It is easily thrown away
 The goals of prototyping lead to changing or even  It is actually thrown away!
abandoning a design idea  A common conversation with a developer…
 A test: Suppose you determine that a design isn’t working:  Code prototypes tend to not get thrown away
 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. 6

10/25/2011

Prototypes aren’t production code What about SketchFlow?
 …and vice versa  Isn’t code reuse the entire point?
 Problem: Goals of prototyping fundamentally conflict  Yes, but it shouldn’t be…any decisions based on a code
with goals of production 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 code will be hastily written, poorly designed, poor
implemented, full of bugs  More later…
 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 high  Were they achieved?
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 scores
 Did you consider design alternatives?
 Result: You get what you reward  Did you throw the prototype away?
 Managers who want code reuse

Prototyping tool attributes
The ideal prototyping tool:
Prototyping tools  Is easy to learn and use

 Enables you to communicate your ideas quickly
An agenda-free survey  Is expressive, enabling a wide range of designs

 Focuses you 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


reserved. 7

10/25/2011

Good ol’ paper Good ol’ paper pros and cons
Pros
 Is easy to learn and use


 Is expressive, enabling a wide range of designs



 Enables good prototyping habits, including low commitment


 Is a good value

Cons
 Prototypes not easy to manage and maintain


You can usability test using paper! Whiteboards


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

10/25/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




Cons
 Isn’t easy to learn and use

 Doesn’t enable you to communicate your ideas quickly

Using Photoshop Photoshop pros and cons
Pros



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

10/25/2011

Other tools
 More Office: Visio, PowerPoint, Excel, OneNote (on a
tablet) Some examples
 Windows Paint (horrible!) Let’s look at some real prototyping examples
 Axure (expensive!)

 OmniGraffle (Mac)

 Mockingbird (SaaS)

There is no “best” tool!
Use my pros and cons to help you decide

Balsamiq Mockups in action Microsoft Word in action


SketchFlow in action SketchFlow: apply the criteria
The ideal prototyping tool:





 Enables good prototyping habits


 Is a good value


reserved. 10

10/25/2011

SketchFlow: my analysis Does this mean SketchFlow is bad?
This is what I saw:  No, SketchFlow is awesome (but dangerous)
 Focus was mostly on using tool, very little design
 Mentioned xaml, color, tagging, components  You have to use it the right way
 Lots of setting properties
 Design a Sign In screen (in 30 seconds or less)  Always start on paper to think the design through
 Design choices (what few there were) were biased what is easy to do  When using focus on the design, not the tool
in SketchFlow
 Why did he define all those pages?  Think: Issue by issue, not dialog by dialog
 Why did he use an animation?
 Don’t worry about reuse
 Design decisions feel “one off”, “spur of moment”, and overly focused
on details  If you can reuse the xaml, great!
 A Sign In screen isn’t even worth prototyping…completeness  Don’t let reuse drive any decisions
 Most Sign In screens have a poor UX, but layout and lack of animation
aren’t among them

Designing animations and transitions My favorite prototype
How I would design do it:
 Determine goals

 Research existing examples (software and real world)

 Define an animation vocabulary on paper

 Evaluate on paper

 Create interactive prototypes using SketchFlow

 Evaluate and improve using scenarios, context


Everett’s rules for effective prototyping

 Rule 1: Have clear goals
Everett’s rules for effective prototyping
 Rule 2: Determine the right communication
If you remember only one thing…  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

reserved. 11

10/25/2011

Related things to consider
 Lower is better
 Always start with paper Wrap up
 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 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
 Dynamic Prototyping with SketchFlow, Chris Bernard  Efficient,cost effective consulting
and Sara Summers  Team, onsite, and online training
 Prototyping: A Practitioner’s Guide, Todd Zaki Warfel  If you need design help, please contact me at
 Paper Prototyping: A How-To Training Video (DVD), everettm@uxdesignedge.com
Jakob Nielsen
 Subscribe to my blog and join my mailing list
 Get Effective Prototyping deck from
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-designers
hosting a two-day UX Design Essentials Workshop at  Achieve four crucial goals!
your company  Cover ten essential topics!
 A fun, fast paced, hands-on workshop gives you the  In three short, action packed hours
practical essentials to improve your entire team’s UX  Plus virtual workshop to ask questions
design skills—including management  All for only $295

 Apply what you learn directly to your app or site  Please check it out!
 Check http://uxdesignedge.com/training for details


reserved. 12

10/25/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 Run At Server, a Montreal-based  Design scenarios—and how thrilled users ruin them

 Icon design for non-designers
Silverlight training company
 Are you sure? How to write effective confirmations
 First course scheduled for October 2011 in Montreal  Interaction design interview question #1

 The politics of ribbons

 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. 13

Effective prototyping

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Effective prototyping

Similar to Effective prototyping (20)

Recently uploaded

Recently uploaded (20)

Effective prototyping