1

So we want to add filters to a searchbar, and while at first they wanted to put a dropdown containing the filters right next to the searchbar, eventually they decided to combine that, resulting in what I think is a convulated component:

enter image description here

I'm thinking the now popular way of showing a big box below the searchbar that allows the user to choose the filter first works better:

enter image description here

So after the user focuses on the searchbar and the filters show, she then clicks on one of the filter, which returns her to the searchbar to search within the narrowed down scope, maybe with the placeholde text "search within narrowed scope" or something.

What do you think? Do you think the convulated searchbar works too, or does it confuse the user? And do you think my alternative concept makes sense? Or is there a more obvious solution that escaped my attention?

Improve this question
2
  • Some more context would be useful, e.g. what type of data set you have, actual search terms and filters in your wireframe, target audience, who your customer is, approximate budget etc.
    – bjornte
    Sep 6, 2016 at 12:24
  • I guess I wanted to narrow down the scope of the question - the actual users are internal, and this is a small feature addon, so we're not expecting a lot of time on this. Finally, to simplify things, let's just say the search returns rows of textual data, and the filters reduce the rows of data the users need to search through.
    – ATWP
    Sep 7, 2016 at 8:15

2 Answers 2

Reset to default
0

Questions to ask:

  1. Does she have to use a filter or can she just make a search and be satisfied with the results?
  2. How often does she use filters when making the first search?
  3. Can the filters be combined or can she just use one filter at a time?
  4. Can she toogle the filters and then get a real time update of the search results?

If most of the users just does a search and then they're quite content with the search results, the filters should be hidden below the search bar and they can only be opened when needed.

enter image description here

If the user can combine different type of filters, use a form below the search bar. this filter form is only visible after she has clicked the link below the search bar. enter image description here

This enables the user to search and combine filters the way she likes without cluttering the user interface.

Improve this answer
5
  • The users are internal, and they are the ones who asked for filters. The filters are mutually exclusive, and right now, no they will not get a real time update on toggling the filters.
    – ATWP
    Sep 7, 2016 at 7:54
  • What I failed to also mention is that outside of this "filtered search" there are other filters and dropdowns scattered everywhere - they were added on requests and it's starting to look untidy and overwhelming. So actually, no, your suggested approach may not work because of the limited space. That's why I was considering the "megamenu" or "big box below" approach.
    – ATWP
    Sep 7, 2016 at 8:10
  • 1
    @Uebyn Ilias' questions were sensible and his suggestions were relevant to your initial question. However, you state you did not provide enough context. Can you move your additional background info from these comments and into the original question? Also, can you add more detailed wireframes?
    – bjornte
    Sep 7, 2016 at 9:59
  • @Uebyn If your form is cluttered with bells and whistles, then I strongly suggest you (and your team) shall consider a total makeover of that form.
    – Ilias Bennani
    Sep 7, 2016 at 13:04
  • 1
    @IliasBennani of course you're right - we have plans to declutter all those filters everywhere. For this particular question, I just wanted to know your views. I do think your hidden radio buttons approach is good though.
    – ATWP
    Sep 13, 2016 at 2:32
0

My "preferred take on filtered search" (as the OP phrases it) is to follow Google's lead. They use Group results with great success. With group results, the filters (or "categories") are presented as examples, and after the search has been submitted.

From a previous answer of mine:

To solve this problem, I recommend my clients to make two main result templates, based on the market leader's (google.com's) behaviour:

  1. One Main results template where categories (top level filters) are presented as group results. This template is without facets (granular filters).
  2. One Category results template where results within a category are represented with facets.

This also solves how to show facets that only appear within certain categories. The answer is to wait until the user has clicked a group, thereby informing the service what category she is interested in. This, again, is a design pattern derived from google.com.

If you do multiple test searches on google.com (1, 2, 3) you will oftentimes see that on the first search results page, results from one type of source (images, videos, news, tweets, map results, shopping, facts etc. etc.) are represented together in a group. Some refer to these as Google's OneBoxes. The purpose is intuitive disambiguation; to guide the user to the desired repository by way of providing examples, as opposed to forcing them to read labels and try to understand your information architecture.

As part of an open source project I have illustrated template #1 here. Below are three of the suggested group results (OneBoxes). These groups all have potential, individual facets, and these facets are shown only when the particular group is selected, taking the user to template #2.

In the original template the results are responsive. Based on Bootstrap.

enter image description here ![enter image description here]11 enter image description here

This design pattern should be very useful and intuitive for many user stories. However, it may be more expensive than other, simpler solutions.

Improve this answer
3
  • Indeed it will be more expensive, and at this stage, unlikely to be our preferred approach.
    – ATWP
    Sep 7, 2016 at 8:13
  • 1
    Grouping results by category is actually sometimes cheaper to implement than standard faceted search. And the benefits, of course, are enormous (1. exposing pre-filtered content to the majority of searchers who would never apply a filter themselves and 2. Enabling easy context disambiguation for searchers) as described above.
    – Peter Dixon-Moses
    Sep 14, 2016 at 15:25
  • 1
    You're just asking your search backend to retrieve the top few results for a list of filtered queries. And there are a number of ways to implement that/those queries quickly. This wins you the ability to remove or simplify your existing filter implementation as well as the freedom to design appropriate content-group views that expose content-type-specific information in a more compelling way than traditional "global search"
    – Peter Dixon-Moses
    Sep 14, 2016 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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