+
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 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
Static
Websites
(content)
Dynamic
Websites
(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 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 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.0
User 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.0
Wireframes
•
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 Library
developer.yahoo.com/ypatterns/
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο