66
1 Rich User Experience Documentation John Yesko

Rich User Experience Documentation - Update

  • View
    5.818

  • Download
    0

Embed Size (px)

DESCRIPTION

Presentation to Chicago Interactive Design and Development Meetup, 17 Nov. 2009.

Citation preview

Page 1: Rich User Experience Documentation - Update

1

Rich User Experience Documentation

John Yesko

Page 2: Rich User Experience Documentation - Update

2

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 employeesin 3 offices

Page 3: Rich User Experience Documentation - Update

3

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.

Page 4: Rich User Experience Documentation - Update

4

Selected Clients

Financial Services

Government

Consumer

Manufacturing

Healthcare/ Transportation

Media &Communications

Page 5: Rich User Experience Documentation - Update

5

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!

Page 6: Rich User Experience Documentation - Update

6

The Premise

Page 7: Rich User Experience Documentation - Update

7

Page-based Paradigm

StaticWebsites

(content)

DynamicWebsites

(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

User Experience Shift

Multiplestates

per page

Page 8: Rich User Experience Documentation - Update

8

Information architecture /

interaction design

Final product

User Experience Design Shift

Visual designand production

Final productAll kinds of surprises

Then

Now

Visibility: Good

Visibility: ?

Information architecture /

interaction design

Page 9: Rich User Experience Documentation - Update

9

User Experience Design Shift

• More collaborative / simultaneous design processes (less sequential)

Information architecture >> interaction design >> visual design >> productionno longer works

• Longer conceptual / ideation process– More time establishing the foundation before we start making magic

• Expanded team – And / or more experienced team

Page 10: Rich User Experience Documentation - Update

10

Typical Team

ChrisAccount management

KarlProject management

JohnUser experience / IA

GaryTechnical lead

ZachVisual design

RobVisual design

ChrisHTML / front-end

ShaileshDevelopment

“Brazilians”Development (3)

TedCopywriting (1)

Unit One NineGame animation (2)

External Resources

ScottCreative direction

Page 11: Rich User Experience Documentation - Update

11

Documentation Practices

Page 12: Rich User Experience Documentation - Update

12

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

Page 13: Rich User Experience Documentation - Update

13

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

Page 14: Rich User Experience Documentation - Update

14

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

Page 15: Rich User Experience Documentation - Update

15

Concept Map

Page 16: Rich User Experience Documentation - Update

16

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

Page 17: Rich User Experience Documentation - Update

17

Concept Map

Life InterestsMusic, Video / Movies, Gaming, etc.

Product ExperiencesInteractive content, microsites, demos, etc.

Product CatalogTaxonomy / categories

ProductInformation

How to BuySupportContent

Cross-sell /Up-sell

EX

PL

OR

EP

RO

DU

CT

C

OR

EF

IN

D

Promotions and MerchandisingSales, product bundles, promotions, etc.

Product ExperiencesInteractive content, microsites,

demos, etc.

ProductInformation

How to BuySupportContent

Cross-sell /Up-sell

EX

PL

OR

EP

RO

DU

CT

C

OR

EF

IN

D Product CatalogTaxonomy / categories

Life InterestsMusic, Video / Movies, Gaming, etc.

BR

OW

SE

Page 18: Rich User Experience Documentation - Update

18

Concept Map

“I want it”

Consumer Products User Needs

Mobile Phones & Accessories

“I have it”I have a Motorola product and

need something moreI’m looking for a new

Motorola product

Mobile Phones

Home

Page 19: Rich User Experience Documentation - Update

19

Concept Map

Video Demo

The RAZR 2 Experience

Zoom & 360 View

Phone Menu Simulation

Details & Purchase

Product description

Main product photo

Product options and purchase

Accessories <or> Compatible Products

Resources

Support

Promotions <and/or> Packages

Product

Features

Specifications

Similar Products

Product Product Product

Reviews

Blog <and/or> Wiki

RAZR 2

More Photos / Colors

Interactive product experience / microsite

Search Go

Product Kernel

Browse

On-site search

Interactive product experience / microsite

Inbound links

Outbound linksRetailer / dealer finder

ZIP / Postal Code:Go

Shopping cart Checkout

ResourcesSupport

Product at the Center

Content shared between product Kernel and content’s permanent “home” in other sections

Search Go

Search engine

Online advertisingExternal links

Page 20: Rich User Experience Documentation - Update

20

Concept Map

Page 21: Rich User Experience Documentation - Update

21

Concept Map

Road TripGift

Face-Off

ProductCatalog

Gifts

Holiday HQ (Holiday Hub)

Seasonal

Year-round

Checkout

Multiple connections between

holiday experience and products

WishRegistry

Military Initiative

ShoppingTools

Home

Gift Detective

(Facebook)

Gift Detective

GNN

Give Together

(Facebook)Give

Together (Evite)

Give Together

Wireless

Personal Shopper

FacebookHoliday

Programs

Daily Deals

Community

Page 22: Rich User Experience Documentation - Update

22

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

Page 23: Rich User Experience Documentation - Update

23

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

Page 24: Rich User Experience Documentation - Update

24

Wireframes

Page 25: Rich User Experience Documentation - Update

25

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)

