+ Privileged & Confidential Page 1

+

Rich User Experience DocumentationJohn Yesko

+ Privileged & Confidential Page 2

+

Background

+ Privileged & Confidential Page 3

+

About MeBackground• 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 RoundarchRoundarch is a specialized consultancy focused on designing and building web sites 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, 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

StaticWebsites

(content)

DynamicWebsites

(content + applications)

Rich Internet Applications

and “2.0”

Paradigm Shift

Multiple events or content topics in one place

Transitions and motion are more important

Single state

per pageMultiplestates

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 they’re 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.0User Experience Brief, Concept Map

• Leaps from deliverable to deliverable are bigger

• Establish an approach so there aren’t as many surprises in each leap

+ Privileged & Confidential Page 17

+

Site Map• Establish scope

• Make sure we’re 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 what’s 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.0Wireframes

• Move in and out of “page” view to show key interactions

• Don’t try to document things that can’t 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 Librarydeveloper.yahoo.com/ypatterns/