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

Prototyping for Interaction Design

on

  • 5,252 views

A brief 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 brief presentation on the reasons and techniques for creating prototypes of interactive projects. For the Media Design Practices MFA at Art Center College of Design.

Statistics

Views

Total Views
5,252
Views on SlideShare
5,022
Embed Views
230

Actions

Likes
4
Downloads
95
Comments
0

5 Embeds 230

http://www.philvanallen.com 200
http://www.edcanvas.com 12
http://www.linkedin.com 11
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 OverviewPhilip van Allen, Media Design Practices, Art Center College of Design
    • Prototyping Overview Why Prototype? Why Prototype?
    • 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 dont fail at least 90 percent of the time, youre 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 http://pretotyping.blogspot.com/
    • Prototyping Overview Why Prototype? 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? Demo a concept to Yourself Client Funder
    • 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 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 PrototypesRefined - 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 PrototypesDouglas 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 Adobe Proto iRise
    • Prototyping Overview Prototyping Tools Screen Design - Rich Adobe Edge Animate or Muse (mobile/web) HTML/CSS/JavaScript (desktop or mobile) Adobe Digital Publishing Suite (tablet) Flash Pro (large screen or mobile) GameSalad (mobile, no coding) Ansca Corona (mobile, programming)
    • Prototyping Overview Prototyping Tools Tangible Interaction Live action video + Aftereffects Foam models, foam-core Hacking toys & other electronics NETLab Toolkit/Arduino Arduino/BeagleBone/Raspberry PI stand-alone