Embed Size (px)
DESCRIPTION
from a one-day workshop given at UIE 08, an overview of key concepts and practices of IA.
Citation preview
1
Information Architectureblueprints for the web
Christina Wodtke & Tom Wailes, Yahoo! Inc.
2
3
What we’ll cover• Why IA matters
• A foundation of techniques
• Persona creation 101
• Content organization
• Navigation design
• Search
4
Information Architecture
• Many definitions (BAH!)
• Our working definition: Architecture in information spaces.
5
It is the design behind the design
Diagram from Jesse James Garett’s Elements of User
Experience
6
Where it fits in design
7
Who does it?
• Graphic Designer• Interface designer• Information architect• Interaction designer• Product manager• Project manager• Business strategist
8
The elements and goals of IA
Content
architecture
Organization of content for information retrieval
findability
Interaction
DesignDesign of system behavior to promote
usability
Information /Interface
design
Design of information presentation to promote
understandability
Information Architecture
9
Why do we care so much
Once there were people with cowsAnd people without cowsThe people with no cows were hungry
10
Why do we care so much
They took the roadAnd met at the marketAnd the people with no cows bought cowsThe people with cows had fewer cows, but
money for other things
11
Why do we care so much
Now there are people with informationAnd people with no informationThe road is the computerAnd the market is the web
12
Why do we care so much
But the market is really bigAnd the people can’t find each otherSo we have ignorant peopleAnd people with no money
The cows are okay with this
Business is not.
13
The Goal
• The players– Users, seeking information (cowless)– Businesses with information (with cows)– Intermediaries such as search engines and
directories, profiting on the exchange (marketplaces)
• The goal is to get the users seeking the data to the businesses offering the data
14
Missing information is expensive
Recently in the news, government’s information management problems
15
Missing information is expensive
“The Fortune 1000 stands to waste at least $2.5 billion per year due to an inability to locate and retrieve information.”
“While the costs of not finding information are enormous, they are hidden within the enterprise, and…are rarely perceived as having an impact on the bottom line.”
The High Cost of Not Finding InformationAn IDC White Paper, July 2001.
16
Missing information“Like all primary care physicians, Dr. Bob Goldszer must stay on top of approximately 10,000 different diseases and syndromes, 3,000 medications, 1,100 laboratory tests, and many of the 400,000 articles added each year to the biomedical literature. That's no easy task. And it is, quite literally, a matter of life and death. The Institute of Medicine's 1999 report, To Err Is Human, suggests that more than a million injuries and 90,000 deaths are attributable to medical errors annually. Something like 5% of hospital patients have adverse reactions to drugs, another study reports, and of those, 43% are serious, life threatening, or fatal. Many knowledge workers have problems similar to Dr. Goldszer's (though they're usually less life threatening). No matter what the field, many people simply can't keep up with all they need to know.”
--Harvard Business Review, Jul 1, 2002
17
Missing information
Lost sales -
Expensive support -
Duplicated effort -
Lost trust -
Lost lives?
18
Classification and Consequences
• A physician who doesn’t see a new cure• A poor student who can’t find financial
aid• A store where a product isn’t found
19
People and Information
People search for different things
What can we help with?– Known-item searching– Multiple-item seeking– Comprehensive seeking
20
Information and IA
Information Architecturemanages information tomake it findable
– Tagging with metadata– Organizing with CV’s– Creating navigation
systems – Optimizing search
Which we’ll cover today!
21
Next
Understanding your problem through requirements
22
Understanding your problem
Requirements for success
23
Understanding
How do you approach– A redesign?– A new site?
Do you just open Photoshop?
24
Requirements gathering Don Norman’s three legged stool• Product is built on
– User desires– Business needs– Technologically possible
This is for software.. With web,a fourth leg appears: content.
How do you know what’s needed?
25
Lou and Peter’s Venn“An information architect must learn about business goals and context, content and services, and user needs and behavior; and then work with colleagues to transform this balanced understanding of the information ecology into the design of organization, labeling, and navigation systems that provide a solid but flexible foundation for the user experience.”
--Peter Morville
26
Tom and Christina’s LunchboxIt’s possible to design with missing element
But risky
A balanced meal is Business, Users, Technology, Content
27
Requirements gathering
What do you need to know?– Business, Users, Technology, Content
Who has the information?What does it mean for your design
choices?
28
User requirements
Who is the user? Research should uncover• Demographics• Psychographics• Behavioral information
29
User requirements
Who knows the answers?– Marketing knows about demographics and often
psychographics– User Research/usability specialists understand
behavior– Data analysts can get quantitative information– You can do the research
• On Wednesday see: Discovering User Needs: Field Techniques You Can Use
30
Business requirements
What is the business model?What user behavior is profitable?What is the brand position?What are resource and time constraints?
But avoid the (b)org…
31
Business requirements
Who knows the answers?– Business development– Marketing (again!)– Product Management
32
Technology requirements
What technology capabilities does your company have?– Database type– CMS– Backend(s)
What is the user’s typical platform?
33
Technology requirements
Who knows these requirements?– Engineering– Data mining group– Web Developers
34
Content requirements
What content is currently in site? What content will be in site?What format is content in?Who will maintain it?
35
Content requirements
Who knows these requirements?Content often forgotten, leftover chore.Merchandiser, if ecommerce site.Sometimes a librarian.Sometimes a database engineer, or data
entry drone.
36
Exercise: requirements gathering
37
Exercise
• Divide into groups• Each person take a paper, you will be
that person.• One (or more) with no paper, you are
the IA. • Interview others to discover the
requirements for your project
38
ExerciseYou are an Information Architect hired to create a new feature for BIGGmusic.com: a mix-CD creator.
This section of the site will allow users to make mixed-music CD’s, then have them burned and shipped to users. You’ve been hired to design the organization of the site.
39
Exercise• You’ll start by interviewing the business
strategist, marketing head, user researcher and lead engineer.
• Write down the user, business and technological requirements that you uncover.
• GO! You have 15 minutes, then a couple groups will present.
40
Next
Personas
41
Personas
Never leave your user
42
Personas
43
Persona developmentPersonas are:• A key to user-centered design• Not “The User” but “one particular user”• Inform the entire design process
• Who are we designing for?• What are we designing?• How will we design it?• Does this design work?
44
Persona development/user profiling
Personas are:• Archetypal users
• Conglomerates based on user data
• Built collaboratively by team
• Useful for keeping users front-of-mind
45
Grace (62/ female/ widowed/ Little Rock, AR.)“I like playing my favorite games online, but if I can play with friends, well that’s even better!”
Personal Background: Her husband has passed on. She has two grown kids, both of whom live far away. She misses the kids, but has a fairly large circle of friends that she spends time with.
Technical Proficiency Profile: Limited. Can use her browser and her email. MS Word confuses her, and she doesn’t like using it. Doesn’t know what an OS is. Tends to click yes if the browser prompts her to do anything, and will click wildly until things work.History with Shockwave and/or AtomFilms: Plays crossword puzzles daily and saves them. Plays card games, PhotoJam, but is offended by South Park cartoons
Shockwave’s opportunity: If Grace can be convinced to participate in community activities, she will become a loyal user of the site. She needs to be sheltered from the sick and twisted content, however.
46
Scott (17/ male/ single/ Shaumburg, IL.)“I want something cool and really on the edge. Something you can’t get on TV”#2 most common user Profession: Full time student (studies exercise and sport science)Personal Background: Youngest kid in family of five. Likes to be seen as a little rebellious. Excited to be in college, but not really brave enough yet to actually do anything rebellious, so uses Internet to express his self-image.History with Shockwave and/or AtomFilms: he’s been to Shockwave a few times, and usually clicks games as soon as the navigation bar loads. He likes playing arcade games, and “shoot ‘em up’s.” Spend two hours playing “King of the Hill paintball” recently.Shockwave’s opportunity: he is already hanging out in the games section regularly. If shockwave can introduce him to it’s sick and twisted material, it can keep him on the website longer, and use his tendency to send out links to spread the word.
47
Persona development/user profiling
How to create personas: • Summarize research, distribute to stakeholders.
• Hold a work session with stakeholders & development team to brainstorm personas.
• Prioritize and cull lesser personas to develop primary and supporting personas.
48
Exercise: rapid persona creation
49
Prioritize personas
50
Prioritize personas
primary
secondary
special
51
Prioritize personas
primary
secondary
special
52
Use personasKeep them near
• Hang them on your wall
• Make poster, placemats, puppets
• Role-play personas
• Evaluate with them
53
Persona Posters
• Personas in context of use
• Embedded in deliverables
• On the wall, nearby
• Good for team, good for strangers
54
Designing with what you’ve learned
• Persona Scenarios – the power of story telling
– Storytelling is one of the most effective tools humans have for understanding.
– Makes interaction of human and machine real
55
Personas in action
We typically use scenarios in three ways:– As a design tool– As an evaluation tool– As a communication tool
56
Scenarios for DesignTo design with personas
• Get your personas out
• Tell ideal user experience for one persona
• Adjust for business constraints
• Build for this scenario
57
Get your persona out…“I don’t have time to get lost on
someone’s site—I’m not playing here.”. 32. Male. Single. Los Angeles, CA.. T1 at work, DSL at home. 15–20 hours/week online.. Technical proficiency: fair. Searcher/speed browser. Mostly reads news online
58
Example Persona ScenariosMichael is doing his morning surf; he’s just left indiewire.com and has come to indieword.com. He reads through the new stories on Sundance and spots the link to the Festival Planner. He remembers he was just agonizing over having to wade through the huge number of films. He hopes this might make it simpler.
Michael looks over the Festival Planner intro page. He wants to make sure this is going to save him time and not waste his time. He sees he can play with it without having to sign up, which is a relief; he sees he can set up a schedule for the day based on his preferences. It seems painless; he sets his watch alarm for five minutes—at that time he’ll decide if he wants to continue. Preferably, he’ll be done.…
… Festival Planner now gives him a schedule to review, with three films to pick from and an option to “see all for this time slot.” One film for each time slot is indicated as his “best pick.” Each shows how well it meets his taste and needs. And he can choose to “rest” and not select a film for that time period.
Michael goes through the schedule; his wristwatch beeps, and he absent-mindedly shuts it off. He selects his films. As he chooses, he notices an option to get a report on any film when its available—he’s very excited by that. If he can’t see them all, at least he can get a sense of what he’s missing!
Finally, Michael has a schedule that satisfies him. He notices he can e-mail the schedule to anyone. He sends a copy to his P.A. and to himself.
1. Emphasis on goals ^
2. Avoiding interface design >
59
Next stepTask analysis
• Step by step breakdown of scenarios
• Helps define interface/interaction needs
• Flushes out potential opportunities for errors
60
Task analysis
• Start with scenario
• Break it up into discreet tasks
• Subdivide into smaller steps
61
Task analysisPurchasing a purse at nordstroms.com might include the tasks:
1. locate purse 2. add purse to shopping cart3. check out
62
Task analysis“CHECK OUT” BECOMES
a. Select checkoutb. Sign in/sign up
c. Input shipping addressd. Input billing address
e. Input paymentf. Review order
g. Finalize checkout
Purchasing a purse at nordstroms.com might include the tasks:
1. locate purse 2. add purse to shopping cart3. check out
63
Task analysis“CHECK OUT” BECOMES “INPUT BILLING ADDRESS”
BECOMES
a. Select checkout d. Input billing address (prepopulate all fields from c.)
b. Sign in/sign up i. Input first name
c. Input shipping address ii. Input family name
d. Input billing address iii. Input street address
e. Input payment iv. Input street address
f. Review order v. Input state (dropdown of standard abbreviations)
g. Finalize checkout vi. Input country
And so on…
64
Example Task analysis
65
Another Task Analysis
66
digramming
67
Next
Content Architecture Part I
68
Content Architecture
Make it make sense
69
What is this?
70
What is this?
71
What is this?
72
What is this?
73
What are these?
74
They are all birds(ornithologist)
75
The Cassowary is not a bird!
(the Karam)
76From “Why the Cassowary is not a bird”, R. Bulmer, Man, Vol. 2, Issue 1, (Mar. 1967)
77From “Why the Cassowary is not a bird”, R. Bulmer, Man, Vol. 2, Issue 1, (Mar. 1967)
78
Who Cares?
• Ornithologists• The Karam • Information Architects
79
Dewey Decimal System
• 200-299 – Religion Categories• 40+ categories related to Christianity• 1 for Judaism• 1 for Islam (& related)
80
Who Cares?
• Religious Scholars• Librarians• Information Architects• Jews and Muslims
81
• Classification reflects social and cultural organization
• Information Architect must understand this context
82
Get to know your audience…
1. Who are they?
Football Fan
83
Get to know your audience…
1. Who are they?
Football Fan?
84
Get to know your audience…
1. Who are they?2. What do they care about?
Are the Patriots going to make the
playoffs?
Show me photos!
What happened in the last game?
85
Get to know your audience…
1. Who are they?2. What do they care about?3. How do they think of the information
and content?
Conference, division…
Schedules, standings…
86
Get to know your audience…
1. Observe others2. Study Competitors and similar sites3. Review your search logs4. Do a card sort
87
Now what?
• Organize your information so it makes sense to your audience
• Structure your information to help users find it
• …using metadata
88
Metadata: what is it?
“metadata is data about data"
89
Metadata: what is it?
“Metadata tags are used to describe documents, pages, images, software, video and audio files, and other content objects for the purposes of improved navigation and retrieval”
‘Information Architecture for the World Wide Web’, 2nd ed., (2002) Rosenfeld, L. & Morville, P.
90
Types of Metadata
• Descriptive: the nature of the thing, what is it related to?…
• Intrinsic: composition of the thing, size, shape…
• Administrative: how can the thing be handled? Workflow…
91
Types of Metadata
92
Yahoo! Travel<meta name='description' content="Yahoo! Travel is a comprehensive online travel
destination, where you can reserve flights, rental cars, hotel rooms, cruises and vacation packages, all in one place. Research trips from a wealth of planning resources including
destination and city guides, user and expert reviews, local weather and currency information, and much more. Yahoo! Travel has competitive prices on everything from
airfare to lodging, it's easy to find great deals and special offers">
<meta name='keywords' content='online airfare airfares hotel car reservations travelocity airlines tickets airplane air line air fares arifares airline low fairs fares cheap tickets flights book information flight itinerary itineraries online reservations online tickets online travel
agents vacations cruise cruises cruiselines business travel busines corporate hotels discounts car cars rental lasvegas tickets travel reservations online travel travel bookings
online bookings book airfare fare wars discount fares sales lowest vacation planning information travel agencies travel sites disney world florida orlando miami atlanta ATL
Dallas DFW DCA LAS LAX NYC ORD SFO atl dfw dca las lax nyc ord sfo Washington D.C. washington dc los angeles Los Angeles new york New York new york city New York City
San Francisco sanfrancisco family trips family vacation family vacations'>
93
Types of Metadata
• Descriptive: Patriots, NFL, AFC East…
• Intrinsic: HTML page, 40k…• Administrative: update daily with
news feeds, update when new game…
Web Page: New England Patriots
94
Types of Metadata
95
Types of Metadata
• Descriptive: Patriots, NFL, AFC East…
• Intrinsic: jpg file, 4k…• Administrative: rights owner-NFL,
replace when logo changes…
Logo: New England Patriots
96
Not all Metadata is equal
• What are users interested in?• What do you want users to be able to
find?• What metadata makes management
easy?
• Tag content for findability• Tag content for management
97
Exercise
• Listen• Write five descriptive words (or short
phrases) on your post-it• One word (or phrase) per post-it
• Don’t share– yet! Hold on!
98
Next
Content Architecture Part II
99
Controlled vocabularies
Master of your domains
100
I’ve got
music
I want music.
When humans and computers interact
101
Hip Hop
Rap.Rock.
Dance.
Humans are good at figuring things out
102
Jiggy tunes
?
Most of the time
103
Acidregga
e
?
No matches found
But computers are literal
104
Add more on how they are literal
105
AcidReggae
?
?
Let’s give them “Dance and DJ”
IA
And need help
106
Thus Controlled vocabularies (CV)Amy Warner defines a controlled vocabulary
(CV) as “organized lists of words and phrases, or notation systems, that are used to initially tag content, and then to find it through navigation or search.”
Of course, the IA can’t always be there…
107
I define them as
Documented relationships of words and concepts to assist people finding stuff.
Same dif.
Controlled Vocabularies
108
• Levels of control
Simple Complex
SynonymRings
AuthorityFiles
ThesauriClassificationSchemes
Equivalence Hierarchical Associative
(Vocabularies)
(Relationships)
Controlled Vocabulary Types
109
• Relationships
A=B AB
A BEquivalenceChristmas=Xmas
HierarchalWinter Holidays > Christmas
Associative Christmas | Santa Claus
Controlled vocabularies
110
• Simplest type• Helps with search, indexing• Simplifies maintenance
Synonym rings
111
• Acronyms: BBC, British Broadcasting Company; MPG, miles per gallon
• Variant spellings: cancelled, canceled; honor, honour
• Scientific terms versus popular use terms: acetylsalicylic acid, aspirin; lilioceris, lily beetle– From Synonym Rings and Authority Files
by Karl Fast, Fred Leise and Mike Steckel
Synonym rings include
112
• Sometimes on intranets, CV’s are skipped
• You think you can force people to use proper terms
• But people are lazy
I’m tired of typing “Controlled Vocabulary--- CV is shorter.
Why Bother?
113
• On the internet you want to be found
• You’ve got cows• But people can’t spell
“cows”• Plus users use short
queries– Average queries are 2.5
words– 30% of searches are one word queries
I want a cannon camera.
Why Bother?
114
It may be the Canon PowerShot S30
Bizrate takes good advantage
115
Cannon S30
Powershot S30
S30
Canon S30
But what do people call it?
116
A page for each synonym
117
And they can be number one
118
• Addition of preferred terms and variants• Preferred terms
– Protects brand– Sensitivities– Educates
Christmas | Xmas, X-mas, Nöel,
Authority File
119
There is a right spelling
120
• Includes non-equivalent relationships• Includes hierarchal informal• Useful for navigation• Useful for helping people broaden their
search
Classification schemes
121
• Types of relationships• Sibling:
Gap.com directories» Men» Women» Maternity» Body» Boys» Girls» Baby boy» Baby girl
Classification schemes
122
Parent / Child
(amazon.com)
Classification schemes
123
Classification Schemes
Other RelationshipsAlphabetical (administrative metadata)Authors, A-Z > ( M ) > Moore, Alan
Chronological (administrative metadata)
New for You > New Releases > Books
Topic (descriptive metadata)Comics > Graphic Novels > Horror
Amazon uses all of these, and more….
124
• Cadillac of Controlled Vocabularies• Includes associative relationships
Preferred term
Variants Siblings Parent Associated
Christmas X-mas, Nöel
Hanukah, Kwanzaa
Winter holidays
Santa Claus
Thesauri
125
Associations
126
• Amazon uses buying patterns to determine associations
Associations
127
Associations
128
Associations
129
Exercise
Card sortTake your keywordsOpen your packetsSort the items into similar piles. Label the piles with post-its
Discuss
130
Building your own
1. Understand requirements2. Harvest terms3. Create groupings4. Implement5. Test6. Maintain
131
What kind of CV do you need?
• What do you want your CV to accomplish? • To integrate with your navigation system? • To improve searching? To improve browsing?
Both? • How much vocabulary control do you want to
provide? Synonym ring? Facets? What level of vocabulary control is appropriate?
• What can your technology support?
132
Pareto’s Principle:a.k.a. the “80/20 Rule”
80%
20%
"A minority of input produces the majority of results.”
(www.paretolaw.co.uk/principle.html)
133
Useful IA guidelines• 80% of your site's users belong to 20% of the
site's audiences
• 80% of users' information needs are served by 20% of the site's content
• 80% of users' information needs are addressed by the top 20% of all searches
• 80% of IA effort should be invested in 20% of total architecture
134
Getting answers
• Content - specificity and stability• Technology - tools and integration. • Users – who are they• Maintenance- who will do it?
135
Content Inventory
• Link ID• ROT• Document type• Topics/Keywords• Location
• Maintainer• Expiration• Access• Author• Existing/planned
Identify all content and attributes
136
Term harvesting
• Look Inward– Your site– Current keywords
• Look outward– Magazines– Competitors– Discussion lists
• Log harvesting– Search engines– Overture
• Ask people– Interviews– Card sorts
137
Sorting Terms
A Card Sort for Architects
• Multiple Groupings– Equivalent UF cheese=fromage– Broader terms BT cheese | dairy– Narrower terms NT cheese | cheddar– Related term RT cheese | crackers
138
Sleeping Bags BT Camping NT Down Sleeping Bags NT Synthetic Sleeping Bags NT Family Sleeping Bags NT Cold Weather Sleeping Bags NT 2-Season Sleeping Bags NT 3-Season Sleeping Bags NT Back Packing Sleeping Bags NT Expedition Class Sleeping Bags NT Ultralight Sleeping Bags RT Backpacks RT Ultralight Backpacking RT Sleeping Bag Liners RT Sleeping Pads RT Stuff Sacks RT Pillows
From Creating a Controlled Vocabularyby Karl Fast, Fred Leise and Mike Steckelhttp://www.boxesandarrows.com/archives/creating_a_controlled_vocabulary.php
139
Sorting conflicts
• Cheese goes in dairy or in sandwich materials?
• A cheese basket?• String cheese?
Choices fit strategy
140
Associations
• What is related• What is required?• What else is interesting?
Relevancy is king
141
Possible Relationships
• Process/agent (camp fires/matches)
• Action/product of action (baking/cakes) • Agent/counteragent
(allergies/antihistamine) • Raw material/product (wool/sweater).
142
examples
143
Implement
• Implementation dependant on situation and tools.
• May be slow painful data entry– know this and prepare.
144
Test
• Test with users – did you get it right?
– Browse Testing– Search Testing– Monitor quantitative
– Refine, refine, refine
145
Maintain
• Who maintains it?• What the rules for new terms?• Document your decisions.
146
Next
Interface and Navigation
147
Interface & Navigation
IA made visible
“Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
148
Most IA is invisible
• A lot of work no one sees
• Synonym rings, etc
• If it was seen, is would be too much
• We show only a subset
149
Legal turn
One-way street
No turns between 3pm and 6pm
Concrete barrier
Pedestrian walkway
Speed limit 35
Road passes overheadDestination on the leftHighway 101
Yahoo! Maps
150
The magic number?
• 13 tabs– no one saw them. Six tabs, everyone saw them
151
But not everything is simple
masthead
Global links
Folders
Mail tools
ad
Other properties
upsell
Web search
Related Services
tip
inbox
ads
ad
Related Services
upsell
Mail tools
Log out
inbox Write mailAnd there isn’t even content!
152
Navigation orders complex pages
153
Understanding NavigationMessage and Access
Where Am I?
Wha
t's N
earb
y?
What's RelatedTo What's Here?
Global Navigation
Loca
l Nav
igat
ion
Content Lives Here,With ContextualNavigation Inline
Or Separate.
154
Global navigation
• Where you are– Brand/masthead
• Where you can go– Top level categories
• Safety nets– Where’s my (shopping cart/account/help???)
155
Global Navigation
156
Global navigation
157
Global navigation
158
Local Navigation
• I’ve started down the path• Now what?
• What are the categories of items?• What are the siblings of what I see?• What are the subcategories?
159
Local Navigation
160
Local Navigation
161
Local Navigation
162
Contextual navigation
• Inline links• Related items• Document management
163
Inline links
164
Related items
165
Examples of data manipulation
• Pagination• Ad negotiation• Print/email/clip• Sort
Content
architecture
Interaction
Design
Information /Interface
design
166
Pagination
Useful to reduce page download speed and cognitive overload.
Annoying for printing.
167
Ad negotiation
168
Print/email/clip
169
Sort
170
Secondary Navigation
• Site Maps• Indexes• Table of Contents
171
Have you ever seen this page?
172
How about this one?
173
How about this one?
174
You can make it helpful“After testing several different sitemap designs on users, I decided to try putting one on every page of my small Columbian web site. I then decided to track how often it was used for navigation. It turns out the sitemap is used for over 65% of all navigation done on the site.” -- Usability Report by Peter Van Dijck of poorbuthappy.com (Guide to Columbia)http://www.webword.com/reports/sitemap.html
175
Conventions It is certainly probable,
then, that placing these objects in expected locations would give an e-commerce site a competitive edge over those that do not…
-- Examining User Expectations for the Location of Common E-Commerce
Web ObjectsUsability News
4.1 2002
176
ConventionsIf 90% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.
If 60-90% of the big sites do things in a single way, then this is a strong convention and you should comply unless your alternative design has at least 50% higher measured usability.
If less than 60% of the big sites do things in a single way, then there are no dominant conventions yet and you are free to design in an alternative way.
-- Jakob Nielsen, November 14, 1999 Alertbox column
"Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson
177
Conventions
• Some things are becoming de rigor
• Deviate when you’ve got something better
• Not because you are bored
"Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson
178
Homework: Prioritization
179
Now combine
• Follow expectations based on conventions
• Design a hierarchy based on task importance
• Err on the side of simplicity
180
Next
Understanding Search
181
Understanding Search
The Web, your web
182
Does search stink?
“…studies show that search is still the primary usability problem in web site design.”
Vividence Research: Common Usability Problems1.Poorly organized search results2.Poor information architecture
Source: Flexible Search and Navigation using Faceted Metadata (UC Berkeley SIMS, Submitted 2001-2)
183
“Most of the complaints we get are due to the way users search; they use the wrong
keywords.”--Manufacturing Manager in Must Search Stink? by Forrester
Research
184
Vision
• Search is a tool, important in every aspect of users’ lives
• Yet users don’t like to invest effort
“Type words in little white box. Click "Search." Wait. See results pop up. Click on first link. Skim webpage. Log off.
"That's how searching the World Wide Web seems to work for most people," explains Purvi Shah.
--Desperately SeekingAlison Balmat, Penn State Research
185
Understanding search
• Search is a question whose answer is not always a web page
• Query: 2003 Camry prices– Does this user want a website?– Does he want a page on pricing cars?– Does he want to know what cars are going
for?• But what we’ve got: web pages
186
A Yahoo AnswerDirect display of answers
187
Your answers?
• Do you have Answers?• Or at least the right
web pages.
• What can you do today?
• HP offers best bets on a few critical searches (80-20)
188
What is a perfect user experience?
• Fast• Easy
189
Search is a FAST experience
• Users spend only seconds on a results page
• User WANT to spend only seconds on a results page
190
• Actual load time must be fast• Perceived load time must be faster• Cognitive scan time must be faster
Search must be fast
191
Design for speed of scan
• What is the critical information for users?
• What is secondary?• What are power-user features?
192
Smart things we did• Search term
in bold• URL in color
that recedes• Power-user
features in gray
• Progressive rendering
193
Search must be EASY• Average queries are 2.5
words– 30% of searches are one word queries
• Can we be mind readers?
• Can we seamlessly elicit more information?
People are lazy.
From E-Sex to E-Commerce: Web Search Changes-- Amanda Spink, Pennsylvania State University, Bernard J. Jansen, US Army War College, Dietmar Wolfram, University of Wisconsin-Milwaukee, Tefko Saracevic, Rutgers University
194
– Entice – longer search boxes– Articulate – related searches– Synonym rings for success!
Search can be easy
195
Remember your contextYou aren’t Yahoo! or Google…
196
Take advantage of you
• Gap knows their users• Gap knows you are
shopping for clothes• Gap has pictures• Gap has prices• Gap knows what
category things are in• Search engines– not
so much.You can be great.
197
No Search?
• Should you have search?– Do you really have so
much stuff?– How do people look for
things on your site?– Do you have to
resources to do it right?
• If you have Search, make it Good Search.
Using an on-site search engine actually reduced the chances of success, and the difference was significant…. Our data showed that today’s on-site search engines are worse than nothing — significantly worse.
-- Jared Spool
198
Smart things IMDB did
• Used a synonym ring– Corrected spelling– Found foreign
matches
Clearly shows your entry, so you can learn from your mistakes
199
Smart things L.L. Bean did
• Section devoted to disambiguation on terms important to users
• Grouping by category• Images and prices• Included associated
terms– but not on top.
200
Smart things Launch did
• Grouped results – Albums– Artists– Songs
• Made advertising relevant
• Made it a viable navigation tool
201
202
Dumb IBM search?
• You type “content management system”
• They have a content management system for sale
• What here can help you?
• What could IBM learn from LL Bean and the Gap?
203
How will you be smart?
• What do your users need and want?• What do you know about your content• How can you make sure your users
never fail?
204
Conclusion
• Look, listen, learn• Understand the context• Know your user• Design with purpose• You can be great!
205
Q&A
Christina [email protected]
LEARN MORE!book : : www.blueprintsfortheweb.comzine : : www.boxesandarrows.comblog : : www.eleganthack.compeeps : : www.aifia.org
206
Reading ListThe Age of Findability by Peter Morville http://www.boxesandarrows.com/archives/the_age_of_findability.phpUnraveling the Mysteries of metadata and taxonomies by
Christina Wodtke http://www.boxesandarrows.com/archives/unraveling_the_mysteries_of_metadata_and_taxonomies.phpAll About Facets & Controlled Vocabularies
by Karl Fast, Fred Leise and Mike Steckelhttp://www.boxesandarrows.com/archives/all_about_facets_controlled_vocabularies.phpSynonym Rings and Authority Files by KarlFast, Fred Leise and Mike Steckel http://www.boxesandarrows.com/archives/synonym_rings_and_authority_files.phpBuilding a Metadata-Based Website byBrett Lider and Anca Mosoiu http://www.boxesandarrows.com/archives/building_a_metadatabased_website.phpA Taxonomy Primer. Amy Warner.http://www.lexonomy.com/publications/aTaxonomyPrimer.htmlIndexing from A to Z. Wellisch, Hans. (1995).. New York: H.W.
Wilson, 1995. BookMetadata creation—down and dirty. James L. Weinheimer.http://www.princeton.edu/~jamesw/mdata/MetadataCreation.ht
Faceted classifications and thesauri. Barbara Perles.http://is.gseis.ucla.edu/impact/f95/Papers-projects/Papers/perles.htmlFacet analysis: Using faceted classificationtechniques to organize site content & Structure. LuiseGruenberg.http://www.asis.org/Conferences/Summit2002/Gruenberg.ppt
(PowerPoint presentation)The design of browsing and berrypicking techniques for the online search interface.
Marcia J. Bates.http://www.gseis.ucla.edu/faculty/bates/berrypicking.htmlFrom E-Sex to E-Commerce: Web Search Changes (PDF)
http://ist.psu.edu/pdfs/Spink040302.pdfAnalyzing Card Sort Results with a Spreadsheet Template by
Joe Lamantia http://www.boxesandarrows.com/archives/analyzing_card_sort_results_with_a_spreadsheet_template.phpSitemaps and Site Indexes: What They Are and Why You Should Have Them
by Chiara Foxhttp://www.boxesandarrows.com/archives/sitemaps_and_site_indexes_what_they_are_and_why_you_should_have_them.phpMetadata: cataloging by any other name…. Jessica Milstead
and Susan Feldman. Online, January 1999.http://www.onlinemag.net/OL1999/milstead1.html
207
Reading ListBoxes and Arrows: Defining Information Architecture Deliverables
http://www.sitepoint.com/article.php/326Blueprints for the Web: Organization for the Masses By Christina
Wodtkehttp://www.informit.com/content/index.asp?product_id=
%7B8548A2A9-3B1C-4AC8-B231-8367F921769C%7D IntranetJournal -- Information Design Using Card Sorting
http://intranetjournal.com/articles/200202/pkm_02_05_02a.html
Metadata Harvesting –by Karl Fast PowerPoint Presentationhttp://www.asis.org/IA03/fast.ppt
Controlled vocabulary and thesauri creation for describing images in a database Controlled Vocabulary.com
http://www.controlledvocabulary.com/imagedatabases/index.html
Software for Information Architects by Peter Morvillehttp://argus-acia.com/strange_connections/
current_article.htmlExtracting Value from Automated Classification Tools
By Kat Hagedorn, March 2001 http://argus-acia.com/white_papers/classification.htmlTools for information Architectshttp://aifia.org/tools/
Perfecting Your Personas by Kim Goodwinhttp://www.cooper.com/newsletters/2001_07/
perfecting_your_personas.htmReconciling market segments and personas By
Elaine Brechinhttp://www.cooper.com/newsletters/2002_02/
reconciling_market_segments_and_personas.htm
Taking the "You" Out of User: My Experience Using Personas by Meg Hourihan
http://www.boxesandarrows.com/archives/taking_the_you_out_of_user_my_experience_using_personas.php
Bringing Your Personas to Life in Real Life by Elan Freydenson
http://www.boxesandarrows.com/archives/bringing_your_personas_to_life_in_real_life.php
Information Architecture for the World Wide Web: Designing Large-Scale Web Sites by Louis Rosenfeld, Peter Morville BOOK
Information Architecture: Blueprints for the Webby Christina Wodtke BOOK
