Introduction to Prototyping - Scottish UPA - June 2011


Published on

Presented to the Scottish Usability Professionals Association, Edinburgh, 22 June 2011.

Covering the basics, the benefits, some tools, some tips and a case study.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Examples of paper prototyping: Using cards to replicate tabbed browsing Using post it notes to investigate potential location of a log in interface On a whiteboard, so the participant and rub out and amend the design with you Slightly more sophisticated prototype using powerpoint More sophisticated still, with the graphic design overlaid
  • Looking to find: Quick questions focused on a page layout or the nature of some content? Or fundamental decisions about your information archictecture and the user journey? Where you are in the design process: You may or may not have a graphic design organised yet. Typically the look and feel is prioritised ahead of things like content and architecture, when really it should be the final step. The icing on the cake. Who you’re working with: I’ve had experiences where some development partners have doubted PP findings and recommendations because the prototypes were so crude. “Well that won’t be a problem once we have a look and feel. We can get the graphic designer to address that.” While I’d say this is rarely a feasible solution, you do need to bear in mind whether the people you’re working with buy into what you’re doing.
  • As with accompanied surfing – pencil and paper is often best. And again, templates you scribble on can save you some effort. Power point can be good as you can present your prototypes on screen. You can add links and begin to more closely mimic the website experience. Vision is a great tool for paper prototyping as it’s so quick and easy to drag and drop items. There are also some templates and shapes available online for free that can speed up the process still further, Link included in the further reading page. Visio is on site license at the University – it just isn’t part of the standard MS Office package. Your computing officer will be able to get you a copy. Axure is a specialist package that works much like Visio, but creates real web pages from your drawings.
  • Introduction to Prototyping - Scottish UPA - June 2011

    1. 1. Introduction to prototyping Scottish UPA 22 June 2011 Neil Allison
    2. 2. Overview <ul><li>What is prototyping? </li></ul><ul><li>What are the benefits? </li></ul><ul><li>Prototyping tools </li></ul><ul><li>Some example outputs </li></ul><ul><li>Case studies </li></ul>
    3. 3. What is a prototype? <ul><li>“… a conceptual model that captures the intent or idea of a design.” </li></ul><ul><li>Todd Warfel </li></ul><ul><li>(A Practitioner’s Guide </li></ul><ul><li>to Prototyping) </li></ul>
    4. 4. When is a prototype not a prototype? <ul><li>When you can’t implement changes quickly for retesting </li></ul><ul><li>When it’s a pain to try alternative approaches, particularly in parallel </li></ul><ul><li>When the thought of starting over because something fundamental is wrong makes you want to cry </li></ul>
    5. 5. So what is prototyping? <ul><li>Trialling, testing, communicating </li></ul><ul><li>Exploring a concept or idea </li></ul><ul><li>Using a prototype to inform the development process </li></ul>
    6. 6. … so long as you can be when you present or test them Prototypes don’t have to be clever or sophisticated…
    7. 7. Benefits of prototyping
    8. 8. Why prototype? <ul><li>“ Prototypes are a great communication tool for fleshing out design ideas, testing assumptions, and gathering real-time feedback from users.” </li></ul><ul><li>Todd Warfel </li></ul><ul><li>(A Practitioner’s Guide </li></ul><ul><li>to Prototyping) </li></ul>
    9. 9. Why prototype? <ul><li>To help gather user (or business) requirements </li></ul><ul><ul><li>Better requirements gathering = less feature creep </li></ul></ul><ul><li>To think through scenarios & possibilities </li></ul><ul><ul><li>Highlight user priorities & top tasks </li></ul></ul><ul><li>To try out different potential solutions </li></ul><ul><ul><li>Diffuse Steve Krug’s “ religious debates ” </li></ul></ul><ul><li>To communicate effectively </li></ul><ul><ul><li>With end users, with developers, with business owners </li></ul></ul><ul><li>To reduce risk of rework </li></ul><ul><ul><li>Reduce the risk of needing a redeploy </li></ul></ul>
    10. 10. In a nutshell… <ul><li>Better end products </li></ul><ul><li>Save time and money </li></ul>
    11. 11. Another way to think about it Specification Development Deployment Number of options available Cost of making changes Maximum benefit
    12. 12. Prototyping tools
    13. 13. Prototype sophistication <ul><li>It depends: </li></ul><ul><ul><li>On what you’re looking to find </li></ul></ul><ul><ul><li>On where you are in the design process </li></ul></ul><ul><ul><li>On who you’re working with </li></ul></ul><ul><li>Does it facilitate </li></ul><ul><ul><li>Interaction? </li></ul></ul><ul><ul><li>Communication? </li></ul></ul>
    14. 14. Choosing the right tools <ul><li>Use the tool(s) that work best for you </li></ul><ul><ul><li>I usually prefer a combination </li></ul></ul><ul><li>Doesn’t matter what you prototype with </li></ul><ul><ul><li>Are you comfortable with it? </li></ul></ul><ul><ul><li>Can you work quickly? </li></ul></ul><ul><ul><li>Opportunities for collaboration are good too </li></ul></ul>
    15. 15. Some prototyping options <ul><li>Pencil, paper, post-it notes </li></ul><ul><li>Graphics packages (I love Snagit) </li></ul><ul><li>Office packages: PowerPoint, Visio, Word </li></ul><ul><li>Firefox free add-on: Pencil </li></ul><ul><li>Online services like Mockingbird </li></ul><ul><li>Specialist tools like Axure, iRise, Balsamiq </li></ul><ul><li>Your preferred development framework </li></ul>
    16. 16. Some examples…
    17. 17. Paper etc <ul><li>Scenario planning required! </li></ul><ul><ul><li>Only limited by your imagination (dental tape anybody?) </li></ul></ul><ul><ul><li>e-Commerce example: </li></ul></ul><ul><li>10 video examples: </li></ul>
    18. 18. I ♥ Visio <ul><li>Free templates: </li></ul>
    19. 19. Some specialist tools <ul><li>Mockingbird: </li></ul><ul><li>Balsamiq: (Edinburgh Uni users only) </li></ul><ul><li>Axure: </li></ul>
    20. 20. Case study Content Management System (CMS) interface enhancements
    21. 21. What we did #1 <ul><li>Identified functional & usability enhancement requirements </li></ul><ul><ul><li>Through user feedback </li></ul></ul><ul><ul><ul><li>Discussion board then priority survey </li></ul></ul></ul><ul><ul><li>Through observation in training and testing </li></ul></ul><ul><ul><li>Through support requests </li></ul></ul>
    22. 22. What we did #2 <ul><li>User rep, developer and graphic designer met to discuss potential solutions </li></ul><ul><ul><li>First prototypes: pencil & paper </li></ul></ul><ul><li>Agreed preferred solution from a development perspective </li></ul><ul><ul><li>Meeting functional and usability requirements </li></ul></ul>
    23. 23. What we did #3 <ul><li>Prototypes worked up with Visio & Snagit </li></ul><ul><ul><li>Some based on CMS development proof of concept </li></ul></ul><ul><ul><li>All paper based </li></ul></ul><ul><li>Scenarios developed to encourage interaction with prototypes </li></ul><ul><li>Usability testing with small numbers of CMS users </li></ul><ul><li>Minor tweaks made to prototypes based on findings </li></ul><ul><ul><li>One quick retest </li></ul></ul>
    24. 25. All paper based Writing not typing Playing computer Quick results summary
    25. 26. Top tips <ul><li>Trial the prototype activities before arranging sessions with participants </li></ul><ul><li>Make sure the participants are representative of your target users </li></ul><ul><ul><li>Or make allowances with your results </li></ul></ul><ul><li>Talk through the full test with development team – before and after sessions </li></ul><ul><ul><li>Looking at prototypes sometimes not enough </li></ul></ul>
    26. 27. Benefits: Usability <ul><li>Interface changes deployed smoothly </li></ul><ul><li>Enhancements universally well received </li></ul><ul><ul><li>User base were listened to & engaged with </li></ul></ul><ul><li>Demonstrably improved the publishing process </li></ul><ul><ul><li>ROI tests show task times cut by up to 33% </li></ul></ul><ul><ul><li>Saving at least £50,000 per year in staff time </li></ul></ul>
    27. 28. Benefits: Development <ul><li>Initial development time cut </li></ul><ul><ul><li>Rough prototypes facilitated discussion </li></ul></ul><ul><ul><li>Misconceptions identified </li></ul></ul><ul><ul><li>Better understanding of user behaviours </li></ul></ul><ul><ul><li>Development approaches ruled in/out </li></ul></ul><ul><li>Redevelopment significantly reduced </li></ul><ul><ul><li>Only one notable redevelopment needed </li></ul></ul><ul><ul><ul><li>Lesson learned: demo test with developer </li></ul></ul></ul><ul><ul><li>No redeploys needed </li></ul></ul>
    28. 29. Conclusions <ul><li>Doesn’t matter what you prototype with </li></ul><ul><ul><li>So long as it’s quick </li></ul></ul><ul><ul><li>Best options enable collaboration </li></ul></ul><ul><li>It’s not about the prototype itself </li></ul><ul><ul><li>It’s about the interaction </li></ul></ul><ul><ul><li>It’s about communication </li></ul></ul><ul><ul><li>It’s about shared understanding </li></ul></ul>
    29. 30. Final thought <ul><li>You will make mistakes when usability testing, but with practice you will get better </li></ul><ul><ul><li>Steve Krug: “It’s not rocket surgery” </li></ul></ul><ul><li>Usability is like cookery </li></ul><ul><ul><li>You don’t need to be a gourmet chef </li></ul></ul><ul><ul><ul><li>Beans on toast will usually do  </li></ul></ul></ul><ul><ul><li>Jakob Nielsen article: </li></ul></ul>
    30. 31. Learn more <ul><li>My blog posts on prototyping: </li></ul><ul><li>Great books </li></ul><ul><ul><li>Prototyping by Todd Warfel </li></ul></ul><ul><ul><li>Rocket Surgery Made Easy by Steve Krug </li></ul></ul>
    31. 32. Thank you Neil Allison University of Edinburgh