Some of our form fields have character limits. We're debating whether we should reflect the current size of data entry, or to simply hard-limit and inhibit data entry beyond that size.
In HTML, simple elements can have a
maxlength
attribute that inhibits further entry, but has no built in option. Character limits in
can easily be imposed via javascript.
Twitter shows the remaining available characters, and will let you type more than that in but shows it as an error (and disables the action button).
We're looking at proactively showing the number of allowed characters for a limited field, and showing the number of characters remaining. If the user exceeds the limit then an inline form invalidation message appears.
A counter argument is that users don't even notice the little numbers updating, and that the user might well end up expending a great deal of effort typing something which they then need to trim.
What are some of the pros and cons of using these character counters?
Answer
When no text, make the message simply inicate the max number of characters (no mention of the number remaining.
As you type, the number of remaining characters fades from grey to black (very subtle indication)
When you reach the limit, change the border to red; make any excess text a different colour; show a small error icon below and indicate number of excess characters - but now in red. You could make the redness fade in over a couple of seconds so as not to be too much of a 'shock'.
The colourisation of the excess text lets the user see just how much the excess is. I always find it annoying having to guess how much of my text is actually the excess amount and it's nice to have it clearly marked.
But never limit the actual number of characters that can be entered to the actual limit you show as the maximum - that's a disaster area. It's always good to be able to finish the flow of what you want to say and then edit down.
The colourised text is great during the edit down process because the feedback is right there in context instead of having to look at the number. As soon as it goes back below the limit - remove all the red bits.
Jon W mentioned about Digsby - just downloaded it to check it out - and here's a screenshot of the twitter app in Digsby, which changes the background of excess text to red and text to white. It's a bit harsh on the eye, but same fundamental principle wrt to the text format changing.
No comments:
Post a Comment