Prototyping Overview
Philip van Allen, Media Design Practices,Art Center College of Design
Prototyping Overview Why Prototype?
Thinking through making
Divergent, not convergent thinking
Problem setting, not solving
test fitting a range of approaches, ideas, strategies, assumptions to
invent an interesting question/problem from a context
Discovering what you are interested in for this context
Why Prototype?
Prototyping Overview Why Prototype?
Take risks. Fail early and often.
“If you don't fail at least 90 percent of the time, you're not aiming
high enough.” -Alan Kay
You have to experience interaction & behavior
Instantiate ideas in the real world to see if they stick
Get bad/obvious ideas out of the way before you invest time/
money/commitment in production
Why Prototype?
Prototyping Overview Why Prototype?
Explore a design space
Multiple iterations/variations
One or more of, but not all of:
Interaction
Form
Technology
Concepts
Content
A Form of Sketching
Prototyping Overview Why Prototype?
Yourself
Client
Funder
Demo a concept to
Prototyping Overview Why Prototype?
Test concepts/assumptions/ideas
Thinking & designing through making
Identify and Prioritize most important features
Iterate quickly
Develop the design
Prototyping Overview Why Prototype?
Different from interviewing
Get more objective feedback - designer is biased!
How do people actually perceive it and use it?
Does it address needs?
Identify opportunities & problems
Participatory design
User Testing
Prototyping Overview Why Prototype?
Prototypes help designers and engineers balance
between rationality and intuition.A prototype can
help you take a decision that involves ergonomics,
shape, function, production… at the same time.A
decision that can’t be described in parameters.A
decision that can’t be simulated by a computer…
http://www.slideshare.net/IndustrialDesignCenter/20110829-intro-prototypingmethodology slide #10
Howest School Perspective
Prototyping Overview Kinds of Prototypes
A wide range of approaches
Use what works for your goals
Low Fidelity <==> High Fidelity
Fast = low fidelity
Slow = high fidelity
Kinds of Prototypes
Prototyping Overview Kinds of Prototypes
Drawing, Foam Core, Diagram, Photoshop, etc.
Quick
Cheap
Sketchy
Many iterations/versions
“Paper”
Prototyping Overview Kinds of Prototypes
Quick or Complicated
Sketchy or polished
Tells a story
Live action video + After Effects
Shows people, context, scenario, function, form
Demo impossible/costly technologies or situations
Video
Sketch video - Christiane Holzheid & Julia Tsao - http://vimeo.com/3571717
Polished video - Sebastian Bettencourt - http://vimeo.com/12783337
Prototyping Overview Kinds of Prototypes
Doesn’t “work” but shows form
Rough or refined
How will object/system live in the world
Allows handling the thing directly
Story of Palm Pilot 

http://pretotyping.blogspot.com/2010/08/one-of-my-favorite-pretotype-stories.html
Form Model
Prototyping Overview Kinds of Prototypes
Refined - ACCD Trans - Leon Paz
Rough - Palm Pilot - Jeff Hawkins
Prototyping Overview Kinds of Prototypes
Schematic of information architecture
Shows relationships and scope of content/navigation
Non-visual design
http://speckyboy.com/2011/05/29/20-effective-examples-
of-web-and-mobile-wireframe-sketches/
Wireframe
Prototyping Overview Kinds of Prototypes
Simple demo of a use scenario
Schematic of interaction
Shows navigation
Defines scope
Can be “wizard of oz-ed” where it seems to do more than it
really does
Click-through demo
Prototyping Overview Kinds of Prototypes
Interactive, not scripted
May be limited in features
Shows how actual use plays out
Form may not be accurate
Can be combined with Form model and/or video to tell full
story
Working prototype
Prototyping Overview Kinds of Prototypes
Douglas Engelbart - inventor of the first mouse - prototype built in 1963
Prototyping Overview Prototyping Tools
Can be used in combination
Use whatever gets the job done
Don’t be religious about them
New ones coming out all the time - it’s part of your job to
stay up-to-date on them
Prototyping Tools
Prototyping Overview Prototyping Tools
Paper/Photoshop/Illustrator
Keynote/Powerpoint
Pop
Invision
Pixate
HTML/CSS/JavaScript
Unity (for 3D environments)
Screen Design
Prototyping Overview Prototyping Tools
Foam models, foam-core
Hacking toys & other electronics
NETLab Toolkit
Arduino/Intel Edison/Raspberry PI
3D Printing, parametric fabrication
Tangible Interaction
Prototyping Overview
Prototyping is a humble craft
Thank You

