Prototyping

Christian Glover Wilson

The Experience is Everything

March 2014

Contents

Approaches

Facilitation

Prototyping

Sketching vs Prototyping

Sketching vs Prototyping

Elaboration of Ideas

Reduction of Ideas

DESIGN PROCESS

Laseau’s Funnel

Sketching vs Prototyping

Prototyping “Incremental iterative refinement”

Design vs Prototyping

Design “Branching Exploration”

vs

Sketching User ExperiencesBill Buxton

Prototyping “Getting the design right”

Design “Getting the right design”

vs

Design vs Prototyping

Prototyping

What is a prototype?

For end-user testing and for communicating functionality to stakeholders

Not fully functioning entity

Designed quickly, tested and iterated

Tells us something

What is rapid prototyping?

Prototyping Create mock-ups, factoring

in prior feedback, user experience standards and

best practices

Reviewing Users experience the

prototype and evaluate whether it meets their

needs and expectations

Refining Integrate feedback by

identifying areas that need to be tuned

iteration

Types of prototype?

Native Code

Paper Prototypes

HTML Prototype

Printouts

Storyboards

Swipeable Gallery

Tapable Prototype

Presentation

TimeRe-use

Cost

So much to choose from….!What is a prototype?

Storyboards

Good for: • Getting started • User flows • Product-market fit

Pros: • Fast • Cheap • Easy • Disposable

Cons: • None

Paper Prototypes

Good for: • Brainstorming UIs • Proofs of Concept • Quick user feedback

Pros: • Fast • Cheap • Easy • Disposable

Cons: • Not detailed • Can’t share remotely • Difficult to update

Printouts (Wireframes or Mockups)

Good for: • UI consistency • Screen flow • User feedback

Pros: • Detailed • Fast to iterate • Cheaper than code

Cons: • Slower than sketching

Swipeable Photo Gallery

Good for: • UI consistency • Screen flow • User feedback

Pros: • Detailed • Faster than code • Cheaper than code • On-device experience

Cons: • Miss UI and flow issues

uncovered with printouts • Inherently linear

Keynote/PowerPoint clickable Prototype

Good for: • UI consistency • Screen flow • User feedback • Simple animations

Pros: • Very quick to create • Shareable • High fidelity • Some transitions and

gestures

Cons: • Very limited control of

logic and flow

Tappable Prototype

Good for: • UI consistency • Screen flow • User feedback • Proof of concept • Living spec

Pros: • Fast • Cheap • Easy • Highly shareable

Cons: • Slower than paper • Limited to capabilities of

tool employed

HTML prototype

Good for: • Troubleshooting

scalability issues • Testing across devices • Complete control

Pros: • See what the user sees • High level of control of

experience

Cons: • Slow • Requires code • Skill set

Native Code Prototype

Good for: • Proof of concept • Troubleshooting • Screen flow • User feedback • Living spec

Pros: • “Real life” user

experience • Allow hardware

interactions

Cons: • Extra step • Not very rapid • Require deployment • Target specific devices

Prototyping Tools

Tool Barrier to Entry Cost Time Devices Transitions Shareability

Code High Free Highest All Yes Remote

Axure Medium $289 Medium All Yes Remote

InVision Medium $15/mo Low All Yes Remote

Flinto Low $8/mo Lower iPhone Yes Remote

POP App Lower Free Lower iPhone Android Yes In person

Photo Album Lower Free Lower iOSAndroid Some In person

Keynote Low Free Low iOSAndroid Some Remote

Paper Lowest Free Lowest All Yes In person

Experiential vs Tactical prototyping

Emphasis on context and human experience

• Bodystorming • Storyboarding • Concept videos

Emphasis on user interface and tasks

• Sketching • Paper prototypes • On device prototypes

So why Prototype?

Involve users in refining the usability

Clearly communicate and demonstrate value to secure funding and support

Can utilize spare resource even for short bursts

Interesting and motivating for participants

Contextual Influences

User’s Considerations

Device Capability

Mobile context

Why prototyping is so important for mobile

Flow is everything (actions span multiple screens)

Animations carry meaning

More expensive to code

Harder to correct issues after deployment

Approaches

Hackathons

Usually public

Typically one day to one week

Focused on a technology, API or context

Often several competing teams

Usually start and end with presentations

Hack days

Usually internal

Typically one day to one week

Scope may come from team or management

Connect disparate parts of the company

Find products and value you didn’t know you had

Workshops

Mix of internal and external team

Typically one or two days

Starts with a clear brief

Co-located team, ideally off-site

Gamified incentives to participate

Outspoken team with required skills or knowledge

Facilitation

What causes failure?

No champion of the process Lack of understanding

Insufficient content Team composition (experience or attitude)

Funding Corporate culture (release control, resource bandwidth)

Ambiguous scope Unmanageable expectations

What leads to success?

Realistic expectations Skilled coordinator

Right tools and equipment A multi-discipline team

Version control Efficient reuse

Documentation

Setting scope - questions to ask

• What needs to be prototyped?

• How extensive is the prototype?

• What fidelity is required?

Some things to test

• Flow through the experience • Human Interface principles • Icons language • Custom gestures or animations • Non-standard UI controls • Consistency of designs • Device support … within reason

Internal PR points

Fantastic Return on Investment

Demonstrates functionality

Utilizes resources efficiently

Builds consensus

In conclusion, consider prototyping to

…improve your design decision-making …communicate an idea …gather user feedback

…explore the new territory …fine-tune an idea …kick off a project

Christian Glover Wilson, VP, Technology & Strategychristian.gloverwilson@tigerspike.com | +1 917 310 5249