Effective prototyping

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

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

Warm-up discussion

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

Let’s talk about prototyping


What is a prototype?

Why do we prototype?

Must we prototype?

What are the different kinds of prototypes?

What is the difference between a good prototype and a poor one?

What makes a good prototyping tool?

Do you often prototype now?

Some observations


Everyone has a good understanding of prototyping basics

Effective prototyping requires crucial knowledge and practices that aren’t obvious

My top goal for you today is to understand how to make your prototyping efforts as effective as you can

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

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

10/25/2011


How important is prototyping?


Not in top 10, but easily in top 15

Top of the list for design techniques, which if done incorrectly, could be catastrophic

The KnowledgeSet story

Founded by Gary Kildall

A prototype made the company

…and later destroyed it!

Any idea why?

Today’s agenda


Prototyping basics

Effective prototyping

Prototyping tools

Examples

Everett’s rules for effective prototyping

Wrap up

Let’s review the fundamentals

Prototyping basics


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

And no, we don’t have to prototype

10/25/2011


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…

Basic design process steps


Plan Determine target users, their tasks and goals Determine problems to solve Set themes, priorities, resources (budgets, schedules)

Design Generate ideas, filter Propose alternative designs Make choices

Refine Evaluate Iterate until done

Communicate results (throughout)

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 Lines vs. pixels

Rough vs. precise layout and sizes

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?


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

10/25/2011


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

What’s up with Lorem Ipsum?


Lorem Ipsum is standard placeholder text of the printing and typesetting industry Lorem ipsum dolor sit amet...

Often used in prototypes

OK to use for placeholder document content

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

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?

Poor 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

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

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

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

More later…

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?

An agenda-free survey

Prototyping tools


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

10/25/2011


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 you 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!


Whiteboards


Microsoft Word


Microsoft Word pros and cons


Pros Is easy to learn and use Enables you to communicate your ideas quickly Focuses you 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


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


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


Photoshop pros and cons


Pros


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


Not a good value (Photoshop Elements is though)

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

10/25/2011


Other tools


More Office: Visio, PowerPoint, Excel, OneNote (on a tablet)

Windows Paint (horrible!)

Axure (expensive!)

OmniGraffle (Mac)

Mockingbird (SaaS)

There is no “best” tool!

Use my pros and cons to help you decide

Let’s look at some real prototyping examples

Some examples


Balsamiq Mockups in action


Microsoft Word in action


SketchFlow in action


SketchFlow: apply the criteria


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

http://www.youtube.com/v/70hfU7_95Gw&rel=0&hl=en_US&feature=player_embedded&version=3

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

10/25/2011


SketchFlow: my analysis


This is what I saw:

Focus was mostly on using tool, very little design Mentioned xaml, color, tagging, components Lots of setting properties Design a Sign In screen (in 30 seconds or less)

Design choices (what few there were) were biased what is easy to do in SketchFlow Why did he define all those pages? Why did he use an animation?

Design decisions feel “one off”, “spur of moment”, and overly focused on details

A Sign In screen isn’t even worth prototyping…completeness Most Sign In screens have a poor UX, but layout and lack of animation

aren’t among them

Does this mean SketchFlow is bad?


No, SketchFlow is awesome (but dangerous)

You have to use it the right way

Always start on paper to think the design through

When using focus on the design, not the tool

Think: Issue by issue, not dialog by dialog

Don’t worry about reuse

If you can reuse the xaml, great!

Don’t let reuse drive any decisions

Designing animations and transitions


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

My favorite prototype


If you remember only one thing…





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

10/25/2011


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

Wrap up


Prototyping resources


Sketching User Experiences, Bill Buxton

Paper Prototyping, Carolyn Snyder

Dynamic Prototyping with SketchFlow, Chris Bernard and Sara Summers

Prototyping: A Practitioner’s Guide, Todd Zaki Warfel

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

10/25/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 Run At Server, a Montreal-based Silverlight training company

First course scheduled for October 2011 in Montreal

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]