Prototyping

SYS 214 - Principles of HCI

agenda

Coming up on PHCI:

• Tuesday: Dream Deliverable Due
• Friday: Scenarios due, incorporate feedback and learning from seeing other scenarios
• Next Wednesday: Prototype Workshop!
• Nov 10: Prototype 1 Deliverable

Today:

• Intro to Prototyping

prototyping

what are prototypes?

what are prototypes?

Models that allow us to explore one or more features of the design Conceptual Physical Story Experience

definition

Prototype

An original type, form, or instance that serves as a model on which later stages are based or judged.
(American Heritage Dictionary Definition)

Type Form Model Iterative process

[ http://www.interaction-venice.com/projects/iuav09-10Lab1/projects/madeleine/process/ ]

prototype

Representation (Model) Design behavior How it works Design engagement How users will understand How users will explore Design feel Design look

[ http://mondaybeginsonsaturday.com/2012/02/29/paper-prototyping/ ]

experience prototyping

experience prototyping

“

... we define "Experience Prototyping" as a form of prototyping that enables design team members, users, and clients to gain first-hand appreciation of existing or future conditions through active engagement with prototypes.
– Marion Buchenau, Jane Fulton Suri

”

ideo video

Challenge: Design a new shopping cart in a week

Note the process they are using

Important people in the video

• David Kelley
  • Found of IDEO
  • Teaches at Stanford
• Jane Fulton Suri
  • Expert in interaction design
  • Specializes in human insight

Language: "mock up" = "prototype"

ideo video

process?

process?

"Messy Process"

• Gather data (research)
• Generate ideas
  • Wild ideas
  • Build on other's ideas
• Iterative prototyping
  • Try it yourself
  • Take it out to stakeholders for feedback

Why prototype?

Why prototype?

Makes an idea tangible Communicate behavior and intention To development teams To users to get feedback

value of prototyping

Try out ideas quickly Visualize Act it out Feedback with minimal investment Flexible and movable Choose materials that allow for changes in the design FAIL quickly Allow ideas to be experienced

prototyping: dual focus

process

Iterative process From conceptual to more concrete Methods Sketching Role playing Videoing Constructing Storyboarding

process

screen designs

storyboards

possible materials

Clay Cardboard Cereal boxes Pipe cleaners Recycling LEGO Stick notes Paper Markers Anything

[ http://briodaily.com.au/2009/11/the-power-of-paper-prototyping-website-interfaces/ ]

movable prototypes

know why!

Be able to support your design decisions with: Data Principles

[ http://www.adobe.com/devnet/fireworks/articles/prototype_air_apps.html ]

prototypes

next time...

• Next week's Wednesday: Prototype Workshop
• Nov 10: Prototype 1 Deliverable Due