Prototyping for Interaction Design


Published on

A presentation on the reasons and techniques for creating prototypes of interactive projects. For the Media Design Practices MFA at Art Center College of Design.

Updated August 31, 2015

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Prototyping for Interaction Design

  1. 1. Prototyping Overview Philip van Allen, Media Design Practices,Art Center College of Design
  2. 2. 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?
  3. 3. 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?
  4. 4. 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
  5. 5. Prototyping Overview Why Prototype? Yourself Client Funder Demo a concept to
  6. 6. Prototyping Overview Why Prototype? Test concepts/assumptions/ideas Thinking & designing through making Identify and Prioritize most important features Iterate quickly Develop the design
  7. 7. 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
  8. 8. 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… slide #10 Howest School Perspective
  9. 9. 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
  10. 10. Prototyping Overview Kinds of Prototypes Drawing, Foam Core, Diagram, Photoshop, etc. Quick Cheap Sketchy Many iterations/versions “Paper”
  11. 11. 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
  12. 12. Sketch video - Christiane Holzheid & Julia Tsao -
  13. 13. Polished video - Sebastian Bettencourt -
  14. 14. 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 Form Model
  15. 15. Prototyping Overview Kinds of Prototypes Refined - ACCD Trans - Leon Paz Rough - Palm Pilot - Jeff Hawkins
  16. 16. Prototyping Overview Kinds of Prototypes Schematic of information architecture Shows relationships and scope of content/navigation Non-visual design of-web-and-mobile-wireframe-sketches/ Wireframe
  17. 17. 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
  18. 18. 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
  19. 19. Prototyping Overview Kinds of Prototypes Douglas Engelbart - inventor of the first mouse - prototype built in 1963
  20. 20. 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
  21. 21. Prototyping Overview Prototyping Tools Paper/Photoshop/Illustrator Keynote/Powerpoint Pop Invision Pixate HTML/CSS/JavaScript Unity (for 3D environments) Screen Design
  22. 22. 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
  23. 23. Prototyping Overview Prototyping is a humble craft Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.