+ privileged & confidential page 1 + rich user experience documentation john yesko
TRANSCRIPT
+ Privileged & Confidential Page 1
+
Rich User Experience DocumentationJohn 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
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.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/