prototypes, prototypes, prototypes

Shane MorrisAutomatic Studio

Prototypes, Prototypes and 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

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

ixd101.com

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

Frank Lloyd Wright

Mistakes will happen

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

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

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

Design with models

101 Things I Learned in Architecture School, Matthew Frederick

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

UX prototypes started as static mockups

Static pagesPaper PrototypesWireframes

Allowed forCollaborative designRapid explorationUsability testing

Jensen Harris, Microsoft

…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

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

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

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

The return of prototyping

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

Prototypes I have known…

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

Why prototype?

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

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

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

Validate the Concept

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

Try Out Ideas

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

Try Out Ideas

Try Out Ideas

27

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

Identify issues

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

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

Sell the vision

Sell the vision

► StoryboardMap the intended experience to early screen concepts

Sell the vision

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

Sell the vision

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

Bring the team together

► Wireframes– map out the allocation

of content and controls to the pages/screens…

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

Bring the Team Together

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

Good 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

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

Have an appropriate level of investment

ixd101.com

Are changeable and can evolve

Accessible

Accessible

Interaction Des ign T eam (3)

R equirements T eams

Architecture and technical T eams

WhiteboardDes ign Wall

High traffic pathway

Communicate the right level of detail

ixd101.com

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

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

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

Research for inspiration, not validation

Inspiration

Build to think

Ideation

Visualisation to sell, and control

Implementation

Design Thinking

► Tim Brown, IDEO

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

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

Thank Youshane@automaticstudio.com.au@shanemo

Follow us on @gospiffy use #MSCampfire hash tag