0

I am designing a major component of my soon-to-be website: the listings header where I provide users a magnifying glass to filter out records according to the Loading/Delivery/Tag options trio. (I don't mean the funnel filter in the upper right corner).

Listings header

My issue is with where to position a Reset option.

If I don't have such a reset option it will make it more difficult for the end user to reset the list and he/she would be more than likely to hit the browser's back button to return to the last all-records-shown list.

That's the kind of behavior I want to avoid. So, where should that icon go? What would be the best position for it?

Improve this question
1
  • Might not a user expect a magnifying glass button to reveal a search function?
    – Eric Stoltz
    Jun 28, 2017 at 16:39

2 Answers 2

Reset to default
1

I would add a text hyperlink above the first row of results that reads "Clear Filtered Results". This serves two purposes: it allows the user to clear the results and reminds them that the results being shown are currently under the effect of a filter. Note that this hyperlink text only appears after a filter has been applied. It does not show when the page is first loaded.

I also agree with Shreyas that the filter/funnel icon seems out of place since it looks like you have 4 different filtering dropdowns but the icon is only next to one of them. Might as well get rid of the icon as the dropdowns seem self-explanatory.

I tried adding it to your design and re-arranging the buttons and drop downs so the balance is a little better.

Edited

Improve this answer
2
  • Thanks a lot dear Samantha. I think you just summed up the best solution! I will reply yours and Shreya's suggestion to my IT team. Cheers for you both!!
    – Carlos Alves
    Jun 28, 2017 at 17:15
  • The problem with this design is that it takes a lot of vertical real estate away from the focus of the page, the grid. I agree with the text based approach
    – Chris SH
    Mar 25, 2021 at 11:34
0

For negative/destructive actions like "Delete", "Clear", "Reset", "Remove", it is preferable to use links, text buttons or icon+text buttons.

reset

Also, I am not exactly sure what the funnel icon on top is supposed to represent if the 3 drop downs below are used for filtering the search results. Could you elaborate on that?

Improve this answer
1
  • Dear Shreyas, the funnel filter is actually a primary filter for the "mode of transport" (land, sea, or air cargo). Your reset link is a great solution. However, looking at all your replies, I guess Samantha has just provided what best appeals to me in terms of usability!
    – Carlos Alves
    Jun 28, 2017 at 17:18

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.