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.

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.

http://www.forbes.com/sites/ciocentral/2012/11/18/mobile-apps-the-trouble-with-using-responsive-design/

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

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.

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:

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;
}

IE9 breaks Cufon!

Yes it is true. Cufon breaks in the new beta release for IE9. The Cufon team has been quick to find a fix for the problem. Please see their fixes here to find out how!

Ektron and IE9 Support

As we all know, IE9 beta 1 was released a few days ago. We have to give Microsoft a thumbs up for producing a somewhat decent upgrade to their all known terrible browser. Unfortunately this release, although in beta, causes some usability issues with the Ektron workarea. These usability issues can be fixed however, temporarily. You can modify the workarea aspx files to force IE9 to render in IE8 or IE7 mode. Simply add the following to the pages in the head.



You may also post any concerns you may have at the Ektron blog here

Windows VPN equals no Internet connection

Doing some side work for a company, I have been granted VPN access. I am to connect to the VPN using the built in Windows VPN connection client instead of a third party tool such as Cisco.

Once I entered all my credentials, I attempted to connect to the VPN...voila!! I connected without a hitch...or so I thought. I went to check my mail once connected to the VPN and Gmail was having difficulties connecting. WTF?! I can't connect to Google either. I disconnect from the VPN and everything is back to normal. This is kind of unacceptable, but there is a solution. Follow the steps on this blog to solve the issue: http://www.rickglos.com/post/Work-VPN-kills-Internet-connection.aspx

Agile: Boards? Walls? Can't put anything on the wall?

Working at various places you come across certain departments that have rules that do not make sense. Well maybe they make sense but they might not make sense to you. One of the places I worked had a strong restriction on putting things up on the wall. Working in an Agile environment entails using TONS of wall space. From iteration walls to burn(down)/(up) charts and even design flats, walls are necessary.

One day I walked in the morning and saw that someone had actually written on the wall. Insert vulgarity !!! Whoever did that is gonna get it. I was actually quite excited to find out who would soon receive the impeding doom. After some closer inspection, I was excited to see that the writing wasn't actually on the wall, but on white board styled paper that was stuck to the wall. At this point I was interested in how it would actually stick to the wall. Static. Static is the magic that makes it all work. The sheets stick to the wall and paper/stickies stick to the sheets. No tape. Amazing.





Smart Sheets a simple dynamic white board replacement. "They're your whiteboard, communication, brainstorming, artwork, doodlepad and advertising vehicle all rolled up in one!"

NivoSlider: A jQuery Image Gallery (Slider) Plugin

NivoSlider by Gilbert Pellegrom is an incredible plugin for providing a transitioning slideshow or slider to your visitors. Highly customizable with tons of options and transition effects, this is a must have plugin. The gap between what Flash can do over Javascript is shrinking on a daily basis.

Basic Example:

Dynamic Breadcrumbs?!

Have you ever been in a situation where one of the business requirements were breadcrumbs? Most people would answer yes. The funny thing is everyone you talk to, doesn't really have a good solution to handling the little trail of bread.

My current situation was a little more challenging in the sense that I needed dynamic breadcrumbs that would work for fixed pages as well as Cms controlled pages. Cms pages that use Url aliasing. Attempts to use .Net server code to build the breadcrumbs were successful until Url aliasing was involved.

The solution. A jQuery plugin. I searched for two days for a viable solution to dynamic breadcrumbs. Unfortunately there weren't any that I could find. The internet was however, littered with breadcrumb plugins that make your breadcrumbs look cool, of have funky drop down menus. None of them dynamically built a simple trail automatically.

I decided to write my own plugin called: jQuery Dynamic Breadcrumbs!

Creative? I know. Sometimes I even amaze myself. The project is hosted on Google code at jQuery Dynamic Breadcrumbs

The basic idea is using a nicely formatted folder structure/url aliasing. Creating a Url that is easy for a visitor to understand should be more than enough of an indicator that you don't need breadcrumbs, but some people just love the things.

Underused C# feature: string.Format and custom formatters

There are developers out there who get classified as being lazy. I got called being a lazy developer when adding an Extension method to decimal types to convert to some Html formatted string.

Example:


This makes the code look clean and is pretty simple to understand for any other developer to come in later and know what is being done. The problem is that other developers may consider this abuse or misuse of Extension methods. "Why should a decimal know how to convert itself into a certain type of string?"

Enter the string.Format method and a custom formatter. string.Format can take in any argument, a format, and custom formatter, then return you the string equivalent for that argument. Although I agree that this is a more appropriate approach that doesn't make it a cleaner solution. In my opinion only.

