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 got a textfield/combobox for typing a search string (or selecting a recent searchstring). The search results are presented in a list below the box.

I also got a textfield for filtering the list.

The following familiar designs illustrate the problem. The upper example is from Outlook where the list is sorted as you type. The bottom example is from Chrome where suggestions are given in a dropdown box.

autocomplete vs filter

How to combine the two? The suggestion area (Chrome) would overlap the list (Outlook).

Does anyone have an example of an application that combines filtering and suggestions in one box, similar to this? Maybe I am way out, because I cannot find any.

share|improve this question
    
I'm confused as to what the problem is? Are you not content with the examples you provided? Looking for another way to accomplish the same task? –  Aaron McIver Nov 29 '11 at 14:56
    
The problem is that the suggestion area would overlap the list, so that the filtered items cannot be seen in full. In our application we have two boxes, one for searching, and one for filtering the search results. I would like to find a way to combine them. –  JOG Nov 29 '11 at 14:58
3  
The Chrome example you provided appears to meet your needs though. It is both filtering and providing a suggestion via the main URL bar. Are you wanting more then one auto complete suggestion? Why does the Chrome example not work? –  Aaron McIver Nov 29 '11 at 15:08
    
It is the list below the box (the mail list) that is filtered, and also covered by the suggestion dropdown (the search string suggestions). –  JOG Nov 29 '11 at 15:16
    
@aaron-mciver The Chrome example presents one instance of each suggestion, while the (hypothetical) results list which is being actively filtered could show multiple hits for the same terms. –  Erics Dec 27 '11 at 23:22

4 Answers 4

up vote 2 down vote accepted

It is possible to combine the two, but you'd need to carefully design the location and size of elements. Google Instant for example provides both suggestions and live filtering, combining the two by judicious spacing, positioning, and sizing. They manage it by having only 4 suggestions on the drop down, and having some non-essential guff take up that minor amount of space between the search box and the first search result.

google instant in action

share|improve this answer
    
I think I will have a hard time getting away with the guff. :) –  JOG Mar 21 '12 at 8:30
    
This is marked as solution as this does not require another action. I don't want to force my users into being aware of exactly what kind of feature they are using. –  JOG Apr 27 '12 at 8:26

I always think it terms of the data range. If this is for a site with a fixed data set (think Amazon, who knows every product they sell), then they can "steer" you in the correct direction by auto-correcting, and preventing you from searching for something they don't have.

A good supplement to this is a suggestion, which is positioning what you think is close to the typed in term.

share|improve this answer

There is not a standard pattern for a mixture of "live" search and a "live" suggestions/filtered search because they are very similar concepts that probably don't merit being presented in the UI simultaneously.

Perhaps you would better serve your users by following a more conventional "suggestions first" search pattern. Below are some implementations in JIRA and OSX Spotlight that are worth studying:

enter image description here

  • You start by delivering a targeted, concise result set.
  • The length of the results is intentionally kept short (and categorized in these cases) to aid quick scanning.
  • A secondary link in the results points to a more comprehensive, lengthy "full" search of the same search term.

This pattern favors the live suggestions and puts trust in the search engine, betting that most people, most of the time, will find what they want at the top of the pile.

share|improve this answer

One solution (if I understand the question) would be to require another action, such as clicking a go button or pressing return/enter before the filtered view get's updated. So, only worry about one step at a time. Populate the auto-suggest dropdown during typing, and then after the confirmation event, hide the suggestion box and filter the data view based on the new value.

share|improve this answer
    
I guess requiring another action could be the right approach! :) But it's still problematic: I still want to keep the instant filtering while typing, so using a key press, like tab, would only have the direct effect of hiding the suggestions. (I got enter kept for selecting the best suggestion ("stackoverflow.com" in the example)). –  JOG Dec 7 '11 at 0:06
    
Does anyone have an example of an application that does something similar to this? Maybe I am way out, because I cannot find any. –  JOG Dec 9 '11 at 12:30

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.