UI Design Patterns — Character Limits
Learn to design user-friendly character limits
--
Character limits are used on text fields to indicate the maximum amount of characters that can be entered into that field.
These components are important as they provide immediate feedback to the user when they fill in a form. If you’re a fan of usability heuristics, you’ll know this trait relates to the heuristic: visibility of system status.
Character limits provide important feedback to the user, so it’s important they are designed correctly.
With that in mind, I have put together this article to share with you my knowledge of character limit components including how they work, and design best practices.
Existing Design Patterns For Character Limit Components
If you are learning about a new design component, it’s a good idea to look at real-world examples.
Twitter has a good example of a character limit UI.
Here’s how it works:
1 As you start typing a tweet, a progress indicator appears showing you how far away you are from the character limit.
2 As you continue typing, the progress indicator continues to fill in.
3 Once you reach 20 characters before the limit, the indicator will change color and show you exactly how many characters you have left.
4 When you go over the character limit you’re still allowed to keep writing. However, you’re shown in red how many characters you’re over the limit by. Additionally, the Tweet button is disabled so you can’t publish the tweet.
5 Best Practices For Designing A Character Limit UI
Now that we’ve looked at a real-world example of a character limit component in action, it’s time to cover the best practices when designing one for yourself.
Here are 5 best practices for designing a character limit UI:
