Visualize The Future With Rapid PrototypingLyndon CerejoPhiladelphia „13Web & Intranet ConferenceMay 09, 2013
2It‟s asnakeIt‟s aspearIt‟s awallIt‟s aropeIt‟s atreeParallel today: Everybody thinks they know what‟s being built, but ea...
3Requirement: Users should be able to tell the time of day<Visualized differently>
4Agenda Prototypes Rapid Prototyping Prototyping Process Prototype Fidelity Example A Few Recommendations
5Prototype: early model built to test a conceptThe Audi ASQ (2009): car, boat and submarine (useful in 2040 with global wa...
6Prototype: visual representation of the future stateA high fidelity visualization of a “non-SharePointy” site
7Prototypes can be used to validate feasibility, interest, …
8… and, to ensure that everyone has a common understanding
9Rapid Prototyping creates a common understanding Visuals Vs. Words Collaborative Facilitates experimentation Feedback...
10Typical Requirements Document
11Wireframe representation (non-UXed up)
121 picture > 1000 words (2178 in this case)
13Rapid Prototyping: Better Design FasterScenario Screens Prototype - Review - Refine Finalize
14Identify Scenarios
15Select Screens: Complex, New, Changes
16Plan Iterations
17Decide Fidelity (based on audience and purpose)
18Low Fidelity (sketchy)Use for- early stage prototyping- refined sketchesWatch out- difficult to replicate- not interacti...
19Medium Fidelity (blocky)Use for- more formal appearance- reduce focus on design- templates, stencils widgetsWatch out- L...
20High Fidelity (shiny)Use for- communicate form & function- interactivity- agreement & signoffWatch out- Learning curve (...
21Sketchy? Blocky? Shiny? How do you decide? Who is the intended audience? What is the purpose of the prototype?Purpose ...
22SharePoint Custom Branding ExampleWireframes Visual DesignHigh fidelity visualizationSharePoint considerationsTime to si...
23High Fidelity Prototype & SharePoint Implementation(no, we‟re not playing spot the differences)
24RecommendationsDosCollaborateSet expectationsReuse, reuse, reuse.RealismDon’tsOverpromiseKeep changingPerfectionDon‟t pr...
25Prototyping in Chocolatehttp://www.sagres.pt/sagrespretachocolate/ making of: http://vimeo.com/24820327
26Questions?http://bit.ly/protolinksRelated Resources(articles, tools, template downloads)
27Still wondering how to read the time on the binary clock (slide 3)?http://en.wikipedia.org/wiki/File:Binary_clock.svg
The information contained in this presentation is proprietary.© 2013 Capgemini. All rights reserved.www.capgemini.comLyndo...
Upcoming SlideShare
Loading in …5
×

Visualize the future with rapid prototyping

2,069 views

Published on

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/)

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,069
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Visualize the future with rapid prototyping

  1. 1. Visualize The Future With Rapid PrototypingLyndon CerejoPhiladelphia „13Web & Intranet ConferenceMay 09, 2013
  2. 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. 3. 3Requirement: Users should be able to tell the time of day<Visualized differently>
  4. 4. 4Agenda Prototypes Rapid Prototyping Prototyping Process Prototype Fidelity Example A Few Recommendations
  5. 5. 5Prototype: early model built to test a conceptThe Audi ASQ (2009): car, boat and submarine (useful in 2040 with global warming?)
  6. 6. 6Prototype: visual representation of the future stateA high fidelity visualization of a “non-SharePointy” site
  7. 7. 7Prototypes can be used to validate feasibility, interest, …
  8. 8. 8… and, to ensure that everyone has a common understanding
  9. 9. 9Rapid Prototyping creates a common understanding Visuals Vs. Words Collaborative Facilitates experimentation Feedback - early and often Reduces risk
  10. 10. 10Typical Requirements Document
  11. 11. 11Wireframe representation (non-UXed up)
  12. 12. 121 picture > 1000 words (2178 in this case)
  13. 13. 13Rapid Prototyping: Better Design FasterScenario Screens Prototype - Review - Refine Finalize
  14. 14. 14Identify Scenarios
  15. 15. 15Select Screens: Complex, New, Changes
  16. 16. 16Plan Iterations
  17. 17. 17Decide Fidelity (based on audience and purpose)
  18. 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. 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. 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. 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. 22. 22SharePoint Custom Branding ExampleWireframes Visual DesignHigh fidelity visualizationSharePoint considerationsTime to simulate reduced byweeks compared todeveloping in SharePoint
  23. 23. 23High Fidelity Prototype & SharePoint Implementation(no, we‟re not playing spot the differences)
  24. 24. 24RecommendationsDosCollaborateSet expectationsReuse, reuse, reuse.RealismDon’tsOverpromiseKeep changingPerfectionDon‟t prototype everything
  25. 25. 25Prototyping in Chocolatehttp://www.sagres.pt/sagrespretachocolate/ making of: http://vimeo.com/24820327
  26. 26. 26Questions?http://bit.ly/protolinksRelated Resources(articles, tools, template downloads)
  27. 27. 27Still wondering how to read the time on the binary clock (slide 3)?http://en.wikipedia.org/wiki/File:Binary_clock.svg
  28. 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

×