SiteMap Wireframes

• High-level requirements• User research results• Personas and scenarios• User flows• Organizing principles

Page 26: Rich User Experience Documentation - Update

26

Wireframes

"Wireframing AJAX is a bitch.”Jeffrey Zeldman

Happy Cog &A List Apart

Page 27: Rich User Experience Documentation - Update

27

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

Page 28: Rich User Experience Documentation - Update

28

Abbott MERIDIAMERIDIA Milestones Website

Low Fidelity Prototype

1

MERIDIA [logo]

MERIDIA MilestonesTM

Use and Safety Information U.S. Prescribing Information (.pdf) MERIDIA Home | meridia.net

Login

Member Login

Log in

Email address

Forgot your password?

Has your email changed?

Password

Not a Member?

If you’re currently takingMERIDIA, register nowfor a free membership!

Notes:

Body text is for placeholder purposes onl y.

Welcome to MERIDIA MilestonesTM

MERIDIA Milestones is a free weight management program for people who are currently takingMERIDIA.

Members of MERIDIA Milestones have access to great support features such as;

• Interactive Weight and BMI Tracker

• Personalized Menu Plans

• Recipes

• Helpful information and tips on healthy eating and exercis e

Start now by logging in or registering for a free membership at left!

Contact Us

© 2004 Abbott Laboratories, Inc. Privacy and Legal Information

The health information contained herein is provided for informational purposes only and is not intended to replace a discussion with a healthcare provider. All decisions regarding patient caremust be made with a healthcare provider and consider the unique characteristics of each patient.

The information contained in MERIDIA.net is intended for use only by United States residents. Countries outside of the UnitedStates may have regulatory requirements, data measurements, ormedical practices that may differ from those in the United States. Therefore, this information may not be appropriate for use outside the United States.

If you have any questions about MERIDIA that have not been answered on this site click to contact us or call Abbott Medical Information at

Page 29: Rich User Experience Documentation - Update

29

Page 30: Rich User Experience Documentation - Update

30

Shoes &Accessories

Home &Decorating

<Header>

<Footer>

Today’s Steal

Home page » Clearance

Shoes & Accessories

<Thumbnail image>

Deal Finder

Category: All

Search

SHOP BY

CATEGORY

Sandals

Pumps

Jewelry

Hats

More >

SHORTCUT TO

SAVINGS

New Arrivals

Almost Sold Out

Top Sellers

More >

Item Name<Price information>

Price: All

Size: All

Fashion & Swimwear Shoes & Accessories Home & Decorating

<Clearance header graphic/banner>

Today’s Steal

Fashion & Swimwear

<Thumbnail image>

SHOP BY

CATEGORY

Tops

Tunics

Shirts & Blouses

Sweaters

More >

SHORTCUT TO

SAVINGS

New Arrivals

Almost Sold Out

Top Sellers

More >

Item NameWas $39.00Now $18.99 50% off

Today’s Steal

<Thumbnail image>

SHOP BY

CATEGORY

Bedding

Home Accessories

