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.
Rich User Experience Documentation John Yesko
About Roundarch <ul><li>Roundarch is a specialized consultancy focused on designing and building websites and applications...
Select Engagements Strategy, design and implementation for prime brokerage portal; Global Wealth Management web strategy a...
Selected Clients Financial  Services Government Consumer Manufacturing Healthcare/  Transportation Media & Communications
About Me <ul><li>Now </li></ul><ul><li>User Experience Lead at Roundarch </li></ul><ul><li>Responsible for user experience...
The Premise
User Experience Shift Page-based Paradigm Static Websites (content) Dynamic Websites (content + applications) Rich Interne...
User Experience Design Shift Information architecture  / interaction design Final product Visual design and production Fin...
User Experience Design Shift <ul><li>More collaborative / simultaneous design processes (less sequential) </li></ul><ul><u...
Typical Team Chris Account management Karl Project management John User experience / IA Gary Technical lead Zach Visual de...
Documentation Practices
Why Does Documentation Matter? <ul><li>Clients need to understand what they’re getting </li></ul><ul><ul><li>Level of trus...
This is… <ul><li>A discussion about a couple types of deliverables that we use </li></ul><ul><ul><li>Why we use it </li></...
This is  not … <ul><li>A comprehensive discussion of every documentation technique in existence </li></ul><ul><li>The whol...
Concept Map
Concept Map / Model <ul><li>Big picture approach </li></ul><ul><li>Relationships between ideas or concepts </li></ul><ul><...
Concept Map
Concept Map
Concept Map
Concept Map
Concept Map
Concept Map – In Practice <ul><li>Good opportunity to illustrate the “core” of the experience  </li></ul><ul><ul><li>Get a...
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 e...
Wireframes
Wireframes <ul><li>Still the core method of documentation </li></ul><ul><ul><li>We spend the bulk of our time on them </li...
Wireframes <ul><li>&quot;Wireframing AJAX is a bitch.” </li></ul>Jeffrey Zeldman Happy Cog & A List Apart
The Wireframe Speech <ul><li>Wireframes do… </li></ul><ul><ul><li>Show relative prioritization of elements </li></ul></ul>...
 
 
 
 
 
 
<ul><li>“ Coloring in wireframes” </li></ul>
Wireframes – In Practice <ul><li>How have our wireframes changed? </li></ul><ul><li>Illustration techniques to document in...
 
 
Wireframes <ul><li>&quot;Wireframing AJAX is a bitch. </li></ul><ul><li>The best our agency has come up with is the Chuck ...
 
 
 
Wireframes
 
 
Wireframes – In Practice <ul><li>Real vs. fake data </li></ul><ul><ul><li>Use both </li></ul></ul><ul><ul><li>Important fo...
Visual Design
Visual Design <ul><li>More important to the user experience design process than ever </li></ul><ul><li>Brought in earlier ...
Design Comps <ul><li>Establish creative look and feel </li></ul><ul><li>Communicate brand </li></ul>
 
 
 
 
Design Comps – In Practice <ul><li>Communicate emotional element </li></ul><ul><li>Extend interaction design documentation...
 
 
 
 
Design Comps – In Practice <ul><li>Same challenges as other types of UX documentation </li></ul><ul><li>Motion / transitio...
Prototypes
Prototypes Visual Fidelity Functional Fidelity Paper wireframe prototype Page sketches Image mapped sketch scans Clickable...
Prototypes - In Practice <ul><li>Fill in where previous deliverables fall short </li></ul><ul><li>Can act as internal proo...
Prototypes - In Practice <ul><li>Expanded team may be necessary </li></ul><ul><ul><li>More work for everyone </li></ul></u...
 
<ul><li>Avis Car Reservation iPhone App </li></ul>
More About Documentation <ul><li>Book:  Communicating Design   by Dan Brown, EightShapes </li></ul><ul><li>IxDA Discussion...
<ul><li>John Yesko </li></ul><ul><li>www.yesko.com </li></ul><ul><li>[email_address] </li></ul><ul><li>Twitter: @jyesko </...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Xeditor at Tceurope
Next
Upcoming SlideShare
Xeditor at Tceurope
Next
Download to read offline and view in fullscreen.

Share

Rich User Experience Documentation - Update

Download to read offline

