Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am creating a control to allow users to select an item from a list. The number of items can vary greatly - anywhere from a handful up to millions.

A drop-down with autocomplete functionality seemed to me like a sensible choice. If there are few items, a user can click the arrow and select the correct one; if there are many she can quickly find the correct one by typing the name of the item.

However, sometimes this is not enough. With several thousands of items, a user may require more advanced search criteria to find what she's looking for. Currently, this is implemented as a Search-button to the next of the field that opens a dialog with additional search criteria:

Mock-up of the current drop-down control

The user enters criteria and clicks the Search! button, whereupon the drop-down is filled with the search results.

Unfortunately, there are problems with this approach. Some I can think of are:

  • There is no visual indication that the drop-down and the filter dialog are linked
  • The search results are not immediately visible
  • The dropdown remains filtered after the dialog is closed, without any indication to the user

So, I'm looking for suggestions. Is there a common way to do this that I have missed? Do I need to rethink the advanced filters? Can this be remedied just by adding visual cues?

share|improve this question

3 Answers 3

up vote 4 down vote accepted

One more option to consider, if you can expand the dropdown a little bit treating it as a pane rather than dropdown sensu stricto: Dropdown filter pane

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.

share|improve this answer

Consider this layout:

enter image description here

The search field is clearly visible, distinct, and the filtered results appear below, to be chosen by the user. For multi select, you can use the tag approach:

enter image description here

Both examples are part of an open source Javascript plugin, Chosen.

share|improve this answer
1  
Thanks! I love the feel of Chosen, and I although I don't really see how it solves my larger problem. Do you mean that I should do away with the "advanced filters"? Or do you mean that if I place the search button inside the dropdown foldout, the dialog and the foldout will be open at the same time, making the search results immediately visible? –  waxwing Feb 22 '13 at 8:45
    
It seems like you're answering the wrong question. The question was about "advanced filtering panel and behaviour". –  alexeypegov Feb 22 '13 at 9:33

Here is an example of a dropdown with filtering and advanced filtering options:

enter image description here

The filter icon on the right will toggle advanced filtering (by file type in this case). You may change the colour of the filter icon (button) to differentiate the state of advanced filtering (gray for off and blue for on).

share|improve this answer
    
What IDE is that screenshot from? Eclipse? –  Charles Wesley Feb 22 '13 at 16:32
1  
@Charles IntelliJ IDEA –  alexeypegov Feb 22 '13 at 21:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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