#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

#UXPA2016

www.uxpa2016.org

The Link Trainer (1929)

Source: pasukaru76

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)

Polish looks for praise.

“ROUGHNESS” INVITES QUESTIONS.

#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

Paper Prototype

Source: Flavio Nazario

#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

Blueprint – Real Scale

Source: vardehaugen_arkitekter

#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

DESIGN LEADERSHIP

IS ABOUT MANAGING

PROTOTYPES &

NURTURING PROTOTYPING

CULTURE

#UXPA2016

www.uxpa2016.org

Other Prototyping Considerations

#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

Iterations vs. Variations

v2a

v1a

v3a

v1b v1c

v2b

Variations

Iterations

#UXPA2016

www.uxpa2016.org

“Built Like”

• Are there material or architectural risks?

• New technology planned?

• Technical constraints?

• Technical challenges?

#UXPA2016

www.uxpa2016.org

Scale

Making it smaller can help simplify.

Source: eBay

#UXPA2016

www.uxpa2016.org

Opera Garnier - Architect’s Model

Louis Villeminot - Plaster – 1/50th Scale (1863)

Source: Wikimedia

#UXPA2016

www.uxpa2016.org

Cutaway Model – Opera Garnier

Source: Richard White (Flickr)

#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