You would make the call like this:


Although it works and is the proper solution in this case, it's ugly.

I am open to other solutions to this scenario, so if you have a good solution please post in the comments.

Here is a full example of how to implement a custom formatter to use with string.Format.

Test Class (MS Test):


Custom formatter implementation example:

Javascript delegate and extending jQuery with a delegate method

Delegate function:



If you are using jQuery, you can extend a method to the jQuery object to use throughout your application. Below I create a jQuery delegate extension method plugin:



An example of somewhere you would use the delegate method:



EAVB_ZZVSGDKQRZ

Developing MonoTouch applications in Visual Studio

I have been playing with MonoTouch and haven't gotten all too far. I get the concepts of the XIB files and the C# is your typical syntax. My concerns are a lot with productivity. Keyboard shortcuts, refactoring, addons like ReSharper, etc. Those things become a crutch when you are hammering out work for clients and you need to do it fast.

If you are a ReSharper user or anything of the sort, I am sure you have come into a situation where you have a fresh installation of Visual Studio, yet no ReSharper, your client doesn't have licenses and doesn't allow you to use yours. That is the feeling of developing with MonoDevelop and MonoTouch. Of course you finally convince them to buy some licenses, and then you get to working. Well ESCOZ has come up with that convincing part. Although I have not tried it myself, I wanted to post it for anyone else who might be interested.

(I still think it is annoying that I have to buy a Mac, just to develop iPhone/iPad apps)

Web.config files and legacy products

I've been working with a CMS product called Ektron CMS400.net for the last couple months. Well that's a lie. I haven't been using it the entire time. A lot of the time has been spent just getting the product up and running in our environment. We will save all that for maybe another post.

This post is about upgrading legacy product web.config files to work with newer technologies. This particular instance revolves around the ability to use "var" and extension methods available in .Net 3.5 in the actual inline code of an aspx page.

The scenario is that I wanted to create a wrapper extension method to string that I would pass in a string tag name and it would wrap the string with the appropriate tag based on that name. I did this and everything works when in cs files. That changed when it came to consuming the same extension method inline.

The following piece of code threw a "'System.string' does not contain a definition for 'WrapWithTag'" error:


I then did some quick Googling to find out what I could do to fix this, or even if I could. AHA! I found it. It was due to the missing lines in the web.config file. Below you will see the difference between the standard 2.0 Web.config file to a 3.5 version. (The Web.config file I was working with was a monstrosity in comparison)

.Net 2.0 Standard Web.config file:


.Net 3.5 Standard Web.config file:


The actual piece that I needed in my Web.config file was:


This piece ensured that the ASP.Net compiler would run .Net 3.5 instead of 2.0.

snipt! Where were you when I first started posting code online!

I am sure there are many tools out there to allow embedding code hosted somewhere else with cool color coding. The one I recently came across is Snipt. It is pretty simple and easy to use. If you have any others that work just as nice please comment!

MonoTouch...A .NET (C#) developers dream for building iPhone apps

I have finally got the Mac all up and running how I would like it. I think there will be a lot of changes as soon as I really start using this thing. My next steps were to get the iPhone SDK, Mono Framework, and MonoTouch installed so that I could get to making iPhone apps.

You will need to do a few things in order to start developing with MonoTouch

• Intel Based Mac running either Leopard (OSX 10.5) or Snow Leopard (OSX 10.6)
  • The iPhone SDK is only available for OSX
    
• Apple iPhone SDK 3.0+ (http://developer.apple.com/iphone/)
• The latest version of the mono framework (http://mono-project.com/Downloads)
• MonoTouch SDK
  • Licensed version: http://monotouch.net/Store
  • Trial version (If you aren't ready to sell on the app store or put to production you do not need a Licensed version. Learning MonoTouch can be done using the trial version and run on the iPhone simulator): http://monotouch.net/DownloadTrial
• Any IDE such as MonoDevelop, XCode, or any Text Editor
  • MonoDevelop: http://monodevelop.com/Download/Mac_MonoTouch

To get started with a simple "Hello World" application. See Getting started with MonoTouch on CodeSnack.

Got a mac...but it isn't mine...

I have acquired a MacBook Pro from some friends so that I can start dabbling into the iPhone dev market. I have used Mac's in the past, but not as a full time system.

Now that I have this machine, I am trying to set it up the make it as my main machine at work. The first step was HOW THE EFF do I RDP into a PC machine. The answer is quite simple, CoRD. CoRD is an RDP application that seems to be recommended as one of the better utilities to RDP.

This was the first step in getting acquainted with my Mac.

More to come...