Paper Prototyping

Lecture slides from the Interaction Design Methods course, 6 April 2013, Tallinn University.

1. Paper Prototyping
IFI7156 Interaction Design Methods

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

3. Design patterns,
guidelines & grids

4. http://developer.yahoo.com/ypatterns/

5. iOS Human Interface Guidelines

6. http://developer.android.com/guide/practices/ui_guidelines/

7. http://lessframework.com

8. http://960.gs

9. From user stories to
paper prototypes

10. Initial user story

12. Improved user story

15. Redesigning existing
interfaces

18. Testing paper
prototypes

19. Preparation
•
Creating tasks based on the scenarios
•
Creating related interview questions

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

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

22. Testing session
•
Test person
•
“Paper computer”
•
Facilitator

23. References
•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
•Spool, J.M. (2005). Seven Common Usability Testing Mistakes. http://www.uie.com/
articles/usability_testing_mistakes/

24. This work is licensed under the Creative Commons Attribution-ShareAlike 3.0
Unported License. To view a copy of this license, visit http://creativecommons.org/
licenses/by-sa/3.0/
Hans Põldoja
[email protected]
Interaction Design Methods
http://ifi7156.wordpress.com
Tallinn University
Institute of Informatics