PROTOTYPESPROTOTYPES       ANDPROTOTYPES  AND THE DIFFERENCES   SHANE MORRIS        BETWEEN THEM    shanemo@automaticstudi...
A BIT ABOUT ME
A BIT ABOUT ME                 101 Things I (Should Have)                 Learned in Interaction Design School            ...
http://www.youtube.com/watch?v=O3f1qmPlWBo
FRANK LLOYD WRIGHT“AN ARCHITECTS MOST USEFUL TOOLSARE AN ERASER AT THE DRAFTINGBOARD, AND A WRECKING BAR AT THESITE.”
MISTAKES WILL HAPPENall-funny.info/architecture-faill
LIKE BUILDINGS, APPLICATIONS BREAK AT THEJOINS                   IT’S THE JOURNEY BETWEEN                   PAGES OR SCREE...
WHAT WE NEED TO DO IS…                                                                        PROTOTYPE   Identify potent...
WHAT WE NEED TO DO IS…                                                                        PROTOTYPE   Identify potent...
DESIGN WITH MODELS       101 Things I Learned in Architecture School, Matthew       Frederick
IN USER EXPERIENCE,PROTOTYPING IS A WAY OF LIFE                                              Research                     ...
UX PROTOTYPES STARTED AS STATICMOCKUPSSTATIC PAGESPAPER PROTOTYPESWIREFRAMESALLOWED FOR Collaborative design Rapid explo...
THEN ALONG CAME RICH INTERNETAPPLICATIONSFOCUS ON TRANSITIONSLESS NAVIGATING TO FEATURESAND CONTENTMORE SUMMONING FEATURES...
ARCHITECTURAL PLANS EXPRESS THE FUNCTION,BUT NOT THE EXPERIENCERebeca Cotera                              Gehry Partners, ...
DYNAMIC UI’S – THE CHALLENGE                                       HOW TO DOCUMENT THEHOW TO SUPPORT THE                  ...
DOCUMENTING TRANSITIONSTechnique                     Pros                   ConsAnnotations                   No new tools...
THE RETURN OFPROTOTYPING
IN THE OLDEN DAYSPROTOTYPING PROBLEMSREQUIRED SPECIFIC SKILLSTOO MUCH IMPLEMENTATIONDETAIL                       Emotional...
PROTOTYPES I HAVEKNOWN…
OBSERVER’S GUIDE TOPROTOTYPES           STATIC                                      INTERACTIVELOW           Activity Scen...
WHY PROTOTYPE?
PAPER PROTOTYPINGVALIDATE THE CONCEPTPROSNO TECHNICAL SKILL REQUIREDNOT INTIMIDATINGCLEARLY UNFINISHEDNECESSARILY HIGH-LEV...
WHY PROTOTYPE?VALIDATE THE CONCEPT
WHY PROTOTYPE?TRY OUT IDEASSKETCHESEXPLORE MULTIPLE OPTIONSQUICKLYDON’T OBSESS ABOUT FIT ANDFINISHLOW EMOTIONAL INVESTMENT
WHY PROTOTYPE?IDENTIFY ISSUESINTERACTIVE PROTOTYPESALLOW US TO ASSESS THE FLOWAND FEEL OF THE APPLICATION,LONG BEFORE PROD...
WHY PROTOTYPE?SELL THE VISIONSTORYBOARDMAP THE INTENDED EXPERIENCETO EARLY SCREEN CONCEPTS
WHY PROTOTYPE?SELL THE VISION
WHY PROTOTYPE?BRING THE TEAM TOGETHER
OBSERVER’S GUIDE TOPROTOTYPES           STATIC                                      INTERACTIVELOW           Activity Scen...
GOOD PROTOTYPES
ATTRIBUTES OF GOODPROTOTYPES…PUT THE READER IN THE USER’S SHOESHAVE AN APPROPRIATE LEVEL OF INVESTMENTCOMMUNICATE THE R...
PUT THE READER IN THE USER’SGOOD PROTOTYPES…SHOES
HAVE AN APPROPRIATE LEVEL OFGOOD PROTOTYPES…INVESTMENT                        ixd101.com
COMMUNICATE THE RIGHT LEVEL OFGOOD PROTOTYPES…DETAIL                   ixd101.com
GOOD PROTOTYPES…ARE ACCESSIBLE
GOOD PROTOTYPES…ARE ACCESSIBLE                                    Design Wall           Whiteboard             High traffi...
ATTRIBUTES OF GOODPROTOTYPES…PUT THE READER IN THE USER’S SHOESHAVE AN APPROPRIATE LEVEL OF INVESTMENTCOMMUNICATE THE R...
OBSERVER’S GUIDE TOPROTOTYPES           STATIC                                      INTERACTIVELOW           Activity Scen...
TIM BROWN, IDEODESIGN THINKING     Inspiration         Ideation       Implementation          Research for                ...
ALAN COOPERTHE ONLY THING MOREEXPENSIVE THAN WRITINGSOFTWARE IS WRITING BADwww.uxquotes.com/author/alan-cooper/prototype-b...
THANK YOU            shane morris            shane@automaticstudio.com.au            @shanemo
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Morris   prototyping - oredev - share
Upcoming SlideShare
Loading in …5
×

