Effective prototyping (for Vermont Code Camp)

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


Prototyping basics

Effective prototyping

Prototyping tools

Examples

Wrap up

Quick discussion


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.

http://msdn.microsoft.com/en-us/library/aa511258.aspx

9/11/2011


What is a software prototype?


A software prototype is an interface mockup that demonstrates how a program or feature is going to look and behave

Goals of prototyping


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


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


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


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?


9/11/2011


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

Is saving 15 minutes really a big deal?


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


Rule 1: Have clear goals


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


Product concepts

Home pages, landing pages

Task flows

Page layouts

Complex or unusual interactions

Design alternatives (A/B testing)

9/11/2011


Some recent LinkedIn discussions


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


Design principles

Guidelines, conventions

Minor details

Your limited time is better spent elsewhere

Rule 2: Determine communication


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


Communicating design ideas is the ultimate goal

Not all communication goals need fidelity

In fact, most don’t!

Lower is better


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


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



Rule 4: Choose the right tool


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


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


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!


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


Prototypes aren’t production code


…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?


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


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


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


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


9/11/2011


Prototyping tool attributes


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


Good ol’ paper pros and cons


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!


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


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


Balsamiq Mockups


Try web version for free at http://www.balsamiq.com/demos/mockups/Mockups.html

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 Is expressive, enabling a wide range of designs Cons

Prototypes aren’t easy to manage and maintain

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


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 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)

http://www.balsamiq.com/demos/mockups/Mockups.html

9/11/2011


Other tools


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


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?

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


http://www.youtube.com/watch?v=kJtu5mjOYrU



9/11/2011


Everett’s rules for effective prototyping


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


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


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


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


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


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!

http://uxdesignedge.com/EffectivePrototyping

mailto:[email protected]

http://uxdesignedge.com/training

9/11/2011


Coming soon! UX Design for Silverlight


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


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?


Would love to hear it!

Contact me at [email protected]

Be sure to get a biz card and flyer

Questions


Thank you!


mailto:[email protected]

Technology

Effective prototyping (for Vermont Code Camp)