1 rich user experience documentation john yesko. 2 about roundarch roundarch is a specialized...
TRANSCRIPT
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).
150 employeesin 3 offices
3
Selected Clients
Financial Services
Government
Consumer
Manufacturing
Healthcare/ Transportation
Media &Communications
4
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 Holiday campaign, 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 maintenance.
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.
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
Final product
User Experience Design Shift
Visual designand production
User experience design
Final productAll kinds of surprises
Then
Now
Visibility: Good
Visibility: ?
9
User Experience Design Shift
• More collaborative / simultaneous design processes (less sequential)
Information architecture >> interaction design >> visual design >> productionis no longer ideal
• 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
TedCopywriting
Unit One NineGame animation
External Resources
ScottCreative direction
11
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
12
Documentation Practices
13
This is…
• A discussion about a few key 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
• About tools
• About user research
• The only way to do things
15
User Experience Brief
16
User Experience Brief
• Early-stage strategic approach document
• Summarizes what we know so far– Output of Discovery process
• Used to gather consensus
• Varies in length depending on needs
17
User Experience Brief
May include:– High-level requirements– User research results– Personas / scenarios– Concept map (more later)– User flows– Organizing principles
18
User Experience Brief
Organizing Principles: Examples
Seamless User Experience“…Whether users drill down from the home page, or enter the site at a ‘deep’ URL, they should perceive that the entire experience flows easily from one interaction to the next. It should all ‘feel’ like [brand]…”
Optimize Geographic Area and Language Experience“…The current site uses a distributed approach, where each country/region has its own independent site(s), content, and products. Moving forward, the site design should allow smoother transitions among locales. For example, the site will employ ‘IP sniffing’ to predict the appropriate content and language for users according to their current geographic location…”
Filter Products by Differentiating Attributes / Facets“…Because of the vast number of available products on the site, users should be able to filter a set of products by product attributes (‘facets’) that are meaningful to them. For example, mobile phones might be filtered by feature, carrier, color, etc.—in addition to the standard category/subcategory drill-down…”
19
User Experience Brief – In Practice
• Sparks important discussions– At the right time to prevent surprises
• Easy to digest for executives
• Varies in length depending on needs– And audience’s attention span
• May quickly become out-of-date
• Sets the stage for detailed design– Justification for future decisions (“CYA”)
20
Concept Map
21
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
22
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
23
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
24
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
25
Concept Map
26
Concept Map
Golden Wish Ticket
SearsBest
Wishes
Gifts(Gifts Vertical)
Gift Registry
Wish Lists
Gift Blog
Gift Finder
Holidayat Sears
(“Holiday Hub”)
SeasonalYear-round
Shopping Cart
Heroes at HomeGift Cards
Landing for off-site general holiday promotions
Multiple links between, e.g. Gift Finder, Gift Cards
HolidayCatalog
Sears.com Home
Landing for off-site targeted
promotions
27
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?”
28
UX Brief and 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
29
Wireframes
30
Wireframes
• Still the core method of documentation– We spend the bulk of our time on them
Relative Time Spent on UX Deliverables
UX Brief Concept Map
SiteMap Wireframes
31
Wireframes
"Wireframing AJAX is a bitch.”Jeffrey Zeldman
Happy Cog &A List Apart
32
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
• Just the right amount of “design”– Not confused with visual design– But it looks good and sets some expectations on general layout
33
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
34
35
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>
36
37
<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
38
39
“Coloring in wireframes”
40
Wireframes – In Practice
How have our wireframes changed?
Illustration techniques to document interactions:
• Color • Multiple states• Exploded views • Interaction sequences
41
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>
42
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
43
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
44
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>
45
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
46
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
47
Wireframes
48
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
49
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
50
Wireframes – In Practice
• Multiple options of complexity
user interface specification (“functional spec”)
annotated wireframes
wireframes
CO
MP
LE
XIT
Y
• Role of wireframes changes depending on context– Other deliverables, e.g., prototype (more in a minute)– Access to of other disciplines (visual design, development)
51
52
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
53
Wireframes – Tools
• Wireframing tools
• Specification generator
• Interactive HTML prototypes
54
Wireframes – Tools
• Document templates – Reservoir of type, object, and table styles
• Page layouts for approximately 100 common page layouts– Wireframes– Color palette for a style guide– Component specs– Competitive two-by-two plots, etc.
• Symbol libraries for flows, maps, markers, callouts, frames, etc.
• Scriptable document starting points for when you create standard documents, or need to automate the starting point for a larger document
55
Visual Design
56
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
57
Design Comps
• Establish creative look and feel
• Communicate brand
58
59
60
61
62
Design Comps – In Practice
• Communicate emotional element
• Extend interaction design documentation (beyond wireframes)
• Anticipate user-generated content
• Prominence depends on type of project
63
64
[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.
65
66
67
68
Design Comps – In Practice
Same challenges as other types of UX documentation
• Motion / transitions• Multiple states• Dynamic content
But one step closer in fidelity…
69
Prototypes
70
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
71
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
72
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”
73
74
Avis Car Reservation iPhone App
75
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