I am designing a mobile application where the user can order groceries from different suppliers, each order could have a note for the supplier. Due to the different downstream systems used by different providers, for the order notes, some support 256 characters, while others only allow 64 characters, also all supplies have a character restriction that does not allow emoji.
The design is a screen, there is a carousel of suppliers at the top that the user can change, with information about the order under the carousel (for example, quantity, notes, etc.).
We know that the length restriction of the message for each provider, the problem arises when the user has entered, say 160 characters, below the limit allowed by provider A, then switch to provider B that only allows 64 characters for the order notes .
I wonder what could be the best practice (in terms of UX) to handle this. The options you might think are:
- highlight additional characters in the message that is not allowed for provider B, and clear the Proceed button, it will probably show an online message below the notes field, saying that your message is too long.
- highlight additional characters in the message as option 1, but do not disable the option Proceed button, when the user touches the button, it shows an alert that says "please refine your message".
- anything else?
The main concern here is that the user can switch between a provider with a limit of 64 and / or 256 characters. I want to communicate with users in a smooth manner other than modal alert whenever they change providers.
Thanks for the help!