prototypes, prototypes, prototypes

54
Shane Morris Automatic Studio Prototypes, Prototypes and Prototypes

Upload: shane-morris

Post on 28-Jan-2015

297 views

Category:

Design


0 download

DESCRIPTION

Prototyping talk from Microsoft Campfire, Singapore April 2012.

TRANSCRIPT

Page 1: Prototypes, Prototypes, Prototypes

Shane MorrisAutomatic Studio

Prototypes, Prototypes and Prototypes

Page 2: Prototypes, Prototypes, Prototypes

Prototypes

Validate the concept

In concrete termsTry out ideas At low risk

Identify issuesBefore it’s too late

Sell the visionTo stakeholders and investors

Bring the team togetherWith a common vision

Page 3: Prototypes, Prototypes, Prototypes

Who am I?101 Things I (Should Have) Learned in Interaction Design School

ixd101.com

Page 4: Prototypes, Prototypes, Prototypes

“AN ARCHITECT'S MOST USEFUL TOOLS ARE AN ERASER AT THE DRAFTING BOARD, AND A WRECKING BAR AT THE SITE.”

Frank Lloyd Wright

Page 5: Prototypes, Prototypes, Prototypes

Mistakes will happen

http://all-funny.info/architecture-faill

Page 6: Prototypes, Prototypes, Prototypes

Like buildings, applications break at the joins

It’s the journey between pages or screens, not the pages and screens themselves, that can cause the most problems for users.

Plus - problems with the journey are the most expensive problems to fix.

Design the journey between states first, before designing the states. ixd101.com

Page 7: Prototypes, Prototypes, Prototypes

What we need to do is…

Identify potential problems earlyTroubleshoot risky areas in advanceGet everyone headed in the same directionUnderstand how new features relate to existing featuresReassure stakeholders about what they are getting for their moneyClearly communicate what needs to be builtClearly communicate what it will be like to use

PROTOTYPE

Page 8: Prototypes, Prototypes, Prototypes

Design with models

101 Things I Learned in Architecture School, Matthew Frederick

Page 9: Prototypes, Prototypes, Prototypes

In User Experience, Prototyping is a way of life

To find the right user experience, we need to prototype and test

Unlike our engineering friends

Research

Design

Build

Evaluate

Page 10: Prototypes, Prototypes, Prototypes

UX prototypes started as static mockups

Static pagesPaper PrototypesWireframes

Allowed forCollaborative designRapid explorationUsability testing

Jensen Harris, Microsoft

Page 11: Prototypes, Prototypes, Prototypes

…then along came Rich Internet Applications

Focus on transitions

Less navigating to features and content

More summoning features and content

More design effort and exploration

Jensen Harris, Microsoft

Page 12: Prototypes, Prototypes, Prototypes

Architectural plans express the function, but not the experience

Gehry Partners, LLPhttp://www.abc.net.au/rn/bydesign/galleries/2010/3086582/image3.htm

Rebeca Coterahttp://rebes.info/resources/dch+composite+1.jpg

Page 13: Prototypes, Prototypes, Prototypes

Dynamic UI’s – the Challenge

How to support the conceptual design phase?– Rapid exploration– More experiential

• not just optimal arrangement of features and selection of widgets.

How to document the behaviour of rich interactions?

– Easy to document the states– Harder to document the transitions

– Expanding/Collapsing– Opening/Closing– Appearing/Disappearing– Animating

Page 14: Prototypes, Prototypes, Prototypes

Documenting Transitions - OptionsTechnique Pros Cons

Annotations No new tools Not expressive enough

Excruciating Textual Detail No new tools Hard workHard to understandHard to show timing

Storyboards Easy to understand Hard workSeries of single pathsHard to show timing

Screenflow Diagrams No new tools Hard workFragileHard to show timing

Animatics CompellingEasy to understand

New tools and skillsSeries of single paths

Interactive Prototypes Model multiple pathsEasy to understandOther uses

New tools and skills

Page 15: Prototypes, Prototypes, Prototypes

The return of prototyping

Page 16: Prototypes, Prototypes, Prototypes

Prototyping Problems – olden days

