Rich User Experience Documentation

  • 9,622 views
Uploaded on

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

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 http://www.yesko.com/stc

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • documentation
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,622
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
536
Comments
1
Likes
36

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. Rich User Experience Documentation John Yesko
  • 2. About Roundarch
    • Roundarch is a specialized consultancy focused on designing and building websites and applications for the world’s largest organizations.
    • Key Facts
    • We serve mainly Fortune 500 and large government organizations.
    • We specialize in balancing user centered design with enterprise class technology to ensure our solutions are easy to use.
    • We are a recognized leader in developing rich internet applications (RIAs).
    150 employees in 3 offices
  • 3. Selected Clients Financial Services Government Consumer Manufacturing Healthcare/ Transportation Media & Communications
  • 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 historychannel.com 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 (Hersheys.com and several brand sites) including the development of a promotion platform.
  • 5. About Me
    • Now
    • User Experience Lead at Roundarch
    • Responsible for user experience design on large-scale Web projects
    1993 Web Designer 1995 2000 2005 2010 Information Architect / UX Designer Medical Illustrator My Background Web!
  • 6. The Premise
  • 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. 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. User Experience Design Shift
    • More collaborative / simultaneous design processes (less sequential)
      • Information architecture >> interaction design >> visual design >> production is no longer ideal
    • Longer conceptual / ideation process
      • More time establishing the foundation before we start making magic
    • Expanded team
      • And / or more experienced team
  • 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. Why Does Documentation Matter?
    • Clients need to understand what they’re getting
      • Level of trust varies
    • Designers and developers need to know what to create
      • Level of accessibility and control varies
  • 12. Documentation Practices
  • 13. This is…
    • A discussion about a few key deliverables that we use
      • Why we use it
      • What makes a good one
      • Why it’s key for Rich Internet Applications (RIAs) / “2.0” sites
      • Limitations and challenges
    • Lots of visual examples
  • 14. This is not …
    • A comprehensive discussion of every documentation technique in existence
    • About tools
    • About user research
    • The only way to do things
  • 15. User Experience Brief
  • 16. User Experience Brief
    • Early-stage strategic approach document
    • Summarizes what we know so far
      • Output of Discovery process
    • Used to gather consensus
    • Varies in length depending on needs
  • 17. User Experience Brief
    • May include:
      • High-level requirements
      • User research results
      • Personas / scenarios
      • Concept map (more later)
      • User flows
      • Organizing principles
  • 18. User Experience Brief
    • Organizing Principles: Examples
    • 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]…”
    • Optimize Geographic Area and Language Experience
    • “… 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…”
    • Filter Products by Differentiating Attributes / Facets
    • “… 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…”
  • 19. User Experience Brief – In Practice
    • Sparks important discussions
      • At the right time to prevent surprises
    • Easy to digest for executives
    • Varies in length depending on needs
      • And audience’s attention span
    • May quickly become out-of-date
    • Sets the stage for detailed design
      • Justification for future decisions (“CYA”)
  • 20. Concept Map
  • 21. Concept Map / Model
    • Big picture approach
    • Relationships between ideas or concepts
    • Intended to generate more discussion, and gain early consensus
    • Not usually a “final” design document
  • 22. Concept Map
  • 23. Concept Map
  • 24. Concept Map
  • 25. Concept Map
  • 26. Concept Map
  • 27. Concept Map – In Practice
    • Good opportunity to illustrate the “core” of the experience
      • Get away from “top-down” approach
    • Requires information design / illustration skills
    • Need to keep it (somewhat) simple
    • Some audiences have a hard time understanding how it turns into a site
      • “ What am I agreeing to?”
  • 28. UX Brief and Concept Map – Why?
    • Leap from start to finish is much bigger.
      • so…
    • We establish our approach early on, so there aren’t as many surprises.
    User experience design Final product Better visibility Fewer surprises
  • 29. Wireframes
  • 30. Wireframes
    • Still the core method of documentation
      • We spend the bulk of our time on them
    • Relative Time Spent on UX Deliverables
    UX Brief Concept Map Site Map Wireframes
  • 31. Wireframes
    • "Wireframing AJAX is a bitch.”
    Jeffrey Zeldman Happy Cog & A List Apart
  • 32. The Wireframe Speech
    • Wireframes do…
      • Show relative prioritization of elements
      • Suggest grouping / relationships between elements
      • Document labeling (but probably not final content)
      • Show functionality
    • Wireframes do not…
      • Suggest creative / visual design
      • Show precise layout
        • Tell you what’s above the fold
      • Illustrate transitions, motion, etc.
    • Just the right amount of “design”
      • Not confused with visual design
      • But it looks good and sets some expectations on general layout
  • 33.  
  • 34.  
  • 35.  
  • 36.  
  • 37.  
  • 38.  
  • 39.
    • “ Coloring in wireframes”
  • 40. Wireframes – In Practice
    • How have our wireframes changed?
    • Illustration techniques to document interactions:
    • Color
    • Multiple states
    • Exploded views
    • Interaction sequences
  • 41.  
  • 42.  
  • 43. Wireframes
    • "Wireframing AJAX is a bitch.
    • The best our agency has come up with is the Chuck Jones approach: draw the key frames.
    • [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."
    Jeffrey Zeldman Happy Cog & A List Apart
  • 44.  
  • 45.  
  • 46.  
  • 47. Wireframes
  • 48.  
  • 49.  
  • 50. Wireframes – In Practice
    • Multiple options of complexity
    user interface specification (“functional spec”) annotated wireframes wireframes COMPLEXITY
    • Role of wireframes changes depending on context
      • Other deliverables, e.g., prototype (more in a minute)
      • Access to of other disciplines (visual design, development )
  • 51.  
  • 52. Wireframes – In Practice
    • Real vs. fake data
      • Use both
      • Important for comping / prototyping
      • Heads off questions from the client
    • Establish visual language / patterns to use consistently
    • Don’t try to document things that can’t be documented well
      • Transitions / motion
      • Precise mouse interactions
      • Visual / creative design
  • 53. Wireframes – Tools
    • Wireframing tools
    • Specification generator
    • Interactive HTML prototypes
  • 54. Wireframes – Tools
    • Document templates
      • Reservoir of type, object, and table styles
    • Page layouts for approximately 100 common page layouts
      • Wireframes
      • Color palette for a style guide
      • Component specs
      • Competitive two-by-two plots, etc.
    • Symbol libraries for flows, maps, markers, callouts, frames, etc.
    • Scriptable document starting points for when you create standard documents, or need to automate the starting point for a larger document
  • 55. Visual Design
  • 56. Visual Design
    • More important to the user experience design process than ever
    • Brought in earlier
    • Work more closely with both UX and development
      • Inseparable from both
      • Designers need to understand other disciplines
  • 57. Design Comps
    • Establish creative look and feel
    • Communicate brand
  • 58.  
  • 59.  
  • 60.  
  • 61.  
  • 62. Design Comps – In Practice
    • Communicate emotional element
    • Extend interaction design documentation (beyond wireframes)
    • Anticipate user-generated content
    • Prominence depends on type of project
  • 63.  
  • 64.  
  • 65.  
  • 66.  
  • 67.  
  • 68. Design Comps – In Practice
    • Same challenges as other types of UX documentation
    • Motion / transitions
    • Multiple states
    • Dynamic content
    • But one step closer in fidelity…
  • 69. Prototypes
  • 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
  • 71. Prototypes - In Practice
    • Fill in where previous deliverables fall short
    • Can act as internal proof of concept
      • Technical feasibility
      • Usability
    • Can be leveraged for user research
    • May or may not be throw-away
    • Examples…
  • 72. Prototypes - In Practice
    • Expanded team may be necessary
      • More work for everyone
    • In user research, need to determine how much role fidelity plays
    • Need to decide if the wireframe or prototype is the document “of record”
      • Prototypes are better at communicating than documenting
        • “ Design Tool” vs. “Deliverable”
  • 73.  
  • 74.
    • Avis Car Reservation iPhone App
  • 75. More About Documentation
    • Book: Communicating Design by Dan Brown, EightShapes
    • IxDA Discussion Board www.ixda.org/discuss.php?post=37076
    • UIE Podcast: “Roughing it with Interactive Prototypes” www.uie.com
  • 76.
    • John Yesko
    • www.yesko.com
    • [email_address]
    • Twitter: jyesko
    Thank You Roundarch www.roundarch.com [email_address] www.yesko.com/stc