Best practice for validating text input on mobile

Question

I'm designing a mobile application where user can order groceries from different suppliers, each order could have a notes to the supplier. Due to different downstream systems used by different suppliers, for the order notes, some allow 256 characters whereas some only allow 64 characters, also all supplies have restriction of character that no emoji is allowed.

The design is one screen, there is a carousel of suppliers on top that user can switch, with order information below the carousel (e.g. quantity, notes, etc).

We know the message length restriction for each supplier, the issue comes when user has entered, say 160 characters, under the limit allowed by supplier A, then switches to supplier B who only allows 64 characters for order notes.

I'm wondering what could be the best (in term of UX) practice to handle this? The options I could think of are:

1. highlight the extra characters in the message that's not allowed for supplier B, and disable the Proceed button, probably show an inline message below the notes field, saying your message is too long.
2. highlight the extra characters in the message like option 1, but do not disable the Proceed button, when user taps on the button, show an alert saying "please refine your message".
3. something else?

The main concern here is, user can switch between supplier with 64 and/or 256 characters limit, I want to communicate to users in a soft way other than modal alert every time they switch supplier.

Thanks for the help!

Answer 1

I would not go with option 2 since having the user click a button to raise an error you already know about is counter intuitive and causes more stress in my opinion. If you're communicating the validation problem clearly, I see no reason why you shouldn't disable the button like option 1 suggests.

Twitter is a good example:

• Negative counter
• Highlight excess characters
• Disable button

https://www.nngroup.com/articles/user-mistakes/

Answer 2

The best practice is to prevent making mistakes, so show the counter and as the user types in, the counter reduces. When all the limit is used then, don't allow user to type in anything in the text box. This will inform user that word limit is over intuitively and also doesn't prevent them to go ahead with proceeding to next step.

Pic Courtesy - Material.io

Answer 3

I think yes, the best way as you said. Highlight the extra characters with light red and give the user the control over the extra characters so he can truncate the extra or exchange words until getting to the possible given characters. Also, include a negative number of the exceeded characters in red.