21
By definition, a filter is a tool that help users narrow down to a subset of results that is most interesting to them. Consequently, when a filter is active, the results displayed should be less than the total number of original results.
For this reason, I find option B not intuitive enough. If I'm not mistaken, option B treats the icons using an additive ...
17
That depends on technical aspects of the system,
as a thumb rule, it's always a good idea to provide facets results immediately, and by doing that also eliminate non-relevant results,
but, if the filtering takes a moment, use the button, so the user won't have to wait every time he adds a new filter to the search.
16
For most decisions about whether to put an interactive element (filter control, comments box, etc.) above or below an element it usually comes down to which you want the user to read and engage first.
In this case you likely don't want the user to read each of the fonts before choosing to filter them, so I would put it at top. This allows the user to ...
14
You could make the labels of the checkboxes negative (e.g. Pork-free or No Pork). I would change the checkboxes to toggles as it makes it more clear whether you tick something to be excluded or to be included.
This a very similar problem when you exclude means of transport when searching for a route. You might find some more inspiration there.
13
If the filter is mandatory, choose the most frequent search as the default.
You can try a scoped search dropdown before the search input field. This way the search button is Active from the beginning.
Lead with what your metrics show that the majority of users will want to search by, and don't make them pause to choose a filter.
The tradeoff
If you have ...
11
I remember GitHub had something like what Mike M suggested for their search. I just noticed that it's changed, and what they do now is make the selection a part of their autocomplete-like menu:
I imagine the default selection at the top is what they believe to be the most common, which makes sense to search in the current repo by default. An advantage I ...
11
Does creating the filter in this way break consistency with other filters you are using? If so it would be better to find a way to create a filter using consistent logic by rephrasing the query.
The first option below (on the left) has all options in the list preselected, so the user can unselect specific foods as per their requirements.
The second option (...
10
Avoiding the dilemma
There's an possible solution without falling into this dilemma:
Give users the choice, just by adding a checkbox below the search/filter input which specifies "Search in hidden columns too" or some similar text.
download bmml source – Wireframes created with Balsamiq Mockups
If for some reason that's not enough I'd choose 4 (...
8
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 ...
8
I would never understand that the [Filter by] and [Sort by] elements are clickable if you did not write it. It is not a good approach.
However, even at the end they are a little bit confusing to me. What I would do would be using the top pattern but changing it a little bit, so that the button is separated from the row of fields:
7
You could see how spreadsheet software cope with filters. The narrow columns are not a problem. More important to provide feedback for a user.
Using multiple select, even wide columns could be too narrow to display the filtering options. So again, you primary task is to clear display the filtering is applied to columns (system state). The filtering itself ...
7
Since this is a mandatory tasks before interacting with search, consider search like the Call to action like save or submit. Before you can accomplish these actions you must fill out a form.
In this case your form is a radial group and a text input field.
6
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
...
6
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 > ...
5
OR searches are probably how people understand searches by default* so have that as you default option.
Then underneath have a checkbox** that says:
[] Results must contain all words/tags/whatever
This way the user doesn't need to think about it if they just use the default. If the default isn't what they want they are presented with a single concept as ...
5
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).
Range ...
5
Short answer: It's fine to put the clear-all button in the bottom left.
Long answer: There is not enough info here to talk about the UX of your site, as we would need to know much more about the users, where they have been to get to this screen, what motivates them, etc.
We could talk about the UI, although as this is a simple overlay there is still very ...
5
Your proposal is clear to understand and will work. However, I was thinking of a different way to layout elements.
The title refers to the whole Dialog so you could place it in the centre
Deliver & shipped checkboxes were breaking the direction of the main checkboxes
"Reset All" acts as a Select/Deselect all checkbox (or just the former), so placing it ...
5
If these are the only two options and are likely to remain so, I would go with something like this:
download bmml source – Wireframes created with Balsamiq Mockups
5
Did you consider an auto-suggest search for both categories?
That way you provide the user with immediate value before forcing him to make a further choice..
4
If the use case is "As a user I want to filter the table by country so that I can focus on only the records I care about" and they don't need to know country data on a row by row level, then it would make sense to not add columns to an already bloated results-display table.
The filtering data and the columns in the table don't need to be 1:1, especially in ...
4
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.
Consistency
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 ...
4
Between the two options you provide - Option 2 is better than Option 1 because :
2-directional scanning vs 1-directional : It is easier for our eye to scan in one direction (y-axis) compared to 2 directions (x & y axis). So even though you can see more number of items in Option 1, you can find something quicker in Option 2.
2-directional clicking vs 1-...
4
If I understood correctly, what you want is the filter to be inclusive or exclusive. You could use a dropdown which has both options:
Include
Exclude
With the default to be the most used one (include I presume). The phrasing could adapt better to your scenario but the idea is "Include results from the selected filters only", "Exclude results from the ...
4
I really don't like the blocking mechanism and that you can't send another search request in case you want to correct a typo or such.
What can we do to avoid making the user wait until the request is finished in case the search entry was wrong and needs to be changed?
Let the user cancel the search. The request is wasted anyway, don't force the user to ...
4
It's important to understand what the functionality of a Filter is.
The reason why a user would apply a filter is to weed out results that
they don't want.
If no filter is applied, the user expects to see all the results.
As far as the "showing all results seems non-intuitive" is concerned; that is a whole different use case on its own. That depends ...
4
I think the answers so far are missing an obvious trick. Combine the include and exclude filters. Each item has a radio button for include and exclude.
Here the user would like to see food that contains chicken meat and nuts but does not contain mushrooms.
-- Filter by ingredients --
Inc. Exc.
☐ ☐ Prawns
☐ ☐ Pork
☑ ☐ ...
3
I think your concern that updating the result in real time would distract the users is not actually a serious issue - in general, most interfaces strive to be as quick and responsive as possible (see Amazon shopping interfaces, eBay filtering interfaces, or Google instant search).
The real issue is whether or not you can actually be responsive while ...
3
This answer sums it up nicely that
Filtering takes an existing full list, and removes items based on
criteria that match/don't match.
Search takes a blank slate and adds to it based on criteria that
match/don't match.
In chronological order, that means that filtering usually is done after searching because it requires an already existing result ...
3
1 Add a 'All' checkbox at the top of the list (selected by default).
I would advise against the All checkbox, as it's against the intended use of checkboxes. If the checkbox is checked, no other checkbox should be able to be checked, as you can't display both All and a filter.
2 Add a 'View all filter name' link at the top of the list (once the user has ...
Only top voted, non community-wiki answers of a minimum length are eligible