Morris prototyping - oredev - share

4,273 views
4,162 views

Published on

Prototyping talk from Oredev 2012

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,273
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Xxx win 8 pic
  • XXX prototypes are exploratory or explanatory
  • Validate the conceptParticularly as a whole – the flow
  • Mistakes will be made
  • The ones on the right are cheaper and easier to fix
  • Inspired by a suggestion from Dave Malouf (http://davemalouf.com/).
  • Exactly applies
  • XXX pic of a RIA
  • Like a site map, or a screen flow
  • Documenting transitions is easier with a traditional web site.There is only one transition, from one full-screen web page to another
  • In the pastMany tools existAxureiRiseBalsamiqHypercardProduction toolsFlashHybridsCatalyst?Expression BlendCheck list by @tuna
  • Or, what do I mean by prototyping
  • To recap
  • XXX one of my paper prototypes
  • Also did Formal TestingRecruit people who matched our personsMade sure we recreated the physical setup of a typical sessionSound booths HardwareTypically a developer role-played the recipientInsight: Can’t hear at certain points of the sessionInvaluable to experience that first hand
  • Scope creep
  • Different prototypes serve those purposes in different ways at different stages of the project.
  • Means you have to give up control, and show your work early.
  • The right level of detail increases as the project progresses.
  • 9minsConclusion: Different levels of fidelity required at different stages of the design processLower fidelity early in the design process. High fidelity later in the design process.Speaking of deeper engagement between design and development – Lets talk about the differences for a moment
  • Prototyping works well with agile methodologiesHeavy UX specs are inefficient, always behind the game, unusable and get the team focused on the wrong stuff
  • One answer to the fence is the wallCo-location - a lot of designers don't like it.Arrogant snobbery?Laziness?A need for a more creative space, man
  • Different prototypes serve those purposes in different ways at different stages of the project.
  • Prototype to explore, control and sellPrototypes throughout the lifecycle
  • Morris prototyping - oredev - share

    1. 1. PROTOTYPESPROTOTYPES ANDPROTOTYPES AND THE DIFFERENCES SHANE MORRIS BETWEEN THEM shanemo@automaticstudio.com.au @shanemo
    2. 2. A BIT ABOUT ME
    3. 3. A BIT ABOUT ME 101 Things I (Should Have) Learned in Interaction Design School ixd101.com
    4. 4. http://www.youtube.com/watch?v=O3f1qmPlWBo
    5. 5. FRANK LLOYD WRIGHT“AN ARCHITECTS MOST USEFUL TOOLSARE AN ERASER AT THE DRAFTINGBOARD, AND A WRECKING BAR AT THESITE.”
    6. 6. MISTAKES WILL HAPPENall-funny.info/architecture-faill
    7. 7. LIKE BUILDINGS, APPLICATIONS BREAK AT THEJOINS 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
    8. 8. WHAT WE NEED TO DO IS… PROTOTYPE 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…
    9. 9. WHAT WE NEED TO DO IS… PROTOTYPE 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…
    10. 10. DESIGN WITH MODELS 101 Things I Learned in Architecture School, Matthew Frederick
    11. 11. IN USER EXPERIENCE,PROTOTYPING IS A WAY OF LIFE Research Evaluate DesignTO FIND THE RIGHT USEREXPERIENCE, WE NEED TO BuildPROTOTYPE AND TEST Unlike our engineering friends
    12. 12. UX PROTOTYPES STARTED AS STATICMOCKUPSSTATIC PAGESPAPER PROTOTYPESWIREFRAMESALLOWED FOR Collaborative design Rapid exploration Usability testing Jensen Harris, Microsoft
    13. 13. THEN ALONG CAME RICH INTERNETAPPLICATIONSFOCUS ON TRANSITIONSLESS NAVIGATING TO FEATURESAND CONTENTMORE SUMMONING FEATURES ANDCONTENTMORE DESIGN EFFORT ANDEXPLORATION Jensen Harris, Microsoft
    14. 14. ARCHITECTURAL PLANS EXPRESS THE FUNCTION,BUT NOT THE EXPERIENCERebeca Cotera Gehry Partners, LLPrebes.info/resources/dch+composite+1.jpg www.abc.net.au/rn/bydesign/galleries/2010/3086582/ image3.htm
    15. 15. DYNAMIC UI’S – THE CHALLENGE HOW TO DOCUMENT THEHOW TO SUPPORT THE BEHAVIOUR OF RICHCONCEPTUAL DESIGN PHASE? INTERACTIONS?RAPID EXPLORATION EASY TO DOCUMENT THE STATESMORE EXPERIENTIAL HARDER TO DOCUMENT THE not just optimal arrangement of TRANSITIONS features and selection of widgets.  Expanding/Collapsing  Opening/Closing  Appearing/Disappearing  Animating
    16. 16. DOCUMENTING TRANSITIONSTechnique Pros ConsAnnotations No new tools Not expressive enoughExcruciating Textual Detail No new tools Hard work Hard to understand Hard to show timingStoryboards Easy to understand Hard work Series of single paths Hard to show timingScreenflow Diagrams No new tools Hard work Fragile Hard to show timingAnimatics Compelling New tools and skills Easy to understand Series of single pathsInteractive Prototypes Model multiple paths New tools and skills Easy to understand Other uses
    17. 17. THE RETURN OFPROTOTYPING
    18. 18. IN THE OLDEN DAYSPROTOTYPING PROBLEMSREQUIRED SPECIFIC SKILLSTOO MUCH IMPLEMENTATIONDETAIL Emotional and financialWASN’T AGILE ENOUGH investment meansEVERYTHING INTERPRETED Hard to iterateTHROUGH THE PROTOTYPER’SEYESTHROW-AWAYSOME OF THESE PROBLEMS ARERESOLVED TODAY
    19. 19. PROTOTYPES I HAVEKNOWN…
    20. 20. OBSERVER’S GUIDE TOPROTOTYPES STATIC INTERACTIVELOW Activity ScenariosFIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive CompsHIGH Treated AnimaticsFIDELITY interactive
    21. 21. WHY PROTOTYPE?
    22. 22. PAPER PROTOTYPINGVALIDATE THE CONCEPTPROSNO TECHNICAL SKILL REQUIREDNOT INTIMIDATINGCLEARLY UNFINISHEDNECESSARILY HIGH-LEVELLOW INVESTMENTCONSBECOME UNWIELDY WITH LOTS OFCONTENTAWKWARD TO SHOW SUBTLEINTERACTIONSNOT AS PORTABLE
    23. 23. WHY PROTOTYPE?VALIDATE THE CONCEPT
    24. 24. WHY PROTOTYPE?TRY OUT IDEASSKETCHESEXPLORE MULTIPLE OPTIONSQUICKLYDON’T OBSESS ABOUT FIT ANDFINISHLOW EMOTIONAL INVESTMENT
    25. 25. WHY PROTOTYPE?IDENTIFY ISSUESINTERACTIVE PROTOTYPESALLOW US TO ASSESS THE FLOWAND FEEL OF THE APPLICATION,LONG BEFORE PRODUCTION CODE
    26. 26. WHY PROTOTYPE?SELL THE VISIONSTORYBOARDMAP THE INTENDED EXPERIENCETO EARLY SCREEN CONCEPTS
    27. 27. WHY PROTOTYPE?SELL THE VISION
    28. 28. WHY PROTOTYPE?BRING THE TEAM TOGETHER
    29. 29. OBSERVER’S GUIDE TOPROTOTYPES STATIC INTERACTIVELOW Activity ScenariosFIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive CompsHIGH Treated AnimaticsFIDELITY interactive
    30. 30. GOOD PROTOTYPES
    31. 31. ATTRIBUTES OF GOODPROTOTYPES…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
    32. 32. PUT THE READER IN THE USER’SGOOD PROTOTYPES…SHOES
    33. 33. HAVE AN APPROPRIATE LEVEL OFGOOD PROTOTYPES…INVESTMENT ixd101.com
    34. 34. COMMUNICATE THE RIGHT LEVEL OFGOOD PROTOTYPES…DETAIL ixd101.com
    35. 35. GOOD PROTOTYPES…ARE ACCESSIBLE
    36. 36. GOOD PROTOTYPES…ARE ACCESSIBLE Design Wall Whiteboard High traffic pathway Interaction Design Team (3) Architecture and technical Teams R equirements Teams
    37. 37. ATTRIBUTES OF GOODPROTOTYPES…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
    38. 38. OBSERVER’S GUIDE TOPROTOTYPES STATIC INTERACTIVELOW Activity ScenariosFIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive CompsHIGH Treated AnimaticsFIDELITY interactive
    39. 39. TIM BROWN, IDEODESIGN THINKING Inspiration Ideation Implementation Research for Visualisation inspiration, Build to to sell, and not think control validation
    40. 40. ALAN COOPERTHE ONLY THING MOREEXPENSIVE THAN WRITINGSOFTWARE IS WRITING BADwww.uxquotes.com/author/alan-cooper/prototype-before-you-code/SOFTWARE
    41. 41. THANK YOU shane morris shane@automaticstudio.com.au @shanemo

    ×