Index
20 Percent Time policy, Google, 172
A
About section, StarTrekMovie.com, 155–156
about-us framework, 123–143
context of use, 125
description, 124
design criteria, 139–143
elements, 126–139
client list, 130–131
company story, 126–129
contact section, 136–139
financial status, 129–130
jobs, 134–136
press releases/news, 133–134
team profile, 131–132
task flow, 125–126
as trust builder, 124, 140–141
About Us section, travel-guide site, 189
account-management framework, 42, 47, 170, 188, 189
accounts, requiring users to create, 103
action, encouraging, 119–120
Adam movie site, 149
Adaptive Path, 75
Adobe Photoshop, 194
Adobe Systems
company video, 136
contact information, 137
job information, 135–136
press room, 133–134
advanced search, 89–92
A List Apart e-zine, 132
Careers page, 123
company information, 123
exposing taxonomy for, 73–74
item identifiers, 55
keyword library, 99
Quick Search function, 91
search feature, 81–83
tagging products in, 73–74, 98–99
and word-of-mouth marketing, 161
An Event Apart, 132
anti-patterns, 68
Apple
iPhone, 164
Jobs section, 134–135
Keynote, 194
applications, anatomy of successful, 9
Article Skimmer, NYTimes.com, 72–73
Authority principle, 110
availability, item, 61
B
Backpack, 192
Ballpark invoicing application, 35
Bed Bath & Beyond, 88
before-and-after images, 177
Berkun, Scott, 178
About Us information, 125
category pages, 49
checking prices at, 60
Connect section, 142
department pages, 51
gallery pages, 49
guided links, 64
MAP policy, 60
multiple category levels, 66
search department pages, 86
uniquely identified content, 82
blank slate, 112–114
Blinksale
benefits/features info-graphics, 107
investment breakdown, 109
user-account requirement, 103
value proposition, 105–106
Blue Flavor, 176
bookmarking content, 69
brainstorming sessions, 178, 187
brand trust, establishing, 140–141. See also trust builders
building blocks, interface, 4, 13, 18, 195–196
C
calendars, pop-up, 8
call centers, 141, 198. See also customer service
call-to-action statements, 111–112
cast-and-crew information, movie site, 155–156
catalog framework, 44–74
context of use, 46
co-requisites, 47
description, 45
design criteria, 65–74
elements, 48–65
category page, 48–52
content page, 57–62
gallery page, 52–57
guided links, 62–65
task flow, 47
catalog sites
and account-management framework, 47
category pages for, 48–52
content pages for, 57–62
design criteria for, 65–74
exposing taxonomy for, 73–74
gallery pages for, 52–57
hiding prices in, 59
preventing incorrect clicks in, 67
selecting items in, 45, 52, 66–67
supporting exploration of, 67–73
category pages, 48–52
cell-phone wallpaper, 164
checkout process, commerce site, 171
Children of Invention movie site, 156–157
Citibank, 56
client lists, 130–131
client testimonials. See testimonials
Clinton-Macomb Public Library, 68
Cluetrain Manifesto, The, 141
code, reusable, 8
Code section, component, 27
collaboration tool, 101
college sites, 179
coloring pages, 164
commerce sites
activities supported by, 46
catalog model used by, 45
frameworks for, 170–171
image galleries for, 60
typical subsystems for, 183
Communicating Design, 15
company news/press releases, 133–134
company stories, 126–129
Comparative Usability Evaluations (CUE), 2, 3
component documents, 24–27
component libraries, 27–28, 191
component names, 25
components, 24–28
defined, 24
development of, 15
elements of, 25–27
purpose of, 8
resources, 201–202
standardization of, 15–16
supplying various versions of, 27
version numbers for, 25
vs. frameworks, 11
vs. patterns, 24–25
configurator pattern, 61
consulting companies, 130
consumer electronics sites, 59
contact forms, 139
contact sections, 136–139
content, uniquely identified, 81–84
content pages
bookmarking, 69
catalog, 57–62
movie site, 163
content tags, 73–74
context
breaking into components, 186
importance of, 184
for mortgage application, 185–186
underlying elements of, 184–185
understanding gamut of possible, 187
context of use
for design patterns, 20
for frameworks, 31
for specific frameworks
about-us framework, 125
catalog framework, 46
movie-site framework, 150
search framework, 77–79
sign-up framework, 103–104
“Contingency Q&A” document, 178
conversations, markets as, 141
co-requisites
for catalog framework, 47
for design-pattern documents, 21
for framework documents, 32
for log-in element, 21
cost of frustration, 197–201
cost-reduction techniques, 177
Criteria section, framework document, 33–36
critics, movie, 159
Crumlish, Christian, 15
CUE-2, 2–3
CUE-4, 3
customer reviews. See review feature
customer-satisfaction surveys, 106
customer service, 139, 141. See also call centers
customer testimonials. See testimonials
customizable home pages, 119–120
custom shapes, 194
D
Danzico, Liz, 36
decision-making tool, 101
Definition section, component, 25–26
descriptions, pattern, 19
Description section, framework document, 31
design criteria
for about-us framework, 139–143
applying, 190–191
for catalog framework, 65–74
for movie-site framework, 158–165
for search framework, 97–100
for sign-up framework, 116–122
Design Criteria section, framework document, 33–36
“Designing for the Scent of Information” report, 84
Designing Interfaces pattern library, 23
Designing with Web Standards, 132
design-pattern documents, 18–21
design patterns, 17–24. See also patterns
as building blocks of the web, 18
context of use for, 20
co-requisites for, 21
defined, 17
elements of, 18–21
inspiration for, 7
limitations of, 28–29
and Reuse Trinity, 16
search framework, 80–84
design-priority document, 176
design tools, 194
desktop wallpaper images, 164
details pages, catalog, 57–62
development costs, reducing, 177
Discovery Channel, 46
Discovery Store, 46–47
distributing workload, 179–180
Don’t Make Me Think!, 110
downloadable desktops, 164
Downloading Nancy movie site, 152
Driven to Kill movie site, 149
Drop.io, 120–121
E
e-commerce catalogs, 47. See also catalog sites
Eddie Bauer, 65
edge conditions, 177–178
elements
about-us framework, 126–139
catalog framework, 48–65
component, 25–27
design pattern, 18–21
framework (See framework elements)
movie-site framework, 150–158
search framework, 80–97
sign-up framework, 104–116
Elements section, framework document, 33
employment information, 134–136
expectations
and investment-breakdown element, 118
for search function, 88
and usability testing, 107
F
facets, 92
filters, 92–95
financial-status information, 129–130
Flickr, 118
folksonomy, 74
forms
contact, 139
registration, 35, 114–116, 120–122
validating, 116
Fox, Chiara, 75
framework documents
elements of, 29–36
framework elements
about-us framework, 126–139
client list, 130–131
company story, 126–129
contact section, 136–139
financial status, 129–130
jobs, 134–136
press releases/news, 133–134
team profile, 131–132
catalog framework, 48–65
category page, 48–52
content page, 57–62
gallery page, 52–57
guided links, 62–65
movie-site framework, 150–158
cast and crew, 155–156
splash page, 151–153
synopsis, 156–158
teaser/trailer, 153–155
search framework, 80–97
Advanced Search, 89–95
pagination, 95–97
Quick Search, 80–84
search results page, 85–89
sign-up framework, 104–116
blank slate, 112–114
call to action, 111–112
investment breakdown, 106–110
registration form, 114–116
testimonials, 110–111
value proposition, 104–106
framework libraries, 39–41, 179–180, 191, 192, 202
framework project, 181–191
frameworks. See also interaction design frameworks
about us (See about-us framework)
building with, 183–191
catalog (See catalog framework)
for commerce sites, 170–171
crafting, 169–180
documenting, 11, 169–170, 175–179
as guidelines for system design, 13
identifying problem to be solved by, 170–171
and innovation, 39
learning to use, 195
making them practical, 191–194
as method of reverse-engineering, 34, 196
for movie sites (See movie-site framework)
as next logical evolution of design patterns, 29
purpose of, 6
qualities of, 36–39
related, 32
resources, 201–202
and Reuse Trinity, 16
search (See search framework)
seminars, 202
as set of design patterns, 9
sign-up (See sign-up framework)
as standard design tool, 169
as substitute for interaction designers, 41
travel-guide project, 182–191
validating, 171–172
vs. components, 11
writing, 175–179
framework toolkit, 168–180
distributing workload, 179–180
documenting framework, 175–179
identifying problem, 170–171
observing your own industry, 174–175
touring sites for sources, 171–175
Freshbooks, 103
friction, 197
frustration, cost of, 197–201
fulfillment details, 61
G
category pages, 65
content pages, 58
gallery pages, 52
Quick Look option, 71
search gallery, 85
store locator, 138–139
uniquely identified content, 82
generic patterns, 23
Get Satisfaction, 143
“girls under trees” phenomenon, 179–180
20 Percent Time policy, 172
filtering options, 94–95
as most trusted search tool, 75
pagination pattern, 95–96
graphics tools, 194
GreenCine, 103
grocery shopping, 44–45
guided links, 62–65
H
Halloween 2 movie site, 161–162
Happy Cog Studios, 131–132
higher-education sites, 179
Hoekman, Robert
frameworks seminars, 202
interaction design frameworks workshop, 158, 162
introductory article on frameworks, 201
personal framework library, 192
personal website, 202
home pages
as category pages, 48
customizable, 119–120
Hotel Penn, 3
H&R Block, 103
Hsieh, Tony, 141–142
Hurt Locker movie site, 154–155
I
ideas, generating and organizing, 101
identifiers, item, 82
iGoogle, 119
iHotelier, 3
image galleries, 60
images, gallery page, 55
immediate engagement, 112–114, 119, 120
infinite-scroll design pattern, 5–6, 96
information architecture, 31, 38, 46, 97, 188
innovation
and frameworks, 39
questions about, 179
vs. standards, 5
vs. usability, 5
interaction design frameworks, 28–42. See also frameworks
as building blocks of usable design, 13, 195–196
elements of, 29–36
introductory article on, 201
workshop, 158
interactive prototypes, 176
interface building blocks, 4, 13, 18, 195–196
investment breakdown, sign-up framework, 106–110, 118
Investor Relations section, TimeWarner.com, 129
Investors section, Target.com, 129
invoicing application, 35
iPhone wallpaper, 164
item availability, 61
item images, gallery page, 55
item order, gallery page, 57
J
JetBlue Airways, 141
Jobs section, 134–136
Join Now button, 114
K
Keynote, 194
Krug, Steve, 110
L
lazy registration, 112
Learn More page, 103, 104, 109
libraries
component (See component libraries)
documenting, 41
framework (See framework libraries)
pattern (See pattern libraries)
and reuse strategies, 6
tools for creating, 41
types of, 6
updating, 12
library catalog systems, 68, 173–174
library sites, 46, 64, 68–70, 173–174
Liking principle, 110
log-in element
context for, 20
co-requisites for, 21
describing, 19
lost-password option, 170, 189
M
machine-readable cataloging format, 173
MARC format, 173
marketing, word-of-mouth, 140, 161–162
Merrill Lynch, 125
metadata, 98
Meyer, Eric, 132
Microsoft
PowerPoint, 194
Visio, 194
mind-mapping application, 101–102
Minimum Available Pricing policy, 59, 60
Modular Web Design, 15
mortgage quotes, 185–186
Motorola gallery pages, 54, 55
movie critics, 159
movie merchandise, 164
movie-site framework, 145–165
context of use, 150
description, 147–150
design criteria, 158–165
elements, 150–158
cast and crew, 155–156
splash page, 151–153
synopsis, 156–158
teaser/trailer, 153–155
movie sites. See also movie-site framework
as brochureware, 147
design criteria for, 158–165
engaging users of, 163–164
predictability of, 150
stand-alone vs. network, 148–150
supporting lifestyle integration via, 164–165
and Twitter/Facebook, 161
and word-of-mouth marketing, 161–162
movie trailers, 145–147, 150, 153–155, 160, 162
My Account link, 125
My Sister’s Keeper movie site, 164
MySpace, 162
Myths of Innovation, The, 178–179
My Yahoo, 119
N
negative press, 133
Neil, Theresa, 15
Netflix, 103
network movie sites, 148–149
news, company, 133–134
Next/Previous buttons, 95–96
niche-specific frameworks, 130, 145, 174
Nine Inch Nails, 162
Article Skimmer, 72–73
category pages, 50
content pages, 58–59
item identifiers, 55
O
Office Max, 135
Once movie site, 149
online reservations, 198–199
online retailers, 38, 49, 141, 174. See also commerce sites
order management, 171
organizing ideas, 101
P
page views, 4
pagination patterns, 17, 95–97
Patent and Trademark Office, 82
pattern co-requisites, 21
pattern descriptions, 19
pattern documents, 18–21
Pattern Language: Towns, Building, Construction, A, 7
pattern libraries, 21–24
defined, 21
distributing workload for, 179
major difficulty in developing, 24, 193
personal, 192
URLs for public, 23
pattern names, 19
patterns. See also design patterns
advocates of, 15
describing, 19
evolution of, 15
generic, 23
inspiration for, 7
leveraging, 23
making them practical, 191–194
naming, 19
purpose of, 7
resources, 201–202
and Reuse Trinity, 16
turning into stencils, 194
vs. components, 24–25
Peachpit Press, 132
PearBudget, 115
Perfetti, Christine, 2
phone support, 139. See also call centers
Photoshop, 194
Photoshop Express, 114
Plymouth State University, 64
pogo-sticking, 55–56
Polaris system, 68–69, 173–174
pop-up calendars, 8
portfolio sites, 46
postcards, 164
posters, 164
PowerPoint, 194
press quotes, 159–160
press releases, 133–134
Previous/Next buttons, 95–96
prices, hiding, 59
print campaigns, viral, 162
problem/solution pairs, 172–173
problem-solving tool, 101
product reviews. See review feature
profiles
team, 131–132
project-management site, 113
project requirements, 196
public framework library, 39–41, 202
Q
Qualified Quick Search, 90–92
Quick Search design pattern, 80–84, 89–92
quotes, 159–160. See also testimonials
R
recommendations, 61–62, 110, 141
Register Now button, 41–42
registration, site, 103, 111, 112, 199. See also sign-up framework
registration forms, 35, 114–116, 120–122, 190
related frameworks, 32
Related section, framework document, 32
reservations, online, 198–199
resources, 201–202
reusable code, 8
review feature, 61–62, 110, 141, 161
ringtones, 164
Robinson, Keith, 176
S
Sample section, component, 27
satisfaction surveys, 106
Scott, Bill, 15
screencasts, 113–114
Scriblio, 64–65
search department pages, 51, 86
search framework, 75–100
context of use, 77–79
description, 76–77
elements, 80–97
Advanced Search, 89–95
pagination, 95–97
Quick Search, 80–84
search results page, 85–89
task flow, 79–80
search function
advanced vs. quick, 89–92
challenges of, 76
conditions to be met by, 84
filters, 92–95
how to improve, 97
and non-uniquely identified content, 82–84
pagination patterns, 95–97
possible outcomes for, 87
providing hints/tips for, 88–89
and trigger words, 84
and uniquely identified content, 81–83
user expectations for, 88
vs. guided links, 63
vs. supporting exploration, 67–68
search galleries, 85–86
search logs, 84
search outcomes, 87
search results pages, 75–76, 85–89
seminars, frameworks, 202
service companies, 130
setting expectations, 118
shopping carts, 171
shopping lists, 61
Shutter Island movie site, 147
Sign In/Out option, 125
sign-up framework, 101–122
context of use, 103–104
description, 103
design patterns, 11
document for, 30
elements, 104–116
blank slate, 112–114
call to action, 111–112
investment breakdown, 106–110
registration form, 114–116
testimonials, 110–111
value proposition, 104–106
purpose of, 103
task flow, 104
for travel-guide site, 190–191
site registration, 103, 111, 112, 199. See also registration forms
social influence patterns, 61–62
social networking sites, 133, 141–142, 143, 151, 161–162
social proof, 119
Sony Ericsson, 53
call-to-action statement, 112
mind-mapping application, 101–102
registration form, 116
sign-up framework, 102
and user expectations, 118
value-proposition statement, 106
splash pages, 151–153
Spool, Jared
company website, 202
“Designing for the Scent of Information” report, 84
“Spoolcast: Interaction Design Frameworks Seminar Q&A Follow-up,” 202
stand-alone movie sites, 148, 149–150
standards
designing web, 132
vs. innovation, 5
About section, 155–156
cast and crew information, 155–156
engaging users of, 163–164
as example of stand-alone movie site, 148
similarity to other movie sites, 158
splash page, 151
Star Trek trailer, 145–147, 153
stencils, 192–194
store locators, 138–139
component document, 25–27
public component library, 27–28
surveys, satisfaction, 106
synopsis, movie, 156–158
T
tagging content, 73–74
About Target section, 128–129
company story, 128–129
information architecture, 38
Investors section, 129
and site registration, 104
store locator, 138
target content, 62–63
task flow
about-us framework, 125–126
catalog framework, 47
lost-password, 170
search framework, 79–80
sign-up framework, 104
Task Flow section, framework, 32
taxonomy, exposing, 73–74
tax-preparation sites, 103, 108–109
team profiles, 131–132
Test Drive button, 114
The Hurt Locker movie site, 154–155
time-spent-per-page metrics, 4
toll-free numbers, 198
touring sites, 171–175
trademarks, 82
trailers. See movie trailers
travel-booking sites, 92–94
travel-guide site, 182–191
creating wireframes for, 181–182, 191
goals for, 182
possible contexts for, 187–188
search system for, 189
sign-up framework for, 190–191
storing user information for, 191
subsystems needed for, 183
trip-itinerary-sharing application, 111–112
trust builders, 124, 130, 140–141
T-shirts, 164
TurboTax, 103
communicating with customers via, 141–142
and movie sites, 161
value proposition, 105
U
UIE
cost-of-frustration figures, 201
design-deliverables study, 175
and design-pattern libraries, 179
e-commerce study, 48, 52, 65–66
guided-links study, 62–63
introductory article on frameworks, 201
MAP policies study, 60
meaning of acronym, 2
online-reservations study, 198–199
site-touring recommendation, 172
team profiles, 132
Web App Summit, 158
website, 202
uniquely identified content, 81–84
United States Patent and Trademark Office, 82
usability testing
best practices, 2
unscientific nature of, 2
and user expectations, 107
usability vs. innovation, 5
Usage section, component, 26
and investment-breakdown element, 118
for search function, 88
and usability testing, 107
User Interface Engineering, 2. See also UIE
user profiles, 116, 121, 170–171
V
validation, form, 116
value proposition, 35, 104–106, 117–118
values list, 178
Victoria’s Secret, 65
viral print campaigns, 162
Virtual Seminar, 202
Visio, 194
W
Watch Now button, 119
Web Anatomy
public framework library, 39–41, 202
resources, 201–202
sign-up framework, 30
“Web Anatomy: Effective Interaction Design with Frameworks,” 202
“Web Anatomy: Introducing Interaction Design Frameworks,” 201
Web Form Design: Filling in the Blanks, 116
web forms, 116, 139. See also forms
websites
anatomy of successful, 9
organizing content on, 48
studying other, 171
touring, 171–175
typical problems with, 4–6
web standards, 132
Welie, Martijn van, 17
Wells Fargo, 57
Where Used section, design pattern, 20
Wikipedia, 123
wish lists, 61
word-of-mouth marketing, 140, 161–162
workload, distributing, 179–180
write-ups, framework, 175–179
Y
Yahoo, My, 119
Yahoo Design Pattern Library
pagination interfaces, 17
pattern document, 8
popularity of, 22
stencils, 193
URL for, 23
Z
Zeldman, Jeffrey, 132