Prototypes, Prototypes, Prototypes

5,750 views
5,674 views

Published on

Prototyping talk from Microsoft Campfire, Singapore April 2012.

Published in: Design, Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,750
On SlideShare
0
From Embeds
0
Number of Embeds
3,779
Actions
Shares
0
Downloads
81
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • 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
  • While we’re talking about really low fidelity prototypes
  • 6minsProject a few years ago… Asked how does the system work… Tech guys said look at data model… BAs said read the phonebook, its already been past the business and signed off! I visited some business users to find out how they thought the system workedDrew some sketches, took them to the BAs and they didn’t recognise themWe had a problem
  • Earlier communication, before treatment
  • 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.
  • Advantage of SketchFlow
  • 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
  • Prototype to explore, control and sellPrototypes throughout the lifecycle
  • Prototypes, Prototypes, Prototypes

    1. 1. Prototypes, Prototypes andPrototypesShane MorrisAutomatic Studio
    2. 2. Prototypes Validate the concept In concrete terms Try out ideas At low risk Identify issues Before it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
    3. 3. Who am I? 101 Things I (Should Have) Learned in Interaction Design School ixd101.com
    4. 4. Frank Lloyd Wright“AN ARCHITECTS MOST USEFULTOOLS ARE AN ERASER AT THEDRAFTING BOARD, AND AWRECKING BAR AT THE SITE.”
    5. 5. Mistakes will happenhttp://all-funny.info/architecture-faill
    6. 6. 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
    7. 7. 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
    8. 8. Design with models101 Things I Learned in Architecture School, Matthew Frederick
    9. 9. In User Experience,Prototyping is a way of lifeTo find the rightuser experience, Researchwe need toprototype and test Evaluate DesignUnlike ourengineeringfriends Build
    10. 10. UX prototypes started as static mockupsStatic pages Paper Prototypes WireframesAllowed for Collaborative design Rapid exploration Jensen Harris, Microsoft Usability testing
    11. 11. …then along came Rich Internet ApplicationsFocus on transitionsLess navigating tofeatures and contentMore summoningfeatures and contentMore design effort Jensen Harris, Microsoftand exploration
    12. 12. Architectural plans express the function,but not the experienceRebeca Coterahttp://rebes.info/resources/dch+composite+1.jpg Gehry Partners, LLP http://www.abc.net.au/rn/bydesign/galleries/2010/3086582/image3.htm
    13. 13. Dynamic UI’s – 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. 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 skills Easy to understand Series of single pathsInteractive Prototypes Model multiple paths New tools and skills Easy to understand Other uses
    15. 15. The return ofprototyping
    16. 16. Prototyping Problems – olden days► Required specific skills► Too much implementation detail Emotional and financial► Wasn’t agile enough investment means► Everything interpreted through Hard to iterate the prototyper’s eyes► Throw-away► Some of these problems are resolved today
    17. 17. Prototypes I haveknown…
    18. 18. Observer’s guide to prototypes STATIC INTERACTIVELOW Activity ScenariosFIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive CompsHIGH Treated AnimaticsFIDELITY interactive
    19. 19. Why prototype?
    20. 20. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
    21. 21. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
    22. 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. 23. Validate the Concept
    24. 24. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
    25. 25. Try Out Ideas Sketches Explore multiple options quickly Don’t obsess about fit and finish Low emotional investment
    26. 26. Try Out Ideas
    27. 27. Try Out Ideas 27
    28. 28. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
    29. 29. Identify issues Interactive prototypes Allow us to assess the flow and feel of the application, long before production code
    30. 30. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
    31. 31. Sell the vision
    32. 32. Sell the vision ►Storyboard Map the intended experience to early screen concepts
    33. 33. Sell the visionhttp://www.speakflow.com/View.aspx?PresentationID=c0ae95d3-050d-4076-b9d7-8fcf1a0490f0&mode=presentLocally
    34. 34. Sell the vision
    35. 35. Why Prototype? Validate the concept In concrete terms Try out ideas At low risk Identify issues Before it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
    36. 36. Bring the team together►Wireframes – map out the allocation of content and controls to the pages/screens…
    37. 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. 38. Bring the Team Together
    39. 39. Observer’s guide to prototypes STATIC INTERACTIVELOW Activity ScenariosFIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive CompsHIGH Treated AnimaticsFIDELITY interactive
    40. 40. Good prototypes
    41. 41. Attributes of good prototypes…
    42. 42. Put the Reader in the User’s Shoes
    43. 43. Have an appropriate level of investment ixd101.com
    44. 44. Are changeable and can evolve
    45. 45. Accessible
    46. 46. Accessible Design Wall Whiteboard High traffic pathway Interaction Design Team (3) Architecture and technical Teams R equirements Teams
    47. 47. Communicate the right level of detail ixd101.com
    48. 48. Attributes of good prototypes…
    49. 49. Observer’s guide to prototypes STATIC INTERACTIVELOW Activity ScenariosFIDELITY Sketches Paper prototypes Wizard of Oz Storyboards Untreated Wireframes Clickable wireframes interactive CompsHIGH Treated AnimaticsFIDELITY interactive
    50. 50. Prototypes Validate the concept In concrete terms Try out ideas At low risk Identify issues Before it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
    51. 51. Design ThinkingInspiration Ideation Implementation Research for Visualisation inspiration, Build to to sell, and not think control validation ►Tim Brown, IDEO
    52. 52. The only thing moreexpensive thanwriting software iswriting bad softwareAlan Cooperhttp://www.uxquotes.com/author/alan-cooper/prototype-before-you-code/
    53. 53. Thank Youshane@automaticstudio.com.au@shanemo
    54. 54. Follow us onuse hash tag

    ×