Outdoor Living

Curtains

More >

SHORTCUT TO

SAVINGS

New Arrivals

Almost Sold Out

Top Sellers

More >

Home & Decorating

Item Name<Price information>

Fashion &Swimwear

<Promotional graphic withembedded links>

Page 31: Rich User Experience Documentation - Update

31

Page 32: Rich User Experience Documentation - Update

32

<Header>

Home page » Shopping Bag

<Thumbnail image>

Item Name Order Price Totaland Status Details Each Price

Boy Short Color: Black $26.00 $26.00627 A7167 Size: LIn stock Quantity: 1

1 Pc. Ring/Wrap Color: Turquoise $88.00 $88.00627 B3970 Size: 12Backordered Quantity: 1Estimated delivery 6/15/05View available sizes and colors

Rug Floral Color: Floral $25.00 $50.00627 W7183 Size: No sizeIn stock Quantity: 2

<Thumbnail image>

<Thumbnail image>

Edit

Buy Another

Remove

Merchandise total:

Estimated standard shipping:

Estimated stated shipping:

Total:

$164.00

$19.95

$20.00

$203.95

Shipping Information | Privacy Policy | Satisfaction Guaranteed

Are you registered with Spiegel.com?

Sign In and Checkout (Optional)If you've already registered to "My Account" with us, sign in and we will automatically enter your information for you.

Check Out as a Guest

Email:

Password:

Forgot your password?

Check Out as a GuestYou are not required to have an account to make purchases on our site. Simply click on the button below to proceed to Checkout. You will have the opportunity to register later as you are checking out.

<Footer>

Customer Service: 1.800.462.4789

Customer Service: 1.800.462.4789

Sign In and Checkout

Edit

Buy Another

Remove

Edit

Buy Another

Remove

Please check here if you have an Offer Code, Deferred Billing Code, Gift Cards, or Merchandise Certificates. You will enter it later in Checkout.

Our Editors Suggest:

<Thumbnail image>

<Product Name>

<Price information>

<Thumbnail image>

<Product Name>

<Price information>

<Thumbnail image>

<Product Name>

<Price information>

Continue Shopping

Check Out

Page 33: Rich User Experience Documentation - Update

33

Page 34: Rich User Experience Documentation - Update

34

“Coloring in wireframes”

Page 35: Rich User Experience Documentation - Update

35

Wireframes – In Practice

How have our wireframes changed?

Illustration techniques to document interactions:

• Color • Multiple states• Exploded views • Interaction sequences

Page 36: Rich User Experience Documentation - Update

36

Music

The seamless and integrated music experience—on the go

Multimedia

Create, capture and share photo and video

Multitask

Take control of your work and your world

Phone First

Truly cool style and function

Home > Mobile Phones & Accessories

<Shared promo area>

Mobile Phones

I’m looking for a new phone >

I have a Motorola phone,and need information >

Headsets & Accessories

I’m looking for a new accessory >

I have a Motorola accessory,and need information >

Music & Downloads

Explore downloads and digital products >

Music store >

Learn About...

Bluetooth 101: A World Without Wires Glossary of Mobile Phone Terms

Selecting a Wireless Plan for Your Family Trade-in and Upgrade Your Phone

Personalizing Your Mobile Device Choosing a Phone for an Aging Parent

<Promo><Promo>

New & Coming Soon

See it here before it hits the street.Register for new product alerts.

5

6

3

2

1

4

7

8 Shop Our Online Store

Great phones, plans, and packages!

9

More Topics >

Home About Motorola Developers Partners Resources Login | <U.S. Flag> English

Phones & Consumer Products Support Shopping Cart My Account

Search >

C O N S U M E R B U S I N E S S

Business Products & Services Solutions

Motorola <logo>

Page 37: Rich User Experience Documentation - Update

37

Music

Multimedia

Multitask

Phone First

Headsets & Accessories

Music & Downloads

Music

Multimedia

Multitask

Phone First

Mobile Phones

Music & Downloads

Multimedia

Multitask

Phone First

Mobile Phones

Headsets & Accessories

Music & Downloads

