Faceted search helps people to look for things based on criteria that are important for them.

In classic web navigation, the website determines the order of the choices. But this hierarchical structure is too limited for sites with a large product range or information offering. Different people often have different criteria in searching for the same thing.

Example: holiday homes

When I’m looking for a holiday home, a swimming pool is essential. For you it might be that pets are allowed or that it’s no more than 10 miles from a supermarket. All these things are important, but they’re not important for everyone.

The best way to solve this: faceted search. Sure, you could also go for an extremely advanced search feature, but I’d advise against it.

In this article we’ll discuss 4 design aspects of faceted search that are crucial for good usability.

Where do you put faceted search?

• Left is best
  Big sites like Amazon, eBay and Google put faceted search on the left. These sites probably have more visitors than you do. When big, influential sites do things a certain way, that creates a certain pattern of expectation for users. They expect you to do things the same way those big sites do it.Another compelling argument for putting faceted search on the left is that the left half of the page gets more attention than the right half. If you want your filters to be noticed and used, put them on the left. Apple does it too, on their website and in iTunes.

• Second-best: at the top
  You can put faceted search at the top, but it’s not as good as left. Mainly because it pushes everything on the page down. Which means less of your products are visible above the page fold. And even though people definitely scroll, they spend 80% of their time above the page fold.)In the Cnet example on the left, the search filters push the reviews below the page fold. Not good.

• Stay away from the right
  During our own user tests we often see that faceted search on the right side of the page is ignored by about half of the test users. People don’t look at the right side of the page very much, not even when you put the search filters there.

How do you indicate which filters are active?

• In the search filters themselves
  The best way to indicate which search filters are active is by making them stand out visually. Just like you’d do in a standard navigation (read tip 4 of our article on way-finding).Downside: if you have a lot of search filters, it can become difficult for the user to see all the active filters.

  Apple indicates which filters are active in a very clean and clear way. Booking.com looks slightly less refined but it is very clear.

• In a separate area above the search filters
  Probably the way most sites do it now. The advantage is that users get a quick overview of all the active filters. The downside is that the actual search filters get bumped down a little.

• At the top of the page
  Less popular but also possible. Put a sentence ‘x products for your search criteria:’ followed by the active filters. Put a red cross behind each filter to make it clear the user can undo his choice.This is especially handy if you have lots of search filters. Less experienced users understand how this works too.

How to undo a filter choice?

• Add an ‘undo’ x in the active filter
  A very clean-looking way that takes up a minimal amount of screen space.
   
• By adding a link ‘Clear filter’ to every filter category
  It works, but it sounds a bit technical and it’s quite clunky. Downside: it takes up one extra line. In this case it’s also quite unnecessary because it’s a system with check-boxes.
   
• By adding an item ‘All …’ to every filter category
  It’s not the most elegant solution but we’ve seen in user testing this works really well. Downside: it takes up one extra line.

• In the active filters summary
  Simply put a red cross behind every active filter if you put the active filters together at the top of the filter list or at the top of the page.

What if you want to allow more than one active filter within the same category?

• Check whether it’s really beneficial for the user.
• If it is, put checkboxes in front of the filters. That makes it clear users can select more than one item in the same filter category.

If you know any particularly good examples of faceted search, please share them in the comments!

You might also like:

• 4 product comparison best practices
• Product overview do’s and don’ts

If you’re offering 2 or more similar products or services, people should be able to compare them easily.

It’s the vendor’s job to help people pick the product that suits their needs best. That’s what people expect, offline as well as online.

We’ve written about this before in ‘4 product comparison best practices’.

Don’ts

Hide the differences

A typical problem in product comparisons is that differences between products aren’t immediately apparent.

First Choice Power is a good example of a site that doesn’t tell people what the difference is between products but makes them look for it.

What’s the difference between Simply Better Price Plan 24 and Simply Better Price Plan? The description is pretty much identical.

On closer inspection I can tell the first one’s a 24 month plan and the other one’s a 12 month plan. They both promise a ‘guaranteed low price’. Is it the same price for the 24 month plan as for the 12 month plan? I have no idea.

Inconsistent order

Comparing products is only handy when the comparable characteristics are nicely lined up.

Nuon obviously thinks that would be making it too easy. That’s why they put “(Up to) £ 100 annual Direct Debit discount” respectively 1st, 2^nd and 2^nd. So you can look for it, instead of just see it.

No prices

You’ve probably noticed in the previous examples that companies like talking about price without actually telling customers what their product costs.

While that’s pretty creative, it’s not what people want. People want to know how much something costs. So tell them. Price plays an important in a customer’s decision making process. The more open you are about price, the easier it is to convince people to buy your product.

Fluffy copywriting

Web writers should not be paid by the word. Good web writing is brief and concise.