Presentation to Chicago Interactive Design and Development Meetup, 17 Nov. 2009.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Rich User Experience Documentation - Update

  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>200 employees in 3 offices
  3. 3. 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 and 2009 Holiday campaigns, 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 diagnosis and repair. 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.
  4. 4. Selected Clients Financial Services Government Consumer Manufacturing Healthcare/ Transportation Media & Communications
  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 / interaction design Final product Visual design and production Final product All kinds of surprises Then Now Visibility: Good Visibility: ? Information architecture / interaction design
  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 no longer works </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 (3) Ted Copywriting (1) Unit One Nine Game animation (2) External Resources Scott Creative direction
  11. 11. Documentation Practices
  12. 12. 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>
  13. 13. This is… <ul><li>A discussion about a couple types of 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>The whole process (I’m skipping several steps) </li></ul><ul><li>About tools </li></ul><ul><li>The only way to do things </li></ul>
  15. 15. Concept Map
  16. 16. 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><ul><li>Wide variance in level of detail </li></ul>
  17. 17. Concept Map
  18. 18. Concept Map
  19. 19. Concept Map
  20. 20. Concept Map
  21. 21. Concept Map
  22. 22. 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>
  23. 23. 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
  24. 24. Wireframes
  25. 25. 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><ul><li>(Pre-visual design) </li></ul>UX Brief Concept Map (s) Site Map Wireframes <ul><ul><li>High-level requirements </li></ul></ul><ul><ul><li>User research results </li></ul></ul><ul><ul><li>Personas and scenarios </li></ul></ul><ul><ul><li>User flows </li></ul></ul><ul><ul><li>Organizing principles </li></ul></ul>
  26. 26. Wireframes <ul><li>&quot;Wireframing AJAX is a bitch.” </li></ul>Jeffrey Zeldman Happy Cog & A List Apart
  27. 27. 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>
  28. 34. <ul><li>“ Coloring in wireframes” </li></ul>
  29. 35. 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>
  30. 38. 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
  31. 42. Wireframes
  32. 45. 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>
  33. 46. Visual Design
  34. 47. 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>
  35. 48. Design Comps <ul><li>Establish creative look and feel </li></ul><ul><li>Communicate brand </li></ul>
  36. 53. 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>
  37. 58. 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>
  38. 59. Prototypes
  39. 60. 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
  40. 61. 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>
  41. 62. 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>
  42. 64. <ul><li>Avis Car Reservation iPhone App </li></ul>
  43. 65. More About Documentation <ul><li>Book: Communicating Design by Dan Brown, EightShapes </li></ul><ul><li>IxDA Discussion Board www.ixda.org/discuss.php?post=37076 </li></ul><ul><li>UIE Podcast: “Roughing it with Interactive Prototypes” www.uie.com </li></ul>
  44. 66. <ul><li>John Yesko </li></ul><ul><li>www.yesko.com </li></ul><ul><li>[email_address] </li></ul><ul><li>Twitter: @jyesko </li></ul>Thank You Roundarch www.roundarch.com [email_address]
  • noorha03

    Mar. 14, 2017
  • CalebSexton1

    Jul. 15, 2015
  • MichaelKing27

    Dec. 28, 2014
  • j_werness

    Nov. 24, 2013
  • johnmikesell

    Oct. 24, 2013
  • chris.schmechel

    Feb. 15, 2013
  • emilioyero

    Jan. 11, 2013
  • paulocoimbra

    Aug. 17, 2012
  • magicMLV

    Dec. 31, 2011
  • budesigns

    Jul. 21, 2011
  • ZenFilms

    May. 22, 2011
  • bangb

    Apr. 11, 2011
  • yuhsiu

    Mar. 1, 2011
  • ybugchen

    Dec. 18, 2010
  • yoniGeek

    Dec. 11, 2010
  • MosBar

    Aug. 20, 2010
  • tmacedo

    Jan. 11, 2010
  • sbindle

    Jan. 10, 2010
  • netsoftglobal

    Jan. 4, 2010
  • arulmurugan77

    Dec. 9, 2009

Presentation to Chicago Interactive Design and Development Meetup, 17 Nov. 2009.

Views

Total views

5,022

On Slideshare

0

From embeds

0

Number of embeds

162

Actions

Downloads

625

Shares

0

Comments

0

Likes

30

×