Prototyping

• Idea

• Sketch

• Basic prototypes

• Operational prototype

• “Alpha” and “beta” version

• First release of final product

• New improved product

• ……..

Product development

2011 Thomas Mejtoft

A prototype is a sample or model built to test a concept

• A sketch is to explore your idea

• A prototype is used to test your idea

Prototyping

2011 Thomas Mejtoft

• In engineering a prototype can be used to design and test functions

• In interaction design a prototype can be used to test visible parts of the design

Prototyping

2011 Thomas Mejtoft

• Cheap and easy way to get user feedback on ideas

• More “realistic” than basic documentation for evaluating ideas

• Starts an iterative process for product development

Why prototyping?

2011 Thomas Mejtoft

Spiral model of software development

2011 Thomas Mejtoft (source: wikipedia.org, based on Boehm, 1986, p. 25)

• Different levels of prototyping

– Vertical prototyping

• A lot of details in only a few functions

– Horizontal prototyping

• Many function with little detail in each function

Prototyping

2011 Thomas Mejtoft

« F

un

ctio

nal

ity

»

« Different features »

Full interface

Horizontal prototype

Ver

tica

l pro

toty

pe Scenario

(based on Nielsen, 1994)

• Different stages of prototyping

– Lo-fi prototype

– Hi-fi prototype

Prototyping

2011 Thomas Mejtoft

“Low-fidelity (lo-fi) prototyping is characterised by a quick and easy translation of high-level design concepts into tangible and testable artefacts.”

(Egger, 2000)

• Lo-fi prototyping

– Can be used for brainstorming

– Often created using paper, cardboard, wood or other non-virtual materials

– Paper prototyping

• Sketches of sequences combined with post-it notes

Prototyping

2011 Thomas Mejtoft

• Paper prototyping

Prototyping

2011 Thomas Mejtoft

“Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface in intended to work.”

(Snyder, 2003, p. 4)

• Hi-fi prototyping

– More realistic versions of the final product

– The prototype is often “working” using mockup functions and workarounds

– Common tools for general hi-fi prototyping are Flash, Photoshop, Visual Studio, HTML etc.

– There are prototyping tools for many mobile platforms

Prototyping

2011 Thomas Mejtoft

“High-fidelity prototypes trade off speed for accuracy. They are not as quick and easy to create as low-fidelity prototypes, but they faithfully represent the interface to be implemented in the product. They can be made so realistic that the user can’t tell them from the actual product”

(Rudd, Stern & Isensee, 1996, p. 78)

2011 Thomas Mejtoft (Rudd, Stern & Isensee, 1996, p. 80)

“The advantages of lo-fi or low-tech are numerous. In addition to being cheap, fast and accessible to non-programmers, these rudimentary techniques can yield a maximum of feedback on design ideas at a minimal cost.”

(Egger, 2000)

Advantages Disadvantages

Lo-f

i Pro

toty

pe Lower development cost.

Evaluate multiple design concepts. Useful communication device. Address screen layout issues. Useful for identifying market requirements. Proof-of-concept.

Limited error checking. Poor detailed specification to code to. Facilitator-driven. Limited utility after requirements established. Limited usefulness for usability tests. Navigational and flow limitations.

Hi-

fi P

roto

typ

e

Complete functionality. Fully interactive. User-driven. Clearly defines navigational scheme. Use for exploration and test. Look and feel of final product. Serves as a living specification. Marketing and sales tool.

More expensive to develop Time-consuming to create. Inefficient for proof-of-concept designs. Not effective for requirements gathering.

Thomas Mejtoft TFE @ Umeå University

thomas.mejtoft@tfe.umu.se

Boehm, B. W. (1986). A spriral model of software development and enhancement. ACM Sigsoft Software Engineering Notes 4(11), 22-42.

Egger, F.N. (2000). Lo-Fi vs. Hi-Fi Prototyping: how real does the real thing have to be? Paper presented at the Teaching HCI workshop , OZCHI2000 , Sydney, Australia, December 14-19, 2000.

Goodwin, K. (2009). Designing for the digital age: How to create human-centered products and services. Indianapolis, IN: Wiley Publishing.

Nielsen, J. (1994). Guerrilla HCI: Using Discount Usability Engineering to Penetrate the Intimidation Barrier. useit.com. Retrieved March 24, 2011, from http://www.useit.com/papers/guerrilla_hci.html

Rudd, J., Stern, K., & Isensee, S. (1996). Low vs. high-fidelity prototyping debate. Interactions 3(1), 76-85.

Snyder, C. (2003). Paper Prototyping. San Francisco, CA: Morgan Kaufmann Publishers.

References

2011 Thomas Mejtoft