10

Lets say you have a typical set of product search results, and a typical sidebar with various checkboxes for you to filter and limit your search results. Something like the example of the left of this image:

enter image description here

From a UX perspective, which is better/easy/more-intuitive:

  1. Every time a user clicks a filter checkbox or radio button or whatever, the page refreshes (or the results refresh via AJAX), updating the search results
  2. The user must manually press a "Filter" button after selecting various checkboxes, etc

The pros and cons for 1. is that every time a user hits a checkbox, the screen refreshes. This appears slow and cumbersome to the user.

For 2. The user might not realize they have to hit a "Filter" button in order to actually apply the checkboxes and stuff they checked. So they might hit some checkboxes and wait and nothing happens. Also, if the list of checkboxes and widgets is taller than the page, the "Filter" button could be at the top or bottom of them and be off the page, so the user can't even see that there is a filter button at all...

What is the best approach? I don't know if I've ever seen a site that really does it right.

Improve this question
3
  • 1
    The faceted searches I'm familiar with all update the results as you click on filter options. e.g. zappos.com/women~3#!/women~3 To have a button to perform the filter action seems to go against the grain unless the search process is very slow and you expect the user to use multiple filters and they know ahead of time that it's required. It seems pretty edge-case like.
    – nightning
    Jun 6, 2014 at 18:54
  • @Jakobud nice sketching. What type of pen do you use?
    – Danger14
    Jul 22, 2014 at 21:37
  • @Danger14 not my sketch. Just some example I found online. It looks like a typical whiteboard marker to me.
    – Jake Wilson
    Jul 22, 2014 at 22:15

6 Answers 6

Reset to default
8

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 filtering settings.

Your concern about the filtering being slow shouldn't be an issue as long as the results are loaded with AJAX and clicking a second filter before the first is finished will cancel and re-issue the load request with both filters applied.

Improve this answer
1
  • 1
    I appreciate all the other answers but I think your's sums it up the best. Filter results immediately and load filtered results in AJAX, so the user isn't waiting for the page to reload.
    – Jake Wilson
    Jun 11, 2014 at 19:40
5

You can consider third option, when products are not updated automatically, but Filter button is floating. Please watch the animation:

enter image description here

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
Improve this answer
2
  • What about on mobile devices? There will be not enough room for the floating button and it will get in the way ...
    – SepehrM
    Mar 27, 2016 at 13:32
  • @SepehrM you can have sticky button in the bottom, not the floating one. For mobiles this pattern of update-on-request is appropriate, as the speed and traffic can be limited.
    – Alexey Kolchenko
    Mar 27, 2016 at 14:14
4

My 2¢...

  • 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
Improve this answer
2
  • You're saying accordions are always confusing? I personally prefer accordions with clear headings than having to scan a long list of filters to find what I'm looking for.
    – SepehrM
    Mar 27, 2016 at 13:34
  • It depends on the number of filters per category. I guess I'd say use them as a last resort or in a case where you have 10+ items per category... even then, a "...more" option can help.
    – Aaron Benjamin
    Mar 28, 2016 at 2:19
3

I can tell you that all three design is not good and why - please comment my answer.

Current method:

  1. too much information and configuration options
  2. related searches is not top information - cut.
  3. "results for" is not need at all - cut.
  4. Display should be simple icons.
  5. Sorting can be icons too.
  6. Lack of breadcrumb like "CPU > Intel > New generation".
  7. Unselected filters can be open but better if they are closed.
  8. Search term not need combo I think - some help is need for free text search to learn terms.
  9. Lack of button to clear all filters!

My opinion I

  1. Selected filters should be not close to allow disable.
  2. Remove triangles from filters what is need of it? - loosing space and readability?
  3. All previous remarks is in force.

My opinion II

  1. Wrong design if it not dedicated http://en.wikipedia.org/wiki/Right-to-left - probably you want to show something new but not care if it working - it will be unique and looking like creative but really will not working.
  2. All previous remarks in force from current method.

Other things:

Every time a user clicks a filter checkbox or radio button or whatever, the page refreshes (or the results refresh via AJAX), updating the search results

It is no so easy to answer must be only AJAX and AJAX can be done in many ways. Search results must be refreshed fast.

The user must manually press a "Filter" button after selecting various checkboxes, etc

Do not make it hard - not all people: perceptive, fast learner, have good eyesight - consider that older people will spend too much time on your page and reject it.

The user might not realize they have to hit a "Filter" button in order to actually apply the checkboxes and stuff they checked. So they might hit some checkboxes and wait and nothing happens.

It is wrong that user not see what is doing - how to learn if you no see it?

I can do for you some professional design services but need to see site (including proper seo, navigation, layout, behavior and testing for the best UX) but it need contracting. I need to do analysis of you site that design - maybe it need more than one iteration - some testing is also need.

Consider that you can not do the best site for all people always but you can do the best site for as much as possible - some features should be cut to achieve it - some features should be not added.

Improve this answer
3
  • I only used that picture as an example and was only referring to the sidebar on the left side of the image, as I stated in my question.
    – Jake Wilson
    Jun 9, 2014 at 15:27
  • You can not design things separately and join together since it against good composition - when I design I analyze the not the individual elements. All must be in some kind harmony/balance and intuitive for target user.
    – Chameleon
    Jun 9, 2014 at 20:16
  • Sidebar is average design for filters - there are some better solution for filters - free advice cut only triangle add "+" for example. Very important is interaction with user and all elements of interface - I can say something about it if I see working site. Giving all options for users is not good things. I have very good ideas to improve filters but as I said it need some contracting since analysis and synthesis realization is required. There are at least hundred steps to achieve something very good and improve sales - send some link to real site :)
    – Chameleon
    Jun 9, 2014 at 20:28
0

From the pictures in your post I assume we're talking about a website. I know a lot of websites with a sidebar with checkboxes and they all give you the result immediately, so this would be my preffered choice (like others have mentioned). On mobile, where the sidebar takes over the screen, you could have the filter only apply the moment when the user goes back to the main screen, whether that means a manditory click on "apply" or a click on the main content.

Improve this answer
-3

The real usability concern on this one is the matter of surprising the user. Our jobs as ux practitioners is to seek out those points which confuse, hinder, surprise or irritate the user.

Relying on our genious to answer this may be wrong. What would be best is to create a quick click-able prototype using one of many different prototyping softwares, and then facilitate 5-7 user tests where you have the users try both out. You can watch for surprise in their completion. You could also time each task to see which is more efficient.

  • Does it surprise the user to have the page refresh upon clicking a checkbox?
  • Does the drop in efficiency warrant the need to go to an uncommon interaction (such as refresh from checkbox click)?
Improve this answer
1
  • 1
    This answer just says "do some research". That is not an answer to the question asked. I have also removed your self promotion spam link. Please refrain from spamming links to your own website. If you have a particular article you have written that directly answers a question here then you can link to that post (providing you include the relevant part of the text in the answer itself) but just including a link to your site in every answer is not appropriate for a Q&A site. We're here to answer questions not provide a platform for promotion.
    – JonW ♦
    Jun 10, 2014 at 6:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.