prototyping for interaction design
DESCRIPTION
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, 2014TRANSCRIPT
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
pretotyping.blogspot.com/
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 Find how it should work in real life
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…
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
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
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 of content/navigation
Non-visual design
Defines scope
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
Interactive PDFs
Invision
Pop
iRise
Screen Design - Simple
Prototyping Overview Prototyping Tools
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)
Screen Design - Rich
Prototyping Overview Prototyping Tools
Foam models, foam-core
Hacking toys & other electronics
NETLab Toolkit/Arduino
Arduino/BeagleBone/Raspberry PI stand-alone
Mechatronics
3D Printing, parametric fabrication
Tangible Interaction
Prototyping Overview
Prototyping is a humble craft
Thank You