Prototyping for Interaction Design

  • 1.
    Prototyping Overview Philip vanAllen, Media Design Practices,Art Center College of Design
  • 2.
    Prototyping Overview WhyPrototype? Thinking through making Divergent, not convergent thinking Problem setting, not solving test fitting a range of approaches, ideas, strategies, assumptions to invent an interesting question/problem from a context Discovering what you are interested in for this context Why Prototype?
  • 3.
    Prototyping Overview WhyPrototype? Take risks. Fail early and often. “If you don't fail at least 90 percent of the time, you're not aiming high enough.” -Alan Kay You have to experience interaction & behavior Instantiate ideas in the real world to see if they stick Get bad/obvious ideas out of the way before you invest time/ money/commitment in production Why Prototype?
  • 4.
    Prototyping Overview WhyPrototype? Explore a design space Multiple iterations/variations One or more of, but not all of: Interaction Form Technology Concepts Content A Form of Sketching
  • 5.
    Prototyping Overview WhyPrototype? Yourself Client Funder Demo a concept to
  • 6.
    Prototyping Overview WhyPrototype? Test concepts/assumptions/ideas Thinking & designing through making Identify and Prioritize most important features Iterate quickly Develop the design
  • 7.
    Prototyping Overview WhyPrototype? Different from interviewing Get more objective feedback - designer is biased! How do people actually perceive it and use it? Does it address needs? Identify opportunities & problems Participatory design User Testing
  • 8.
    Prototyping Overview WhyPrototype? Prototypes help designers and engineers balance between rationality and intuition.A prototype can help you take a decision that involves ergonomics, shape, function, production… at the same time.A decision that can’t be described in parameters.A decision that can’t be simulated by a computer… http://www.slideshare.net/IndustrialDesignCenter/20110829-intro-prototypingmethodology slide #10 Howest School Perspective
  • 9.
    Prototyping Overview Kindsof Prototypes A wide range of approaches Use what works for your goals Low Fidelity <==> High Fidelity Fast = low fidelity Slow = high fidelity Kinds of Prototypes
  • 10.
    Prototyping Overview Kindsof Prototypes Drawing, Foam Core, Diagram, Photoshop, etc. Quick Cheap Sketchy Many iterations/versions “Paper”
  • 11.
    Prototyping Overview Kindsof Prototypes Quick or Complicated Sketchy or polished Tells a story Live action video + After Effects Shows people, context, scenario, function, form Demo impossible/costly technologies or situations Video
  • 12.
    Sketch video -Christiane Holzheid & Julia Tsao - http://vimeo.com/3571717
  • 13.
    Polished video -Sebastian Bettencourt - http://vimeo.com/12783337
  • 14.
    Prototyping Overview Kindsof Prototypes Doesn’t “work” but shows form Rough or refined How will object/system live in the world Allows handling the thing directly Story of Palm Pilot 
 http://pretotyping.blogspot.com/2010/08/one-of-my-favorite-pretotype-stories.html Form Model
  • 15.
    Prototyping Overview Kindsof Prototypes Refined - ACCD Trans - Leon Paz Rough - Palm Pilot - Jeff Hawkins
  • 16.
    Prototyping Overview Kindsof Prototypes Schematic of information architecture Shows relationships and scope of content/navigation Non-visual design http://speckyboy.com/2011/05/29/20-effective-examples- of-web-and-mobile-wireframe-sketches/ Wireframe
  • 19.
    Prototyping Overview Kindsof Prototypes Simple demo of a use scenario Schematic of interaction Shows navigation Defines scope Can be “wizard of oz-ed” where it seems to do more than it really does Click-through demo
  • 20.
    Prototyping Overview Kindsof Prototypes Interactive, not scripted May be limited in features Shows how actual use plays out Form may not be accurate Can be combined with Form model and/or video to tell full story Working prototype
  • 21.
    Prototyping Overview Kindsof Prototypes Douglas Engelbart - inventor of the first mouse - prototype built in 1963
  • 22.
    Prototyping Overview PrototypingTools Can be used in combination Use whatever gets the job done Don’t be religious about them New ones coming out all the time - it’s part of your job to stay up-to-date on them Prototyping Tools
  • 23.
    Prototyping Overview PrototypingTools Paper/Photoshop/Illustrator Keynote/Powerpoint Pop Invision Pixate HTML/CSS/JavaScript Unity (for 3D environments) Screen Design
  • 24.
    Prototyping Overview PrototypingTools Foam models, foam-core Hacking toys & other electronics NETLab Toolkit Arduino/Intel Edison/Raspberry PI 3D Printing, parametric fabrication Tangible Interaction
  • 25.
    Prototyping Overview Prototyping isa humble craft Thank You