In Best Practices for Designing Faceted Search Filters Greg Nudelman talks about "drill-down" versus "parallel" selection:
A link is the simplest mode of filter selection. By clicking a link, a customer can either select a single value for a specific filter or drill down a level in a taxonomy, like a category or department hierarchy.
The filter method you suggest usually works pretty well. We're using a variant of it in one of our products:
This way we still have a heading row at the top which you can use for ordering data. This also ensures that you know which column contains what even if a value has been filled in the filter.
Disclaimer: this is a web-app for which the users are ...
Yes, that is a very good idea. There are a number of sites that I have used that don't do this, and the result can be very frustrating.
Lets say that I have spent time looking at many items and I am many items below the search / filter component.
If I want to double check what it is, I have to lose my place and spend time scrolling up first. Poor ...
Moving to more human-like computer system, you could give to the system some human features:
Politeness -- don't make use blame himself of his error (this effect is described by D.Norman in The Design of Everyday Things). Just point it gently.
Forgiveness -- both computers and humans make errors. Forgive the user and he will forgive the system's error once. ...
I suggest not making the change at all. Here's why:
The affordance you are trying to provide could cause more confusion than help. Since you have small number of filters, giving the repeat users more help to "not have to" set the filters to their liking every time is a nice thought, but weigh this against this user data:
• how long does setting the filters ...
It is almost always better to both (a) cut out unnecessary steps, and (b) immediately show the user results of an action. Automatically filtering results when the user clicks a check box does both of these things, and having a "Filter" button does not, so the first design is better. Of course, it should also be easy for the user to undo or change the ...
Use a tabbed container for the filters
A common and acceptable way to separate filter options, is to user tabs (or versions of tabs) This can often be seen on travel websites, where users can search for several different services.
With this method, it's only possible to submit one set of search criteria at one time.
Put each set of filters in an ...
Yes, it's possible to integrate filters with breadcrumbs to create a more robust product browsing experience. Such a system is called faceted navigation (your filters are facets). There's one catch to it: you must give your users the option to edit/remove any of them without changing the rest.
Faceted navigation mimicking breadcrumbs is easy to implement in ...
Informing users what's going on is never wrong. Assuming that we’re within time limit (<100 ms) and do not need to do anything is always wrong.
How can you tell how long it takes for user X to download content Y from your site Z at any given moment? There must be at least 200 unknown variables here that you do not have control over. That’s the reason we ...
For faceted search, the best practice I can recommend is to not allow the user to create a condition that will end in no results.
When the user makes a selection, disable elements that do not have results tied to them. Any further user selection should further narrow the current already filtered result set.
download bmml source – Wireframes created ...
Slider has more cognitive load for a user. Also interaction implementation using slider could lead to some time losses.
In a scenario when user keep in mind the intended price range for a product, possible issues are:
User should constantly map the intended number and slider position.
Even if the intended number is displayed in the slider, some users
2 arguments in favor of sliders:
If I'm shopping for foo, I'm usually operating with an upper price boundary but not a lower one. Not always, but usually. A slider lets me keep my lower limit at $0 while I tweak my upper limit. Links to set price ranges force me to chunk out my search for the perfect foo (click link > scroll through lowest price range > ...
Sliders give free choice of the price range.
Problems with Sliders
However, since they are usually one of multiple criteria, and the majority of the screen should present results rather than the filter, they are usually quite small.
Picking a specific price requires pixel-perfect positioning (or - in case of a hard limit - isn't even achievable).
Use drop down if you have more than 5-6 sizes, to reduce clutter.
If you have up 5 options then radio button's present complete visibility, some good examples of best practice attached:
This product only has 3 sizes, so radio buttons or visibly selectable fields are the best options here.
But with an item such as shirts, with a number of neck size options ...
You can consider third option, when products are not updated automatically, but Filter button is floating. Please watch the animation:
So the filtering button is always close to user's point of focus and mouse travelling distance is short.
This solution is good, when:
search is quite slow
probability of complex selection (many options) is high
I'd go with the dropdown or the filter bar (option 1 or 2) depending on the frequency of use and the available space. Option 3 is too invasive and distracting.
With those two you'll be able to show selected states, for me the difference is that filter bar takes more space and saves user 1 click (no need to expand dropdown), and with the dropdown you gain ...
One answer. You've asked whether to use drop-downs. First, when I looked at the illustration you posted, I didn't recognize your boxes as drop-downs because there's no ▼ cue that anything will drop down. I suppose you could add a glyph (triangle) to signal that these boxes is a drop-downs, but there's a problem with that: drop-downs are unusable for a ...
I think the learning curve comment you received was more because the switch along with either "All" or "Any" was confusing. When the user is viewing the switch with "All" there is no context as to what exactly it means and what option does one have if the switch was toggled. Apart from this, I don't see any major issue with your current solution.
As all it ...
I suggest the following rules for the check-box filters:
No need for "Show All" option. Instead, add a "clear selections" link under the facet's label whenever 1 or more options are selected.
Sort the options in each facet by their number of results.
Don't show options that have 0 results.
Show up to 3-5 options for each facet, and a "show more options" ...
NewEgg has a good solution for at least part of this problem. They created some range sliders that are used for multiple purposes...
You could certainly use that for the ratings filter.
The other thought is to hide the options for which there are 0 matches, such as the top 3 options of "resource type".
One idea is to group the child category filters below the parent category. This makes it clear that the child category filters will return a subset of the parent:
download bmml source – Wireframes created with Balsamiq Mockups
This design gives you flexibility in the event that your taxonomy changes. For example if a new subject type is created for ...
The breadcrumb shows location on the website and the filters are used to show mode. Placing the two in the same area of the UI may suggest they are, in fact, the same thing, which could be confusing.
One complexity arising from your solution is that the two components are usually designed to operate independently from one another. For instance, I can ...
Pre-offer results as much as possible
If you can correct spelling: pre-offer the results of the correction
along with the correction
If the user has too many filters: pre-offer
unfiltered results and offer to turn filters off
If the system
can find results for fewer terms, offer the those fewer terms
If the system can find results for words that are ...
I think the filtering links at the top of the table work well.
At first I couldn't make sense of your Right hand filtering table - but I realise its similar to the Amazon filtering system. So perhaps better to put the filtering table on the left hand side?
I've also seen it done above the table with WordPress, which seems more noticeable than your right ...
One more option to consider, if you can expand the dropdown a little bit treating it as a pane rather than dropdown sensu stricto:
Remember that criteria in the top right only can present a short sumary of what is defined in filters, but this should be enough for user to be aware of it.
The idea is to show the filters alongside with the dropdown.
I prefer a slight adaptation to your second example, "Alphabetic with Append." My slight adaptation is to make a distinction between the top 5 and the remainder of the results. This could be something as simple as a horizontal rule below the top 5, or showing the results in columns to the right. For example:
For starters, I'd rethink the use of a list 'thousands of items long'--at least if the UI is check-box centric. That could be a nightmare for the end users.
As for how to handle 'NOT' one idea would be a 'select ALL' option.
☐ Pop Music
To choose everything EXCEPT Pop Music, the user could ...
Stay away from accordions, these are confusing and making finding specific filters impossible
Placement should be on the left side as this is most comfortable for most users
Make sure the filters have a good visual tie to the page. Don't make the filters look like an orphan.
Keep a "cloud" of filters that the user can eliminate as needed
There are several reasons that if your facetted search is very open, more like a network of combined selections, that you should leave empty filters visible.
You are better off disabling the filters so the interface retains consistency throughout the interaction. If there are always the same set of filters then the user can learn the interface ...