In real life, it’s important (and polite) not to obtrusively interrupt someone when they’re in the middle of something, and, of course, this carries over to website usability as well. So, how should we enforce form field character limits without disrupting what is already a potentially demanding process? I can think of two main use cases, distinguished by the length of the form one is filling out.

When filling in a small field like the zip code field featured below, users should be cut off at the character limit. It prevents error preemptively, before the form has been submitted. In most cases, users know why they can’t go any further because of the nature of the input (i.e., a phone number, credit card VIN, or age). If it’s unclear, some explanatory text will do the trick:

With larger text fields> (<textarea>s) we have to be more forgiving. Users can’t keep count of characters in their head (if they even know what a ‘character’ is), and it’s relatively likely that they’ll be looking not at the screen but at the keyboard, or at another window, or even at notes on their desk while typing. In this case, it’s dangerous to just stop accepting input. They may continue typing without actually accomplishing anything and not realize it until they’ve wasted time typing something they may not remember.

Thankfully, there are two real-world examples that I think demonstrate exactly how to get character limit enforcement wrong and how to do it right.

Twitter: “No — No Further!”

Type more than 140 letters into micro-blogging platform Twitter’s What are you doing? box, and you’ll be stopped without warning. If you’re not paying close attention to the box, you could go on typing without knowing what’s happened. If you’ve something longer than 140 characters to say, this quickly becomes frustrating. Because the field is frozen as soon as you hit the limit, any mid-sentence editing you want to do to whittle down your little tweet becomes an exercise in frustration. It can only be destructive, because you can only add or move words within the 140-character limit — any potential revision would have to be preceded by the deletion of something you’ve already typed and may not want to lose.

There is a nice numerical counter of the characters remaining, even nicer because its visibility — and, therefore, our awareness of the limit — is increased as you draw closer to zero.

But unfortunately it’s not enough to allay the problem. Okay, so I can see the words running out in front of my face, but I’ve already formed what I’m going to say in my head. Making the message fit their size constraint mid-thought isn’t my primary objective; I just want to type it all out and pare it down after. I respect the brevity inherent to Twitter, but it’s not something I’m really used to yet, so let me reorganize my words if I need to.

And what if you type your tweet somewhere else and paste it in to the Twitter website? Well, if it’s over 140 characters, you’ll have to guess how many you need to delete, because there’s no telling by how many characters you’ve gone over the limit.

And what’s more, you lose the end of the paste — what if you want to remove something that was in the middle?

How could this be handled more smoothly? Let’s see.

LinkedIn: A Polite Reminder

If you type too much in the contact form of professional networking site LinkedIn, you’ve much more leeway:

Instead of letting you proceed no further, LinkedIn simply tells you by how many characters you’ve exceeded the limit, allow you to easily pare down your message.

I think Twitter’s character counter should reflect just how far you’ve typed past the limit and not impose a character limit on the text box itself, much like LinkedIn used to do.

One area where I believe both approaches succeed is the size of the input area. Both LinkedIn and Twitter feature small text boxes, tailored to the exact amount of words they should (theoretically) contain. At first it may seem like an annoyance, but it’s a fantastic way to encourage concise writing and remind users of the limits.

Acknowledgments

This post was at least partially inspired by the work of usability guru Luke Wroblewski, whose presentation Best Practices for Form Design (and upcoming book, no doubt) contain guidelines very similar to these (see slides 105 and 106 in particular).

Share This