9

enter image description here

Here I have an example screen for filters in an overlay where clear filter button (which appears only when any of the filters is checked) is below the list of filters. Is it ok to place it here or something is very wrong with this design, UX wise?

5

Your proposal is clear to understand and will work. However, I was thinking of a different way to layout elements.

enter image description here

  • The title refers to the whole Dialog so you could place it in the centre
  • Deliver & shipped checkboxes were breaking the direction of the main checkboxes
  • "Reset All" acts as a Select/Deselect all checkbox (or just the former), so placing it where this checkboxes usually appear (in the top) might respond to user-expectation

Other notes:

  • Don't make the button invisible and suddenly appear when a checkbox is selected. Make it inactive (with less opacity) and activate it when it corresponds. This way the user knows, from the start, he has that option.
  • A useful way of using the button could be "Reset all to default value" rather than "Deselect all". This depends on your case but if there are a set of options that could be considered default, maybe because of their necessity for the table to be understood or because you want to show your recommended fields, it might be good to transmit it to the user.
5

Short answer: It's fine to put the clear-all button in the bottom left.

Long answer: There is not enough info here to talk about the UX of your site, as we would need to know much more about the users, where they have been to get to this screen, what motivates them, etc.

We could talk about the UI, although as this is a simple overlay there is still very little to go on.

Nonetheless, for what it's worth, I would be interested in a couple of points:

  • Why are the filters are separated by a horizontal line - is it clear to the user what the difference is between those above and those below? Is there a different filtering mechanic that you are trying to signal to the user? If so, this is not clear from your screenshot.
  • 'Delivered' and 'Shipped' are looking a little lonely there! What are they anyway - if I select neither, what data will I get? How about if I select both? Maybe radio buttons would be more appropriate? Or remove the 'Delivery Status' checkbox?
  • A lot of empty space here - might look better in two columns, rather than two horizontal sections.
  • I would use 'Clear all' instead of 'Reset all' for clarity (the button doesn't actually do the resetting - that happens when you click 'Apply'), but that is just personal preference - you could speak to your users to see what they prefer.
  • The position of the clear-all button, after all the above have been addressed, may be better off nearer the apply button, or next to the header, or it may not - again, see what your users think. Either way, I'm pretty sure they will be able to use the button effectively :)

Hope that helps (sorry if not quite what you asked for!)

  • thanks for the answer! actually confusion was about the position of clear filter button. data here I showed is edited one actual data is different. horizontal line was to separate all filters when adjacent filters were checked it was difficult to differentiate both of them. thanks again for the feedback will work on that. cheers :) – prazor9 Dec 21 '16 at 10:55
3

The positioning of reset option is in correct position i.e to the left. In case if it's placed on the right with other button and user accidentally clicks on reset instead of Apply. Instead of reset you could replace the text with clear all.

  • thanks man for the answer. great relief for me as I was not the only one thinking it is right ;) – prazor9 Dec 21 '16 at 10:56
2

I think the position you have makes sense given that users tend to work from top to bottom. However, I think just as important as placement are visual appearance and transition. The bold / red style calls appropriate attention. You can also use subtle non-annoying animations to call attention.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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