Describing your products in long, flowery sentences is not a good way to go.

Vertical

Keep scrolling to a a minimum to make comparing easy. Put similar products next to one another instead of underneath one another.

Belgacom lines up its products vertically. The comparable characteristics of the various products are never visible at the same time, which makes it harder to compare.

AGL makes it even more difficult. Not only do they list their products vertically, they only show the product details of one product at a time, at mouse-over. Not the greatest strategy if you want to make comparing your products easy.

Good examples

Tables

A table with 1 line per characteristic is the easiest way to compare products. If you can do this for your products, do it. Surfers love it. It’s clear, it’s easy. Combell understands.

Visual emphasis

The more expensive the product, the more room it gets at Combell. The expensive products also have a higher star rating. Visual tricks like that really work. Or are you intuitively attracted to the sad little one-star product? I didn’t think so.

Highlight the popular product

If you want to play into people’s herd instincts, it’s a good idea to highlight the ‘most popular’ product. The example below is from Shopify.

More explanation in a tooltip

At Basecamp they take it one step further. Not only do they highlight the most popular solution, there’s a tooltip with extra information on the various features. (Pity they only have a tooltip with extra info for the most popular solution.)

Most expensive product first

A/B-tests show that putting the most expensive product first does wonders for your revenue. Basecamp gets it right in that respect as well.

Blocks

If a table isn’t ideal for your products or if you think it’s too boring (trust me, it isn’t) you can always go for product blocks.

Telenet shows a fairly good example of these product blocks. The important product characteristics (price, speed, volume) stand out and are easy to compare. Still, a table would be even better.

And now for a totally unbiased example from a company that offers usability services. Product blocks with the characteristics in the same order in each block, to make comparing easy.

Everybody who shops on the web compares. They don’t just compare products from different vendors, but also different products from the same vendor.

This comparison behaviour goes for visitors of both b2c and b2b websites.

Allow users to compare

Comparing is a top task so make sure it’s easy to do on your website.

If you make it hard to compare your products, there’s a good chance your website visitors will not become customers.

What do your visitors expect?

• Main characteristics of the product or service on the product page, pereferably as a bulleted list.
• An overview of the similarities and differences of comparable products on 1 page. It’s really annoying if you have to get out pen and paper to write down product characteristics and then look for the differences between the products.

What do you need in order to compare?

• Clearly differentiated products or services. If you’re not sure what the difference is between product A and B, how is your customer supposed to know?
• If you want to compare products in a meaningful way, you need to know what the deciding factors are for your customers. Seems easy, right? Wrong. In about half of the projects we do, the company doesn’t know what their customers deciding criteria are.

What if you don’t meet these criteria?

• Make sure you do!

The choice is simple: adapt or lose customers.

Less than 10 products or services to compare?

Basic principle: all on 1 page

A search feature or wizard is not needed here. Your users probably aren’t rocket scientists but they aren’t idiots either.

Option 1: table

• Users love this. If it’s in any way possible, try this.
• Recent tests show that putting the most expensive products first is the most effective.

Top row: good examples by Shopify en Combell, lowest to highest price. Basecamp (bottom row) does slightly better: from highest to lowest price and with extra information on mouse-over.

Option 2: separate blocks

• Clear heading.
• Main characteristics in bullets, preferably in such a way that it’s easy to compare the different products or services (a.o. by the same order and approach).
• Price.
• Each block should be clickable in its entirety.
• Line up blocks horizontally whenever possible. That creates a better overview.

The blocks on the Telenet website offer a pretty good overview.

More than 10 products or services?

Facets

All products on 1 page with faceted search on the left.

2 good examples of refining results by faceted search: Bol.com (left) en Booking.com (right)

7 things to keep in mind about faceted search

1. Put the faceted search on the left. You can put it on the right, but less people will notice it. You can put it at the top of the page as well, but that will push the actual results down and that’s not ideal.
2. Limit facets to the main product characteristics. Don’t cram every detail in there.
3. Take your customers’ view on what the product’s main characteristics are. Remember: what you think, doesn’t matter. It’s all about your customers.
4. Make selecting and deselecting the facets easy.
5. It should be impossible for users to make a selection that delivers zero results.
6. In many cases, it’s helpful if the user can order the results list (alphabetically, by price, by size, …).
7. If there are more than 20 products in your list, it’s best to go for numbered results pages (cfr. Google).

Detailed comparison

A more detailed comparison, that sums up all characteristics of comparable products in a table can be very handy for certain products.

More on product comparison

• Trends in pricing tables
• 50 examples of pricing tables
• Best practices for faceted product search
• The basics of information architecture

Other options?

Have you seen other good examples? Maybe you came up with one yourself? Feel free to leave a link to it in the reactions or send us an email.

