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.

Friday, December 21, 2012

Thoughts on Responsive Design...

Lately, being more on the front end side of software development, I have been approached about responsive layouts and responsive applications. The idea of responsive design is really cool, and there are a lot of frameworks and tools out there now to make your life easier when designing for a responsive layout.

My problem is the one size fits all mentality. A lot of the design talk and ideas usually stem from blog designers, news and/or magazine designers. They are transitioning from paper to web. Paper is fixed, where the web is naturally fluid. Idea's have now been coming to play that responsive layouts are the answer. I agree to some degree, but not one size fits all. There are many situations where responsive design is perfect. Usually simple text/image content based sites are the right fit for responsive design, not complex javascript, css and html5 applications.

I have a hard time explaining my thoughts, whether putting it in written words or in spoken discussions. Personally, I feel that "Responsive" is the new buzz word, and everyone thinks its the answer to all new development problems.
  • It will save money
  • It will save time
  • You only need one code base
  • It is easy

Responsive is not for all cases. In most cases it is for simple content sites. Below is a perfect article that describes exactly my opinion.

If you have comments, please let me know your thoughts. I think this is an important discussion.

Wednesday, December 29, 2010

jQuery Mobile Carousel - Sencha Style

So it has been a common question on the jQuery mobile forums about how one could actually recreate the Sencha style carousel.

I have quickly whipped up a carousel plugin for jQuery and jQuery mobile that uses the iPad jQuery UI touch plugin to capture mobile touch events.

This plugin works and has been tested on Chrome 9.0.597.19 beta (Mac), Safari 5.0.2 (Mac), FireFox 3.6, 4 (Mac)

Demo: http://jsfiddle.net/blackdynamo/yxhzU/
Source Code (Git): https://github.com/blackdynamo/jQuery-Mobile-Carousel

Monday, November 22, 2010

jQuery Mobile - Programmatic Page Transitions Pt. 2

In my post jQuery Mobile - Programmatic Page Transitions Pt. 1 I answered a question in how one can programmatically navigate using jQuery mobile and select their page transitions. Now that jQuery Mobile 1.0a2 is out, some additional methods and utilities have been added.

You can find the additions here: jQuery Methods and Utilities

You no longer need to create a dom element and click it to cause a page navigation with a specified transition. The jQuery team has provided us with a new method to cause a page navigation.

jQuery Mobile - Swipe Up, Down, Left, Right

jQuery Mobile natively provides us with the ability to capture the swipeleft and swiperight. It does not however offer us swipeup and swipedown out of the box. Adapting what the jQuery team has done for swipeleft and swiperight, we are able to create and capture those events in the same manner. See the following code to implement swipeup and swipedown:
Note: I have now moved the plugin to GitHub so if anyone wants to collaborate, they are more than welcome.

Wednesday, November 10, 2010

jQuery Mobile - Programmatic Page Transitions Pt. 1

Working a few weeks now with jQuery mobile, I find myself loving it more and more. Today I came across an issue though. How would I mimic the action clicking a link. Why would I want to do this do you ask? Well in jQuery mobile, you can specify the link and the transition you would like to navigate to as long as it is an element on the page. jQuery mobile then handles the click on those buttons and links to make sure that they cause the proper transitions. What if you don't want a button to cause the transition?

With some initial digging, I came across the fact that jQuery mobile watches the hashchange event. This event is fired when the location.hash ends up changing. I found this and was like perfect!



Voila! Programatically changing pages and jQuery navigating for me. Unfortunately this wasn't good enough. How do I make page transitions happen other than "slide"?

More digging occurred and a simple solution arose. jQuery mobile actually exposes a new method called ajaxClick. This is a jQuery.fn extension method. How we can use this to solve the problem of programatically transitioning is as follows:

Wednesday, November 3, 2010

How To: Remove Halo/Highlight Around Dom Elements

Now that I have started developing mobile applications and jumping into the jQuery Mobile space, I have really started to notice an irritation for the Halo/Highlight around elements on an Html page.

jQuery Mobile makes good use of this feature, but sometimes it appears when you do not want it to. To remove glowing halos or highlights from elements on the dom, use the following simple css:

selector{
outline: none 0px;
}