Prototypes, Prototypes, Prototypes
•Download as PPTX, PDF•
9 likes•4,420 views
Prototyping talk from Microsoft Campfire, Singapore April 2012.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Prototypes, Prototypes, Prototypes
Similar to Prototypes, Prototypes, Prototypes (20)
More from Shane Morris
More from Shane Morris (17)
Recently uploaded
Recently uploaded (20)
Prototypes, Prototypes, Prototypes
- 1. Prototypes, Prototypes and Prototypes Shane Morris Automatic Studio
- 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. Who am I? 101 Things I (Should Have) Learned in Interaction Design School ixd101.com
- 4. Frank Lloyd Wright “AN ARCHITECT'S MOST USEFUL TOOLS ARE AN ERASER AT THE DRAFTING BOARD, AND A WRECKING BAR AT THE SITE.”
- 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. 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. Design with models 101 Things I Learned in Architecture School, Matthew Frederick
- 9. In User Experience, Prototyping is a way of life To find the right user experience, Research we need to prototype and test Evaluate Design Unlike our engineering friends Build
- 10. UX prototypes started as static mockups Static pages Paper Prototypes Wireframes Allowed for Collaborative design Rapid exploration Jensen Harris, Microsoft Usability testing
- 11. …then along came Rich Internet Applications Focus on transitions Less navigating to features and content More summoning features and content More design effort Jensen Harris, Microsoft and exploration
- 12. Architectural plans express the function, but not the experience Rebeca Cotera http://rebes.info/resources/dch+composite+1.jpg Gehry Partners, LLP http://www.abc.net.au/rn/bydesign/galleries/2010/3086582/image3.htm
- 13. Dynamic UI’s – the Challenge How 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 - Options 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
- 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
- 18. 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
- 19. Why prototype?
- 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. 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. Validate the Concept Paper 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
- 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. Try Out Ideas Sketches Explore multiple options quickly Don’t obsess about fit and finish Low emotional investment
- 26. Try Out Ideas
- 27. Try Out Ideas 27
- 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. Identify issues Interactive 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 it’s too late Sell the vision To stakeholders and investors Bring the team together With a common vision
- 31. Sell the vision
- 32. Sell the vision ►Storyboard Map the intended experience to early screen concepts
- 34. Sell the vision
- 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. Bring the team together ►Wireframes – map out the allocation of content and controls to the pages/screens…
- 37. Bring the team together Wireframes show: Flow of application Allocation of content and functions to pages/screens Controls and how they work Labels and titles Wireframes do not focus on Actual content Precise sizes Visual design Behaviour and transitions
- 38. Bring the Team Together
- 39. 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
- 40. Good prototypes
- 41. Attributes of good prototypes…
- 42. Put the Reader in the User’s Shoes
- 43. Have an appropriate level of investment ixd101.com
- 44. Are changeable and can evolve
- 45. Accessible
- 46. Accessible Design Wall Whiteboard High traffic pathway Interaction Design Team (3) Architecture and technical Teams R equirements Teams
- 47. Communicate the right level of detail ixd101.com
- 48. Attributes of good prototypes…
- 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
- 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. Design Thinking Inspiration Ideation Implementation Research for Visualisation inspiration, Build to to sell, and not think control validation ►Tim Brown, IDEO
- 52. The only thing more expensive than writing software is writing bad software Alan Cooper http://www.uxquotes.com/author/alan-cooper/prototype-before-you-code/
- 54. Follow us on use hash tag
Editor's Notes
- 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