morris prototyping - oredev - share
DESCRIPTION
Prototyping talk from Oredev 2012TRANSCRIPT
![Page 1: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/1.jpg)
SHANE MORRIS [email protected] @shanemo
PROTOTYPES PROTOTYPES
AND PROTOTYPES
AND THE DIFFERENCES BETWEEN THEM
![Page 2: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/2.jpg)
A BIT ABOUT ME
![Page 3: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/3.jpg)
A BIT ABOUT ME
ixd10
1.c
om
101 Things I (Should Have) Learned in Interaction Design School
![Page 5: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/5.jpg)
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
![Page 6: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/6.jpg)
“AN ARCHITECT'S MOST USEFUL TOOLS ARE AN ERASER AT THE DRAFTING BOARD, AND A WRECKING BAR AT THE SITE.”
FRANK LLOYD WRIGHT
![Page 7: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/7.jpg)
MISTAKES WILL HAPPEN
all-funny.info/architecture-faill
![Page 8: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/8.jpg)
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 9: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/9.jpg)
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
![Page 10: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/10.jpg)
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
![Page 11: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/11.jpg)
DESIGN WITH MODELS
101 Things I Learned in Architecture School, Matthew Frederick
![Page 12: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/12.jpg)
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 13: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/13.jpg)
UX PROTOTYPES STARTED AS STATIC MOCKUPS
ALLOWED FOR Collaborative design Rapid exploration Usability testing
Jensen Harris, Microsoft
STATIC PAGESPAPER PROTOTYPESWIREFRAMES
![Page 14: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/14.jpg)
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
![Page 15: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/15.jpg)
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
![Page 16: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/16.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
![Page 17: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/17.jpg)
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
![Page 18: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/18.jpg)
THE RETURN OF PROTOTYPING
![Page 19: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/19.jpg)
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
![Page 20: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/20.jpg)
PROTOTYPES I HAVE KNOWN…
![Page 21: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/21.jpg)
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 22: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/22.jpg)
WHY PROTOTYPE?
![Page 23: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/23.jpg)
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
![Page 24: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/24.jpg)
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
![Page 25: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/25.jpg)
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
![Page 26: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/26.jpg)
VALIDATE THE CONCEPTWHY PROTOTYPE?
![Page 27: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/27.jpg)
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
![Page 28: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/28.jpg)
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
![Page 29: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/29.jpg)
TRY OUT IDEAS
SKETCHESEXPLORE MULTIPLE OPTIONS QUICKLYDON’T OBSESS ABOUT FIT AND FINISHLOW EMOTIONAL INVESTMENT
WHY PROTOTYPE?
![Page 30: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/30.jpg)
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
![Page 31: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/31.jpg)
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
![Page 32: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/32.jpg)
IDENTIFY ISSUES
INTERACTIVE PROTOTYPESALLOW US TO ASSESS THE FLOW AND FEEL OF THE APPLICATION, LONG BEFORE PRODUCTION CODE
WHY PROTOTYPE?
![Page 33: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/33.jpg)
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
![Page 34: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/34.jpg)
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
![Page 35: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/35.jpg)
SELL THE VISION
STORYBOARDMAP THE INTENDED EXPERIENCE TO EARLY SCREEN CONCEPTS
WHY PROTOTYPE?
![Page 36: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/36.jpg)
SELL THE VISIONWHY PROTOTYPE?
![Page 37: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/37.jpg)
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
![Page 38: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/38.jpg)
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
![Page 39: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/39.jpg)
BRING THE TEAM TOGETHERWHY PROTOTYPE?
![Page 40: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/40.jpg)
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 41: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/41.jpg)
GOOD PROTOTYPES
![Page 42: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/42.jpg)
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
![Page 43: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/43.jpg)
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…
![Page 44: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/44.jpg)
HAVE AN APPROPRIATE LEVEL OF INVESTMENTGOOD PROTOTYPES…
ixd101.com
![Page 45: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/45.jpg)
COMMUNICATE THE RIGHT LEVEL OF DETAILGOOD PROTOTYPES…
ixd101.com
![Page 46: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/46.jpg)
ARE ACCESSIBLEGOOD PROTOTYPES…
![Page 47: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/47.jpg)
ARE ACCESSIBLEGOOD PROTOTYPES…
Interaction Des ign T eam (3)
R equirements T eams
Architecture and technical T eams
WhiteboardDes ign Wall
High traffic pathway
![Page 48: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/48.jpg)
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
![Page 49: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/49.jpg)
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: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/50.jpg)
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
![Page 51: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/51.jpg)
• Research for inspiration, not validation
Inspiration
• Build to thinkIdeatio
n
• Visualisation to sell, and control
Implementatio
n
DESIGN THINKINGTIM BROWN, IDEO
![Page 52: Morris prototyping - oredev - share](https://reader034.vdocument.in/reader034/viewer/2022052522/54c7fbd04a79594f2e8b4642/html5/thumbnails/52.jpg)
THE ONLY THING MORE EXPENSIVE THAN WRITING SOFTWARE IS WRITING BAD SOFTWARE
ALAN COOPER
www.uxquotes.com/author/alan-cooper/prototype-before-you-code/