<Headsets & Accessories promo>Headsets & Accessories

<Mobile Phones promo>

Mobile Phones

Music

<Music promo>

Rollover Mobile Phones

Rollover Headsets & Accessories

Rollover Music

Page 38: Rich User Experience Documentation - Update

38

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 ZeldmanHappy Cog &A List Apart

Page 39: Rich User Experience Documentation - Update

39

Current Mobile Phones

68 Matching Products Compare Selected Items

Add to Comparison

C139

Add to Comparison

C168i

Add to Comparison

C261

Add to Comparison

E816

Add to Comparison

i265

Add to Comparison

i275

Add to Comparison

RAZR2

Add to Comparison

MING

Add to Comparison

PEBL

Add to Comparison

RAZR Maxx Ve

Add to Comparison

RAZR V3i

Add to Comparison

RAZR V3m

Add to Comparison

RAZR V3r

Add to Comparison

RAZR V3t

Add to Comparison

RIZR

<Continue with all phones that meet filter criteria>

Add to Comparison

C290

Add to Comparison

SLVR L7c

Add to Comparison

V235

Add to Comparison

W315

Home > Mobile Phones, Accessories & Downloads > Current Mobile Phones

FEATURES

All

Looking for support or information on your current phone?

Compare Selected Items

4 5

2

1

6

Music Player

Hi-Res Photos

Video Capture & Play

PDA / Smart Phone

Push-To-Talk

Basic Talk and Text

SERI ES

All

PEBL

Q

RAZR

RIZR

ROKR

SLVR

COLORS & COLLECTI ONS

All

Black

Silver/Gray

Red

Gold

Pink

Blue

Green

Yellow/Gold

Purple

Product RED

Dolce & Gabbana

Miami Ink

CARRI ERS / NETWORKS

All

Alltel (CDMA)

AT&T (GSM)

Sprint Nextel (CDMA)

T-Mobile (GSM)

Verizon (CDMA)

U.S. Cellular (CDMA)

Unlocked GSM

3

Filter current phones by...

Coming Soon

Reset All Filters

1

Home About Motorola Developers Partners Resources Login | <U.S. Flag> English

Phones & Consumer Products Support Shopping Cart My Account

Search >

C O N S U M E R B U S I N E S S

Business Products & Services Solutions

Motorola <logo>

Page 40: Rich User Experience Documentation - Update

40

FEATURES

All

Music Player

Hi-Res Photos

Video Capture & Play

PDA / Smart Phone

Push-To-Talk

Basic Talk and Text

SERI ES

All

PEBL

Q

RAZR

RIZR

ROKR

SLVR

COLORS & COLLECTI ONS

All

CARRI ERS / NETWORKS

All

Alltel (CDMA)

AT&T (GSM)

Sprint Nextel (CDMA)

T-Mobile (GSM)

Verizon (CDMA)

U.S. Cellular (CDMA)

Indicates rollover position

Unlocked GSM

FEATURES

All

SERI ES

All

PEBL

Q

RAZR

RIZR

ROKR

SLVR

COLORS & COLLECTI ONS

All

CARRI ERS / NETWORKS

All

Alltel (CDMA)

AT&T (GSM)

Sprint Nextel (CDMA)

T-Mobile (GSM)

Verizon (CDMA)

U.S. Cellular (CDMA)

Unlocked GSM

Smart phones include multi-tasking features like a Web browser, email, and calendar.

<All Feature icons>

<PDA / Smart Phone icon>

FEATURES

All

Music Player

Hi-Res Photos

Video Capture & Play

PDA / Smart Phone

Push-To-Talk

Basic Talk and Text

SERI ES

All

PEBL

Q

RAZR

RIZR

ROKR

SLVR

COLORS & COLLECTI ONS

All

CARRI ERS / NETWORKS

All

Alltel (CDMA)

AT&T (GSM)

Sprint Nextel (CDMA)

T-Mobile (GSM)

Verizon (CDMA)

U.S. Cellular (CDMA)

Unlocked GSM<All Feature

icons>

FEATURES SERI ES

All

COLORS & COLLECTI ONS

All

