What Would You Select?

Software development is a collection of trade offs; performance for speed to market, quick & dirty vs. maintainable, on and on. Most tend to sacrifice user experience at some level for time to market, other do not consider maintainability, reliability. You can keep adding things you have experienced. Lately I have had a torrid relationship with the jQuery Masked Edit Plugin.

Like all love affairs you go through a cycle of sheer bliss where the new target of your affection is just awesome. This is soon followed by a period of time where you enjoy your time together, but there is nothing new being added to the relationship. Eventually you reach the real commitment or cut them loose point. If you really commit to each other you go through a tough time of really getting to know each other at a very intimate level. Ultimately you find ways to add real value to each others lives. If you cut them you go find another love of your life and repeat the cycle.

Often as developers we cut pretty quick, rinse and repeat over and over. But then eventually we find a great fit for us. And we get very attached, but more importantly we get very skilled at knowing exactly what our tool|control|plugiin etc really wants to do and how we can elicit the behaviors we need.

So I am at that very critical point with the jQuery Masked Edit plugin. I mean it is just awesome, really it is. But users, man they are fickle and they want what they want when they want it. So begins the part of my relationship with a control where it was great for a lot of things, but ultimately the user wants way too much and the control/plugin breaks under the pressure.

If you are not familiar with the masked edit plugin, it is simple way to provide the user guidance when entering data in a web form. For example instead of three input fields for a US phone number you can create a mask like (999) 999-9999 and the user can just type the number and the dashes will just appear in the correct places. I have fond all sort of places to integrate the plugin to make the user experience just that much better'or have I?

$(document).ready(

function

() {
$(

'input.PhoneMask'

).mask(

"?(999) 999-9999"

);
$(

".orderQty"

).mask(

"?9999"

, { placeholder:

""

});
$(

".ZipPlus4"

).mask(

"?99999-9999"

, { placeholder:

""

})
});

The more you work with the plugin as a user you eventually find the situation where you are switching between windows to get a value or where you must loose focus on the masked input field to make sure you are typing the value correctly. Just applying a phone number masked will cause the partial value to disappear when you return. This can be very frustrating, it's even hard to take a screen shot of this happening!

Masked Edit Plugin Demo

Fortunately the masked edit plugin lets you define a place where a partial value is allowed. Changing the phone number mask to ?(999)-999-9999 instructs the plugin that any character to the right of the ? is optional. You can place the ? anywhere in the mask, it is just an indicator to the plugin and will not be render in the input field. Remember this is a mask, not a validator, so this could be a perfectly valid situation. You can apply the validation plugin for validation here and have a great combination.

Great so the problem is solved! But now we have another issue this has created. Funny how solving problem X begets problem Y when we are programming! Now the masked edit plugin struggles with caret positioning. When the plugin does not allow partials and you set focus to the input field the entire value is selected. Once the partial indicator is applied the plugin is not quite sure what to do here. So it just puts the cursor at the beginning, not the end, not where you point the cursor when you click your mouse pointer.

Optional Masked Edit Plugin Demo

Another side-effect I found is the plugin does not let go of a value when you do select the entire text and delete it. It simply deletes the first character. So by designating the mask to allow partial entry you have solved one user problem, but create two, probably worse UX problems.

So here is the decision to be made, forgo the partial data entry, deal with the crazy side-effects or become truly insane and write your own plugin to solve the problem for each and every mask field?

I guess it depends on your situation to be honest. If you are rushed for time decide what feature is the most optimal for your target users. If you have enough time then by all means create your own plugin solution. Once you have done the first one, the second comes much easier. Eventually you will have a very robust masked edit plugin that will be pretty close to the one in question here.

The next option is to tell the author what you want and hope they eventually get around to it in their spare time. Remember, except for the Microsoft jQuery plugins there is not really author being paid to develop the code. You of course could try to update the plugin with the functionality you need, then share it with the author, etc.

Finally you can just ship it in a broken state and fix it later of course. We all know how that intention ends though.

In the end software development is not really different than any other aspect of our lives. Decisions must always be made and that involves trade-offs. You must evaluate where you are and what you can reasonably do. I really like the jQuery Masked Edit plugin, I use it all the time. But as with any love affair you eventually find your lover's flaws and either learn to live with them, help improve them or abandon and start over. For now I am going to live with them. As time permits I hope to improve them. Ultimately I probably will not leave the masked edit plugin, its been good for me.

Share This Article With Your Friends!