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 ...
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 ...
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, ...
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 ...
Yes, its a convention. If you take a look at big and heavy traffic sites like Amazon or Ebay, you will see this behaviour. You see everything of a list unless you start filtering by checking a filter option. And no filter is preselected/checked at start.
Make sure not to forget a clear filters option. At some point you could filter so heavily, that no ...
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 ...
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.
I vote for option #4.
A search from the main page should show mostly videos and a few pictures to hint to the user that there may be more content types on the site than they realize.
If they're searching from a picture page, show mostly pictures but a few related videos as well.
download bmml source – Wireframes created with Balsamiq Mockups
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 ...
It depends on what you want to do. :)
Use checkboxes (or other toggle buttons) if you want to provide for applying several filters at once. If you want to use them for single value, then listen to @AndroidHustle regarding manipulating them, and only use them for single, independent, boolean values.
download bmml source – Wireframes created with ...
Keep filters on the left side and make categories collapsible. It's the most common approach so doing it differently might confuse/disorient users. You might want to show some frequently-used options expanded and you can find out which ones those are by doing some user research & testing.
There are plenty of sites with complex filtering options (mostly ...
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.
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 ...
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 ...
You should never manipulate a checkbox option-group to act like a radio option-group, this violates the conventional and expected behaviour of the user interactive element. So no single select checkbox.
Dropdown list Vs. Radio buttons: This really depends on the layout of the search form (if that's what this is) and how many options there are. Radio buttons ...
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 ...
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 ...
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 ...
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.
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 ...
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 ...
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 ...
For questions like this, especially around customer experience in e-commerce, I sometimes try to imagine the situation as it might occur in the brick-and-mortar world.
In an actual shop, would you ask your customers to stare at a wall until they told you what they were looking for? Of course not.
Customers want to browse.
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. ...
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 ...
There was a great article about this a couple of years ago that found that filtering/sorting are the same thing to a lot of users. There is a strong mental model of "filtering by sorting".
The Mystery of Filtering by Sorting by Greg Nudelman:
"The ostensible need to visually separate sort controls from filtering controls is a myth."
So I think you could ...