Rich User Experience Documentation John Yesko

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

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).

Selected Clients Financial Services Government Consumer Manufacturing Healthcare/ Transportation Media & Communications

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.

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!

Now

User Experience Lead at Roundarch

Responsible for user experience design on large-scale Web projects

The Premise

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

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: ?

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

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

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

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

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

Documentation Practices

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

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

This is not … A comprehensive discussion of every documentation technique in existence About tools About user research The only way to do things

A comprehensive discussion of every documentation technique in existence

About tools

About user research

The only way to do things

User Experience Brief

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

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

User Experience Brief May include: High-level requirements User research results Personas / scenarios Concept map (more later) User flows Organizing principles

May include:

High-level requirements

User research results

Personas / scenarios

Concept map (more later)

User flows

Organizing principles

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…”

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…”

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”)

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”)

Concept Map

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

Big picture approach

Relationships between ideas or concepts

Intended to generate more discussion, and gain early consensus

Not usually a “final” design document

Concept Map

Concept Map

Concept Map

Concept Map

Concept Map

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?”

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?”

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

Leap from start to finish is much bigger.

so…

We establish our approach early on, so there aren’t as many surprises.

Wireframes

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

Still the core method of documentation

We spend the bulk of our time on them

Relative Time Spent on UX Deliverables

Wireframes "Wireframing AJAX is a bitch.” Jeffrey Zeldman Happy Cog & A List Apart

"Wireframing AJAX is a bitch.”

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

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

“ Coloring in wireframes”

“ Coloring in wireframes”

Wireframes – In Practice How have our wireframes changed? Illustration techniques to document interactions: Color Multiple states Exploded views Interaction sequences

How have our wireframes changed?

Illustration techniques to document interactions:

Color

Multiple states

Exploded views

Interaction sequences

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

"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."

Wireframes

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 )

Multiple options of 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 )

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

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

Wireframes – Tools Wireframing tools Specification generator Interactive HTML prototypes

Wireframing tools

Specification generator

Interactive HTML prototypes

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

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

Visual Design

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

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

Design Comps Establish creative look and feel Communicate brand

Establish creative look and feel

Communicate brand

Design Comps – In Practice Communicate emotional element Extend interaction design documentation (beyond wireframes) Anticipate user-generated content Prominence depends on type of project

Communicate emotional element

Extend interaction design documentation (beyond wireframes)

Anticipate user-generated content

Prominence depends on type of project

Design Comps – In Practice Same challenges as other types of UX documentation Motion / transitions Multiple states Dynamic content But one step closer in fidelity…

Same challenges as other types of UX documentation

Motion / transitions

Multiple states

Dynamic content

But one step closer in fidelity…

Prototypes

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

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…

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…

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”

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”

Avis Car Reservation iPhone App

Avis Car Reservation iPhone App

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

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

John Yesko www.yesko.com [email_address] Twitter: jyesko Thank You Roundarch www.roundarch.com [email_address] www.yesko.com/stc

John Yesko

www.yesko.com

[email_address]

Twitter: jyesko