5

I am trying to redesign this filter/search component. It allows the user to search for a filter and/or an attribute score(on here it is the Quality etc dropdown). They also specify if the score is high, low, or if they just want to see all scores. So for instance I may enter "grilled" as a keyword, then select 'high' in the drowndown, and quality as the attribute. So I would then be searching for results that have the word "grilled" in them and are "high quality".

The first image is the filter as I was given it, and the second image in my attempt at working on it. I feel very blocked by the high/low/all selection, especially since it is related to the attribute selector. Can someone give me some feedback or help with more optimal solutions?

Thanks!

oldfilter

newfilter

Improve this question

3 Answers 3

Reset to default
5

I suggest you use natural language in this scenario:

[1]: https://i.stack.imgur.com/yJ

Example: as used here

enter image description here enter image description here

Improve this answer
1
  • 1
    It may look and feel fun but it is very poor for usability. Not a good way to represent search or filter. A naive user will not comprehend it properly and users frequent on using other applications like this will find it off-putting. Speaking from experience
    – Shreyas Tripathy
    May 25, 2017 at 14:47
0

You may want to consider this pattern (wireframe attached below):

  • Place the "All, High and Low" options below the Filter pull-down. This way we can show the proximity (relationship).
  • The default option can be "All" in Filter pull down, but based on your requirement you can have validation for this.
  • The radio button is set to All as a default (for All, High and Low). The user can select Only ONE option as search criteria.
  • Based on the search results, you can build FACETS for narrowing down the search results further.

I assume pressing enter key also displays the search results, so having default options for the form elements are required, else you can have the validations.

enter image description here

Improve this answer
0

I think you need to segregate your filter into two parts:

  • Before search
  • After search

Before Search

The dropdown which lets the user pick options like Quality, Taste (not Tasty), Brand Trust, etc. is the only thing that makes sense (this is assuming that the site is only selling food products or items)

The HIgh, Low and All option does not make sense until you pick an option from the dropdown. Even then, it lacks context and order which makes it a filter from the results kind of option

After Search

Here, after the results are shown, have a dropdown/or switch/radio button group for the ordering. Go for High to Low, Low to High and Relevant/All.

Have the first two disabled until something is picked from the other dropdown. Now you have context and the text makes more sense.

Improve this answer

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.