EFFECTIVE PROTOTYPING A developer s guide to better design through prototyping Everett McKay UX Design Edge uxdesignedge.com Who is this guy? 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 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 reserved. 1
How important is prototyping? Today s agenda 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? Prototyping basics Effective prototyping Prototyping tools Examples Everett s rules for effective prototyping Wrap up Prototyping basics Let s review the fundamentals What is a software prototype? Goals of prototyping A software prototype is an interface mockup that demonstrates how a program or feature is going to look and behave 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 reserved. 2
Prototypes vs. sketches vs. mockups Basic design process steps 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 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 Wireframes vs. pixels 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 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 reserved. 3
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 Effective prototyping The difference between success and that other outcome Rule 1: Have clear goals Things to prototype 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 Product concepts Home pages, landing pages Task flows Page layouts Complex or unusual interactions Design alternatives reserved. 4
Some recent LinkedIn discussions Things to not prototype 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? Design principles Guidelines, conventions Minor details Your limited time is better spent elsewhere Rule 2: Determine communication Rule 3: Choose the right level 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? Communicating design ideas is the ultimate goal Not all communication goals need fidelity In fact, most don t! Lower is better The Windows Vista story 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 design team used Photoshopbased 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 reserved. 5
Rule 4: Choose the right tool Rule 5: Avoid tool bias 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) 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 Rule 7: Throw it away! 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 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 reserved. 6
Prototypes aren t production code What about SketchFlow? 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 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? Prototyping tool attributes Prototyping tools An agenda-free survey 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 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 reserved. 7
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 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 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 reserved. 8
Balsamiq Mockups Balsamiq Mockups pros and cons Try web version for free at http://www.balsamiq.com/demos/mockups/mockups.html Pros Is easy to learn and use Enables you to communicate your ideas quickly 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 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 Is expressive, enabling a wide range of designs 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) reserved. 9
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 Some examples Let s look at some real prototyping 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 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 reserved. 10
SketchFlow: my analysis Does this mean SketchFlow is bad? 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 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 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 Everett s rules for effective prototyping Everett s rules for effective prototyping 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 reserved. 11
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 UX Design Edge offerings 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 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 everettm@uxdesignedge.com Subscribe to my blog and join my mailing list UX Design Essentials Workshop New! Online UX Design Basics 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 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! reserved. 12
Coming soon! UX Design for Silverlight Top UX Design Edge blog posts 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 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 everettm@uxdesignedge.com Be sure to get a biz card and flyer Questions Thank you! reserved. 13