Rich User Experience Documentation - Update

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).
200 employees in 3 offices

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.

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

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!

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 / interaction design Final product Visual design and production Final product All kinds of surprises Then Now Visibility: Good Visibility: ? Information architecture / interaction design

User Experience Design Shift
More collaborative / simultaneous design processes (less sequential)
Information architecture >> interaction design >> visual design >> production no longer works
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 (3) Ted Copywriting (1) Unit One Nine Game animation (2) External Resources Scott Creative direction

Documentation Practices

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

This is…
A discussion about a couple types of 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
The whole process (I’m skipping several steps)
About tools
The only way to do things

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
Wide variance in level of detail

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

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

Wireframes

Wireframes
Still the core method of documentation
We spend the bulk of our time on them
Relative Time Spent on UX Deliverables
(Pre-visual design)
UX Brief Concept Map (s) Site Map Wireframes
High-level requirements
User research results
Personas and scenarios
User flows
Organizing principles

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

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

“ Coloring in wireframes”

Wireframes – In Practice
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

Wireframes

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

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

Design Comps
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

Design Comps – In Practice
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…

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”

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

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

http://wunderlandgroup.com	98
http://www.wunderlandgroup.com	35
http://www.slideshare.net	17
http://www.e-presentations.us	2

Rich User Experience Documentation - Update

by John Yesko on Nov 20, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 152

Statistics

Rich User Experience Documentation - Update — Presentation Transcript