#UXPA2016 www.uxpa2016.org Prototyping: 4 Strategic Factors for Designers Lyle Kantrovich Vivid Mojo – Minneapolis, Minnesota @Lkantrov
#UXPA2016
www.uxpa2016.org
Prototyping: 4 Strategic Factors
for Designers Lyle Kantrovich
Vivid Mojo – Minneapolis, Minnesota
@Lkantrov
#UXPA2016
www.uxpa2016.org
Hand Raising
• Regularly create prototypes
• Regularly test / do research with prototypes
• Regularly review / provide feedback on prototypes
• Have a standard prototyping tool
#UXPA2016
www.uxpa2016.org
The Road Ahead
• Think differently about prototyping
• Reconsider how you use prototypes
• Improve your organization’s prototyping maturity
#UXPA2016
www.uxpa2016.org
What is a Prototype?
• An early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. – Wikipedia (2016)
• A first or early example that is used as a model for what comes later – Merriam Webster
• A first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied. – Oxford Dictionary
#UXPA2016
www.uxpa2016.org
What is a Model?
• A three-dimensional representation of a person or thing or of a proposed structure, typically on a smaller scale than the original. – Oxford Dictionary
• A usually miniature representation of something; a pattern of something to be made; or a set of ideas and numbers that describe the past, present, or future state of something (such as an economy or a business) – Merriam Webster
#UXPA2016
www.uxpa2016.org
What is a Simulation?
• The production of a computer model of something, especially for the purpose of study – Oxford Dictionary
• Something that is made to look, feel, or behave like something else especially so that it can be studied or used to train people – Merriam Webster
#UXPA2016
www.uxpa2016.org
My Imperfect Definition:
A representation of a design idea to help communicate, explore, test or study future possibilities.
#UXPA2016
www.uxpa2016.org
Converging Concepts
Related Terms: • Mockup
• Wireframe
• Beta
• Demo
Model
Simulation
Prototype
#UXPA2016
www.uxpa2016.org
Serious Play – by Michael Schrage
Many case studies on prototyping, simulations, modeling…from clay to foam to Excel
Discusses prototyping cultures and relationship to innovation.
HBS Press, 1999
#UXPA2016
www.uxpa2016.org
Prototypes Create Value Through Conversations & Interactions. • Users interacting with the model
• Clients discussing the prototype
• Stakeholders discussing tradeoffs / needs / use cases
• Team members discussing materials, build-ability, maintainability, etc.
Source: Flavio Nazario
#UXPA2016
www.uxpa2016.org
Types of Prototypes: Physical
Apple Macintosh LC Prototype (1989) – Foam
Philips AirFloss Prototype
Source: Philips Communications Source: jimabeles
The question isn’t what kind of
prototypes should we build, but…
What kind of conversations &
interactions do we want to inspire?
#UXPA2016
www.uxpa2016.org
Prototype Creators
• Designers create prototypes
• Sometimes a previous or competing product serves as a prototype
• Participatory Design involves users directly in creating designs / prototypes
#UXPA2016
www.uxpa2016.org
The UCD Process Plan the Design
Process
Understand & Specify Context of Use
Specify User Requirements
Produce Design Solutions to Meet
User Requirements
Evaluate Designs Against Requirements
Designed Solution Meets User Requirements
Iterate where appropriate
ISO 9241-210
#UXPA2016
www.uxpa2016.org
Produce Designs
UCD – Prototype Centric Version
Plan the Design Process
Understand & Specify Context of Use
Specify User Requirements
Evaluate Designs
Design Meets User Requirements
Iterate where appropriate
YOU CAN’T INVENT THE FUTURE
WITHOUT FIRST PROTOTYPING IT.
- Michael Schrage
True innovators don’t create ideas… they create models & prototypes.
PROTOTYPING IS INNOVATIVE BEHAVIOR
#UXPA2016
www.uxpa2016.org
4 Prototyping Factors to Consider
Works Like
Looks Like
Reads Like
Depth & Breadth
• Functionality • Performance • Level of Interaction • Input & Output Methods
• Colors • Fonts • Branding
• White space • Visual “polish” • Graphics / Photos
• Use of placeholders • Lorem Ipsum • Real content
• Scope of features • Scenarios supported
#UXPA2016
www.uxpa2016.org
The “F-Word”
• “Fidelity” is overused, overloaded and overly simple. It is steeped in assumptions
• Works Like = Functional fidelity
• Looks Like = Visual fidelity
• Reads Like = Content fidelity
• Depth and Breadth = Overall Completeness
“What organizations choose NOT to model is
as revealing as what they do.”
- Michael Schrage
A CAUTIONARY WORD
#UXPA2016
www.uxpa2016.org
Simplification
• Prototypes = deliberate simplification (or oversimplification)
• What should be simplified and why?
• Simplification and Complexity both represent risk
Source: Jegi (Flickr)
#UXPA2016
www.uxpa2016.org
Paper Prototype
• Works like = Low
• Looks like = Low
• Reads like = Low
• Depth & Breadth = a few screens
Source: Rosenfeld Media
#UXPA2016
www.uxpa2016.org
757 Cockpit Flight Simulator
• Works like = High
• Looks like = High
• Reads like = High
• Depth & Breadth = Cockpit Only
Source: Kent Wien (Flickr)
#UXPA2016
www.uxpa2016.org
Blueprint
• Works like = Low
• Looks like = Low
• Reads like = Low
• Depth & Breadth = Summary
Source: David Power (Flickr)
#UXPA2016
www.uxpa2016.org
Wood Prototype – Video Camera
• Works like = Low
• Looks like = Medium
• Reads like = Low
• Depth & Breadth = Exterior Only
“Form study” used for size, shape, weight, ergonomics
Source: billibala (Flickr)
#UXPA2016
www.uxpa2016.org
3D Architecture Model – Virtual
• Works like = Low
• Looks like = High
• Reads like = Medium
• Depth & Breadth = Interior & Exterior
Source: Alvin Oei (Flickr)
#UXPA2016
www.uxpa2016.org
Axure Prototype
• Works like = Med
• Looks like = Med
• Reads like = High
• Depth & Breadth = Home + Products
#UXPA2016
www.uxpa2016.org
Interactive Prototype – Wikipedia Android App “Link Preview”
• Works like = High
• Looks like = High
• Reads like = High
• Depth & Breadth = Link Preview feature only
Source: Wikimedia
#UXPA2016
www.uxpa2016.org
Medium
• Clay
• Whiteboard Sketch
• Paper
• Foam Core
• Wood
• Metal
• Cardboard
Virtual:
• PhotoShop
• Axure
• Excel
• Visio / OmniGraffle
• Web
• Desktop or Mobile App
THE PHYSICAL MATERIAL USED
IN PROTOTYPING IS A
MAJOR STRATEGIC INNOVATION VARIABLE.
- Michael Schrage
Choice of medium impacts how prototypes
are managed and how teams collaborate.
#UXPA2016
www.uxpa2016.org
1956 Packard – Clay Prototype
Clay auto prototypes truncated debate, rather than inviting discussion.
Source: John Lloyd (Flickr)
#UXPA2016
www.uxpa2016.org
Medium Impacts Design… Early HP calculators were prototyped in cardboard, resulting in more “squared off” designs.
They later switched to foam & resulting designs were more soft and rounded
HP-35 (1972) HP-39G (2000) Source: Wikipedia Source: Kubanczyk (Flickr)
#UXPA2016
www.uxpa2016.org
Ownership
• Who can change it?
• Who gets to see it?
• When?
Source: DeviantArt BlueAngelPower2003
#UXPA2016
www.uxpa2016.org
Prototype Lifetime
Is it throw away?
Will it evolve into the actual product?
Source: Julia Folsom
#UXPA2016
www.uxpa2016.org
Context of (Prototype) Use
• How similar to intended product use?
• Social context?
• Technical context • Mobile app on mobile
• Mobile app in mobile browser
• Mobile in desktop browser
• Mobile over Webex
• Environment – e.g. distractions, lab vs. home
#UXPA2016
www.uxpa2016.org
Refactoring
• How easy will it be to change the prototype?
• Can anyone change it? • Paper = low skill • Code = special skills • Tool = different special skills
• When will we change the level of fidelity? • Functionality • Visual • Content
• When will we stop iterating?
• When do we move from prototype to production (e.g. code)?
#UXPA2016
www.uxpa2016.org
“Built Like”
• Are there material or architectural risks?
• New technology planned?
• Technical constraints?
• Technical challenges?
#UXPA2016
www.uxpa2016.org
Opera Garnier - Architect’s Model
Louis Villeminot - Plaster – 1/50th Scale (1863)
Source: Wikimedia
#UXPA2016
www.uxpa2016.org
Planning for prototypes in the UCD process: • Prototype the 20% that will get 80% of use/value.
• Target the biggest risks & opportunities.
• For testing, prototype scope needs to cover scope of test scenarios
• Level of prototype fidelity shouldn’t exceed the team’s level of thinking (idea maturity). • If too high? Less feedback, unrealistic expectations.
• If too low? Misinterpretation & unmitigated risks.
• There are “devils” in the details (i.e., interaction & content matter)
#UXPA2016
www.uxpa2016.org
A Few Thoughts on Agile
Agile is about getting to a prototype quicker.
• Agile kills documentation…documentation is not a prototype.
• Agile simplifies “requirements” to generate a working limited system more quickly • But it does this often with a certain set of limitations in
terms of risks it adopts.
• “Prototypes” (aka MVP’s) often built with production materials
• Only one variation at a time usually
#UXPA2016
www.uxpa2016.org
Do you need a Prototype?
• Some questions can be answered without a prototype • Tree tests & Card Sorts – Labels & Content Organization
• Will the prototype help answer questions? Is change possible? • If not, why create a prototype?
#UXPA2016
www.uxpa2016.org
Summary
• Adjust your thinking beyond the “F-word” • Works Like
• Looks Like
• Reads Like
• Depth & Breadth
• Don’t prototype on “autopilot”
#UXPA2016
www.uxpa2016.org
Summary (2)
Consider & plan for:
• Roughness
• Simplification
• What doesn’t get prototyped
• Medium
• Lifetime
• Context of prototype use
• Competing variations
• Refactoring process
• Scale
• Conversations & Interactions
#UXPA2016
www.uxpa2016.org
Twitter: @Lkantrov
Email: Lyle . Kantrovich @ gmail . com
LinkedIn: Lyle Kantrovich
thank you