Prototyping for Interaction Design
Upcoming SlideShare
Loading in...5
×
 

Prototyping for Interaction Design

on

  • 5,477 views

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.

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 September 8, 2014

Statistics

Views

Total Views
5,477
Views on SlideShare
5,220
Embed Views
257

Actions

Likes
5
Downloads
102
Comments
0

6 Embeds 257

http://www.philvanallen.com 219
http://www.edcanvas.com 12
http://www.linkedin.com 11
http://word.philvanallen.com 8
http://us-w1.rockmelt.com 4
http://rjacquez.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Prototyping for Interaction Design Prototyping for Interaction Design Presentation Transcript

  • Prototyping Overview Philip van Allen, Media Design Practices, Art Center College of Design
  • Prototyping Overview Why Prototype? 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
  • Prototyping Overview Why Prototype? 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 pretotyping.blogspot.com/
  • Prototyping Overview Why Prototype? A Form of Sketching Explore a design space Multiple iterations/variations One or more of, but not all of: Interaction Form Technology Concepts Content
  • Prototyping Overview Why Prototype? Yourself Client Funder Demo a concept to
  • Prototyping Overview Why Prototype? Develop the design Test concepts/assumptions/ideas Find how it should work in real life Thinking & designing through making Identify and Prioritize most important features Iterate quickly
  • Prototyping Overview Why Prototype? User Testing 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
  • Prototyping Overview Why Prototype? Howest School Perspective 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… A prototype can help you manage the complexity of design. It provides you with constant feedback for all you senses. It’s “real” Ready? Fire! Aim. As designers know, a design process is not necessarily a sequential process. Things can happen in parallel. Gathering information, detailing your “set of demands”, generating concepts can happen in parallel http://www.slideshare.net/IndustrialDesignCenter/20110829-intro-prototypingmethodology slide #10
  • Prototyping Overview Kinds of Prototypes Kinds of Prototypes A wide range of approaches Use what works for your goals Low Fidelity <==> High Fidelity Fast = low fidelity Slow = high fidelity
  • Prototyping Overview Kinds of Prototypes “Paper” Drawing, Foam Core, Diagram, Photoshop, etc. Quick Cheap Sketchy Many iterations/versions
  • Prototyping Overview Kinds of Prototypes Video 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
  • Sketch video - Christiane Holzheid & Julia Tsao - http://vimeo.com/3571717
  • Polished video - Sebastian Bettencourt - http://vimeo.com/12783337
  • Prototyping Overview Kinds of Prototypes Form Model 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
  • Prototyping Overview Kinds of Prototypes Refined - ACCD Trans - Leon Paz Rough - Palm Pilot - Jeff Hawkins
  • Prototyping Overview Kinds of Prototypes Wireframe Schematic of information architecture Shows relationships of content/navigation Non-visual design Defines scope http://speckyboy.com/2011/05/29/20-effective-examples-of- web-and-mobile-wireframe-sketches/
  • Prototyping Overview Kinds of Prototypes Click-through demo 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
  • Prototyping Overview Kinds of Prototypes Working prototype 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
  • Prototyping Overview Kinds of Prototypes Douglas Engelbart - inventor of the first mouse - prototype built in 1963
  • Prototyping Overview Prototyping Tools 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 Overview Prototyping Tools Screen Design - Simple Paper/Photoshop/Illustrator Keynote/Powerpoint Interactive PDFs Invision Pop iRise
  • Prototyping Overview Prototyping Tools Screen Design - Rich Adobe Edge Animate or Muse (mobile/web) HTML/CSS/JavaScript (desktop or mobile) Python (server/backend software) Adobe InDesign Digital Publishing Suite (tablet) Flash Pro (large screen or mobile) GameSalad (mobile, no coding)
  • Prototyping Overview Prototyping Tools Tangible Interaction Foam models, foam-core Hacking toys & other electronics NETLab Toolkit/Arduino Arduino/BeagleBone/Raspberry PI stand-alone Mechatronics 3D Printing, parametric fabrication
  • Prototyping Overview Prototyping is a humble craft Thank You