Have you heard of the “error prevention” heuristic?

It means “do everything you can so users don’t make mistakes”. And it’s good advice. But some designers think it means “don’t show an error” which is bad advice.

Take the maxlength attribute. If you add maxlength="6" to an input for sortcode, it’ll ignore anything the user types after the first 6 characters. The idea is that it prevents an error from appearing.

But that doesn’t mean the user didn’t make a mistake. As a result the maxlength attribute doesn’t improve UX, it degrades it.

Here’s why that is (plus how to correctly apply the “error prevention” heuristic to this situation):

Issue #1: It makes the interface feel broken and unresponsive

This is because when the user gets to the limit, their input will be ignored.

Issue #2: Users may not realise their input was ignored (and incorrect information may be saved)

This is because many users look at their keyboard when they type.

Similarly, screen readers don’t announce when the limit has been reached or what the limit is in the first place.

If the user does check and realise that some of their input is missing, they’ll have to retype and edit their answer.

If the user doesn’t check, they’ll end up saving incorrect information.

Issue #3: Pasting values longer than the limit get truncated

Remember lots of people paste values from other documents to avoid mistakes when they fill out forms.

Issue #4: It’s not flexible

For example, if the user enters a sort code of ‘11-22-33’ and the maxlength is 6, then they’ll only be able to enter ‘11-22-’ and the ‘33’ will be missing.

Issue #5: Autofilled values longer than the limit get truncated

Many users rely on the browser’s autofill routine or password manager to fill out forms, but again the input may get cut off.

Here’s what to do instead

1. Just show the error

If the user enters too much information, tell them so they can fix it.

2. Increase the limit on the backend

If your users keep hitting the character limit on the backend of your service, increase the limit.

This reduces the chance of users getting an error in the first place.

3. Use a character count

If you cannot increase the limit and users are likely to go over it, show users how many characters they have left.

This keeps users aware of what’s going on and reduces the chance of errors later on.

This is a tiny fraction of what I cover in Form Design Mastery. And frankly, there’s so many more important things to cover than this. So I’ll leave a link here in case you’d like to do that:

https://formdesignmastery.com