Effective prototyping
Upcoming SlideShare
Loading in...5
×
 

Effective prototyping

on

  • 1,980 views

Software prototyping is an important UX design skill that many people “just do” but effective prototyping requires crucial knowledge and practices that aren’t obvious. As a result, many ...

Software prototyping is an important UX design skill that many people “just do” but effective prototyping requires crucial knowledge and practices that aren’t obvious. As a result, many prototyping efforts aren’t productive and fail to achieve their goals.

In this talk, Everett will explain prototyping and its goals, compare prototyping to sketching, and explore the different types of prototyping. He will then give the eight rules for effective prototyping and show why those rules are so important.

Everett will review several commonly available prototyping tools (including SketchFlow), give nine criteria for evaluating prototyping tools, and evaluate the tools based on the criteria. He will conclude by showing some examples effective and ineffective prototyping in practice.

If you or your team is prototyping now or considering prototyping in the future, this talk is for you!

Statistics

Views

Total Views
1,980
Views on SlideShare
1,975
Embed Views
5

Actions

Likes
3
Downloads
48
Comments
0

2 Embeds 5

http://www.linkedin.com 4
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Effective prototyping Effective prototyping Document Transcript

  • 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. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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? 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. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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) Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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? Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. Effective prototyping The difference between success and that other outcome Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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? Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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? Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 5
  • 10/25/2011 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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? Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 7
  • 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. You can usability test using paper! Whiteboards Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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  Prototypes not easy to manage and maintain Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 8
  • 10/25/2011 Balsamiq Mockups 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  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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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  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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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) Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. Balsamiq Mockups in action Microsoft Word in action Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 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? Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. Got feedback?  Would love to hear it!  Contact me at everettm@uxdesignedge.com Questions  Be sure to get a biz card and flyer Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. Thank you! Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 13