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

During user tests, the response to anchor links is always positive. People like anchor links because they give them a good overview of the content of a page and help them to quickly go to that part of the page that interests them most.

What are anchor links?

Anchor links, also called jump links or in-page links, are links that lead to another part of the page. If someone clicks on an anchor link, he doesn’t go to a new page but to another part of the same page.

When to use anchor links?

Anchor links are only interesting on longer pages. Pages where not all sub-headings are visible without scrolling in a screen resolution of 1024×768 (still the most used resolution).

Just to be clear: anchor links are best used on end pages or detail pages. The page about a certain product, service, etc.   

How do users feel about anchor links?

They like them. But only if a website uses them correctly: like a type of page-index.

During our tests, we see that around 1 user out of 10 is not familiar with anchor links. But even they, when they click on them, know what they are and like them.

The basics

• Put the anchor links at the top of the page, directly below the page heading, as a type of page-index.
• Respect the rules of clickability.
• Make sure the words you use in the anchor links are exactly the same as the words in the sub-headings they refer to.
• Make sure the sub-headings are recognizable as key elements of the page.
• Make sure the sub-heading the first anchor link refers to is visible without scrolling.
• Put a link ‘Top’ or ‘Top of page’ on the same line as the sub-heading. Add a little arrow that points to the top if you want to. Right-align this link.
• Make sure the anchor links jump to the right sub-heading in every commonly used screen resolution. This may mean you have add white space at the bottom of the page.

This is how to use anchor links

This is how not to use anchor links

1. Text between the anchor links and the 1st sub-heading

There’s a piece of text between the anchor links and the 1st sub-heading. Now, what are the chances of that ever getting read? Minimal. If that text is necessary, give it a sub-heading and put it at the top of your list of anchor links.

2. Anchor links combined with other links

What’s the difference between all these links?

• The links at the top are navigation links that refer to pages on a deeper level.
• The link in the middle refers to a related page.
• The bottom links are anchor liks that refer to paragraphs lower on the page.

If you mix links up like this, people will not like your anchor links. But then again, chances are they won’t like your site much either.