Downloaded 30 times
Uploaded byHans Põldoja
Low-fidelity Prototyping
The document discusses low and high-fidelity prototyping methods. It describes paper prototyping and wireframing as low-fidelity techniques that are fast, inexpensive, and help identify problems early. It outlines the benefits of paper prototyping, such as evoking feedback and fostering collaboration. The document then discusses testing paper prototypes with tasks based on user scenarios and collecting feedback to iterate designs.
More Related Content
Low-fidelity Prototyping
- 1.
- 2. low-fi vs hi-fiprototyping
- 3. Low-fidelity prototyping • Paperprototyping • Wireframes • Storyboards
- 4. High-fidelity prototyping • GraphicalUI prototypes • HTML/CSS mockups • Clickthrough prototypes
- 5.
- 6. Snyder, C. (2003).Paper prototyping: The fast and easy way to design and refine user interfaces. San Francisco, CA: Morgan Kaufmann.
- 7. Benefits of paperprototyping • Fast and inexpensive • Identifies problems before they are coded • Evokes more and better feedback from the users • Helps developers think creatively • Gets users and other stakeholders involved in the process • Fosters team work and communication (Snyder, 2003)
- 8. Paper prototyping materials •Blank background paper (A3) • Blank paper (A4) • Fibre tip drawing pens (0.4 mm, 0.6 mm, 0.8 mm, etc) • Scissors • Transparent pockets • Camera
- 9.
- 10.
- 11. Process • Following thedesign patterns / interface guidelines • Creating separate prototype(s) for each functionality (user story) • Making changes in the user story, if needed • Putting the pieces together • Taking photos of the process (paper prototyping) • Finding missing stories / prototypes
- 12. Design patterns andUI guidelines
- 13. Alexander, C., Ishikawa,S., & Silverstein, M. (1977). A Pattern Language: Towns, Buildings, Construction. New York, NY: Oxford University Press.
- 14. (Alexander et al.,1977)
- 15. (Alexander et al.,1977)
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 24.
- 25.
- 26. From user storiesto paper prototypes
- 27.
- 29.
- 32.
- 35.
- 36.
- 37.
- 38. Preparation • Creating tasksbased on the scenarios • Creating related interview questions
- 39. Good testing task •Is based on a goal that matters for the chosen persona • Covers questions important to the success of your product/business • Has appropriate scope — not too broad, not too specific • Has a finite and predictable set of possible solutions • Has a clear end point that the user can recognize • Evokes action, not just opinion (Snyder, 2003)
- 40. Designing the righttasks “Years ago, we helped with a study of Ikea.com, looking at how people found products on the site. When we got there, they'd already started the testing process and were using tasks like "Find a bookcase." Interestingly, every participant did exactly the same thing: they went to the search box and typed "bookcase". Upon our suggestion, the team made a subtle change to the instructions they were giving their participants: "You have 200+ books in your fiction collection, currently in boxes strewn around your living room. Find a way to organize them." We instantly saw a change in how the participants behaved with the design. Most clicked through the various categories, looking for some sort of storage solution. Few used Search, typing in phrases like "Shelves" and "Storage Systems". And, nobody searched on "bookcase".” (Jared M. Spool) (Spool, 2005)
- 41. (Snyder, 2003) Step 6:Write Instructions for Users ~> 139 Table 6.2 Task Instructions: Bad and Good Example 1. Start Excel 2. Go to Tools --) MATLAB functions 3. Create a new function--from the list of installed MATLAB Excel builder components, load "myclass" from "my component." 4. Select "myprimes" from the list of available methods. Set up inputs/outputs for this function as follows... (The original task went on for 2 pages.) You have a work colleague who created an Excel Add-In called the MATLAB Function Wizard that allows you to access certain MAT- LAB functionality. He's asked you to test it to find all the prime num- bers between 0 and 25. (Note: The users were familiar with Excel and the product team wasn't testing Excel itself, so the explicit wording of "Excel Add-In" is appropriate.)
- 42. What to focuson? • Terminology — Do the users understand the terms in the UI? • Navigation — Does the flow match what users expect? • Content — Does it provide the right level of information? • Page layout — Is content organized as users expect? • Functionality — What additional features are desired? (Ginsburg, 2009)
- 43. Testing session • Testperson • “Paper computer” • Facilitator • Camera holder
- 44.
- 45. Brown, D. M.(2011). Communicating Design: Developing Web Site Documentation for Design and Planning. Berkeley, CA: New Riders.
- 46.
- 47.
- 50.
- 51.
- 52. Strengths of wireframes •A fast and easy way to present concepts for interfaces • Focus on underlying logic, behavior, and functionality • Enable rapid iteration on early concepts • Easier to make large changes compared with paper prototypes (Brown, 2011)
- 53. References • Brown, D.M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning. Berkeley, CA: New Riders. • Ginsburg, S. (2009). An agile approach to iPhone design: Paper prototyping + user testing. http://www.slideshare.net/ginsburgdesign/an-agile-approach- to-iphone-design-paper-prototyping-user-testing • Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. San Francisco, CA: Morgan Kaufmann. • Spool, J.M. (2005). Seven Common Usability Testing Mistakes. http:// www.uie.com/articles/usability_testing_mistakes/
- 54.
- 55. This work islicensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/ Hans Põldoja hans.poldoja@tlu.ee IFI7313.DT Interaction Design Methods https://ifi7313.wordpress.com Tallinn University School of Digital Technologies