Morris prototyping - oredev - share
53
SHANE MORRIS [email protected] u @shanemo PROTOTYPES PROTOTYPES AND PROTOTYPES AND THE DIFFERENCES BETWEEN THEM
-
Upload
shane-morris -
Category
Design
-
view
113 -
download
1
description
Prototyping talk from Oredev 2012
Transcript of Morris prototyping - oredev - share
SHANE MORRIS [email protected] @shanemo
PROTOTYPES PROTOTYPES
AND PROTOTYPES
AND THE DIFFERENCES BETWEEN THEM
A BIT ABOUT ME
A BIT ABOUT ME
ixd10
1.c
om
101 Things I (Should Have) Learned in Interaction Design School
BENEFITSANIMATIC
TRY 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 CONCEPTIn concrete terms
“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
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 early Troubleshoot risky areas in advance Get everyone headed in the same direction Understand how new features relate to existing features Reassure stakeholders about what they are getting for their money Clearly communicate what needs to be built Clearly communicate what it will be like to use…
PR
OTO
TYPE
WHAT WE NEED TO DO IS…
Identify potential problems early Troubleshoot risky areas in advance Get everyone headed in the same direction Understand how new features relate to existing features Reassure stakeholders about what they are getting for their money Clearly communicate what needs to be built Clearly communicate what it will be like to use…
PR
OTO
TYPE
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
ALLOWED FOR Collaborative design Rapid exploration Usability testing
Jensen Harris, Microsoft
STATIC PAGESPAPER PROTOTYPESWIREFRAMES
THEN ALONG CAME RICH INTERNET APPLICATIONS
FOCUS ON TRANSITIONSLESS NAVIGATING TO FEATURES AND CONTENTMORE SUMMONING FEATURES AND CONTENT
MORE DESIGN EFFORT AND EXPLORATION
Jensen Harris, Microsoft
ARCHITECTURAL PLANS EXPRESS THE FUNCTION, BUT NOT THE EXPERIENCE
Gehry Partners, LLPwww.abc.net.au/rn/bydesign/galleries/2010/3086582/image3.htm
Rebeca Coterarebes.info/resources/dch+composite+1.jpg
DYNAMIC UI’S – THE CHALLENGE
HOW TO SUPPORT THE CONCEPTUAL DESIGN PHASE?RAPID EXPLORATIONMORE EXPERIENTIAL not just optimal arrangement of
features and selection of widgets.
HOW TO DOCUMENT THE BEHAVIOUR OF RICH INTERACTIONS?EASY TO DOCUMENT THE STATESHARDER TO DOCUMENT THE TRANSITIONS Expanding/Collapsing Opening/Closing Appearing/Disappearing Animating
DOCUMENTING TRANSITIONSTechnique 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 PROBLEMSREQUIRED 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
IN THE OLDEN DAYS
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?
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
VALIDATE THE CONCEPTPROSNO TECHNICAL SKILL REQUIREDNOT INTIMIDATINGCLEARLY UNFINISHEDNECESSARILY HIGH-LEVELLOW INVESTMENT
CONSBECOME UNWIELDY WITH LOTS OF CONTENTAWKWARD TO SHOW SUBTLE INTERACTIONSNOT AS PORTABLE
PAPER PROTOTYPING
VALIDATE THE CONCEPTWHY PROTOTYPE?
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
TRY OUT IDEAS
SKETCHESEXPLORE MULTIPLE OPTIONS QUICKLYDON’T OBSESS ABOUT FIT AND FINISHLOW EMOTIONAL INVESTMENT
WHY PROTOTYPE?
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
IDENTIFY ISSUES
INTERACTIVE PROTOTYPESALLOW US TO ASSESS THE FLOW AND FEEL OF THE APPLICATION, LONG BEFORE PRODUCTION CODE
WHY PROTOTYPE?
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
SELL THE VISION
STORYBOARDMAP THE INTENDED EXPERIENCE TO EARLY SCREEN CONCEPTS
WHY PROTOTYPE?
SELL THE VISIONWHY PROTOTYPE?
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
BRING THE TEAM TOGETHERWHY PROTOTYPE?
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
COMMUNICATE THE RIGHT LEVEL OF DETAIL
ARE CHANGEABLE AND CAN EVOLVE
ARE ACCESSIBLE
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 SHOESGOOD PROTOTYPES…
HAVE AN APPROPRIATE LEVEL OF INVESTMENTGOOD PROTOTYPES…
ixd101.com
COMMUNICATE THE RIGHT LEVEL OF DETAILGOOD PROTOTYPES…
ixd101.com
ARE ACCESSIBLEGOOD PROTOTYPES…
ARE ACCESSIBLEGOOD PROTOTYPES…
Interaction Des ign T eam (3)
R equirements T eams
Architecture and technical T eams
WhiteboardDes ign Wall
High traffic pathway
ATTRIBUTES OF GOOD PROTOTYPES…
PUT THE READER IN THE USER’S SHOES
HAVE AN APPROPRIATE LEVEL OF INVESTMENT
COMMUNICATE THE RIGHT LEVEL OF DETAIL
ARE CHANGEABLE AND CAN EVOLVE
ARE ACCESSIBLE
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
BENEFITSWHY PROTOTYPE?
TRY 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 CONCEPTIn concrete terms
• Research for inspiration, not validation
Inspiration
• Build to thinkIdeatio
n
• Visualisation to sell, and control
Implementatio
n
DESIGN THINKINGTIM BROWN, IDEO
THE ONLY THING MORE EXPENSIVE THAN WRITING SOFTWARE IS WRITING BAD SOFTWARE
ALAN COOPER
www.uxquotes.com/author/alan-cooper/prototype-before-you-code/
