Continuing the Design Stories series, here’s a look at the design of character counters (the little text messages used to indicate how many characters can be entered into a text field).

Many sites skimp on the grace that character counters can offer and use something that takes the least amount of work to build, but can be quite frustrating for users. For example, an input field with a set character limit should communicate that limit to users, but many sites leave this important element out. When this happens, you often end up with the ability to enter anything you like, even though the entire string cannot be stored.

In these cases, users are informed of their mistake via an error message.

This method blames the user, essentially telling him that he should have known before pressing the Submit button that he couldn’t enter more than 50 characters. This is no good.

In another method, developers prevent users from being able to enter more characters than the limit allows, and users simply run out of space. So you’re typing along, humming a happy tune, and then your keyboard appears to stop working.

Also not good.

Some sites, hip to the notion that we should communicate to users what’s going on, have opted to use a form of a poka-yoke device. Instead of waiting until the user presses Submit to show an error, these sites warn the user using a bit of instructive text.

This helps. It’s definitely better than the previous solutions (which, clearly, are not solutions at all). But there’s still a big problem. Sure, we’ve warned the user that she can only enter 50 characters, but we’ve also made it her responsibility to count the characters herself.

With all this in mind, the best solution is to present a decrementing number of characters, telling the user every step of the way how many characters can still be entered.

Now, we accomplish several good things. First, the user is aware that there is a character limit from the very beginning. Second, the user knows with every keystroke how many characters can still be entered into the field. Finally, we’ve completely eradicated the user’s risk of hitting the Submit button and getting an error.

Instructive text is a good thing, but when it comes to character limits, instructive text with a decrementing variable makes a far superior poka-yoke device, guaranteeing our users will successfully get past this form element and onto the next step.

Posted by Robert on December 15th, 2006