► Required specific skills► Too much implementation detail► Wasn’t agile enough► Everything interpreted through

the prototyper’s eyes► Throw-away

► Some of these problems are resolved today

Emotional and financialinvestmentmeansHard to iterate

Page 17: Prototypes, Prototypes, Prototypes

Prototypes I have known…

Page 18: Prototypes, Prototypes, Prototypes

Observer’s guide to prototypes

STATIC INTERACTIVE

LOW FIDELITY Activity Scenarios

Sketches Paper prototypes Wizard of Oz

Storyboards

Wireframes Clickable wireframes Untreated interactive

Comps

HIGH FIDELITY Animatics Treated

interactive

Page 19: Prototypes, Prototypes, Prototypes

Why prototype?

Page 20: Prototypes, Prototypes, Prototypes

Why Prototype?

Validate the concept

In concrete termsTry out ideas At low risk

Identify issuesBefore it’s too late

Sell the visionTo stakeholders and investors

Bring the team togetherWith a common vision

Page 21: Prototypes, Prototypes, Prototypes

Why Prototype?

Validate the concept

In concrete termsTry out ideas At low risk

Identify issuesBefore it’s too late

Sell the visionTo stakeholders and investors

Bring the team togetherWith a common vision

Page 22: Prototypes, Prototypes, Prototypes

Validate the ConceptPaper Prototyping

ProsNo technical skill requiredNot intimidatingClearly unfinishedNecessarily high-levelLow investment

ConsBecome unwieldy with lots of contentAwkward to show subtle interactionsNot as portable

Page 23: Prototypes, Prototypes, Prototypes

Validate the Concept

Page 24: Prototypes, Prototypes, Prototypes

Why Prototype?

Validate the concept

In concrete termsTry out ideas At low risk

Identify issuesBefore it’s too late

Sell the visionTo stakeholders and investors

Bring the team togetherWith a common vision

Page 25: Prototypes, Prototypes, Prototypes

Try Out Ideas

SketchesExplore multiple options quicklyDon’t obsess about fit and finishLow emotional investment

Page 26: Prototypes, Prototypes, Prototypes

Try Out Ideas

Page 27: Prototypes, Prototypes, Prototypes

Try Out Ideas

27

Page 28: Prototypes, Prototypes, Prototypes

Why Prototype?

Validate the concept

In concrete termsTry out ideas At low risk

Identify issuesBefore it’s too late

Sell the visionTo stakeholders and investors

Bring the team togetherWith a common vision

Page 29: Prototypes, Prototypes, Prototypes

Identify issues

Interactive prototypesAllow us to assess the flow and feel of the application, long before production code

Page 30: Prototypes, Prototypes, Prototypes

Why Prototype?

Validate the concept

In concrete termsTry out ideas At low risk

Identify issuesBefore it’s too late

Sell the visionTo stakeholders and investors

Bring the team togetherWith a common vision

Page 31: Prototypes, Prototypes, Prototypes

Sell the vision

Page 32: Prototypes, Prototypes, Prototypes

Sell the vision

► StoryboardMap the intended experience to early screen concepts

Page 33: Prototypes, Prototypes, Prototypes

Sell the vision

http://www.speakflow.com/View.aspx?PresentationID=c0ae95d3-050d-4076-b9d7-8fcf1a0490f0&mode=presentLocally

Page 35: Prototypes, Prototypes, Prototypes

Why Prototype?

Validate the concept

In concrete termsTry out ideas At low risk

Identify issuesBefore it’s too late

Sell the visionTo stakeholders and investors

Bring the team togetherWith a common vision

Page 36: Prototypes, Prototypes, Prototypes

Bring the team together

► Wireframes– map out the allocation

of content and controls to the pages/screens…

Page 37: Prototypes, Prototypes, Prototypes

Bring the team together

Wireframes show:Flow of applicationAllocation of content and functions to pages/screensControls and how they workLabels and titles

Wireframes do not focus onActual contentPrecise sizesVisual designBehaviour and transitions

Page 38: Prototypes, Prototypes, Prototypes

Bring the Team Together

