Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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 <input> elements can have a maxlength attribute that inhibits further entry, but <textarea> has no built in option. Character limits in <textarea> 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).

twitter limit remaining twitter limit exceeded

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.

limit shown, characters remaining field limit exceeded

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?

share|improve this question
7  
Personally, I do notice the twitching wriggling little numbers as I'm typing. And I also find it frustrating if I attempt to copy/paste something into a field and have it either disallow it completely, or silently truncates at the character limit. –  Erics Oct 21 '11 at 6:32
    
Edited to add red border to invalid field, as that is our house style. –  Erics Oct 21 '11 at 11:55
    
As long as the numbers constantly update it clearly draws attention to the eyes. I recently had a user request this feature on a form field with an (incorrect) character limit, so even non-technical users seem familiar with this concept. –  Ben Brocka Oct 21 '11 at 14:19
5  
I'm surprised no one has mentioned the subtly color changing "characters left" text on SE sites, I like it a lot. Starts grey and barely noticeable, turns orange to let you notice it, then finally red for the subtle "OMG WTF ARE YOU DOING" moment when you cross into too many characters. –  Ben Brocka Oct 21 '11 at 14:29

3 Answers 3

up vote 18 down vote accepted
  • 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.

enter image description here


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.

enter image description here

share|improve this answer
2  
This is just how the Twitter app in Digsby works. (Although with less Hipster-Ipsum) –  JonW Oct 21 '11 at 13:57
    
I see you really ARE using the hipster ipsum site! –  Ben Brocka Oct 21 '11 at 14:20
    
@JonW Thanks for that reference - I downloaded Digsby and took a look. For completeness, I added a screenshot to my answer. –  Roger Attrill Oct 21 '11 at 14:25
    
@BenBrocka - I like to stay topical for a few days at least - who knows what I'll use next week :-) –  Roger Attrill Oct 21 '11 at 14:26

One thing to consider is that if it's a field where a lot of content will be entered (i.e. more than 140 characters) it's possible that the user will have created the content elsewhere and wants to paste it into this field. Don't prevent them from doing this; allow them to paste in the content and then give them the option to edit it down to size.

You could consider amending the style of the text of the content area so that it changes colour / contrast the closer you get to the limit, rather than only changing to red once the limit has been breached. That way the user is given a warning that they are approaching their limit.

share|improve this answer

As usual it's a trade off between informing someone of the character limit and annoying someone with more information than they need.

I think the solution is to make the information more obvious when it is needed, but more subtle when not needed. There are a few ways of doing this, but one that I would try would be to change the background of the field and only show the error message at that time. People notice changes when they aren't very subtle.

enter image description here

However don't restrict people to only typing in 200 characters (if that's the limit). Let the type more and then edit it down if it's too much.

share|improve this answer
1  
Oh yes, completely forgot we also do a red border on the field if the contents are invalid.There's no way they can miss seeing that happen as they type. –  Erics Oct 21 '11 at 11:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.