CARRI ERS / NETWORKS

All

Alltel (CDMA)

AT&T (GSM)

Sprint Nextel (CDMA)

T-Mobile (GSM)

Verizon (CDMA)

U.S. Cellular (CDMA)

Unlocked GSM<ROKR image>

The ROKR Series is all about music—for anyone with an active lifestyle.

All

Music Player

Hi-Res Photos

Video Capture & Play

PDA / Smart Phone

Push-To-Talk

Basic Talk and Text

FEATURES SERI ES

All

PEBL

Q

RAZR

RIZR

ROKR

SLVR

COLORS & COLLECTI ONS

All

CARRI ERS / NETWORKS

All

Alltel (CDMA)

AT&T (GSM)

Sprint Nextel (CDMA)

T-Mobile (GSM)

Verizon (CDMA)

U.S. Cellular (CDMA)

Unlocked GSM<Green

swatch with all available shades of green>

All

Music Player

Hi-Res Photos

Video Capture & Play

PDA / Smart Phone

Push-To-Talk

Basic Talk and Text

FEATURES SERI ES

All

PEBL

Q

RAZR

RIZR

ROKR

SLVR

COLORS & COLLECTI ONS

All

CARRI ERS / NETWORKS

All

Alltel (CDMA)

AT&T (GSM)

Sprint Nextel (CDMA)

T-Mobile (GSM)

Verizon (CDMA)

U.S. Cellular (CDMA)

Unlocked GSMAll

Music Player

Hi-Res Photos

Video Capture & Play

PDA / Smart Phone

Push-To-Talk

Basic Talk and Text

PEBL

Q

RAZR

RIZR

ROKR

SLVR

Music Player

Hi-Res Photos

Video Capture & Play

PDA / Smart Phone

Push-To-Talk

Basic Talk and Text

Unlocked phones do not have any specific carrier software and work with all GSM carriers.

Black

Silver/Gray

Red

Gold

Pink

Blue

Green

Yellow

Purple

Product RED

Dolce & Gabbana

Miami Ink

Black

Silver/Gray

Red

Gold

Pink

Blue

Green

Yellow

Purple

Product RED

Dolce & Gabbana

Miami Ink

Black

Silver/Gray

Red

Gold

Pink

Blue

Green

Yellow

Purple

Product RED

Dolce & Gabbana

Miami Ink

Black

Silver/Gray

Red

Gold

Pink

Blue

Green

Yellow

Purple

Product RED

Dolce & Gabbana

Miami Ink

Black

Silver/Gray

Red

Gold

Pink

Blue

Green

Yellow

Purple

Product RED

Dolce & Gabbana

Miami Ink

Black

Silver/Gray

Red

Gold

Pink

Blue

Green

Yellow

Purple

Product RED

Dolce & Gabbana

Miami Ink

Page 41: Rich User Experience Documentation - Update

41

Prepared by:

Date / Version:

Document:

John Yesko

© 2008 Roundarch, Inc.

April 20, 2009

Documents & Reports +

1.07

Page: 16 21ofNew Report - Scheduling

Northern Trust – Private Passport Phase 2

Functional Notes

16

Select Frequency

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency: Clear Scheduling

Daily

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency: Clear SchedulingWeekly

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency:

Run Day:

Clear Scheduling

Select Day of Week

Monthly Clear Scheduling

Select Day

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency:

Run Date:

Monthly Clear Scheduling

Specific Business Day

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency:

Run Date:

Run Day:

One Time

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency:

Run Day:

Clear Scheduling

Report will run the morning of this date, using the previous business day’s account data.

Monthly Clear Scheduling

Specific Calendar Day

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency:

Run Date:

Run Day:

1. Not Scheduled (Default) 2. One Time

3. Daily 4. Weekly

5a. Monthly 5b. Monthly 5c. Monthly

Quarterly Clear Scheduling

Select Day

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency:

Run Date:

Quarterly Clear Scheduling

Specific Business Day

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency:

Run Date:

Run Day:

Quarterly Clear Scheduling

Specific Calendar Day

Scheduling (Optional):

