Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Morris prototyping - oredev - share

4,572 views

Published on

Prototyping talk from Oredev 2012

Published in: Design
  • Be the first to comment

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

×