User Tools
design:character_limits
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| design:character_limits [2021/02/18 11:13] – created mmcc | design:character_limits [2021/06/25 10:09] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== 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. | ||
| + | |||
| + | [[https:// | ||
| + | |||
| + | ===== Looking To Existing Design Patterns To See What Works ===== | ||
| + | |||
| + | 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. | ||
| + | |||
| + | ===== Best Practices For Designing A Character Limit UI ===== | ||
| + | |||
| + | * Indicate the max number of characters right from the start of the interaction so the user knows what to expect. (grey color text. | ||
| + | * There' | ||
| + | |||
| + | |||
| + | * 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 " | ||
| + | * 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' | ||
| + | * 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' | ||
| + | * Additionally, | ||
Page Tools