Want to know more about how to make good home pages, overview pages and detail pages?
Join us at one of our usability workshops.

We don’t think things are as black and white as all that. Yes, contrary to what you’re used from us: a bit of nuance!

Update Friday 23 October 2009: Some guy called Jakob Nielsen commented on this article.

What is the page fold?

The term page fold is used for the imaginary line between the part of the page you can see without scrolling and the part of the page you can see when you scroll down.

Traditionally, the fold is considered to be on 570 or so pixels from the top edge of the page. That’s more or less what people see on their screens in a resolution of 1024×768. Now, recent figures on screen resolutions in Belgium show that 70% of the people use a higher resolution. So really, you need to take into account multiple folds on 1 page.  

Do or don’t people scroll?

It depends.

What does it depend on? The type of page and the type of website.

1. Homepages and overview pages

A. News websites

On news websites, page length doesn’t matter much. Most people visit a news website to get updated on the latest news. They prefer a long page, with not just headlines but also summaries of the main stories, to a shorter page with just the headlines. Scrolling down the long page is a lot faster than having to scan and click on individual headlines for more information.

When it comes to the homepage and overview pages of news websites, we’d even be inclined to say: the longer, the better.

News websites don’t have to worry about the length of their homepage and overview pages.

B. Big, well-known online stores

Big online stores that sell thousands of products ánd that are known to the general public, like Amazon and Neckermann, can afford to have long homepages and overview pages.

Most people who visit these sites know what to expect.
Their surfing behaviour roughly falls into 2 categories:

• Searchers
  People who know what they’re looking for (e.g.: Alice Munro’s ‘The beggar maid’) will very likely use the search feature or click on the category of their choice. They don’t care about the rest of the homepage.
• Browsers
  Browsers can be both bargain hunters or people who are looking for something but they don’t know exactly what just yet (e.g. some light reading for the beach). They will have a look around on the homepage and overview pages that interest them (like the overview page on ‘thrillers’).

Note: we’re saying big webshops can afford to have long homepages and overview pages. They don’t have to have them.

Amazon pretty much ignores the page fold. eBay makes an effort to put as much useful information above the page fold as possible.

C. Regular company or organisation

On the homepage of a regular company or government organisation people prefer not to scroll. That’s what they spontaneously say during user tests. It also shows in their surfing behaviour and it’s backed up by logfile analysis. (Use the ’site overlay’ feature in your Google Analytics account.)

People expect on the homepage of a ‘regular’ company that important information is visible without scrolling.

It makes sense for them to expect that. They’re on those websites to do something. And they’d like to do that as quickly as possible. The top tasks people use the site for should be immediately visible.  

VMW tries very hard to put all the important info above the page fold, both on the homepage and on the overview pages.

Can’t you put anything below the page fold?
Sure you can. Most people surf in higher screen resolutions than 1024 x 768 anyway. And of course some people will scroll. Just don’t assume all of them will. Put the really important stuff, your visitors’ top tasks, above the page fold. Lower down on the page you can put less important items like news, events, etc.  

How can you encourage people to scroll?
Avoid page-wide ads or empty areas near the page fold. Make clear the page doesn’t end there. Show a little of the content that’s below the page fold. That encourages people to scroll.

Vlerick and Belgium.be put their most important links above the page fold. Because people can see the headings of the info below the page fold a number of people will scroll on these pages.  

2. Detail pages

On detail pages length doesn’t really matter. People will scroll just as long as you keep them interested.

But just because people scroll doesn’t mean you can do whatever you like on a detail page. Again, make clear what the page has to offer above the page fold. There are different ways to do that, depending on the type of page.  

A. Product pages

• Executive summary
  A short summary of the most important information at the top of the page. Amazon’s product pages are a good example. You can immediately see the product’s name, picture, price and whether or not it’s in stock.

• Tabs
  Tabs, or more precisely in-page tabs, are interesting if you have a lot of information about a product (i.e.: product description, technical specifiactions, references). Tabs are best used in combination with an executive summary. Like on KeepYourCooler.com.

B. Content pages

• Jump links or anchor links
  A clickable table of contents at the top of the page. The long detail pages of the province of Flemish Brabant are a good example. Read our article on anchor links for a more detailed explanation. 

Just a reminder: also on detail pages you should always make clear the page doesn’t end at the page fold. Give a hint of the content below the page fold.

User testing is important, but it can’t tell you everything 

The conclusions of cxpartners’ article about the page fold seem to be entirely based on user testing. Now, as you may or may not know, we are big advocates of user testing. But it is not the be-all and end-all of usability.