Page 39: Prototypes, Prototypes, Prototypes

Observer’s guide to prototypes

STATIC INTERACTIVE

LOW FIDELITY Activity Scenarios

Sketches Paper prototypes Wizard of Oz

Storyboards

Wireframes Clickable wireframes Untreated interactive

Comps

HIGH FIDELITY Animatics Treated

interactive

Page 40: Prototypes, Prototypes, Prototypes

Good prototypes

Page 41: Prototypes, Prototypes, Prototypes

Attributes of good prototypes…

Put the reader in the user’s shoes

Have an appropriate level of investment

Are changeable and can evolve

Are accessible

Communicate the right level of detail

Page 42: Prototypes, Prototypes, Prototypes

Matt and Kate in Sydney

Matt and Kate have finally made it through immigration at Sydney airport.

They've been planning their South American trip for months - it's finally here!

But first they have to suffer through the usual two hour wait in the airport before

departure. Matt thinks quickly - 'let's get a coffee!' They wander around scanning

the usual airport shops, looking for a Gloria Jean's. There are sunglasses shops,

duty free of course, a newsagent...

Suddenly Kate notices a cool looking store sporting a big blue Lonely Planet logo.

"Oh my God! I didn't know there were Lonely Planet stores! Let's check it out!"

While planning the trip, Kate was a regular visitor to lonelyplanet.com. She has

registered a Lonely Planet profile, and the South America guidebook that they've

been thumbing through for the last 4 months is in her bag. Kate has even stored

her favourite South American destinations on lonelyplanet.com, and has posted a

bunch of questions on Thorntree about the best romantic spots in Buenos Aires.

Matt has been less involved in the planning. He knows the Lonely Planet brand,

but just associates them with guidebooks.

As they walk into the store, they can see not only Lonely Planet products, but also

Crumpler, Teva, Northface and a bunch of other travel related brands. Kate is

immediately attracted to the wall of books, while Matt notices a group of people

leaning over a display screen in the middle of the store.

Matt watches a young boy flick through images of New Zealand on the tabletop

Put the Reader in the User’s Shoes

Page 43: Prototypes, Prototypes, Prototypes

Have an appropriate level of investment

ixd101.com

Page 44: Prototypes, Prototypes, Prototypes

Are changeable and can evolve

Page 45: Prototypes, Prototypes, Prototypes

Accessible

Page 46: Prototypes, Prototypes, Prototypes

Accessible

Interaction Des ign T eam (3)

R equirements T eams

Architecture and technical T eams

WhiteboardDes ign Wall

High traffic pathway

Page 47: Prototypes, Prototypes, Prototypes

Communicate the right level of detail

ixd101.com

Page 48: Prototypes, Prototypes, Prototypes

Attributes of good prototypes…

Put the reader in the user’s shoes

Have an appropriate level of investment

Are changeable and can evolve

Are accessible

Communicate the right level of detail

Page 49: Prototypes, Prototypes, Prototypes

Observer’s guide to prototypes

STATIC INTERACTIVE

LOW FIDELITY Activity Scenarios

Sketches Paper prototypes Wizard of Oz

Storyboards

Wireframes Clickable wireframes Untreated interactive

Comps

HIGH FIDELITY Animatics Treated

interactive

Page 50: Prototypes, Prototypes, Prototypes

Prototypes

Validate the concept

In concrete termsTry out ideas At low risk

Identify issuesBefore it’s too late

Sell the visionTo stakeholders and investors

Bring the team togetherWith a common vision

Page 51: Prototypes, Prototypes, Prototypes

Research for inspiration, not validation

Inspiration

Build to think

Ideation

Visualisation to sell, and control

Implementation

Design Thinking

► Tim Brown, IDEO

Page 52: Prototypes, Prototypes, Prototypes

The only thing more expensive than writing software is writing bad softwareAlan Cooper

http://www.uxquotes.com/author/alan-cooper/prototype-before-you-code/

Page 53: Prototypes, Prototypes, Prototypes

Thank [email protected]@shanemo

Page 54: Prototypes, Prototypes, Prototypes

Follow us on @gospiffy use #MSCampfire hash tag