Rich User Experience Documentation

rawsulkyInternet και Εφαρμογές Web

10 Δεκ 2013 (πριν από 3 χρόνια και 5 μήνες)

67 εμφανίσεις

+

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/