User testing is qualitative research. It takes more than data from user testing to make a bold statement like ‘the page fold is a myth’. You also need data from quantitative research, like logfile analysis. When you look at these figures, you’ll often see that links above the page fold are clicked 3 times as often as links below the page fold.

It’s important to know whether or not people scroll. But it’s not the only thing that matters. How many people simply leave a page with little or no content above the page fold? What’s the conversion rate of pages like that?

Moral of the story

Is the page fold a myth? No, it isn’t. The page fold exists and affects people’s surfing behaviour.

Put important information at the top of the page and make sure people know the page doesn’t stop at the page fold.

No explanation needed.

A website that needs a manual is a bad website

No matter how long you thought about the concept of your website, no matter how great the idea looks on paper, no matter how unique or – God forbid – innovative you might think it is, if the average user doesn’t know what to do when he sees your website… start over.

The makers of www.cocoonstudio.com obviously don’t share this view. This is what the user sees, after skipping the obligatory intro this kind of site seem to automatically come with.

Cool. Let’s have a look at the ’services’.

Interesting. But nothing seems clickable. So what do I do now?

Wait a minute. What’s that teeny question mark at the bottom left doing there?

Voilà. The manual for the website. Isn’t that considerate of them?

Thanks to reader Stijn Zwanckaert for tipping us off on this one.

]]> http://webusability-blog.com/does-your-website-need-a-manual/feed/ 3 http://webusability-blog.com/focus-the-basis-of-every-good-web-page/ http://webusability-blog.com/focus-the-basis-of-every-good-web-page/#comments Sun, 28 Jun 2009 04:58:32 +0000 Karl Gilis http://webusability-blog.com/?p=269 While reading ‘Learning to see creatively’, a book on photography by Bryan Peterson, it occurred to me how many similarities there are between a good photograph and a good web page.

Focus!

A few quotes by Peterson:

• “Amateurs often end up with pictures that have too many points of interest. The resulting lack of direction and subsequent confusion alienates the eye, forcing it to move on, seeking satisfaction elsewhere.”
• “Without order you have chaos. With chaos comes stress. With stress comes the inability to perform well.”

Very true. For photographs and for websites.

Bad web pages have too many focus points. Visitors don’t know where to look. They’re confused and go back to Google to find someone else who’s got what you’re selling.

I can’t begin to tell you how often we see people during user tests who simply don’t know where to look on a webpage. Overcrowded pages drown out the important information in such a way that people effectively do not see it.

Less is more

For a travel brochure Peterson was told to take a picture that said ‘Amsterdam and the Netherlands’.

• 1st attempt (top left)
  Flowers, bicycles, a canal and pigeons (Peterson fed the pingeons to make sure they stayed put). Result: too many focus points. Messy.
• 2nd attempt (top right)
  No more pigeons. Trying to clean up the background by way of a passing tram. Result: still too busy.
• 3rd attempt (bottom)
  A radically different point of view, focussing on the basics: tulips, bicycles and the calming water in the background. Result: a beautiful photograph with maximum impact.

Focus. That’s what every website needs, from the homepage to the detail page. Focus on the things that matter.

Just like Google focuses on the search feature on the homepage, despite the multitude of other tools they have.

Shameless advertising
AGConsult has been helping companies and government agencies with finding their online focus since 2001.
Curious to see what we can do for you?Contact us.

]]> http://webusability-blog.com/focus-the-basis-of-every-good-web-page/feed/ 0 http://webusability-blog.com/homepage-design-horizontal-lines/ http://webusability-blog.com/homepage-design-horizontal-lines/#comments Mon, 11 May 2009 11:03:27 +0000 Els Aerts http://webusability-blog.com/?p=162 A lot of homepages are full to the point of overflowing with content. Most of the time, that’s not a good idea. Then again, sometimes it’s the only way to go. For a newspaper website for example, a long homepage filled with content is the norm rather than the exception.

In other words, a long homepage isn’t always a cardinal sin. At least not when it looks orderly and structured. Unfortunately, some websites look like they’ve been thrown together from a distance. The result: a mess without visual anchor points to steady and guide the visitor’s eye.

Horizontal lines are calming

There’s a simple thing that makes a page look a lot calmer: the horizontal line. You can use an actual horizontal line or you can simply line up a number of page elements to an imaginary horizontal line. Try it. It’ll make your page look less frantic.

Example: De Standaard

We tried it on the homepage of De Standaard, one of the leading Flemish newspapers.

The actual homepage of De Standaard

After our cut and paste work

Four things to keep in mind:

• We’re not designers.
• All we did is rearrange the existing elements.
• We didn’t change the number of vertical columns.
• We did it in 5 minutes.

What do you think?

Can you tell the difference? Is it an improvement? We’d love to hear from you.

]]> http://webusability-blog.com/homepage-design-horizontal-lines/feed/ 1