UI Design Patterns: Character Limits

Character limits are used on text fields to indicate the maximum amount of characters that can be entered into that field.

Here is a link to a Codepen Snippet that shows this UI & its interaction

Twitter has a good example of a character limit UI.

• With the older version of Twitter, you see the character limit on the bottom right of the screen, next to the publish button.
• As you start typing, the word allowance decreases.
• When you go over the word limit you're still allowed to keep writing but you're shown in red how much you're over plus the Tweet button is disabled.
• Twitter now has a progress indicator to show how far you are from reaching the character limit.

• Indicate the max number of characters right from the start of the interaction so the user knows what to expect. (grey color text.
  • There's nothing worse than being in the middle of typing something, only to find you've reached the character limit and now you have to edit down everything you've typed.

• As you start typing, the number of remaining characters updates and turns from grey to black.
  • You could equally display a progress indicator that updates as the user approaches the character limit.

• When you go over the character limit:
  • The border changes to red
  • A small error icon appears next to the character count that displays the excess number of characters “Maximum 280 Characters (20 too many)”.
  • Any text that is over this limit will be a different color or be highlighted in some way to visually show the user where they've gone over.
  • Any Action or Submit button is disabled to prevent submission.

• Immediate feedback like what's described above will allow the user to easily see what's going on and how to resolve things.

• It's hard to visualize just what 100, 280, or 500 characters look like on-screen, so it's important to highlight this to the user.
  • Visual cues like changing the text that's over the limit (mentioned above) convey this.
  • Another visual cue is to have the size of the text box be roughly the size that represents the max character limit. This will give users a better sense of the limit.

• Avoid limiting the number of characters a user can type.
  • This prevents users from finishing the flow of what they're trying to write.
  • Additionally, some users may be pasting in some text from elsewhere. If there is a limit, some of this text will get cut off causing frustration.