4 comments

[ 5.1 ms ] story [ 18.0 ms ] thread
These kinds of UI tweaks can be amazingly frustrating to users if you're not careful. For instance: When I click on an empty input box, I expect the cursor to load on the left-hand side of the box. In the date box in the demo, it populates the mask and places my cursor in the exact part of the mask that I clicked (usually toward the middle). I have to click again (on a much smaller target area) to move the cursor to the beginning of the input box.

I filled out a 3-page form yesterday with this exact problem. It was memorably annoying and had a significant negative impact on my opinion of the company behind the form (ING direct).

I just spent, literally, 5 minutes, after reading this article, porting some code from using the typecast plugin to using this one.

I like this one a lot better. It's much cleaner, and doesn't suffer from what you mentioned above.

Has anyone got any research on how this can affect users?

I recently persuaded a developer to not use it. It was quite frustrating during testing to see the 'mask' (made from underscores and slashes) expand and contract when they're typed over with non fixed-width characters of differing sizes.

I'd much rather see three small input fields for a date (with some Javascript input filtering) than a field with some underscores and slashes inserted dynamically.

I may be wrong.