SlideShare a Scribd company logo

User Interface Prototyping Techniques: Low Fidelity Prototyping

•
•
Hans Põldoja
Hans Põldoja

This document discusses low-fidelity prototyping techniques for user interface design. It defines prototypes and describes low and high-fidelity prototyping methods. Paper prototyping and wireframing are introduced as common low-fidelity techniques. The benefits of paper prototyping include low cost, early identification of problems, and ability to get user feedback. Best practices for paper prototyping include creating prototypes based on user stories, testing with tasks, and focusing feedback on terminology, navigation and functionality. Wireframes allow for rapid iteration of interface concepts and easier modification compared to paper.

1 of 56
Download to read offline
User Interface Prototyping Techniques: Low Fidelity Prototyping IFI7156 Interaction Design Methods
What is a prototype?
A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. (Wikipedia, n.d.)
An Example: OLPC
(Design Continuum, 2006)
(Design Continuum, 2006)
(Fuse Project, 2006)
(Fuse Project, 2006)
(Michalski, 2007)
low-fi vs hi-fi prototyping
Low-fidelity prototyping • Paper prototyping • Wireframes • Storyboards
High-fidelity prototyping • Graphical UI prototypes • HTML/CSS mockups • Clickthrough prototypes
Paper prototyping
Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. San Francisco, CA: Morgan Kaufmann.
Benefits of paper prototyping • 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)
Paper prototyping materials • Blank background paper (A3) • Blank paper (A4) • Drawing pens (0.4 mm, 0.6 mm, 0.8 mm, etc) • Scissors • Transparent pockets
Process • Following the design 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
Design patterns, guidelines & grids
Yahoo Design Pattern Library https://developer.yahoo.com/ypatterns/
iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
Android Design http://developer.android.com/design/
960 Grid System http://960.gs
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
Foundation http://foundation.zurb.com
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
From user stories to paper prototypes
Initial user story
User Interface Prototyping Techniques: Low Fidelity Prototyping
Improved user story
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
Redesigning existing interfaces
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
Clickthrough paper prototypes
POP https://popapp.in
Testing paper prototypes
Preparation • Creating tasks based on the scenarios • Creating related interview questions
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)
Designing the right tasks “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)
What to focus on? • Terminology. Do they 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)
Testing session • Test person • “Paper computer” • Facilitator
Wireframes
Brown, D. M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning. Berkeley, CA: New Riders.
Balsamiq Mockups
OmniGraffle
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
(Stott, 2005)
(Richards, 2009)
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)
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/
Photos • http://commons.wikimedia.org/wiki/File:Laptop09052.jpg • http://commons.wikimedia.org/wiki/File:Laptop09053.jpg • http://commons.wikimedia.org/wiki/File:Laptop09055.jpg • http://commons.wikimedia.org/wiki/File:Laptop0956.jpg • http://commons.wikimedia.org/wiki/File:Laptop-crank.jpg • http://commons.wikimedia.org/wiki/File:Laptop-ebook.jpg • http://commons.wikimedia.org/wiki/File:Orange-rotate-small.jpg • http://commons.wikimedia.org/wiki/File:1st_working_machine.jpg • http://commons.wikimedia.org/wiki/File:LaptopOLPC_a.jpg • http://commons.wikimedia.org/wiki/File:LaptopOLPC_b.jpg • https://www.flickr.com/photos/sociate/2128375500/ • https://www.flickr.com/photos/snowcrash/21099636 • https://www.flickr.com/photos/adriarichards/4102421296
This work is licensed 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 Interaction Design Methods http://ifi7156.wordpress.com Tallinn University Institute of Informatics

More Related Content

User Interface Prototyping Techniques: Low Fidelity Prototyping

  • 1. User Interface Prototyping Techniques: Low Fidelity Prototyping IFI7156 Interaction Design Methods
  • 2. What is a prototype?
  • 3. A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. (Wikipedia, n.d.)
  • 10. low-fi vs hi-fi prototyping
  • 11. Low-fidelity prototyping • Paper prototyping • Wireframes • Storyboards
  • 12. High-fidelity prototyping • Graphical UI prototypes • HTML/CSS mockups • Clickthrough prototypes
  • 14. Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. San Francisco, CA: Morgan Kaufmann.
  • 15. Benefits of paper prototyping • 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)
  • 16. Paper prototyping materials • Blank background paper (A3) • Blank paper (A4) • Drawing pens (0.4 mm, 0.6 mm, 0.8 mm, etc) • Scissors • Transparent pockets
  • 17. Process • Following the design 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
  • 19. Yahoo Design Pattern Library https://developer.yahoo.com/ypatterns/
  • 20. iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
  • 28. From user stories to paper prototypes
  • 40. Preparation • Creating tasks based on the scenarios • Creating related interview questions
  • 41. 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)
  • 42. Designing the right tasks “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)
  • 43. What to focus on? • Terminology. Do they 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)
  • 44. Testing session • Test person • “Paper computer” • Facilitator
  • 46. Brown, D. M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning. Berkeley, CA: New Riders.
  • 53. 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)
  • 54. 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/
  • 55. Photos • http://commons.wikimedia.org/wiki/File:Laptop09052.jpg • http://commons.wikimedia.org/wiki/File:Laptop09053.jpg • http://commons.wikimedia.org/wiki/File:Laptop09055.jpg • http://commons.wikimedia.org/wiki/File:Laptop0956.jpg • http://commons.wikimedia.org/wiki/File:Laptop-crank.jpg • http://commons.wikimedia.org/wiki/File:Laptop-ebook.jpg • http://commons.wikimedia.org/wiki/File:Orange-rotate-small.jpg • http://commons.wikimedia.org/wiki/File:1st_working_machine.jpg • http://commons.wikimedia.org/wiki/File:LaptopOLPC_a.jpg • http://commons.wikimedia.org/wiki/File:LaptopOLPC_b.jpg • https://www.flickr.com/photos/sociate/2128375500/ • https://www.flickr.com/photos/snowcrash/21099636 • https://www.flickr.com/photos/adriarichards/4102421296
  • 56. This work is licensed 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 Interaction Design Methods http://ifi7156.wordpress.com Tallinn University Institute of Informatics