Download - Rich User Experience Documentation - Update
1
Rich User Experience Documentation
John Yesko
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
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.
4
Selected Clients
Financial Services
Government
Consumer
Manufacturing
Healthcare/ Transportation
Media &Communications
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!
6
The Premise
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
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
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
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
11
Documentation Practices
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
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
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
15
Concept Map
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
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
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
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
20
Concept Map
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
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?”
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
24
Wireframes
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
26
Wireframes
"Wireframing AJAX is a bitch.”Jeffrey Zeldman
Happy Cog &A List Apart
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
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
29
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>
31
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
33
34
“Coloring in wireframes”
35
Wireframes – In Practice
How have our wireframes changed?
Illustration techniques to document interactions:
• Color • Multiple states• Exploded views • Interaction sequences
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>
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
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
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>
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
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
42
Wireframes
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
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
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
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
46
Visual Design
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
48
Design Comps
• Establish creative look and feel
• Communicate brand
49
50
51
52
53
Design Comps – In Practice
• Communicate emotional element
• Extend interaction design documentation (beyond wireframes)
• Anticipate user-generated content
• Prominence depends on type of project
54
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.
56
57
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…
59
Prototypes
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
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…
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”
63
64
Avis Car Reservation iPhone App
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