Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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
Copyright 2011 UX Design Edge. All rights reserved.
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
Copyright 2011 UX Design Edge. All rights reserved.
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
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 2
How important is prototyping?
Copyright 2011 UX Design Edge. All rights reserved.
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
Copyright 2011 UX Design Edge. All rights reserved.
Prototyping basics
Effective prototyping
Prototyping tools
Examples
Everett’s rules for effective prototyping
Wrap up
Let’s review the fundamentals
Prototyping basics
Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.
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
And no, we don’t have to prototype
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 3
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…
Basic design process steps
Copyright 2011 UX Design Edge. All rights reserved.
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
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 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?
Copyright 2011 UX Design Edge. All rights reserved.
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
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 4
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
What’s up with Lorem Ipsum?
Copyright 2011 UX Design Edge. All rights reserved.
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
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?
Poor 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
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 5
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
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 6
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
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 7
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
More later…
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?
An agenda-free survey
Prototyping tools
Copyright 2011 UX Design Edge. All rights reserved.
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 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
Copyright 2011 UX Design Edge. All rights reserved. 8
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 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!
Copyright 2011 UX Design Edge. All rights reserved.
Whiteboards
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 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
Prototypes not easy to manage and maintain
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 9
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 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
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)
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 10
Other tools
Copyright 2011 UX Design Edge. All rights reserved.
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
Copyright 2011 UX Design Edge. All rights reserved.
Balsamiq Mockups in action
Copyright 2011 UX Design Edge. All rights reserved.
Microsoft Word in action
Copyright 2011 UX Design Edge. All rights reserved.
SketchFlow in action
Copyright 2011 UX Design Edge. All rights reserved.
SketchFlow: apply the criteria
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 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
Copyright 2011 UX Design Edge. All rights reserved. 11
SketchFlow: my analysis
Copyright 2011 UX Design Edge. All rights reserved.
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?
Copyright 2011 UX Design Edge. All rights reserved.
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
Copyright 2011 UX Design Edge. All rights reserved.
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
Copyright 2011 UX Design Edge. All rights reserved.
If you remember only one thing…
Everett’s rules for effective prototyping
Copyright 2011 UX Design Edge. All rights reserved.
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
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 12
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
Wrap up
Copyright 2011 UX Design Edge. All rights reserved.
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
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
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!
10/25/2011
Copyright 2011 UX Design Edge. All rights reserved. 13
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 Run At Server, a Montreal-based Silverlight training company
First course scheduled for October 2011 in Montreal
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.