====== 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://codepen.io/mishacreatrix/pen/rNWwMZa| Here is a link to a Codepen Snippet that shows this UI & its interaction ]]

===== 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'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.