32
The NNGroup sums it up pretty nicely here: Icon Usability
A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.
There are a few "standard icons" that are almost universally recognized, such as the ...
25
A dropdown list (or combobox) should already be a clear indication that you need to select an item from there, so wasting the first item by telling someone this is redundant and a poor idea.
The only times that I would recommend having some other text in the dropdown are:
when it is not essential to select an item
when you want effectively to select all ...
22
Some sites have "near miss" matches after their exact matches.
If a user has exhausted everything precisely matching their criteria but is still looking, there's a clear line and an explanation that this is the end of the results, then "near misses" sorted by how close to matching they are.
"Unspecified" would rank higher in this formula than "specified ...
answered Mar 2 '15 at 18:47
user56reinstatemonica8
2,6461 gold badge13 silver badges24 bronze badges
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 ...
20
There are certainly other solutions, but probably the simplest would be to change the button text from "Clear All" to "Reset Filters".
Now, instead of "emptying all filters", the button indicates that it's "resetting all filters to the default value" and the checkbox can remain checked.
18
In the original GUI guidelines from the Lisa/Macintosh, Xerox Star, and Microsoft Windows, check boxes are, as the name implies, something you can mark (with a check-mark) if you wish to select or mark it - or clear if you wish to deselect it. Each checkbox choice is independent of each other, in terms of their activation.
Radio buttons, on the other hand, ...
18
Nested blocks in a vertical layout
This pattern tested very well with our users. It uses common language to explain what you are looking for and allows any level of complex grouping where individual blocks can be moved around, changed from AND to OR, or deleted.
This level of clarity does take up quite a bit of space but not too much for most simple ...
17
A few things about your question and some next steps:
User Experience Experts are just people that swallow their pride & know to ask their users / customers. I'd like to think my experience gives me a solid base for presenting better-than-average first-shots, but I know that users ultimately control the direction of my work.
I wouldn't necessarily take ...
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
Yes, there is a convention:
checkboxes = option for multiple choices
radio-buttons = only one single choice among the options
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 ...
13
No, use the icon with a label.
It's not safe to assume that people understand the meaning of the icon as it is used to adjust their preferences and to filter the results. So the meaning is already dubious.
When you search for a preferences icon you get mainly cogs and sliders. But when you search for filter icons you get mainly funnels and sliders. See below....
11
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.
[......
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 (...
11
I do see the funnel icon used widely for "filter" but in this case you've labeled it "preferences", so I think we have a bit of a disconnect there. I would expect most users to think of "preferences" in terms of what colour their background is, quite different than filtering content (as in selecting the results of a search).
...
10
This is really a problem of linguistics. In some languages, for example, there's no difference between green and blue. There is some research done by Brent Berlin and Paul Kay, which suggests a natural evolution of colours within languages (see here). I would use this as some guidance towards which are the most 'important' colours. The following diagram ...
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 (...
10
If you need complex filter consider creating a separate section. Perhaps a "actions" section on top of the table where users can not just filter but perform other actions to interact or modify the table.
Here is how Airtable does filter for complex spreadsheets. Some visual design improvements could be done, though.
Here is another example, from Toggl. ...
9
I think adding a progress-tracker would be a good way to guide the user to complete the 3 step process.
Check out the mockup below.
When the page loads up all the steps in the progress tracker would be grey. But as the user selects an option under each list, the selected value can be displayed right above the list with some sort of indication that it's the ...
9
From a technical point of view the two are basically the same (i.e. excluding elements from a list, based on some criterias)
From a user point of view, it's very different:
Search is done as a first step to get some data
Filtering is applied on top of the search, after the search, never before
moreover, filtering is usually performed using boolean flags ...
9
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 ...
9
No. For the user to actively specify a color, then see colors which do not match their specification risks confusion and a lack of confidence in the accuracy of the tool.
An alternative would be to add a sub-category of "Unspecified".
If you want to do something really interesting, crowd-source the data in the Unspecified category and ask users to say what ...
8
You could use the token-field design pattern for displaying and selecting the multiple options. This has the advantage of letting the user see all the items they have already selected while they select more, not just the options that match the current filter.
Some token-field implementations also implement the type-ahead filter design pattern you have.
...
8
You are facing a problem that Google has already solved and extensively tested, so copy them. In essence it is:
Use a query language that is appropriate for your audience - Lucene is a decent choice for this. Query languages are faster for advanced users to use, and is what most search engines allow.
Offer an "Advanced search" link/tab/button that shows a ...
8
Suggested solution:
How should I visually represent multiple three-state flags? The
complication is that each flag has three possible states
Means there are only two states "on/off" for the component, but component itself can be disabled or enabled. So it is enough to have two state switch.
Having that understanding it is possible to throw switch ...
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
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 ...
Only top voted, non community-wiki answers of a minimum length are eligible
