Visualize the future with rapid prototyping

  • 1,326 views
Uploaded on

Slides from my talk at J Boye Web & Intranet Conference Philadelphia 13. …

Slides from my talk at J Boye Web & Intranet Conference Philadelphia 13.

The old adage, “a picture speaks a thousand words” captures what user interface prototyping is all about: using visuals to describe thousands of words’ worth of design and development specifications that detail how a system should behave and look.

(If you're looking for the 1000 words equivalent: http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/)

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,326
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Visualize The Future With Rapid PrototypingLyndon CerejoPhiladelphia „13Web & Intranet ConferenceMay 09, 2013
  • 2. 2It‟s asnakeIt‟s aspearIt‟s awallIt‟s aropeIt‟s atreeParallel today: Everybody thinks they know what‟s being built, but each has a different, conflictingvision of what it looks like(story depicted above: http://en.wikipedia.org/wiki/Blind_men_and_an_elephant)
  • 3. 3Requirement: Users should be able to tell the time of day<Visualized differently>
  • 4. 4Agenda Prototypes Rapid Prototyping Prototyping Process Prototype Fidelity Example A Few Recommendations
  • 5. 5Prototype: early model built to test a conceptThe Audi ASQ (2009): car, boat and submarine (useful in 2040 with global warming?)
  • 6. 6Prototype: visual representation of the future stateA high fidelity visualization of a “non-SharePointy” site
  • 7. 7Prototypes can be used to validate feasibility, interest, …
  • 8. 8… and, to ensure that everyone has a common understanding
  • 9. 9Rapid Prototyping creates a common understanding Visuals Vs. Words Collaborative Facilitates experimentation Feedback - early and often Reduces risk
  • 10. 10Typical Requirements Document
  • 11. 11Wireframe representation (non-UXed up)
  • 12. 121 picture > 1000 words (2178 in this case)
  • 13. 13Rapid Prototyping: Better Design FasterScenario Screens Prototype - Review - Refine Finalize
  • 14. 14Identify Scenarios
  • 15. 15Select Screens: Complex, New, Changes
  • 16. 16Plan Iterations
  • 17. 17Decide Fidelity (based on audience and purpose)
  • 18. 18Low Fidelity (sketchy)Use for- early stage prototyping- refined sketchesWatch out- difficult to replicate- not interactiveTools- Pencil and paper- UI Stencils (watch out)- The Back of the Napkin (DanRoam)The key- throwawayExample: Paper Sketches
  • 19. 19Medium Fidelity (blocky)Use for- more formal appearance- reduce focus on design- templates, stencils widgetsWatch out- Learning curve (tool)- Client attachment- Detail alertTools- Visio- PowerPoint (Keynotopia)- Balsamiq- Omnigraffle- Axure RPExample: Wireframes
  • 20. 20High Fidelity (shiny)Use for- communicate form & function- interactivity- agreement & signoffWatch out- Learning curve (tool)- Client attachment- Detail alert- Design discussionsTools- iRise- JustInMind- Keynotopia templates- PhotoshopExample: HTML prototypes
  • 21. 21Sketchy? Blocky? Shiny? How do you decide? Who is the intended audience? What is the purpose of the prototype?Purpose Fidelity• Validate requirements with stakeholders• Compare UX concepts• Confirm that users can achieve their goalsLow• Focus on UX design instead of visual design• Focus on structure, layout and content• Screen specificationsMedium• Signoff on visual design and UX design• Visual specifications for offshore development team• Usability testing• Change managementHigh
  • 22. 22SharePoint Custom Branding ExampleWireframes Visual DesignHigh fidelity visualizationSharePoint considerationsTime to simulate reduced byweeks compared todeveloping in SharePoint
  • 23. 23High Fidelity Prototype & SharePoint Implementation(no, we‟re not playing spot the differences)
  • 24. 24RecommendationsDosCollaborateSet expectationsReuse, reuse, reuse.RealismDon’tsOverpromiseKeep changingPerfectionDon‟t prototype everything
  • 25. 25Prototyping in Chocolatehttp://www.sagres.pt/sagrespretachocolate/ making of: http://vimeo.com/24820327
  • 26. 26Questions?http://bit.ly/protolinksRelated Resources(articles, tools, template downloads)
  • 27. 27Still wondering how to read the time on the binary clock (slide 3)?http://en.wikipedia.org/wiki/File:Binary_clock.svg
  • 28. The information contained in this presentation is proprietary.© 2013 Capgemini. All rights reserved.www.capgemini.comLyndon Cerejolyndon.cerejo@capgemini.comhttp://www.linkedin.com/in/lycerejohttp://bit.ly/protolinks