Designing for Content-Rich Websites
Jared Spool, User Interface Engineering
Lots of folks in-house who have large, content-rich sites that have grown organically through time (drupal.org, e.g.) & are hearing from users that things aren’t as easy to find as they should be.
There’s 8 types of pages you can find on a website today. Users behave very specifically on certain types of pages vs. others, but most people don’t realize this:
1. Content
2. Gallery
3. Department
4. Store
5. Home
6. Search page
7. Search results page
8. Categories (search) page.
Finally, will talk about search & role it plays on your site.
The Best Content draws itself to the user - “it must suck” - (by which we mean the content sucks itself to the user)
* designing for “scent” is more successful than designing for navigation (theory was successfully tested that people’s behavior in searching for info is like an animal hunting for food...”scent”)
the more experience you have with a given technology the more successful you are with the technology - so assumed that anyone with a lot of web experience would have an easier time than people who were new to web, UIE tested these more experienced web people, but found that it had nothing to do with amount of experience - only with sites - some sites all people, regardless of experience, were successful; on some sites no one was successful - it had to do with scent
the scent is MOST important - the design is most important (designing for scent)
* every link gives off scent that users follow
“trigger words” were important to allowing user to find what they wanted (user didn’t even mention word “drivers”, but this was a trigger word for them for finding drivers)
* NO EVIDENCE THAT THE 3-CLICK RULE IS RIGHT!!!! In fact, many, many (30 even) clicks are fine, as long as the “scent” is good
Search Engines are scent-less
* users click on them when they don’t see a link with good scent
* they type in the words they wanted in the link
* we call them trigger words
* users are trying to make their own scent
* except they don’t know if the designers have anything that matches the trigger words
Search boxes should be labelled “BYOL” - Bring Your Own Link.
User hopes that search engine will figure out what designers missed
* Poor scent - iceberg problem - people don’t bother to scroll when they are assuming that what’s above the fold is the same as what’s below the fold
Banner ad problem - “banner blindness” - because of so many ads, people don’t even look at that top area of page where ads were so often displayed
When people search, they really search:
* >24K results - with “relevancy” which was terrible because people blocked out “lower relevancy” links
Users know how the scent is working - represented by confidence
We can’t measure “scent” directly - no good way to measure it
- have to wait until we hear someone ask about something (E.g., popcorn example)
- we can’t look at a link & say it has good scent - but we can watch users & see if they’re confident - if they have great confidence in link, shows good scent
Users do “information masking” - learn which parts of page to look at and ignore
Often the things that prevent our design = policies (vs. users’ needs)
Navigation panels are often scentless
- Scent is specific, navigation panels are not
- Amazon forces you into search (author, title search works fine for just those things, but not for many needs, such as, for a specific character’s name (within a book or series, for example) or other aspects, such as is the story scary, not so good)
- the categories, e.g., in Dr. Koop’s site - so vague, hard to choose which one to use - category “resources” completely vague/meaningless & because it was third-party bought glossary, put under “resources” because not their own stuff, but user wouldn’t know that
- (FAQ might be: what’s the deal with ejournals, “research databases”, “library catalog”, “finding aids”, “digital collections”... “what’s where? how do I find it? how do I get it?”
- Fidelity website - “Research”, “Retirement”, “Planning” - meaningless to regular people, but in financial services industry, those terms have standard understood meanings, but it’s jargon for others
- it's jargon if a small group of people have very specific meanings for usage of terminology but terms are used more broadly or differently in the general population (librarians, here’s our “database” problem... well, one of them)
Short links don’t emit scent
- average link success = 42% (so anything above 45% = excellent scent)
- best links are 7-12 words... short links don't emit scent...w/link text & associated text included - most successful links are 7-12 words in length
- trigger word not in shorter links (it’s a probability game, fewer words in link, less likely to see trigger word in it) (let’s not even talk about the “click here” link wording which is utterly meaningless -- poor usability and accessibility)
- but too many words in link text = trigger word buried
Other issues with scent
- too many similar links in Kraft Foods site navigation example, so didn’t know which to choose “recipe search” v. “recipe connection”
- CNN site - is a story “U.S.” vs. “World”? but at least putting links underneath each category - provides example / trigger words in those links, so it wasn’t the broad category, it was the examples that made the navigation work in those cases
- put links under categories to strengthen scent = good technique, works well
- interesting example of very old Pfizer site - tons of links to “financial” and to “FunZone”, hard to tell what site’s really for - not what you expect - there was a great subsite, called “Dealing with Depression”, but no easy links from Pfizer main site to get to the “Dealing with Depression” - originally, there was a link from that home page, but it was only on that page for two weeks - every two weeks, had to change homepage - corporate site policy must keep home page “links fresh” because we know most people must go to Pfizer site daily and might get bored if they don’t...
Short pages reduce scent
- users have no trouble scrolling! long pages are not necessarily a problem
- the problem with users not scrolling only relates to the design of the page - if it looks like it stops at a certain point, they won’t continue scrolling. For example:
- large margins at bottom of page = stop scrolling
- if horizontal line = stop scrolling
- you need one long column v. others, means people will keep scrolling, but if it looks like they all end at the same point, won’t scroll past that point
- copyright statement = stop scrolling
if scent gets more general, instead of more specific, user gets lost - so links should be specific, example of old etrade site link where it implied that the link would take the user directly to information about their qualifications for program, but it just took them from more specific promo page to the etrade home page, - this led to user frustration
The site map is what people click on when they’ve given up hope. “Site Map” has no scent.
Scent depends on context
* example, misinterpreted context - from Boston.com’s “The Boston Red Sox” page, link to “Sports Calendars” didn’t bring them to calendar with Red Sox games, but rather to calendars for other things.
Users don’t think in terms of sections!!! Designers think in terms of sections (re: who’s in charge of building sections)
Traditional approach to website design has been to think of home page first, then link out to individual pages, but that’s only the way you design for navigation, which is low on scent.
Instead, to design for scent, start with a target content page.
- figure out from where users will likely want to get to that page
- put links in all the places people would most likely want to find your content
DON’T START DESIGNING YOUR WEBSITE WITH HOME PAGE - IT’S THE LEAST IMPORTANT PAGE ON YOUR SITE! THE MOST IMPORTANT PAGE IS THE ONE THAT HAS THE THING THE USER’S LOOKING FOR! START DESIGNING FROM SPECIFIC CONTENT!!!
Min = 2 hours every week that you should be watching people use your design. Interview users for most important content.
Good Design = Users Have High Confidence
- every design element that makes scent stronger contributors to the user’s confidence
-- before they click, these things make them feel confident:
--- link quality, navigational graphics, information organization
-- after they click, they will have confidence if they are:
--- seeing desired info
--- or more, stronger scent
Summary:
Your Content Must Suck
- your content must give off scent
- scent is about pulling the user to the content
To make Your Content “Suck”, you need to know:
-- why users are coming to the site
-- what their trigger words are
-- where are they likely to look
- avoid search as answer
- keep links and pages long
- you can’t design great sites without testing
- spend time with users
* users need strong scent to find their content
* as users work their way through the site, they encounter different types of pages
-- each type helps them in a different way
* key user behaviors predict navigation failure
-- designers can use these behaviors to learn how to improve the site
Going Over the Different Types of Pages (and associated patterns of user behavior):
1. “Target Content” Pages
Users Seek Content
* the target content page is the most important page on the site - nothing else matters to that user at that time but that content
* all other pages are dedicated to delivering the user to the target
(v. old myth of “surfing” a site - which was just that, a myth - they don’t care about the rest of your site)
* navigation pushes users
* scent pulls users
There’s always a task.
There’s always a page that fulfills that task - it’s what we call “the target content page”
Has the info the user’s looking for. Most important page on website, dictates failure or success of user.
Getting user from home page to content page = scent issue
2. “Gallery” Pages
List of links to content pages - enough scent has to come through those links to get us to the correct gallery page.
Ecommerce sites are simple. Users want to buy something, website builders want to sell something - they both meet their goals at the same instance. So used as the “laboratory rat” of testing how to design things.
That’s why we call them “gallery pages” - because of ecommerce - display of all of the shirts, for example, at clothing store site.
But there are non-ecommerce, content-rich sites. Still, they have gallery pages.
Content Galleries
* behave same as ecommerce galleries
* content pulls users towards it
Predictors of failures of scent:
1. Forcing the Back Button (designers said, you have to go back if you’re seeing this page) - a sign of failure = back button usage
when they used back button, only succeeded 18% of time (v. 42% w/o use of back button), if user had to use the back button 2 x, their success rate drops down to 2%
The back button is the button of doom!!!
2. Pogosticking - when user bounces between levels of the info hierarchy
* pogosticking PREVENTS success - when you do that only succeed 11% of time (vs. 55% of the time w/o “pogosticking”)
3. Search
* search also prevents success - if search is used, they are only successful 30% of the time (vs. w/o using search, which = success 53% of time)
So...
a successful gallery page doesn’t force the user to use back button, to pogostick, or to search
when users tell you something is “cluttered”, it’s code for - you’ve got a lot of stuff, but none of it’s what I’m looking for...
been in many projects where adding info reduced users’ perception of clutter.
Link order is important
* random order & alphabetical order are essentially the same from the users’ perspective on almost all things:
only in specific names (e.g., of cars, states, people), is alphabetical order sensible
The length of a gallery page doesn’t matter!
Longer pages work better
(See all on one page in Lands’ End allowed more sales of items that would’ve been in the 4th, 5th, 6th pages when they didn’t have the “see all” option)
Get into trouble when there’s too many concepts/”ideas” in a gallery... it’s not that there’s too many items, it’s just that it’s hard to figure out which type of item I want
3. Department pages
Departments divide things up - reduce set of choices
have to clearly know what you want and also which categories you definitely don’t want
often put departments into navigation - but now, if have like “account management” and “bill and payment informaton”, which one of these links do you use?
Global navigation turns out to be really useless for people - we’ve trained users that global navigation is useless
People think in terms of local navigation
Very few people do second things on a website. They get the task done & leave the page.
division by audience issue - cancer site - the public read the doctors’ side & the doctors’ read the general publics’ side.
should’ve been clearer about what was meant - not “for patients” vs. “for doctors”, instead should’ve said “written in plain-language” vs. “written in doctor-speak” (or something like that) - that was the real difference between the links
For Department pages to be successful
- reduce the number of choices in galleries
-- to allow galleries to provide more detail per item
- gallery links are descriptive
-- trigger words are present
- categories need to be logical
-- users need to quickly eliminate uninteresting categories
-- users don’t mind if there’s 20 ways to get to the page they want, as long as it’s the target content that they want
Links Must be Meaningful
- marketing terminology/jargon can block scent
- context helps a lot
- also use of specific links as an example of the category
4. Store pages (400,000 pages or more - VERY LARGE websites)
- completely eliminate some aspect of site from users (like MEGA-departments)
- it’s ok to include the path to “men’s” OR the path to “shoes” to get to men’s shoes
- stores must be familiar (JCPenney, Petsmart, CNN) - and competitors all use very same words/terminology
5. Home page (is special)
- the landing page of the site
-- whether type in url or get there from Google search
- aggregates either stores or departments
- home page may simply be a gallery page, or department page
- 1 purpose & 1 purpose only, to get users to the content they want - best of all, to have that target content on the home page itself
-- primarily the category page
-- divide real estate accordingly
- home page is the LEAST important page on your website
- home page plays the smallest role
no language to describe design for everyone, terminology “information scent” is best terminology we have come up with
[Note to self: try out Instapaper - takes large sections off website & view offline / on cell phone]
Faceted search isn’t really search - categories create scent - if it works, has great scent...
Search is actually the only way to deal with the long tail of least used content
But the content used by the majority of users is where you design architecture for
Getty images doesn’t consider every picture to be equal
There is such thing as most important content - it’s contextual though, e.g., with Getty images, by season, by current events issue
User study:
Pauline - senior citizen, fell, hurt hip, recovering - needs meals delivered. Niece living in another city trying to go online to find help
Went to New York City municipal website to find out about meal delivery, but nothing to help (16 links, but none helpful) - link labelled “Online services” then “All”, then “page 6” - at very bottom of very long page - “Senior Programs Locator” (would get her 1/2way there).
Department of Aging
search results “in wonderful alphabetical order, exactly the order she needs...”
why did they build out a database like that - “to reduce number of calls” but didn’t really work out, since the records in the database didn’t answer important questions & just dead-ended the user - so they would have to call to get what they needed. Waste of resources to put a database like that online.
- search engine logs - keywords - is a list of links you should have on your website
- division of screen real estate on a page should reflect the most important / heavily sought content
on avg site home page, users:
go to search 6.8% of the time
use category links 86.8% of the time,
“featured content” links 1.3% of the time
home page link on home page 2.6% of the time
so why give so much space to “featured content” (e.g,. “hero boxes” - the giant slideshow boxes displaying what marketing/company wants to show off) vs. category links?
instead, should give 86.8% of space to category links...
Galleries: The Hardest Working Pages on Your Site
demo of cell phones gallery pages - which info is shown there
- which design works best?
Lesson #1: Provide meat - information to help people decide whether or not to pursue link further
scent of information - content ages emit scent through links
users scan pages for trigger words
Lesson #2: What makes each link different?
How will someone tell the difference between each link - this is especially a problem with fully automated gallery generation pages
don’t confuse the value of the content with the presentation of the content
Lesson #3: Support Selection
3 stages for decision making:
1. winnowing - reduce candidates to a smaller set (dept. page level)
2. selecting - (gallery level)
3. validating - (content page level)
Gallery pages are for selecting, so make pages clear
Lesson #4: Will Users Understand Individual Elements?
Lesson #5: Provide Necessary Distinguishers
Lesson #6: What do the users already know? (keep in mind that you live & breathe this content every day, so what seems like normal language to you may be jargon)
Lesson #7: Provide for Individual Needs
- e.g., sorting capabilities by various features
- gallery doesn’t have to be a list, could be presented on a map, if information is most usefully presented that way
Lesson #8: Take Advantage of Available Real Estate
Visual Design & Copy
Lesson #9: Take Advantage of Progressive Disclosure
- take advantage of available real estate
-- progressive disclosure can help for dense information
Lesson #10: Think Beyond the List-O-Links Approach
- tables are not a requirement
-- can use embedded links in paragraphs when appropriate
- good copy is essential
- design for the user’s objective
- good to show what an item does NOT have
- we want to think that we can just create the shell and hand off the content to someone else to populate it
- good design is often a team activity. You need to be able to sit in the same room and have a conversation (content folks & website admins)
Lesson #11: Will People Understand Your Terminology?
Lesson #12: Avoid Meaningless Noise Words
Lesson #13: Good Copy is Essential
Lesson #14: Design for the Specific Use
Lesson #15: Take advantage of associated text
- turn a gallery page into a content page by adding more info into the gallery page - e.g., staff directories - make users happy
- supportive info about the listing that you’ll be linking to
- NY Times has editors create summary statements, instead of computer-generated associated text - makes for better listing
Lesson #16: Humans Trump Programs
Lesson #17: Realize the Impact of Changes
Lesson #18: Order links from most likely to least likely to be wanted/related
Lesson #19: Group related links together
Lesson #20: Avoid chronological order (again, in most pages)
Lesson #21: Know when alphabetical order makes sense (usually only for specific names)
Designing Galleries for Selecting:
- ensure you understand what’s important to the users
- how will you differentiate one link from another
- how will you prevent pogosticking?
- take advantage of good copy, thoughful ordering, and matching the design to the user’s objective
Lateral Links on Content Pages:
- like “customers who bought this item also bought” on Amazon
Lesson #22: Lateral Links allow users to continue the adventure
- choice is value-added - you can get similar item with fewer or more features - give users more choices
Lesson #23: sometimes 1 choice is all you need
Lesson #24: “more” “previous” and “next” are noise
next & back or previous & next aren’t very strong info-scented, doesn’t give you a great idea of what you might get
Lesson #25: look for opportunities to provide more scent
a “curated section” - overview pages with lateral links
Lesson #26: Find Ways to Eliminate Poor Candidates
Lesson #27: Faceted Winnowing Eliminates “No Results”
Lesson #28: Look at Interactive Controls for Filtering
letting people dynamically filter (with sliders for example)
Lesson #29: A Good Demo Doesn’t Imply Usable
but you’ve got to test with users & see if it actually works with them
Don’t let Flashy Overtake Useful
Lesson #30: Don’t Forget the Basics: Selection is Key
Good Design is Delightful and Useful
It’s only a “target content” page if they find what they’re looking for... if they’re moving through multiple pages, that “content page” is really a “gallery page”
every so often, take last 4 weeks of content & do a group sort
how would NY Times have done it & talk through it?
everybody gets to play the game...
interesting discussions
another fun game - if we wanted to make this really suck what would we do?
we don’t yet have a language about what makes “good design” vs. “bad design”, so need to have these conversations
to create a language of design amongst team members
the notion of critique is missing in a lot of shops - you should do critiques like they do in art school...
2 pieces to critique:
1. sense of where you’re trying to go - what do you want page to do? what’s the call to action?
2. what did you do to do that?
Search, Scent and the happiness of pursuit
this AM, talked about how search fails users frequently
we don’t realize how bad it is because we use Amazon
Browsers vs. Searchers
we expected “natural searchers” would automatically use search across all sites - studied this. There were natural browsers, but no natural searchers across all sites. The site’s design forces users to Search.
aha moment = this is why library users were so unhappy with library catalogs.
We fronted all catalogs with web pages to talk about various books, collections, etc. or else we didn’t. And no one wanted to use straight search with no context.
Getting from Home to Content
6.8% of people prefer to use search off top to get from home page to content pages - it’s just a design phenomenon
but worse, only 7.5% of searches occur from home page
23% of search = from search results page
so people only use search when they get lost
Users search from the page where they lose the scent - already in problem recovery mode
people actually search completely different ON a site than they do AT Google - because AT the site, they expect level of specificity and context that they don’t get at Google level
Items easy to find with search:
- books by Tom Clancy
- a Canon SD1100
Items HARD to find with search:
- the 1st Tom Clancy book featuring Jack Ryan
- an inexpensive, but high quality SLR camera
success of search depends on what they’re searching for
users don’t want to search, but not all content searches equally well
User Expectations of Home Link placement (study from Wichita University) - most people expected home links at top left-hand corner (& bottom left, to much lesser degree)
expected search box somewhere in top right-hand side
none of these positions make it harder to use the search box - if it looks like a search box, they search in it (not about where it’s placed, but what the box looks like)
Type of Results
- match relevant type = has the user’s target cotnent = best
- relevant = strong scent to user’s target content = good
- irrelevant (Wacko) - unrelated to the user’s target content
-- relevance is perceived by the user
-- completely unrelated from the user’s perception
- no results - target content does not exist on the site (but it really does)
-- mistakenly given when search can’t find target content
-- faceting prevents the “no results” search outcome - hence its utility
Great search results
- avoid pogosticking
-- it’s not about choices, it’s about the right content
- make sure match relevant results are at top
- eliminate wacko results
- make sure no results are handled carefully
-- e.g., what price of Wii would be & descriptor, but immediate indicator that it’s out of stock, so they don’t get misled
Tested search engines (77) & created an agility course for them
- test searches that should be findable - copied & pasted text directly from record of inventory record into search engine & it worked for specific model of Palm
- “implementation services” phrase searched on, ok
- intentionally mistyped things - “19 LCD Montinors”, ok
- this site did great on agility course
- but new search engine - so retested, but it tested worse - the misspelling & the implementation services tests & even the model of Palm all came back badly
- they had broken search by improving it
- we don’t have good metrics on search engine performance
- so putting together benchmark tests for search engines
- officemax.com did best in their agility course
- was able to handle “shipping tape”
- worst site performance = “your search did not produce results”, try “redoing your search with other search terms”
Build your own search obstacle course
- research the commonly used search terms
-- look for variants, such as synonyms, misspellings, or types
- go to target pages on the site & pick out trigger words
-- look at the heading and important descriptive phrases
Search problems to look for
- is search returning too many results without categorization or facets
- are the top links not match relevant
- are there duplicate links? (ppl will stop if they see duplicate terms)
- do users need to click to determine the relevancy of the result
- are categories weighted equally?
-- even though there’s an obvious first choice?
Correctable Input Errors vs. Search Indexing Errors
- 43% = search indexing
- 57% = correctable input (user input)
- spelling errors
- typos
- plurals
- parsing errors (tshirt (no hyphen), 19” LCD monitors (extra quote))
- multiple words: winter slippers, maternaty clothes
YOU MUST REGULARLY LOOK THROUGH YOUR SEARCH LOGS
(the reality of the situation = we can find the problems, but we librarians can rarely resolve them because we aren’t programmers & our vendors are not responsive)
Jared Spool talks about the Endeca search engine at Eddie Bauer site. Calls someone high up at Endeca & he fixes it while Jared is on hold. A missing ; was the difference between relevant and irrelevant search results.
Each technology that was at top of list, it was also at the bottom of the list...
it was the installation and implementation of the technology!!!!!!
Google search appliance sux on the intranet, because no 1 links back to the travel expense report, so doesn’t rank highly
- site design has more effect on the user’s success than user skill
- users always scan the page for trigger words before they search
- the site’s design forces the user to search
- users search from the page where they lose the scent
- not all content searches well (most doesn’t)
- users find a search box by its visual presentation
- focus on match relevant resutls
- implementation trumps vendor choice
Breadcrumbs
“they suck”
3 types of breadcrumbs =
1. path breadcrumbs - user actually clicked to get where they’re going
2. location breadcrumbs - best path / actual hierarchy in site, best way to get there
3. facet breadcrumbs - can click on any of them and get any combo
most users think breadcrumbs = path breadcrumbs - so confusing,
but mostly users don’t pay attention to breadcrumbs
because if they got to target content, they won’t look at it.
it’s a last ditch effort like the back button, without requiring them to hit back button
it’s an attempt to treat the symptom, rather than the problem
they can never use breadcrumbs to get unlost
they don’t care about the structure of your site
the problem = when people are spending a lot of time on breadcrumbs = a waste of resources
winnowing v. selecting
what you definitely don’t want v. picking what you do want
Supporting Winnowing
- winnowing supports reducing choices in galleries
- we’re seeing new interaction techniques to support winnowing - eliminating lousy candidates
Random notes in answer to audience questions:
users tend to move their mouse only AFTER they’ve decided that they want to go somewhere else (this is the problem with drop-down menus, they require users to move their mouse to decide where to go)
what about the giant footer - most people never use it - is just used for SEO
big pictures of the administrator are terrible on government sites (no good for the user)
“subject areas” is a too-generic term (on bureau of labor statistics)
“hero box” that huge slideshow you see on the home page - not usually helpful to users
Lots of folks in-house who have large, content-rich sites that have grown organically through time (drupal.org, e.g.) & are hearing from users that things aren’t as easy to find as they should be.
There’s 8 types of pages you can find on a website today. Users behave very specifically on certain types of pages vs. others, but most people don’t realize this:
1. Content
2. Gallery
3. Department
4. Store
5. Home
6. Search page
7. Search results page
8. Categories (search) page.
Finally, will talk about search & role it plays on your site.
The Best Content draws itself to the user - “it must suck” - (by which we mean the content sucks itself to the user)
* designing for “scent” is more successful than designing for navigation (theory was successfully tested that people’s behavior in searching for info is like an animal hunting for food...”scent”)
the more experience you have with a given technology the more successful you are with the technology - so assumed that anyone with a lot of web experience would have an easier time than people who were new to web, UIE tested these more experienced web people, but found that it had nothing to do with amount of experience - only with sites - some sites all people, regardless of experience, were successful; on some sites no one was successful - it had to do with scent
the scent is MOST important - the design is most important (designing for scent)
* every link gives off scent that users follow
“trigger words” were important to allowing user to find what they wanted (user didn’t even mention word “drivers”, but this was a trigger word for them for finding drivers)
* NO EVIDENCE THAT THE 3-CLICK RULE IS RIGHT!!!! In fact, many, many (30 even) clicks are fine, as long as the “scent” is good
Search Engines are scent-less
* users click on them when they don’t see a link with good scent
* they type in the words they wanted in the link
* we call them trigger words
* users are trying to make their own scent
* except they don’t know if the designers have anything that matches the trigger words
Search boxes should be labelled “BYOL” - Bring Your Own Link.
User hopes that search engine will figure out what designers missed
* Poor scent - iceberg problem - people don’t bother to scroll when they are assuming that what’s above the fold is the same as what’s below the fold
Banner ad problem - “banner blindness” - because of so many ads, people don’t even look at that top area of page where ads were so often displayed
When people search, they really search:
* >24K results - with “relevancy” which was terrible because people blocked out “lower relevancy” links
Users know how the scent is working - represented by confidence
We can’t measure “scent” directly - no good way to measure it
- have to wait until we hear someone ask about something (E.g., popcorn example)
- we can’t look at a link & say it has good scent - but we can watch users & see if they’re confident - if they have great confidence in link, shows good scent
Users do “information masking” - learn which parts of page to look at and ignore
Often the things that prevent our design = policies (vs. users’ needs)
Navigation panels are often scentless
- Scent is specific, navigation panels are not
- Amazon forces you into search (author, title search works fine for just those things, but not for many needs, such as, for a specific character’s name (within a book or series, for example) or other aspects, such as is the story scary, not so good)
- the categories, e.g., in Dr. Koop’s site - so vague, hard to choose which one to use - category “resources” completely vague/meaningless & because it was third-party bought glossary, put under “resources” because not their own stuff, but user wouldn’t know that
- (FAQ might be: what’s the deal with ejournals, “research databases”, “library catalog”, “finding aids”, “digital collections”... “what’s where? how do I find it? how do I get it?”
- Fidelity website - “Research”, “Retirement”, “Planning” - meaningless to regular people, but in financial services industry, those terms have standard understood meanings, but it’s jargon for others
- it's jargon if a small group of people have very specific meanings for usage of terminology but terms are used more broadly or differently in the general population (librarians, here’s our “database” problem... well, one of them)
Short links don’t emit scent
- average link success = 42% (so anything above 45% = excellent scent)
- best links are 7-12 words... short links don't emit scent...w/link text & associated text included - most successful links are 7-12 words in length
- trigger word not in shorter links (it’s a probability game, fewer words in link, less likely to see trigger word in it) (let’s not even talk about the “click here” link wording which is utterly meaningless -- poor usability and accessibility)
- but too many words in link text = trigger word buried
Other issues with scent
- too many similar links in Kraft Foods site navigation example, so didn’t know which to choose “recipe search” v. “recipe connection”
- CNN site - is a story “U.S.” vs. “World”? but at least putting links underneath each category - provides example / trigger words in those links, so it wasn’t the broad category, it was the examples that made the navigation work in those cases
- put links under categories to strengthen scent = good technique, works well
- interesting example of very old Pfizer site - tons of links to “financial” and to “FunZone”, hard to tell what site’s really for - not what you expect - there was a great subsite, called “Dealing with Depression”, but no easy links from Pfizer main site to get to the “Dealing with Depression” - originally, there was a link from that home page, but it was only on that page for two weeks - every two weeks, had to change homepage - corporate site policy must keep home page “links fresh” because we know most people must go to Pfizer site daily and might get bored if they don’t...
Short pages reduce scent
- users have no trouble scrolling! long pages are not necessarily a problem
- the problem with users not scrolling only relates to the design of the page - if it looks like it stops at a certain point, they won’t continue scrolling. For example:
- large margins at bottom of page = stop scrolling
- if horizontal line = stop scrolling
- you need one long column v. others, means people will keep scrolling, but if it looks like they all end at the same point, won’t scroll past that point
- copyright statement = stop scrolling
if scent gets more general, instead of more specific, user gets lost - so links should be specific, example of old etrade site link where it implied that the link would take the user directly to information about their qualifications for program, but it just took them from more specific promo page to the etrade home page, - this led to user frustration
The site map is what people click on when they’ve given up hope. “Site Map” has no scent.
Scent depends on context
* example, misinterpreted context - from Boston.com’s “The Boston Red Sox” page, link to “Sports Calendars” didn’t bring them to calendar with Red Sox games, but rather to calendars for other things.
Users don’t think in terms of sections!!! Designers think in terms of sections (re: who’s in charge of building sections)
Traditional approach to website design has been to think of home page first, then link out to individual pages, but that’s only the way you design for navigation, which is low on scent.
Instead, to design for scent, start with a target content page.
- figure out from where users will likely want to get to that page
- put links in all the places people would most likely want to find your content
DON’T START DESIGNING YOUR WEBSITE WITH HOME PAGE - IT’S THE LEAST IMPORTANT PAGE ON YOUR SITE! THE MOST IMPORTANT PAGE IS THE ONE THAT HAS THE THING THE USER’S LOOKING FOR! START DESIGNING FROM SPECIFIC CONTENT!!!
Min = 2 hours every week that you should be watching people use your design. Interview users for most important content.
Good Design = Users Have High Confidence
- every design element that makes scent stronger contributors to the user’s confidence
-- before they click, these things make them feel confident:
--- link quality, navigational graphics, information organization
-- after they click, they will have confidence if they are:
--- seeing desired info
--- or more, stronger scent
Summary:
Your Content Must Suck
- your content must give off scent
- scent is about pulling the user to the content
To make Your Content “Suck”, you need to know:
-- why users are coming to the site
-- what their trigger words are
-- where are they likely to look
- avoid search as answer
- keep links and pages long
- you can’t design great sites without testing
- spend time with users
* users need strong scent to find their content
* as users work their way through the site, they encounter different types of pages
-- each type helps them in a different way
* key user behaviors predict navigation failure
-- designers can use these behaviors to learn how to improve the site
Going Over the Different Types of Pages (and associated patterns of user behavior):
1. “Target Content” Pages
Users Seek Content
* the target content page is the most important page on the site - nothing else matters to that user at that time but that content
* all other pages are dedicated to delivering the user to the target
(v. old myth of “surfing” a site - which was just that, a myth - they don’t care about the rest of your site)
* navigation pushes users
* scent pulls users
There’s always a task.
There’s always a page that fulfills that task - it’s what we call “the target content page”
Has the info the user’s looking for. Most important page on website, dictates failure or success of user.
Getting user from home page to content page = scent issue
2. “Gallery” Pages
List of links to content pages - enough scent has to come through those links to get us to the correct gallery page.
Ecommerce sites are simple. Users want to buy something, website builders want to sell something - they both meet their goals at the same instance. So used as the “laboratory rat” of testing how to design things.
That’s why we call them “gallery pages” - because of ecommerce - display of all of the shirts, for example, at clothing store site.
But there are non-ecommerce, content-rich sites. Still, they have gallery pages.
Content Galleries
* behave same as ecommerce galleries
* content pulls users towards it
Predictors of failures of scent:
1. Forcing the Back Button (designers said, you have to go back if you’re seeing this page) - a sign of failure = back button usage
when they used back button, only succeeded 18% of time (v. 42% w/o use of back button), if user had to use the back button 2 x, their success rate drops down to 2%
The back button is the button of doom!!!
2. Pogosticking - when user bounces between levels of the info hierarchy
* pogosticking PREVENTS success - when you do that only succeed 11% of time (vs. 55% of the time w/o “pogosticking”)
3. Search
* search also prevents success - if search is used, they are only successful 30% of the time (vs. w/o using search, which = success 53% of time)
So...
a successful gallery page doesn’t force the user to use back button, to pogostick, or to search
when users tell you something is “cluttered”, it’s code for - you’ve got a lot of stuff, but none of it’s what I’m looking for...
been in many projects where adding info reduced users’ perception of clutter.
Link order is important
* random order & alphabetical order are essentially the same from the users’ perspective on almost all things:
only in specific names (e.g., of cars, states, people), is alphabetical order sensible
The length of a gallery page doesn’t matter!
Longer pages work better
(See all on one page in Lands’ End allowed more sales of items that would’ve been in the 4th, 5th, 6th pages when they didn’t have the “see all” option)
Get into trouble when there’s too many concepts/”ideas” in a gallery... it’s not that there’s too many items, it’s just that it’s hard to figure out which type of item I want
3. Department pages
Departments divide things up - reduce set of choices
have to clearly know what you want and also which categories you definitely don’t want
often put departments into navigation - but now, if have like “account management” and “bill and payment informaton”, which one of these links do you use?
Global navigation turns out to be really useless for people - we’ve trained users that global navigation is useless
People think in terms of local navigation
Very few people do second things on a website. They get the task done & leave the page.
division by audience issue - cancer site - the public read the doctors’ side & the doctors’ read the general publics’ side.
should’ve been clearer about what was meant - not “for patients” vs. “for doctors”, instead should’ve said “written in plain-language” vs. “written in doctor-speak” (or something like that) - that was the real difference between the links
For Department pages to be successful
- reduce the number of choices in galleries
-- to allow galleries to provide more detail per item
- gallery links are descriptive
-- trigger words are present
- categories need to be logical
-- users need to quickly eliminate uninteresting categories
-- users don’t mind if there’s 20 ways to get to the page they want, as long as it’s the target content that they want
Links Must be Meaningful
- marketing terminology/jargon can block scent
- context helps a lot
- also use of specific links as an example of the category
4. Store pages (400,000 pages or more - VERY LARGE websites)
- completely eliminate some aspect of site from users (like MEGA-departments)
- it’s ok to include the path to “men’s” OR the path to “shoes” to get to men’s shoes
- stores must be familiar (JCPenney, Petsmart, CNN) - and competitors all use very same words/terminology
5. Home page (is special)
- the landing page of the site
-- whether type in url or get there from Google search
- aggregates either stores or departments
- home page may simply be a gallery page, or department page
- 1 purpose & 1 purpose only, to get users to the content they want - best of all, to have that target content on the home page itself
-- primarily the category page
-- divide real estate accordingly
- home page is the LEAST important page on your website
- home page plays the smallest role
no language to describe design for everyone, terminology “information scent” is best terminology we have come up with
[Note to self: try out Instapaper - takes large sections off website & view offline / on cell phone]
Faceted search isn’t really search - categories create scent - if it works, has great scent...
Search is actually the only way to deal with the long tail of least used content
But the content used by the majority of users is where you design architecture for
Getty images doesn’t consider every picture to be equal
There is such thing as most important content - it’s contextual though, e.g., with Getty images, by season, by current events issue
User study:
Pauline - senior citizen, fell, hurt hip, recovering - needs meals delivered. Niece living in another city trying to go online to find help
Went to New York City municipal website to find out about meal delivery, but nothing to help (16 links, but none helpful) - link labelled “Online services” then “All”, then “page 6” - at very bottom of very long page - “Senior Programs Locator” (would get her 1/2way there).
Department of Aging
search results “in wonderful alphabetical order, exactly the order she needs...”
why did they build out a database like that - “to reduce number of calls” but didn’t really work out, since the records in the database didn’t answer important questions & just dead-ended the user - so they would have to call to get what they needed. Waste of resources to put a database like that online.
- search engine logs - keywords - is a list of links you should have on your website
- division of screen real estate on a page should reflect the most important / heavily sought content
on avg site home page, users:
go to search 6.8% of the time
use category links 86.8% of the time,
“featured content” links 1.3% of the time
home page link on home page 2.6% of the time
so why give so much space to “featured content” (e.g,. “hero boxes” - the giant slideshow boxes displaying what marketing/company wants to show off) vs. category links?
instead, should give 86.8% of space to category links...
Galleries: The Hardest Working Pages on Your Site
demo of cell phones gallery pages - which info is shown there
- which design works best?
Lesson #1: Provide meat - information to help people decide whether or not to pursue link further
scent of information - content ages emit scent through links
users scan pages for trigger words
Lesson #2: What makes each link different?
How will someone tell the difference between each link - this is especially a problem with fully automated gallery generation pages
don’t confuse the value of the content with the presentation of the content
Lesson #3: Support Selection
3 stages for decision making:
1. winnowing - reduce candidates to a smaller set (dept. page level)
2. selecting - (gallery level)
3. validating - (content page level)
Gallery pages are for selecting, so make pages clear
Lesson #4: Will Users Understand Individual Elements?
Lesson #5: Provide Necessary Distinguishers
Lesson #6: What do the users already know? (keep in mind that you live & breathe this content every day, so what seems like normal language to you may be jargon)
Lesson #7: Provide for Individual Needs
- e.g., sorting capabilities by various features
- gallery doesn’t have to be a list, could be presented on a map, if information is most usefully presented that way
Lesson #8: Take Advantage of Available Real Estate
Visual Design & Copy
Lesson #9: Take Advantage of Progressive Disclosure
- take advantage of available real estate
-- progressive disclosure can help for dense information
Lesson #10: Think Beyond the List-O-Links Approach
- tables are not a requirement
-- can use embedded links in paragraphs when appropriate
- good copy is essential
- design for the user’s objective
- good to show what an item does NOT have
- we want to think that we can just create the shell and hand off the content to someone else to populate it
- good design is often a team activity. You need to be able to sit in the same room and have a conversation (content folks & website admins)
Lesson #11: Will People Understand Your Terminology?
Lesson #12: Avoid Meaningless Noise Words
Lesson #13: Good Copy is Essential
Lesson #14: Design for the Specific Use
Lesson #15: Take advantage of associated text
- turn a gallery page into a content page by adding more info into the gallery page - e.g., staff directories - make users happy
- supportive info about the listing that you’ll be linking to
- NY Times has editors create summary statements, instead of computer-generated associated text - makes for better listing
Lesson #16: Humans Trump Programs
Lesson #17: Realize the Impact of Changes
Lesson #18: Order links from most likely to least likely to be wanted/related
Lesson #19: Group related links together
Lesson #20: Avoid chronological order (again, in most pages)
Lesson #21: Know when alphabetical order makes sense (usually only for specific names)
Designing Galleries for Selecting:
- ensure you understand what’s important to the users
- how will you differentiate one link from another
- how will you prevent pogosticking?
- take advantage of good copy, thoughful ordering, and matching the design to the user’s objective
Lateral Links on Content Pages:
- like “customers who bought this item also bought” on Amazon
Lesson #22: Lateral Links allow users to continue the adventure
- choice is value-added - you can get similar item with fewer or more features - give users more choices
Lesson #23: sometimes 1 choice is all you need
Lesson #24: “more” “previous” and “next” are noise
next & back or previous & next aren’t very strong info-scented, doesn’t give you a great idea of what you might get
Lesson #25: look for opportunities to provide more scent
a “curated section” - overview pages with lateral links
Lesson #26: Find Ways to Eliminate Poor Candidates
Lesson #27: Faceted Winnowing Eliminates “No Results”
Lesson #28: Look at Interactive Controls for Filtering
letting people dynamically filter (with sliders for example)
Lesson #29: A Good Demo Doesn’t Imply Usable
but you’ve got to test with users & see if it actually works with them
Don’t let Flashy Overtake Useful
Lesson #30: Don’t Forget the Basics: Selection is Key
Good Design is Delightful and Useful
It’s only a “target content” page if they find what they’re looking for... if they’re moving through multiple pages, that “content page” is really a “gallery page”
every so often, take last 4 weeks of content & do a group sort
how would NY Times have done it & talk through it?
everybody gets to play the game...
interesting discussions
another fun game - if we wanted to make this really suck what would we do?
we don’t yet have a language about what makes “good design” vs. “bad design”, so need to have these conversations
to create a language of design amongst team members
the notion of critique is missing in a lot of shops - you should do critiques like they do in art school...
2 pieces to critique:
1. sense of where you’re trying to go - what do you want page to do? what’s the call to action?
2. what did you do to do that?
Search, Scent and the happiness of pursuit
this AM, talked about how search fails users frequently
we don’t realize how bad it is because we use Amazon
Browsers vs. Searchers
we expected “natural searchers” would automatically use search across all sites - studied this. There were natural browsers, but no natural searchers across all sites. The site’s design forces users to Search.
aha moment = this is why library users were so unhappy with library catalogs.
We fronted all catalogs with web pages to talk about various books, collections, etc. or else we didn’t. And no one wanted to use straight search with no context.
Getting from Home to Content
6.8% of people prefer to use search off top to get from home page to content pages - it’s just a design phenomenon
but worse, only 7.5% of searches occur from home page
23% of search = from search results page
so people only use search when they get lost
Users search from the page where they lose the scent - already in problem recovery mode
people actually search completely different ON a site than they do AT Google - because AT the site, they expect level of specificity and context that they don’t get at Google level
Items easy to find with search:
- books by Tom Clancy
- a Canon SD1100
Items HARD to find with search:
- the 1st Tom Clancy book featuring Jack Ryan
- an inexpensive, but high quality SLR camera
success of search depends on what they’re searching for
users don’t want to search, but not all content searches equally well
User Expectations of Home Link placement (study from Wichita University) - most people expected home links at top left-hand corner (& bottom left, to much lesser degree)
expected search box somewhere in top right-hand side
none of these positions make it harder to use the search box - if it looks like a search box, they search in it (not about where it’s placed, but what the box looks like)
Type of Results
- match relevant type = has the user’s target cotnent = best
- relevant = strong scent to user’s target content = good
- irrelevant (Wacko) - unrelated to the user’s target content
-- relevance is perceived by the user
-- completely unrelated from the user’s perception
- no results - target content does not exist on the site (but it really does)
-- mistakenly given when search can’t find target content
-- faceting prevents the “no results” search outcome - hence its utility
Great search results
- avoid pogosticking
-- it’s not about choices, it’s about the right content
- make sure match relevant results are at top
- eliminate wacko results
- make sure no results are handled carefully
-- e.g., what price of Wii would be & descriptor, but immediate indicator that it’s out of stock, so they don’t get misled
Tested search engines (77) & created an agility course for them
- test searches that should be findable - copied & pasted text directly from record of inventory record into search engine & it worked for specific model of Palm
- “implementation services” phrase searched on, ok
- intentionally mistyped things - “19 LCD Montinors”, ok
- this site did great on agility course
- but new search engine - so retested, but it tested worse - the misspelling & the implementation services tests & even the model of Palm all came back badly
- they had broken search by improving it
- we don’t have good metrics on search engine performance
- so putting together benchmark tests for search engines
- officemax.com did best in their agility course
- was able to handle “shipping tape”
- worst site performance = “your search did not produce results”, try “redoing your search with other search terms”
Build your own search obstacle course
- research the commonly used search terms
-- look for variants, such as synonyms, misspellings, or types
- go to target pages on the site & pick out trigger words
-- look at the heading and important descriptive phrases
Search problems to look for
- is search returning too many results without categorization or facets
- are the top links not match relevant
- are there duplicate links? (ppl will stop if they see duplicate terms)
- do users need to click to determine the relevancy of the result
- are categories weighted equally?
-- even though there’s an obvious first choice?
Correctable Input Errors vs. Search Indexing Errors
- 43% = search indexing
- 57% = correctable input (user input)
- spelling errors
- typos
- plurals
- parsing errors (tshirt (no hyphen), 19” LCD monitors (extra quote))
- multiple words: winter slippers, maternaty clothes
YOU MUST REGULARLY LOOK THROUGH YOUR SEARCH LOGS
(the reality of the situation = we can find the problems, but we librarians can rarely resolve them because we aren’t programmers & our vendors are not responsive)
Jared Spool talks about the Endeca search engine at Eddie Bauer site. Calls someone high up at Endeca & he fixes it while Jared is on hold. A missing ; was the difference between relevant and irrelevant search results.
Each technology that was at top of list, it was also at the bottom of the list...
it was the installation and implementation of the technology!!!!!!
Google search appliance sux on the intranet, because no 1 links back to the travel expense report, so doesn’t rank highly
- site design has more effect on the user’s success than user skill
- users always scan the page for trigger words before they search
- the site’s design forces the user to search
- users search from the page where they lose the scent
- not all content searches well (most doesn’t)
- users find a search box by its visual presentation
- focus on match relevant resutls
- implementation trumps vendor choice
Breadcrumbs
“they suck”
3 types of breadcrumbs =
1. path breadcrumbs - user actually clicked to get where they’re going
2. location breadcrumbs - best path / actual hierarchy in site, best way to get there
3. facet breadcrumbs - can click on any of them and get any combo
most users think breadcrumbs = path breadcrumbs - so confusing,
but mostly users don’t pay attention to breadcrumbs
because if they got to target content, they won’t look at it.
it’s a last ditch effort like the back button, without requiring them to hit back button
it’s an attempt to treat the symptom, rather than the problem
they can never use breadcrumbs to get unlost
they don’t care about the structure of your site
the problem = when people are spending a lot of time on breadcrumbs = a waste of resources
winnowing v. selecting
what you definitely don’t want v. picking what you do want
Supporting Winnowing
- winnowing supports reducing choices in galleries
- we’re seeing new interaction techniques to support winnowing - eliminating lousy candidates
Random notes in answer to audience questions:
users tend to move their mouse only AFTER they’ve decided that they want to go somewhere else (this is the problem with drop-down menus, they require users to move their mouse to decide where to go)
what about the giant footer - most people never use it - is just used for SEO
big pictures of the administrator are terrible on government sites (no good for the user)
“subject areas” is a too-generic term (on bureau of labor statistics)
“hero box” that huge slideshow you see on the home page - not usually helpful to users
1 comment:
Sharon, this is amazing stuff!
Post a Comment