stanford hci group / cs147

Prototypingyp g

Scott Klemmertas: Marcello Bastea-Forte, Joel Brandt,Neil Patel, Leslie Wu, Mike Cammarano

http://cs147.stanford.edu11 October 2007

P t t i tt l t i thPrototyping matters a lot in the real worldreal world

SANTA CLARA, California -- People thought Jeff Ha kins as cra hen the sa himJeff Hawkins was crazy when they saw him taking notes, checking appointments, and synchronizing a small block of wood with hissynchronizing a small block of wood with his PC, pretending all the while that the block was a handheld computera handheld computer. "If I wanted to check the calendar I'd take it out

d h d b "and press the wooden button"

Source: “The Philosophy of the Handheld.” Wired Magazine, October 1999.

WHAT IS PROTOTYPING?WHAT IS PROTOTYPING?(and what does it accomplish)

Bill B tBill Buxton

Design is choice, and there are two places where there is room for creativity:w e e t e e s oo o c eat v ty:

1) the creativity that you bring to enumerating i f ll di ti t ti f hi h tmeaningfully distinct options from which to

choose2) the creativity that you bring to defining the

criteria or heuristics according to which youcriteria, or heuristics, according to which you make your choices

P t t th h lti lPrototypes go through multiple versions along the wayversions along the way

Danger Danger DangerDangerSidekick

DangerSidekick 2

DangerSidekick 3

Note: these aren’t the prototypes but Danger used an extensive prototypingNote: these aren t the prototypes, but Danger used an extensive prototyping process

Source: Danger, Wikipedia

Thinking Through PrototypingThinking Through Prototyping

C llC llColleaguesColleaguesCli tCli tClientsClientsUUUsersUsers

O lO lOurselvesOurselves8

C ll f db kColleague feedback

Does this product meet the requirements?Is everyone on the same page?Is everyone on the same page?

Cli t F db kClient Feedback

Does the product meet the requirements?What variant do you prefer?What variant do you prefer?Is everyone on the same page?

Mi h l BMichael Barry

“the companies that want to see the most models in the least time are the most ode s t e east t e a e t e ostdesign-sensitive; the companies that want that one perfect model are the leastthat one perfect model are the least design sensitive.”

U f db kUsers feedback

Does it work?Does it match his/her mental model?Does it match his/her mental model?Is it ergonomic?How to use the product effectively?What to change in the product?What to change in the product?What other questions arise?

O l f db kOurselves feedback

Have I thought through all of the details?Does it match what I imagined?Does it match what I imagined?

NOTE: fresh eyes matter. Don’t just rely on yourself for feedback.yourself for feedback.

T k ti t kTwo key questions to ask

What do you want to learn from it?What do you want to communicate with it?What do you want to communicate with it?

Pragmatic v. Epistemic Activityg p y

START GOAL

???

B

??

A??

STARTA

[Ki h M li ]

15

[Kirsh, Maglio 1994][Klemmer, Hartmann, Takayama 2006]

E i D lEric Drexler

“In engineering, enlightened trial and error, not the planning of flawless intellects, has ot t e p a g o aw ess te ects, asbrought most advances; this is why engineers build prototypes”engineers build prototypes

IDEO CameraIDEO Camera

P t t i i “R fl tiPrototyping is a “Reflective conversation with materials”conversation with materials

Building and discussing yields design ideas

Prototyping in iRoomyp g

Source: CS247 Project

Wh t i f ti d t?What information do we get?

The reflective conversationDoes the prototype do what we want?p ypWhat questions do users have?What should we change before implementing?What should we change before implementing?

Very important to decide what you wantbefore prototypingp yp g

VisibilityVisibility

St b diStoryboarding

VersatileQuickPowerful

Source: McCloud, Scott. Understanding Comics.

What Do Prototypes Prototype?t t typ t typ

F t tForm prototype

Looks goodBut doesn’t really workBut doesn t really work

Nintendo control pad mockupProject inkwell “Spark”

