user interface prototyping techniques

33
User interface prototyping techniques Hans Põldoja

Upload: hans-poldoja

Post on 28-Jan-2015

1.362 views

Category:

Design


0 download

DESCRIPTION

Presentations in Interface and Interaction Design course, IMKE master programme, Tallinn University.

TRANSCRIPT

Page 1: User interface prototyping techniques

User interface prototyping techniquesHans Põldoja

Page 2: User interface prototyping techniques

This work is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

Page 3: User interface prototyping techniques

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 4: User interface prototyping techniques

Design patterns, guidelines & grids

Page 8: User interface prototyping techniques

http://lessframework.com

Page 9: User interface prototyping techniques

http://960.gs

Page 10: User interface prototyping techniques

From user stories to paper prototypes

Page 11: User interface prototyping techniques

Initial user story

Page 12: User interface prototyping techniques
Page 13: User interface prototyping techniques

Improved user story

Page 14: User interface prototyping techniques
Page 15: User interface prototyping techniques
Page 16: User interface prototyping techniques

Redesigning existing interfaces

Page 17: User interface prototyping techniques
Page 18: User interface prototyping techniques
Page 19: User interface prototyping techniques

Testing paper prototypes

Page 20: User interface prototyping techniques

Preparation

• Creating tasks based on the scenarios

• Creating related interview questions

Page 21: User interface prototyping techniques

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 22: User interface prototyping techniques

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 23: User interface prototyping techniques

Testing session

• Test person

• “Paper computer”

• Facilitator

Page 24: User interface prototyping techniques

Prototyping software

Page 25: User interface prototyping techniques

Balsamiq Mockups

Page 26: User interface prototyping techniques

OmniGraffle

Page 27: User interface prototyping techniques

OmniGraffle

Page 29: User interface prototyping techniques

OmniGraffle

Page 30: User interface prototyping techniques

Pencil