How to handle UI/UX for recommended character limit

Question

I'm trying to design the UI/UX for a specific case.

I have an input where users can enter the label text for a button. The problem is that users are entering strings that are too long, that wrap and create large, long buttons.

My initial thought was to restrict the number of chars that can be entered but I can't set a hard limit on the number chars. So I'm thinking of creating some inline validation and warning message that indicates to the user that the value is ok but it may cause issues when they hit a certain number of chars.

Does anyone know of any articles that discuss the best practise with something like this? Almost like, 'What you have entered is OK but be warned'. A sort of inline validation/alert.

I was also thinking about displaying a character counter with some sort of colour scheme

• 0 to 20 chars - green (optimal)
• 20+ - yellow (too long and will create long buttons)

but maybe that is overkill.

Answer 1

Thanks for the question!

I think one can look at this from quite a few angles, so I will just give some more or less unordered pointers of which some may qualify as "best practice":

Some pointers

• As I think you are already aware, hard-limiting the character count may prevent legit use cases (maybe my button needs to be long) and can create frustration
• There are certain expected colors and icons around warnings, alerts and actual problems: For example using lighter yellow for 'harmless' stuff, red for maximum danger, traffic sign icons (like the triangle with the exclamation mark) and so on. I am sure you will find plenty inspiration, guidelines and best practices around for that on the internet.
• Make the warning very friendly and light! The internet is scary, and a lot of warnings your users are exposed to are actually quite serious (your email may be breached, website not secure...). Make sure that you do not lead your users to the believe that there is danger abound or that they are doing anything wrong!
• You can somewhat nudge input length by the size of your input field. If your input field supports x characters it will feel a bit awkward and discouraging to put in more.
• There are certain standards or often used design elements for forms you can use:
  • warnings in regards to form elements should generally be displayed directly above or below the field in question in a fairly small font
  • signup forms often use a color coded bar or even a progress bar to guide the user towards a sufficiently long password - you could sort of do the same in reverse

I hope that helps somewhat.

A possibly elegant solution?

Now what I would do in your position is the following:

Show an exemplary button as a preview as the user is typing. That way, the user can see for themself that they are creating awkward buttons - and seeing is believing! It's a bit of a to do coding-wise, but should be possible within whatever web framework you are using or even in plain JavaScript for that matter :)