prototypes, prototypes, prototypes

Download Prototypes, Prototypes, Prototypes

Post on 28-Jan-2015

113 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

Prototyping talk from Microsoft Campfire, Singapore April 2012.

TRANSCRIPT

  • 1. Prototypes, Prototypes andPrototypesShane MorrisAutomatic Studio

2. PrototypesValidate the conceptIn concrete termsTry out ideasAt low riskIdentify issuesBefore its too lateSell the visionTo stakeholders and investorsBring the team togetherWith a common vision 3. Who am I? 101 Things I (Should Have) Learned in Interaction Design Schoolixd101.com 4. Frank Lloyd WrightAN ARCHITECTS MOST USEFULTOOLS ARE AN ERASER AT THEDRAFTING BOARD, AND AWRECKING BAR AT THE SITE. 5. Mistakes will happenhttp://all-funny.info/architecture-faill 6. Like buildings, applications break at the joinsIts the journey betweenpages or screens, not thepages and screensthemselves, that can causethe most problems for users.Plus - problems with thejourney are the mostexpensive problems to fix.Design the journey betweenstates first, before designingthe states.ixd101.com 7. What we need to do isIdentify potential problems earlyTroubleshoot risky areas in advanceGet everyone headed in the same directionUnderstand how new features relate to existingfeaturesReassure stakeholders about what they aregetting for their moneyClearly communicate what needs to be builtClearly communicate what it will be like to use 8. Design with models101 Things I Learned in Architecture School, Matthew Frederick 9. In User Experience,Prototyping is a way of lifeTo find the rightuser experience, Researchwe need toprototype and testEvaluateDesignUnlike ourengineeringfriendsBuild 10. UX prototypes started as static mockupsStatic pages Paper Prototypes WireframesAllowed for Collaborative design Rapid exploration Jensen Harris, Microsoft Usability testing 11. then along came Rich Internet ApplicationsFocus on transitionsLess navigating tofeatures and contentMore summoningfeatures and contentMore design effort Jensen Harris, Microsoftand exploration 12. Architectural plans express the function,but not the experienceRebeca Coterahttp://rebes.info/resources/dch+composite+1.jpg Gehry Partners, LLPhttp://www.abc.net.au/rn/bydesign/galleries/2010/3086582/image3.htm 13. Dynamic UIs the ChallengeHow to support the conceptual design phase? Rapid exploration More experiential not just optimal arrangement of features and selection of widgets.How to document the behaviour of rich interactions? Easy to document the states Harder to document the transitions Expanding/Collapsing Opening/Closing Appearing/Disappearing Animating 14. Documenting Transitions - OptionsTechnique 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 skillsEasy to understand Series of single pathsInteractive PrototypesModel multiple paths New tools and skillsEasy to understandOther uses 15. The return ofprototyping 16. Prototyping Problems olden days Required specific skills Too much implementation detail Emotional and financial Wasnt agile enoughinvestment means Everything interpreted through Hard to iteratethe prototypers eyes Throw-away Some of these problems are resolved today 17. Prototypes I haveknown 18. Observers guide to prototypes STATICINTERACTIVELOW Activity ScenariosFIDELITY SketchesPaper prototypesWizard of Oz StoryboardsUntreated Wireframes Clickable wireframes interactive CompsHIGHTreated AnimaticsFIDELITY interactive 19. Why prototype? 20. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before its too late Sell the vision To stakeholders and investors Bring the team together With a common vision 21. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before its too late Sell the vision To stakeholders and investors Bring the team together With a common vision 22. Validate the ConceptPaper Prototyping 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 23. Validate the Concept 24. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before its too late Sell the vision To stakeholders and investors Bring the team together With a common vision 25. Try Out IdeasSketchesExplore multipleoptions quicklyDont obsess about fitand finishLow emotionalinvestment 26. Try Out Ideas 27. Try Out Ideas27 28. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before its too late Sell the vision To stakeholders and investors Bring the team together With a common vision 29. Identify issuesInteractive prototypes Allow us to assess the flow and feel of the application, long before production code 30. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before its too late Sell the vision To stakeholders and investors Bring the team together With a common vision 31. Sell the vision 32. Sell the visionStoryboardMap the intendedexperience to earlyscreen concepts 33. Sell the visionhttp://www.speakflow.com/View.aspx?PresentationID=c0ae95d3-050d-4076-b9d7-8fcf1a0490f0&mode=presentLocally 34. Sell the vision 35. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before its too late Sell the vision To stakeholders and investors Bring the team together With a common vision 36. Bring the team togetherWireframes map out the allocation ofcontent and controls to thepages/screens 37. Bring the team togetherWireframes show: Flow of application Allocation of content and functions to pages/screens Controls and how they work Labels and titlesWireframes do not focus on Actual content Precise sizes Visual design Behaviour and transitions 38. Bring the Team Together 39. Observers guide to prototypes STATICINTERACTIVELOW Activity ScenariosFIDELITY SketchesPaper prototypesWizard of Oz StoryboardsUntreated Wireframes Clickable wireframes interactive CompsHIGHTreated AnimaticsFIDELITY interactive 40. Good prototypes 41. Attributes of good prototypes 42. Put the Reader in the Users Shoes 43. Have an appropriate level of investmentixd101.com 44. Are changeable and can evolve 45. Accessible 46. Accessible Design Wall WhiteboardHigh traffic pathway Interaction DesignTeam (3) Architecture and technical Teams R equirements Teams 47. Communicate the right level of detail ixd101.com 48. Attributes of good prototypes 49. Observers guide to prototypes STATICINTERACTIVELOW Activity ScenariosFIDELITY SketchesPaper prototypesWizard of Oz StoryboardsUntreated Wireframes Clickable wireframes interactive CompsHIGHTreated AnimaticsFIDELITY interactive 50. PrototypesValidate the conceptIn concrete termsTry out ideasAt low riskIdentify issuesBefore its too lateSell the visionTo stakeholders and investorsBring the team togetherWith a common vision 51. Design ThinkingInspirationIdeationImplementationResearch forVisualisationinspiration, Build toto sell, andnotthinkcontrolvalidationTim Brown, IDEO 52. The only thing moreexpensive thanwriting software iswriting bad softwareAlan Cooperhttp://www.uxquotes.com/author/alan-cooper/prototype-before-you-code/ 53. Thank Youshane@automaticstudio.com.au@shanemo 54. Follow us onusehash tag