A usability mistake: the maxlength attribute
By jor on Friday 19 November 2010, 23:52 - Permalink
We have always used
maxlength as a simple client-side validation mechanism for our <input type="text"> fields. It is on its way to get implemented for <textarea> as well (planned for FF4, some browsers already support it).
However, what "works" for simple input fields may not feel nearly as usable for longer text.
That is because of the way we write text. When we are limited in how many characters we are allowed to use, the natural way to do it is still to first write more than what we are allowed. It's like making a draft. Then we remove what feels dispensable, and rewrite what can be rewritten in fewer letters, until it all fits. When we feel the text is "final", we submit the form.
The current solution
maxlength, as currently implemented, forbids that instinctive approach. It just prevents you from typing more than what is allowed, so that if you want to reword something, you first have to remove something else. And before removing, you would ideally need to count how much characters you need to remove (approximately). It forbids you to write a draft.
This is OK with simple data (name, email...) because these are not the result of a creative process, but just some data you already know and recall. In this case, the maximum length is just a sanity check, it is rarely reached.
Actually, I realized this a few months ago. I was using a form with an awfully written validation script: a timeout was set up to check the input fields, and each time the contents of a given textarea went above the 400 chars or so limit, it automatically removed every extra chars (and alerted an error message on top of that). This was so frustrating that I just ended up writing my text in my usual text editor until I got to the exact number of characters, then copy/pasted it to the damn form.
The way maxlength works is not that bad, as it does not automatically delete something you have written. However it can still be improved.
A more usable solution ?
Instead of forbidding the typing when the limit is reached, a better approach would be to just let the user know in real-time where she is compared to the limit. If (or when) she goes above it, just mark the input element as invalid, and forbid form submission until it is OK. This is the approach used for other validation techniques (like regular-expression-based ones).
I have tried some very basic prototype of that solution here. The first textarea just has maxlength set to 150. You can see its effect with the latest Firefox 4 beta, Chrome or Safari. Not very convevnient.
The second textarea has a custom
maxlength2 property, and displays the count of actual / allowed chars when it is focused.
Much more usable, and It's also not very hard to implement, so let's save our users some frustration.