Source: Buxton, Bill. Sketching User Experiences. Morgan Kaufman, 2007. Nintendo via 37signals.com blog, IDEO.

p pProject inkwell Spark computing device concept

F ti t tFunction prototype

Looks like wireframes (no fonts, colors)Interactive functionality (spectrum up toInteractive functionality (spectrum up to working all the way)

Source: Buxton, Bill. Sketching User Experiences. Morgan Kaufman, 2007. http://www.ammodel.com/PrototypeDesign.aspx

Functional keyboard prototype Functional water faucet

E i t tExperience prototype

Video prototypingRole playingRole playing

Source: Buchenau, Marion and Suri, Jane Fulton. “Experience Prototyping.” DIS, 2000.

M k lti l t t t tMake multiple prototypes to get most valuemost value

Source: Tohidi, Maryam and Bill Buxton, Ronald Baecker, and Abigail Sellen, “Getting the Right Design and the Design Right: Testing Many is Better than One.” CHI 2006.

Prototypes should be disposablep

Th i ht f i t di tThe rights of an intermediate representationrepresentation

Should not be required toShould not be required tobe completepShould not need to be updatedpShould be easy to change

D i t t i tiDuring prototyping, options narrow as fidelity increasesnarrow as fidelity increases

ElaborationReduction (decision-makingfrom broad to specific)

(opportunity-seeking:From singular to multiples)

Starting point

Focalpoint

Design Process

Source: Buxton, Bill. Sketching User Experiences. Morgan Kaufman, 2007.

P t t i t h iPrototyping techniques

PaperPowerpointPowerpointVideo

P t t iPaper prototyping

Source: Rettig, Marc. “Prototyping for Tiny Fingers.” Communications of the ACM archive Volume 37 , Issue 4 (April 1994)

P i t P t t iPowerpoint Prototyping

Powerpoint Prototype Website

Source: Kelly, Maureen. “Interactive Prototypes with PowerPoint”. http://www.boxesandarrows.com/view/interactive

P i t P t t iPowerpoint Prototyping

Source: Brunette, Kynthia, et. al. “Meeteetse”. Indiana University. Student Contest Entry. CHI 2005.

Vid P t t iVideo Prototyping

Starfire Video Prototype: "Julie was looking Technology Featured in the SceneStarfire Video Prototype: Julie was looking forward to a good day until Michael O'Connor tried to deep-six her sports car project. Now, only her team, scattered around the world, can save her..."

Technology Featured in the SceneMeeting room with telepresence for remote members Large screen for multimedia presentations Laptop computer with chorded input Wireless connectivity between laptop, library server, and the big screeBidirectional hypertext links between database items

Source: Tognazzini, Bruce. “The ‘Starfire’ Video Prototype Project: A Case History”. CHI 2004.

Bidirectional hypertext links between database items

What (and when) does formality get y gyou somewhere?you somewhere?

Lead User Innovation

Lead User Innovation

Source: von Hippel, Eric (1986) "Lead Users: A Source of Novel Product Concepts," Management Science 32, no. 7 (July):791-805.

Th L T il f I t tiThe Long Tail of Interactionod

ees

of

Co

Situational Applications

of L

ine

Applications

#

45

46

Toy Inventorsy

Gl TGlue Types

vsvs.Dovetail jointHot glue

d.tools

E t th f t lEye to the future: exemplar

Exemplar: Authoring Sensor Based Interactions

Source: Hartman, Bjorn, et. al. Exemplar. Stanford University, 2007

A tAnnouncements

cs547 tomorrow: Paul Dourish, UC IrvineThe Accountability of Presence: Location e ccou tab ty o ese ce: ocat oTracking beyond PrivacyTh l ti hi b t klThe relationship between weekly assignments and the final project

F th R diFurther Reading

Bill Buxton, Sketching User ExperiencesBill Moggridge Designing InteractionsBill Moggridge, Designing InteractionsCarolyn Snyder, Paper PrototypingMichael Schrage, Serious PlayHoude and Hill What do PrototypesHoude and Hill, What do Prototypes Prototype?