Effective prototyping (for Vermont Code Camp)

  • 1,266 views
Uploaded on

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. In this talk, Everett will …

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. In this talk, Everett will explain prototyping and its goals, compare prototyping to sketching, and explore the different types of prototyping. He will then characterize effective prototyping and explain why those characteristics are so important.

Everett will review several commonly available prototyping tools (including SketchFlow), and evaluate their pros and cons. He will conclude by working through some examples so that you can see effective prototyping in practice.

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,266
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
27
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 9/11/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 Everett McKay  Was on the Windows 7 and Windows Vista teams for 5 years, responsible for managing, writing, and driving the UX Design Edge  Windows User Experience Interaction Guidelines A Windows and Mac UI programmer before Microsoft uxdesignedge.com  Wrote two books  Developing User Interfaces for Microsoft Windows (Microsoft Press)  Debugging Windows Programs (Addison Wesley)  Writing another interaction design book now Vermont Code Camp, September 2011 Copyright 2011 UX Design Edge. All rights reserved. Today’s agenda Quick discussion  Prototyping basics  Are you or your team prototyping now?  Effective prototyping  How?  Prototyping tools  Do you feel it is effective?  Examples  Wrap up  My claim: Many prototyping efforts aren’t effective. From this talk, you’ll see 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.Copyright 2011 UX Design Edge. All rightsreserved. 1
  • 2. 9/11/2011 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 evaluate, compare, get feedback, and improve to look and behave design ideas  To user test specific designs  …and to achieve the above goals more efficiently than with production code Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. Prototypes vs. sketches vs. mockups Levels of prototyping  Sketches: rough ideas, for  Low fidelity: Rough sketch or wireframe, no ideation/brainstorming, concepts matter but attempt to look real everything else doesn’t  Paper,Balsamiq, Axure, Mockingbird, iPlotz, Mockflow, Word  Prototypes: for task flow and interaction  Medium fidelity: Attempt to look real, but design, pixels don’t matter obviously not  Mockups: visual design, pixels do matter  PowerPoint, Visio, Axure, OmniGraffle, SketchFlow  Code: software engineering matters,  High fidelity: Looks real program, may be dynamic investment results in commitment or have limited functionality Is this really a prototype or a sketch? A fine line…  Real code, Html/Css, SketchFlow, Photoshop, Illustrator, Fireworks Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. 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? Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 2
  • 3. 9/11/2011 Timing is everything Is saving 15 minutes really a big deal? Time required to create each mockup:  Yes!  Mid fidelity (Balsamiq, 24 minutes)  It’s not 1 x 15 minutes, it’s n x 15 minutes where n is potentially a big number  Wireframe (Balsamiq, 20 minutes)  Given a fixed amount of time, 3x faster means 3x  Wireless (Word, 12 minutes) more design ideas or iterations  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. 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:  Home pages, landing pages  To communicate design ideas?  To improve design ideas, get feedback?  Task flows  To test design ideas?  Page layouts  Can those goals be achieved efficiently without a  Complex or unusual interactions prototype?  Design alternatives (A/B testing)  Questionable goals  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. 3
  • 4. 9/11/2011 Some recent LinkedIn discussions Things to not prototype  Q: Should the floppy disk icon for "Save" command  Design principles be 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  In fact, most don’t! 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? 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  The Windows Vista design team used Photoshop- job 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  People react emotionally to beautiful things  Beauty hides flaws  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. 4
  • 5. 9/11/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  Paper has no bias! projects)  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  A prototype is a prototype only if: away  It is easily thrown away  This means avoiding commitment  It is actually thrown away!  The goals of prototyping lead to changing or even  A common conversation with a developer… abandoning a design idea  A test: Suppose you determine that a design isn’t  Code prototypes tend to not get thrown away 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 5
  • 6. 9/11/2011 Prototypes aren’t production code What about SketchFlow?  …and vice versa  Isn’t code reuse the entire point?  Problem: Goals of prototyping fundamentally  Yes, but it shouldn’t be…any decisions based on a conflict with goals of production code 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 codewill be hastily written, poorly designed, poor implemented, full of bugs  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  Were they achieved? high 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  Did you consider design alternatives? scores  Did you throw the prototype away?  Result: You get what you reward  Managers who want code reuse Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. Radical claim  Most prototyping efforts aren’t effective  Don’t have clear goals Prototyping tools  Don’t achieve those goals An agenda-free survey  Take to much time and effort  Discourages feedback and improvement  Ask yourself: how does your team’s prototyping stack up to these rules? Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 6
  • 7. 9/11/2011 Prototyping tool attributes Good ol’ paper 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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. Good ol’ paper pros and cons You can usability test using paper! 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 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 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. 7
  • 8. 9/11/2011 Balsamiq Mockups 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  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. 8
  • 9. 9/11/2011 Other tools  More Office: Visio, PowerPoint, Excel, OneNote (on a tablet) Examples  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 Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. My favorite prototype SketchFlow in action (homework) Watch http://www.youtube.com/watch?v=kJtu5mjOYrU Is this effective prototyping? Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved. SketchFlow homework questions  What was the focus of the effort?  Why were key design decisions made? Wrap up  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? 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. 9/11/2011 Everett’s rules for effective prototyping Related things to consider  Rule 1: Have clear goals  Lower is better  Rule 2: Determine the right communication  Always start with paper  Rule 3: Choose the right level  Consider using paper—even for user testing  More alternatives, iterations is better  Rule 4: Choose the right tool  Reconsider Photoshop  Rule 5: Avoid tool bias  Tools  Rule 6: Avoid commitment  Focus on the design, not the mechanics  Rule 7: Throw it away!  Consider using different tools for different goals  Rule 8: Watch for team culture traps  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  Efficient,cost effective consulting  Dynamic Prototyping with SketchFlow, Chris Bernard and Sara Summers  Team, onsite, and online training  Paper Prototyping: A How-To Training Video (DVD),  If you need design help, please contact me at Jakob Nielsen everettm@uxdesignedge.com  Get Effective Prototyping deck from  Subscribe to my blog and join my mailing list 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- hosting a two-day UX Design Essentials Workshop at designers your company  Achieve four crucial goals!  A fun, fast paced, hands-on workshop gives you the  Cover ten essential topics! practical essentials to improve your entire team’s  In three short, action packed hours UX design skills—including management  Plus virtual workshop to ask questions  Apply what you learn directly to your app or site  All for only $295  Check http://uxdesignedge.com/training for details  Please check it out! Copyright 2011 UX Design Edge. All rights reserved. Copyright 2011 UX Design Edge. All rights reserved.Copyright 2011 UX Design Edge. All rightsreserved. 10
  • 11. 9/11/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 RunAtServer, a Montreal-based  Design scenarios—and how thrilled users ruin them Silverlight training company  Icon design for non-designers  First course scheduled for November 2011 in  Are you sure? How to write effective confirmations Montreal  Interaction design interview question #1  The politics of ribbons  Vermont soon after  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. 11