Lecture slides in IFI7156 Interaction Design Methods course, Tallinn University, 12 March 2015

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.)

4. An Example: OLPC

5. (Design Continuum, 2006)

6. (Design Continuum, 2006)

7. (Fuse Project, 2006)

8. (Fuse Project, 2006)

9. (Michalski, 2007)

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

13. Paper prototyping

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

18. Design patterns, guidelines
& grids

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/

21. Android Design
http://developer.android.com/design/

22. 960 Grid System
http://960.gs

25. Foundation
http://foundation.zurb.com

28. From user stories to paper
prototypes

29. Initial user story

31. Improved user story

34. Redesigning existing
interfaces

37. Clickthrough paper
prototypes

38. POP
https://popapp.in

39. Testing 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

45. Wireframes

46. Brown, D. M. (2011). Communicating
Design: Developing Web Site
Documentation for Design and Planning.
Berkeley, CA: New Riders.

47. Balsamiq Mockups

48. OmniGraffle

51. (Stott, 2005)

52. (Richards, 2009)

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