+ Privileged & Confidential Page 1 + Rich User Experience Documentation John Yesko

+ Privileged & Confidential Page 2 + Background

+ Privileged & Confidential Page 3 + About Me Background Trained as designer and illustrator (pre-Web) Began designing interactive applications in 1993 Evolved from Web designer to information architect Now User Experience Lead at Roundarch Manage information architecture and user experience design for large-scale corporate sites

+ Privileged & Confidential Page 4 + Client Sampling

+ Privileged & Confidential Page 5 + About Roundarch Roundarch is a specialized consultancy focused on designing and building web sites and applications for the worlds 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, a joy to use and highly scalable This synergy of user experience design and technology has made us a recognized leader in developing rich internet applications and we have 20+ RIA projects on-going Key Figures Founded in 2000 Approximately 150 employees (and looking for more good ones) Offices: New York, Chicago, Boston

+ Privileged & Confidential Page 6 + Setup

+ Privileged & Confidential Page 7 + Page-based Paradigm Static Websites (content) Dynamic Websites (content + applications) Rich Internet Applications and 2.0 Paradigm Shift (Roughly 1 event or content topic per page) Multiple events or content topics in one place Transitions and motion are more important Single state per page Multiple states per page Single Page / Stateless / RIA Paradigm User Experience Shift

+ Privileged & Confidential Page 8 + Documentation Challenges of the New Paradigm More complex interactions (e.g., motion, transitions, multiple states) More dynamic content (e.g., user generated) More collaborative / simultaneous design processes (less sequential) –Information architecture >> interaction design >> visual design >> production no longer ideal Longer conceptual / ideational process –More time establishing the foundation before we start making magic Expanded team –And / or more experienced team

+ Privileged & Confidential Page 9 + Why Does Documentation Matter? Clients need to understand what theyre getting –Level of trust varies Designers and developers need to know what to create –Level of accessibility and control varies

+ Privileged & Confidential Page 10 + Outline of this Session Talk about each key deliverable we use –Why we use it –What makes a good one –How it has changed with Rich Internet Applications (RIAs) –Limitations and challenges –Please interrupt with questions and your own experiences Examples!

+ Privileged & Confidential Page 11 + This Session Is Not… a comprehensive discussion of every documentation technique in existence about tools about user research

+ Privileged & Confidential Page 12 + Documentation Techniques

+ Privileged & Confidential Page 13 + User Experience Brief Early-stage strategic approach document Summarizes what we know so far –Output of Discovery process Used to gather consensus May include: –Requirements –User research results –Personas / scenarios –Concept map (more later) –User flows (more later) –Organizing principles Varies in length depending on needs

+ Privileged & Confidential Page 14 + Concept Map / Model Big picture approach Relationships between ideas or concepts Intended to generate discussion and gain consensus Not usually a final design document Good opportunity to illustrate the core of the experience (instead of top-down)

+ Privileged & Confidential Page 15 + Concept Map – In Practice 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?

+ Privileged & Confidential Page 16 + Considerations for RIAs / Web 2.0 User Experience Brief, Concept Map Leaps from deliverable to deliverable are bigger Establish an approach so there arent as many surprises in each leap

+ Privileged & Confidential Page 17 + Site Map Establish scope Make sure were not missing anything Discuss permanence of labels at this stage

+ Privileged & Confidential Page 18 + Site Map – In Practice Multiple formats Not very different for RIAs / 2.0 applications Still a core deliverable

+ Privileged & Confidential Page 19 + Wireframes Still the core method of documentation –We spend the bulk of our time on them Multiple options of complexity wireframes >> annotated wireframes >> user interface specification (functional spec) Role of wireframes changes depending on context –Other deliverables, e.g., prototype –Accessibility of other disciplines (visual design, development)

+ Privileged & Confidential Page 20 + Relative Time Spent on Each Deliverable

+ Privileged & Confidential Page 21 + Wireframes – In Practice 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 whats above the fold Just the right amount of design –Not confused with visual design –But it looks good and sets some expectations on general layout

+ Privileged & Confidential Page 22 + Wireframes – In Practice Real vs. fake data –Use both –Important for comping / prototyping Illustration techniques to document design –Color –Multiple states –Exploded views –Interaction sequences Establish visual language / patterns to use consistently Use of humor / personal touches – keep the audience involved

+ Privileged & Confidential Page 23 + Considerations for RIAs / Web 2.0 Wireframes Move in and out of page view to show key interactions Dont try to document things that cant be documented well –Transitions / motion –Precise mouse interactions Use prototypes / demos to fill the gaps in wireframes (next topic) –The gaps can be bigger if a prototype exists too

+ Privileged & Confidential Page 24 + Design Comps Establish creative look and feel Communicate brand Same challenges as UX documentation –Motion / transitions –Multiple states –Dynamic content

+ Privileged & Confidential Page 25 +

+ Privileged & Confidential Page 26 +

+ Privileged & Confidential Page 27 +

+ Privileged & Confidential Page 28 +

+ Privileged & Confidential Page 29 + Prototype / Proof of Concept Take visual design to the next level Can act as internal proof of concept –Technical feasibility –Usability May or may not be throw-away Can be leveraged for user research Need to decide if the wireframe or prototype is the document of record

+ Privileged & Confidential Page 30 + References Book: Communicating Design by Dan Brown Yahoo Design Pattern Library developer.yahoo.com/ypatterns/