2

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.

4
  • Can't you set a maxlength="xx"?
    – Danielillo
    Oct 14, 2022 at 19:54
  • @Danielillo, that still won't account for MITM or replay attacks, assuming they care about their data integrity. Oct 15, 2022 at 8:19
  • What other types of inline validation are you currently using? How are you currently visualizing system feedback? Oct 15, 2022 at 8:21
  • Have you looked at how Twitter does it? - Don't rely on colour alone. Make sure there's some other way to communicate what you're trying to tell the user. Oct 15, 2022 at 16:04

1 Answer 1

2

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 :)

1
  • Very good suggestions Nov 16, 2022 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.