Downloaded 33 times
Uploaded byShane Morris
Morris prototyping - oredev - share
This document discusses different types of prototypes and their uses. It begins by defining prototypes as ways to identify problems, try out ideas, identify issues, and bring teams together. It then describes different types of prototypes from static to interactive, and their appropriate uses. Key advantages discussed include validating concepts, exploring options quickly, and assessing application flow before production. The document emphasizes that good prototypes put the user first, have appropriate investment, communicate the right level of detail, and are changeable, accessible and help align teams. Overall it promotes prototyping as an important part of the design process.
More Related Content
Similar to Morris prototyping - oredev - share
Morris prototyping - oredev - share
- 1. PROTOTYPES PROTOTYPES AND PROTOTYPES AND THE DIFFERENCES SHANE MORRIS BETWEEN THEM shanemo@automaticstudio.com.au @shanemo
- 2.
- 3. A BIT ABOUTME 101 Things I (Should Have) Learned in Interaction Design School ixd101.com
- 4.
- 6. FRANK LLOYD WRIGHT “ANARCHITECT'S MOST USEFUL TOOLS ARE AN ERASER AT THE DRAFTING BOARD, AND A WRECKING BAR AT THE SITE.”
- 7.
- 8. LIKE BUILDINGS, APPLICATIONSBREAK 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
- 9. WHAT WE NEEDTO 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. WHAT WE NEEDTO 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…
- 11. DESIGN WITH MODELS 101 Things I Learned in Architecture School, Matthew Frederick
- 12. IN USER EXPERIENCE, PROTOTYPINGIS A WAY OF LIFE Research Evaluate Design TO FIND THE RIGHT USER EXPERIENCE, WE NEED TO Build PROTOTYPE AND TEST Unlike our engineering friends
- 13. UX PROTOTYPES STARTEDAS STATIC MOCKUPS STATIC PAGES PAPER PROTOTYPES WIREFRAMES ALLOWED FOR Collaborative design Rapid exploration Usability testing Jensen Harris, Microsoft
- 14. THEN ALONG CAMERICH INTERNET APPLICATIONS FOCUS ON TRANSITIONS LESS NAVIGATING TO FEATURES AND CONTENT MORE SUMMONING FEATURES AND CONTENT MORE DESIGN EFFORT AND EXPLORATION Jensen Harris, Microsoft
- 15. ARCHITECTURAL PLANS EXPRESSTHE FUNCTION, BUT NOT THE EXPERIENCE Rebeca Cotera Gehry Partners, LLP rebes.info/resources/dch+composite+1.jpg www.abc.net.au/rn/bydesign/galleries/2010/3086582/ image3.htm
- 16. DYNAMIC UI’S –THE CHALLENGE HOW TO DOCUMENT THE HOW TO SUPPORT THE BEHAVIOUR OF RICH CONCEPTUAL DESIGN PHASE? INTERACTIONS? RAPID EXPLORATION EASY TO DOCUMENT THE STATES MORE EXPERIENTIAL HARDER TO DOCUMENT THE not just optimal arrangement of TRANSITIONS features and selection of widgets. Expanding/Collapsing Opening/Closing Appearing/Disappearing Animating
- 17. DOCUMENTING TRANSITIONS Technique Pros Cons Annotations No new tools Not expressive enough Excruciating Textual Detail No new tools Hard work Hard to understand Hard to show timing Storyboards Easy to understand Hard work Series of single paths Hard to show timing Screenflow Diagrams No new tools Hard work Fragile Hard to show timing Animatics Compelling New tools and skills Easy to understand Series of single paths Interactive Prototypes Model multiple paths New tools and skills Easy to understand Other uses
- 18.
- 19. IN THE OLDENDAYS PROTOTYPING PROBLEMS REQUIRED SPECIFIC SKILLS TOO MUCH IMPLEMENTATION DETAIL Emotional and financial WASN’T AGILE ENOUGH investment means EVERYTHING INTERPRETED Hard to iterate THROUGH THE PROTOTYPER’S EYES THROW-AWAY SOME OF THESE PROBLEMS ARE RESOLVED TODAY
- 20.
- 21. OBSERVER’S GUIDE TO PROTOTYPES STATIC INTERACTIVE LOW Activity Scenarios FIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive Comps HIGH Treated Animatics FIDELITY interactive
- 22.
- 25. PAPER PROTOTYPING VALIDATE THECONCEPT PROS NO TECHNICAL SKILL REQUIRED NOT INTIMIDATING CLEARLY UNFINISHED NECESSARILY HIGH-LEVEL LOW INVESTMENT CONS BECOME UNWIELDY WITH LOTS OF CONTENT AWKWARD TO SHOW SUBTLE INTERACTIONS NOT AS PORTABLE
- 26. WHY PROTOTYPE? VALIDATE THECONCEPT
- 29. WHY PROTOTYPE? TRY OUTIDEAS SKETCHES EXPLORE MULTIPLE OPTIONS QUICKLY DON’T OBSESS ABOUT FIT AND FINISH LOW EMOTIONAL INVESTMENT
- 32. WHY PROTOTYPE? IDENTIFY ISSUES INTERACTIVEPROTOTYPES ALLOW US TO ASSESS THE FLOW AND FEEL OF THE APPLICATION, LONG BEFORE PRODUCTION CODE
- 35. WHY PROTOTYPE? SELL THEVISION STORYBOARD MAP THE INTENDED EXPERIENCE TO EARLY SCREEN CONCEPTS
- 36. WHY PROTOTYPE? SELL THEVISION
- 39. WHY PROTOTYPE? BRING THETEAM TOGETHER
- 40. OBSERVER’S GUIDE TO PROTOTYPES STATIC INTERACTIVE LOW Activity Scenarios FIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive Comps HIGH Treated Animatics FIDELITY interactive
- 41.
- 42. ATTRIBUTES OF GOOD PROTOTYPES… PUTTHE 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
- 43. PUT THE READERIN THE USER’S GOOD PROTOTYPES… SHOES
- 44. HAVE AN APPROPRIATELEVEL OF GOOD PROTOTYPES… INVESTMENT ixd101.com
- 45. COMMUNICATE THE RIGHTLEVEL OF GOOD PROTOTYPES… DETAIL ixd101.com
- 46.
- 47. GOOD PROTOTYPES… ARE ACCESSIBLE Design Wall Whiteboard High traffic pathway Interaction Design Team (3) Architecture and technical Teams R equirements Teams
- 48. ATTRIBUTES OF GOOD PROTOTYPES… PUTTHE 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
- 49. OBSERVER’S GUIDE TO PROTOTYPES STATIC INTERACTIVE LOW Activity Scenarios FIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive Comps HIGH Treated Animatics FIDELITY interactive
- 51. TIM BROWN, IDEO DESIGNTHINKING Inspiration Ideation Implementation Research for Visualisation inspiration, Build to to sell, and not think control validation
- 52. ALAN COOPER THE ONLYTHING MORE EXPENSIVE THAN WRITING SOFTWARE IS WRITING BAD www.uxquotes.com/author/alan-cooper/prototype-before-you-code/ SOFTWARE
- 53. THANK YOU shane morris shane@automaticstudio.com.au @shanemo
Editor's Notes
- #3 Xxx win 8 pic
- #5 XXX prototypes are exploratory or explanatory
- #6 Validate the conceptParticularly as a whole – the flow
- #7 Mistakes will be made
- #8 The ones on the right are cheaper and easier to fix
- #9 Inspired by a suggestion from Dave Malouf (http://davemalouf.com/).
- #12 Exactly applies
- #15 XXX pic of a RIA
- #16 Like a site map, or a screen flow
- #17 Documenting transitions is easier with a traditional web site.There is only one transition, from one full-screen web page to another
- #20 In the pastMany tools existAxureiRiseBalsamiqHypercardProduction toolsFlashHybridsCatalyst?Expression BlendCheck list by @tuna
- #21 Or, what do I mean by prototyping
- #23 To recap
- #26 XXX one of my paper prototypes
- #27 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
- #40 Scope creep
- #41 Different prototypes serve those purposes in different ways at different stages of the project.
- #45 Means you have to give up control, and show your work early.
- #46 The right level of detail increases as the project progresses.
- #48 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
- #49 Prototyping works well with agile methodologiesHeavy UX specs are inefficient, always behind the game, unusable and get the team focused on the wrong stuff
- #50 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
- #52 Different prototypes serve those purposes in different ways at different stages of the project.
- #54 Prototype to explore, control and sellPrototypes throughout the lifecycle