Schedule your report to run automatically in the future—one time or recurring.

Frequency:

Run Date:

Run Day:

6a. Quarterly 6b. Quarterly 6c. Quarterly

Report will run on this business day of the month following quarter end.

These options are displayed after the user clicks the “Specify Schedule” button on the New Report page.

Schedule is active

Report will run on this business day of the month following quarter end.

1 Clear SchedulingClears all fields in the Scheduling block, which remains open.

Schedule is activeChecked by default. When checked, the report will run as scheduled. When not checked, the report will not run as scheduled.

Alert me when report is availableChecked by default. Once the report has been generated, the user receives an alert in the Alerts & Message Center and the user’s default email, as specified in his/her preferences. See Alerts & Messages requirements for more details.

1

2

2

Alert me when report is available

Schedule is active Alert me when report is available

Schedule is active Alert me when report is available

Schedule is active Alert me when report is available

Schedule is active Alert me when report is available

16th Calendar Day

Specific Business Day

Specific Calendar Day

First Business Day

First Calendar Day

Last Business Day

Last Calendar Day

Middle Business Day

Middle Calendar Day

Schedule is active Alert me when report is available Schedule is active Alert me when report is available

Schedule is active Alert me when report is availableSchedule is active Alert me when report is available

Schedule is active Alert me when report is available

Specific Business Day

Specific Calendar Day

3

3

Page 42: Rich User Experience Documentation - Update

42

Wireframes

Page 43: Rich User Experience Documentation - Update

43

Gift Ideas (Optional)

Looking for a gift idea to share with the group, or not sure what your goal gift amount should be? Take look at some suggestions below.

Gift Category: Sports & Fitness

Next Step >< Back Save for Later

Goal Gift Amount: $ .00

Total contributions you’d like to gather for this eGift card.

1: Choose a recipient 2. Plan your group gift 3. Invite contributors 4. Review and send

1

6

You can make this any amount!

< S I T E H E A D E R >

Help

TreadmillAvg. cost: $500 - $900

Select

Select

DumbbellsAv. cost: $50 - $300

Athletic ShoesAvg. cost: $50 - $70

Select

Selection populates gift ideas

Selected Gift Ideas

Selected items displayed here; become part of invitation

Select

Athletic Shoes

Average cost: $50 - $70

Athletic shoes make a great gift for anyone who is active. We carry a wide assortment of athletic shoes for running, training, and walking.

Some people wear athletic shoes inappropriately while on stage, such as Steve Jobs and Jerry Seinfeld. Shoes would be a good gift for them too, if they weren’t already billionaires.

Shop Shoes

Rollover launches popup explaining appeal of item as a gift

X Close

Fitness & Sports Kitchen

Mixing Bowls xTreadmill x

Athletic Shoes x

Total Average Cost:

$580……….....$820…..……..$1020

Choose gift ideas to show your contributors, and to update your goal gift amount.

2

3

5

4

Page 44: Rich User Experience Documentation - Update

44

Total File Size:

Wastebasket

Year 2007 tax info

Trust documents

Rolodex-personal.xls

Important Stuff

My Will.doc

Art Collection

All_About_My_Yacht

Asset List.pdf

Name

12-Feb-2008

12-Feb-2008

13-Feb-2008

14-Feb-2008

14-Feb-2008

15-Feb-2008

15-Feb-2008

15-Feb-2008

Last Updated Date

Folder

Folder

XLS

Folder

DOC

Folder

Folder

PDF

Type

Select action

File Cabinet

Check item to:

1235k

235k

-

-

134k

-

24k

-

-

68k

Size

jt134

HotCPA

jt134

jt134

Dave-o

rbc34

jt134

jt134

Last Updated By

Go

?X?

Expand All | Collapse All Upload File New Folder

Upload File

Upload to Folder:

File(s) to Upload:

Select Folder

?X

New Folder

Folder Name:

Create Cancel

Upload Cancel

Browse

Select action

Delete

Move To…

Rename

Set Purge Date

Delete

Are you sure you want to delete the <folder or file> “Asset List.pdf”?

Delete Cancel

Move

