Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
How to define UX objectives and goals using a "lean" six sigma approach
Download to read offline and view in fullscreen.


Rich User Experience Documentation

Download to read offline

Presentation by John Yesko at the Society for Technical Communication (STC) Annual Summit - User Experience Institute - on May 4, 2009.

The presentation addresses the evolving methods for documenting user experiences in the context of Rich Internet Applications (RIAs) and Web 2.0 sites. For the full PPT download with notes, go to

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Rich User Experience Documentation

  1. 1. Rich User Experience Documentation John Yesko
  2. 2. About Roundarch <ul><li>Roundarch is a specialized consultancy focused on designing and building websites and applications for the world’s largest organizations. </li></ul><ul><li>Key Facts </li></ul><ul><li>We serve mainly Fortune 500 and large government organizations. </li></ul><ul><li>We specialize in balancing user centered design with enterprise class technology to ensure our solutions are easy to use. </li></ul><ul><li>We are a recognized leader in developing rich internet applications (RIAs). </li></ul>150 employees in 3 offices
  3. 3. Selected Clients Financial Services Government Consumer Manufacturing Healthcare/ Transportation Media & Communications
  4. 4. Select Engagements Strategy, design and implementation for prime brokerage portal; Global Wealth Management web strategy and design; Design & development of Stock Plan Services site and next generation Financial Advisor desktop. Design and development of the 2008 Holiday campaign, as well as ongoing gift-giving related initiatives. Design and implementation of the next generation AVIS site. Includes research, persona development, design, user testing, technical architecture, SEO and implementation. Redesign of Motorola’s B2B and B2C sites; global content management strategy. Currently developing a rich internet application for phone maintenance. Implementation of the and development of a rich timeline with a focus on driving more broadband content usage and broadband advertising. Development of an interactive marketing platform and redesigned website ( and several brand sites) including the development of a promotion platform.
  5. 5. About Me <ul><li>Now </li></ul><ul><li>User Experience Lead at Roundarch </li></ul><ul><li>Responsible for user experience design on large-scale Web projects </li></ul>1993 Web Designer 1995 2000 2005 2010 Information Architect / UX Designer Medical Illustrator My Background Web!
  6. 6. The Premise
  7. 7. User Experience Shift Page-based Paradigm Static Websites (content) Dynamic Websites (content + applications) Rich Internet Applications and “2.0” Paradigm Shift Roughly one event or content topic per page More complex interactions Motion and transitions Dynamic content (e.g., user-generated) Single state per page RIA Paradigm Multiple states per page
  8. 8. User Experience Design Shift Information architecture Final product Visual design and production User experience design Final product All kinds of surprises Then Now Visibility: Good Visibility: ?
  9. 9. User Experience Design Shift <ul><li>More collaborative / simultaneous design processes (less sequential) </li></ul><ul><ul><li>Information architecture >> interaction design >> visual design >> production is no longer ideal </li></ul></ul><ul><li>Longer conceptual / ideation process </li></ul><ul><ul><li>More time establishing the foundation before we start making magic </li></ul></ul><ul><li>Expanded team </li></ul><ul><ul><li>And / or more experienced team </li></ul></ul>
  10. 10. Typical Team Chris Account management Karl Project management John User experience / IA Gary Technical lead Zach Visual design Rob Visual design Chris HTML / front-end Shailesh Development “ Brazilians” Development Ted Copywriting Unit One Nine Game animation External Resources Scott Creative direction
  11. 11. Why Does Documentation Matter? <ul><li>Clients need to understand what they’re getting </li></ul><ul><ul><li>Level of trust varies </li></ul></ul><ul><li>Designers and developers need to know what to create </li></ul><ul><ul><li>Level of accessibility and control varies </li></ul></ul>
  12. 12. Documentation Practices
  13. 13. This is… <ul><li>A discussion about a few key deliverables that we use </li></ul><ul><ul><li>Why we use it </li></ul></ul><ul><ul><li>What makes a good one </li></ul></ul><ul><ul><li>Why it’s key for Rich Internet Applications (RIAs) / “2.0” sites </li></ul></ul><ul><ul><li>Limitations and challenges </li></ul></ul><ul><li>Lots of visual examples </li></ul>
  14. 14. This is not … <ul><li>A comprehensive discussion of every documentation technique in existence </li></ul><ul><li>About tools </li></ul><ul><li>About user research </li></ul><ul><li>The only way to do things </li></ul>
  15. 15. User Experience Brief
  16. 16. User Experience Brief <ul><li>Early-stage strategic approach document </li></ul><ul><li>Summarizes what we know so far </li></ul><ul><ul><li>Output of Discovery process </li></ul></ul><ul><li>Used to gather consensus </li></ul><ul><li>Varies in length depending on needs </li></ul>
  17. 17. User Experience Brief <ul><li>May include: </li></ul><ul><ul><li>High-level requirements </li></ul></ul><ul><ul><li>User research results </li></ul></ul><ul><ul><li>Personas / scenarios </li></ul></ul><ul><ul><li>Concept map (more later) </li></ul></ul><ul><ul><li>User flows </li></ul></ul><ul><ul><li>Organizing principles </li></ul></ul>
  18. 18. User Experience Brief <ul><li>Organizing Principles: Examples </li></ul><ul><li>Seamless User Experience “…Whether users drill down from the home page, or enter the site at a ‘deep’ URL, they should perceive that the entire experience flows easily from one interaction to the next. It should all ‘feel’ like [brand]…” </li></ul><ul><li>Optimize Geographic Area and Language Experience </li></ul><ul><li>“… The current site uses a distributed approach, where each country/region has its own independent site(s), content, and products. Moving forward, the site design should allow smoother transitions among locales. For example, the site will employ ‘IP sniffing’ to predict the appropriate content and language for users according to their current geographic location…” </li></ul><ul><li>Filter Products by Differentiating Attributes / Facets </li></ul><ul><li>“… Because of the vast number of available products on the site, users should be able to filter a set of products by product attributes (‘facets’) that are meaningful to them. For example, mobile phones might be filtered by feature, carrier, color, etc.—in addition to the standard category/subcategory drill-down…” </li></ul>
  19. 19. User Experience Brief – In Practice <ul><li>Sparks important discussions </li></ul><ul><ul><li>At the right time to prevent surprises </li></ul></ul><ul><li>Easy to digest for executives </li></ul><ul><li>Varies in length depending on needs </li></ul><ul><ul><li>And audience’s attention span </li></ul></ul><ul><li>May quickly become out-of-date </li></ul><ul><li>Sets the stage for detailed design </li></ul><ul><ul><li>Justification for future decisions (“CYA”) </li></ul></ul>
  20. 20. Concept Map
  21. 21. Concept Map / Model <ul><li>Big picture approach </li></ul><ul><li>Relationships between ideas or concepts </li></ul><ul><li>Intended to generate more discussion, and gain early consensus </li></ul><ul><li>Not usually a “final” design document </li></ul>
  22. 22. Concept Map
  23. 23. Concept Map
  24. 24. Concept Map
  25. 25. Concept Map
  26. 26. Concept Map
  27. 27. Concept Map – In Practice <ul><li>Good opportunity to illustrate the “core” of the experience </li></ul><ul><ul><li>Get away from “top-down” approach </li></ul></ul><ul><li>Requires information design / illustration skills </li></ul><ul><li>Need to keep it (somewhat) simple </li></ul><ul><li>Some audiences have a hard time understanding how it turns into a site </li></ul><ul><ul><li>“ What am I agreeing to?” </li></ul></ul>
  28. 28. UX Brief and Concept Map – Why? <ul><li>Leap from start to finish is much bigger. </li></ul><ul><ul><li>so… </li></ul></ul><ul><li>We establish our approach early on, so there aren’t as many surprises. </li></ul>User experience design Final product Better visibility Fewer surprises
  29. 29. Wireframes
  30. 30. Wireframes <ul><li>Still the core method of documentation </li></ul><ul><ul><li>We spend the bulk of our time on them </li></ul></ul><ul><li>Relative Time Spent on UX Deliverables </li></ul>UX Brief Concept Map Site Map Wireframes
  31. 31. Wireframes <ul><li>&quot;Wireframing AJAX is a bitch.” </li></ul>Jeffrey Zeldman Happy Cog & A List Apart
  32. 32. The Wireframe Speech <ul><li>Wireframes do… </li></ul><ul><ul><li>Show relative prioritization of elements </li></ul></ul><ul><ul><li>Suggest grouping / relationships between elements </li></ul></ul><ul><ul><li>Document labeling (but probably not final content) </li></ul></ul><ul><ul><li>Show functionality </li></ul></ul><ul><li>Wireframes do not… </li></ul><ul><ul><li>Suggest creative / visual design </li></ul></ul><ul><ul><li>Show precise layout </li></ul></ul><ul><ul><ul><li>Tell you what’s above the fold </li></ul></ul></ul><ul><ul><li>Illustrate transitions, motion, etc. </li></ul></ul><ul><li>Just the right amount of “design” </li></ul><ul><ul><li>Not confused with visual design </li></ul></ul><ul><ul><li>But it looks good and sets some expectations on general layout </li></ul></ul>
  33. 39. <ul><li>“ Coloring in wireframes” </li></ul>
  34. 40. Wireframes – In Practice <ul><li>How have our wireframes changed? </li></ul><ul><li>Illustration techniques to document interactions: </li></ul><ul><li>Color </li></ul><ul><li>Multiple states </li></ul><ul><li>Exploded views </li></ul><ul><li>Interaction sequences </li></ul>
  35. 43. Wireframes <ul><li>&quot;Wireframing AJAX is a bitch. </li></ul><ul><li>The best our agency has come up with is the Chuck Jones approach: draw the key frames. </li></ul><ul><li>[But] Chuck Jones had an advantage: he knew what Bugs Bunny was going to do. We have to determine all the things a user might do, and wireframe the blessed moments of each possibility.&quot; </li></ul>Jeffrey Zeldman Happy Cog & A List Apart
  36. 47. Wireframes
  37. 50. Wireframes – In Practice <ul><li>Multiple options of complexity </li></ul>user interface specification (“functional spec”) annotated wireframes wireframes COMPLEXITY <ul><li>Role of wireframes changes depending on context </li></ul><ul><ul><li>Other deliverables, e.g., prototype (more in a minute) </li></ul></ul><ul><ul><li>Access to of other disciplines (visual design, development ) </li></ul></ul>
  38. 52. Wireframes – In Practice <ul><li>Real vs. fake data </li></ul><ul><ul><li>Use both </li></ul></ul><ul><ul><li>Important for comping / prototyping </li></ul></ul><ul><ul><li>Heads off questions from the client </li></ul></ul><ul><li>Establish visual language / patterns to use consistently </li></ul><ul><li>Don’t try to document things that can’t be documented well </li></ul><ul><ul><li>Transitions / motion </li></ul></ul><ul><ul><li>Precise mouse interactions </li></ul></ul><ul><ul><li>Visual / creative design </li></ul></ul>
  39. 53. Wireframes – Tools <ul><li>Wireframing tools </li></ul><ul><li>Specification generator </li></ul><ul><li>Interactive HTML prototypes </li></ul>
  40. 54. Wireframes – Tools <ul><li>Document templates </li></ul><ul><ul><li>Reservoir of type, object, and table styles </li></ul></ul><ul><li>Page layouts for approximately 100 common page layouts </li></ul><ul><ul><li>Wireframes </li></ul></ul><ul><ul><li>Color palette for a style guide </li></ul></ul><ul><ul><li>Component specs </li></ul></ul><ul><ul><li>Competitive two-by-two plots, etc. </li></ul></ul><ul><li>Symbol libraries for flows, maps, markers, callouts, frames, etc. </li></ul><ul><li>Scriptable document starting points for when you create standard documents, or need to automate the starting point for a larger document </li></ul>
  41. 55. Visual Design
  42. 56. Visual Design <ul><li>More important to the user experience design process than ever </li></ul><ul><li>Brought in earlier </li></ul><ul><li>Work more closely with both UX and development </li></ul><ul><ul><li>Inseparable from both </li></ul></ul><ul><ul><li>Designers need to understand other disciplines </li></ul></ul>
  43. 57. Design Comps <ul><li>Establish creative look and feel </li></ul><ul><li>Communicate brand </li></ul>
  44. 62. Design Comps – In Practice <ul><li>Communicate emotional element </li></ul><ul><li>Extend interaction design documentation (beyond wireframes) </li></ul><ul><li>Anticipate user-generated content </li></ul><ul><li>Prominence depends on type of project </li></ul>
  45. 68. Design Comps – In Practice <ul><li>Same challenges as other types of UX documentation </li></ul><ul><li>Motion / transitions </li></ul><ul><li>Multiple states </li></ul><ul><li>Dynamic content </li></ul><ul><li>But one step closer in fidelity… </li></ul>
  46. 69. Prototypes
  47. 70. Prototypes Visual Fidelity Functional Fidelity Paper wireframe prototype Page sketches Image mapped sketch scans Clickable wireframes Paper JPEG prototype (comps) Image mapped JPEGs (“slap & map”) Graphically “skinned” interactive prototype Interactive wireframe prototype Production-ready prototype “ The Dimensions of Fidelity” Fred Beecher, Evantage Consulting Proof of concept
  48. 71. Prototypes - In Practice <ul><li>Fill in where previous deliverables fall short </li></ul><ul><li>Can act as internal proof of concept </li></ul><ul><ul><li>Technical feasibility </li></ul></ul><ul><ul><li>Usability </li></ul></ul><ul><li>Can be leveraged for user research </li></ul><ul><li>May or may not be throw-away </li></ul><ul><li>Examples… </li></ul>
  49. 72. Prototypes - In Practice <ul><li>Expanded team may be necessary </li></ul><ul><ul><li>More work for everyone </li></ul></ul><ul><li>In user research, need to determine how much role fidelity plays </li></ul><ul><li>Need to decide if the wireframe or prototype is the document “of record” </li></ul><ul><ul><li>Prototypes are better at communicating than documenting </li></ul></ul><ul><ul><ul><li>“ Design Tool” vs. “Deliverable” </li></ul></ul></ul>
  50. 74. <ul><li>Avis Car Reservation iPhone App </li></ul>
  51. 75. More About Documentation <ul><li>Book: Communicating Design by Dan Brown, EightShapes </li></ul><ul><li>IxDA Discussion Board </li></ul><ul><li>UIE Podcast: “Roughing it with Interactive Prototypes” </li></ul>
  52. 76. <ul><li>John Yesko </li></ul><ul><li> </li></ul><ul><li>[email_address] </li></ul><ul><li>Twitter: jyesko </li></ul>Thank You Roundarch [email_address]
  • VikashKumar1344

    Jul. 26, 2018
  • rizqiar5

    Jul. 6, 2014
  • MayravHerman

    Jun. 25, 2014
  • eschepdehoog

    Jan. 21, 2014
  • amykahle

    Jan. 8, 2014
  • geedub

    Oct. 16, 2013
  • yourkamals

    Oct. 16, 2013
  • loaitaha

    Aug. 14, 2013
  • HeDongyang1

    Feb. 5, 2013
  • rokwakata

    Jan. 25, 2013
  • cewolfe

    Nov. 12, 2012
  • charaku

    Oct. 30, 2012
  • ff6600

    Jul. 20, 2012
  • yuhsiu

    Jun. 24, 2012
  • ekolsto

    Jun. 7, 2012
  • patricki

    Dec. 18, 2011
  • premgr06

    Dec. 2, 2011
  • melbagnato

    Aug. 23, 2011
  • m0mad

    Jun. 22, 2011
  • j_werness

    Apr. 25, 2011

Presentation by John Yesko at the Society for Technical Communication (STC) Annual Summit - User Experience Institute - on May 4, 2009. The presentation addresses the evolving methods for documenting user experiences in the context of Rich Internet Applications (RIAs) and Web 2.0 sites. For the full PPT download with notes, go to


Total views


On Slideshare


From embeds


Number of embeds