paper prototyping

24
Paper Prototyping IFI7156 Interaction Design Methods

Upload: hans-poldoja

Post on 28-Jan-2015

437 views

Category:

Design


6 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Paper Prototyping

Paper Prototyping

IFI7156 Interaction Design Methods

Page 2: Paper Prototyping

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

Page 3: Paper Prototyping

Design patterns, guidelines & grids

Page 7: Paper Prototyping

http://lessframework.com

Page 8: Paper Prototyping

http://960.gs

Page 9: Paper Prototyping

From user stories to paper prototypes

Page 10: Paper Prototyping

Initial user story

Page 11: Paper Prototyping
Page 12: Paper Prototyping

Improved user story

Page 13: Paper Prototyping
Page 14: Paper Prototyping
Page 15: Paper Prototyping

Redesigning existing interfaces

Page 16: Paper Prototyping
Page 17: Paper Prototyping
Page 18: Paper Prototyping

Testing paper prototypes

Page 19: Paper Prototyping

Preparation

• Creating tasks based on the scenarios

• Creating related interview questions

Page 20: Paper Prototyping

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)

Page 21: Paper Prototyping

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)

Page 22: Paper Prototyping

Testing session

• Test person

• “Paper computer”

• Facilitator

Page 24: Paper Prototyping

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õ[email protected]

Interaction Design Methodshttp://ifi7156.wordpress.com

Tallinn UniversityInstitute of Informatics