Move Cancel

Select Folder

Move to:

Rename

Save Cancel

Asset List.pdf

New Name:

Set Purge Date

Set Date Cancel

Set the date on which you want this file moved to the Wastebasket.

Date

Rename

Upload File

Upload to Folder:

File(s) to Upload: Rename:

Important Stuff

All My Yachts.doc

?X

Upload File(s) Cancel

Browse All Our Yachts.doc

Choose Another File

Upload File

Upload to Folder:

File(s) to Upload: Rename:

Important Stuff

All My Yachts.doc

?X

Upload File(s) Cancel

Browse All My Yachts and Horses.doc

Rename Ferarri photo.jpg Browse

Choose Another File

Page 45: Rich User Experience Documentation - Update

45

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

Page 46: Rich User Experience Documentation - Update

46

Visual Design

Page 47: Rich User Experience Documentation - Update

47

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

Page 48: Rich User Experience Documentation - Update

48

Design Comps

• Establish creative look and feel

• Communicate brand

Page 49: Rich User Experience Documentation - Update

49

Page 50: Rich User Experience Documentation - Update

50

Page 51: Rich User Experience Documentation - Update

51

Page 52: Rich User Experience Documentation - Update

52

Page 53: Rich User Experience Documentation - Update

53

Design Comps – In Practice

• Communicate emotional element

• Extend interaction design documentation (beyond wireframes)

• Anticipate user-generated content

• Prominence depends on type of project

Page 54: Rich User Experience Documentation - Update

54

Page 55: Rich User Experience Documentation - Update

55

[GLOBAL HEADER ]

Heroes at Home Wish Registry

Illinois

200 stories from 14,987 families

Holiday Home | Heroes at Home | The Search for the Golden Wish Ticket | Sears Best Wishes

Colorado

When we talked to military families, these are the kinds of stories we heard.

A Christmas to Remember for Our Kids

Loving the Sights and Sounds of Christmas

Spread the Word

Get Your Heroes at Home Badge

Tell a FriendSpread the word by forwarding this page.

Continue

Separate multiple email addresses with commas

Even More Ways You Can Help

Enter email address(es)

What the Military and Their Families Are Wishing For

We asked military families what items they need this holiday season, and here’s what they told us:

Donate Now

Help fulfill the holiday wishes of military families by contributing here.

Amount: $ .00 Proceed With Donation

Post a Message of Support

Texas Idaho Michigan California Maine Nevada Illinois New York Virginia Iowa

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

<Story intro>...

1

23

4

5

6

7

[CONTINUED BELOW]

Version of holiday navigation without “Don’t Just Give a Gift , Grant a Wish”

DONATIONS MADE TO THE WISH REGISTRY ARE NOT TAX DEDUCTIBLE AND WILL BE USED TO PURCHASE SEARS GIFT CARDS WHICH SHALL BE DISTRIBUTED EQUALLY TO ALL REGISTERED FAMILIES.

Page 56: Rich User Experience Documentation - Update

56

Page 57: Rich User Experience Documentation - Update

57

Page 58: Rich User Experience Documentation - Update

58

Design Comps – In Practice

Same challenges as other types of UX documentation

• Motion / transitions• Multiple states• Dynamic content

But one step closer in fidelity…

Page 59: Rich User Experience Documentation - Update

59

Prototypes

Page 60: Rich User Experience Documentation - Update

60

PrototypesV

isua

l Fid

elity

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

Page 61: Rich User Experience Documentation - Update

61

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…

Page 62: Rich User Experience Documentation - Update

62

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”

Page 63: Rich User Experience Documentation - Update

63

Page 64: Rich User Experience Documentation - Update

64

Avis Car Reservation iPhone App

Page 65: Rich User Experience Documentation - Update

65

More About Documentation

• Book: Communicating Design by Dan Brown, EightShapes

• IxDA Discussion Boardwww.ixda.org/discuss.php?post=37076

• UIE Podcast: “Roughing it with Interactive Prototypes”www.uie.com

Page 66: Rich User Experience Documentation - Update

66

Thank You

John [email protected]: @jyesko

[email protected]