Thursday, July 18, 2013

Filter Forms a discussion on Clear/Reset buttons and their value

Let me start off by stating I am not in the business of UX and I don't claim to be an expert. As a developer dabbling in design from time to time I have my own opinions and it is for you to take if at face value.

It is of general opinion that Clear, Reset, Cancel buttons on forms are bad (http://www.nngroup.com/articles/reset-and-cancel-buttons). It is an avoid at all cost mentality and I tend to agree, to a degree. There is always a time and place for everything, except a kick in the teeth…well even that you may have deserved it.

Long Forms

If you have a long form, you are probably breaking some 100 UX rules anyway so what is one more right? Well imagine filling out an entire form of 200 fields. It probably took you 15 to 30 minutes to fill out the form. Then you get to the bottom and the designer/developer makes you choose between two buttons. Both buttons are the same size and color and the only difference is the text "Submit" and "Clear". Now imagine you accidentally hit the clear button! Oh well now, wouldn't that just be peachy.

The buttons of course could have been different colors, sizes, distances from each other to help out, but really why would anyone want to clear a form of 200 fields after they spent 30 minutes filling it out? In this case a clear or reset button is bad.

Short forms

These would differ from long forms in that obviously they don't take 15 minutes or longer to fill out. It may be an application for a free cruise or signing up to access Facebook. It doesn't really matter what it is for, the question that has to be asked is WHY?

Why?
Why would a user want to clear or reset a form they just put some effort in to fill out. Either you can answer the question or you can't. If you can't then you should most likely not put a clear or reset button on your form. If you have a reason or a couple reasons how it would benefit the user, then you still have to question "would a user actually use it?" Then finally if you can determine a use case for the button and that a user would actually use it, then I say go for it. It adds value and usability to the product.

Background

So I am writing this because myself and a coworker/buddy/friend/debate partner (we butt heads from time to time) disagreed with me about my decision to use a clear button on a project that I am currently working on.



As you can see from the screenshot above, the form/forms in question are related to data and result filtering or refining. The user is offered up a lot of data up front and then is allowed to refine that data by applying filters against it. They can choose one or many different ways to filter the data and they can "clear all" the filters or one individual filter at a time. Full disclosure, I have stolen ideas from other sites that deal with filters and changed them to fit the product I am working on. I have made the conscious decision to include clear buttons for this case and I will explain the different button choices below.

Clear All Filters (The one with the trash can)

The purpose of this button was to allow a user to clear all the filters they have applied and see the full set of data as they had it before they started filtering. This is an action I believe the user would perform when they would like to change their scope. Start from the original pool of data and filter down some more. They would however still be able to do this by going into each filter and hit the clear button for that context or reset the values themselves.

This button would be in my opinion borderline destructive because if a user accidentally cleared all their filters, they would be forced to start again. In which case I could choose to make it more difficult to access this feature or add some sort of undo when they choose to clear all.

All in all I believe there is an answer to why someone would use this button and I believe a user would use it.

Clear (The button seen when a filter is open)

The less disastrous button. This one if you accidentally hit, only clears the specific filter you are currently looking at. Why would a user use this? In the case that a user is refining a large chunk of data, the user will choose to clear a specified filter if it yields results that the user does not like. They will also choose to clear more than one filter, one at a time as it is easier to clear two filters than it is to clear them all and then re apply the other 3+. This button only exists if there is more than one option for the user to select when applying a specific filter. If there is only one option for example a drop down, it is as difficult to click a clear button as it is to just select the first item in the list therefore the button is moot.


I would love to hear other peoples opinions on the matter.