prototypes, prototypes, prototypes
DESCRIPTION
Prototyping talk from Microsoft Campfire, Singapore April 2012.TRANSCRIPT
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
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 [email protected]@shanemo
Follow us on @gospiffy use #MSCampfire hash tag