How to show error message around HTML input on blur without jarring the layout?

Question

I have this so far, not really that styled but the basic layout.

Notice how the layout jars when there is an error message (and the error message might be longer than one line). I even tried forcing the layout to account for the height of the error even when it wasn't there, but (a) it only works for errors that are one line of text, and (b) it makes the inputs too far spread apart.

How do you better solve this so it doesn't jar the layout? Where should the errors be placed, how should you notify the user of the errors? I did it on blur which seems to be the recommended approach, but still there is this jarring behavior which is less than ideal. Any ideas how to improve?

Also wondering how this would best work on mobile / small portrait devices.

Answer 1

You are assuming that it's a problem (jarring) that the validation error message shifts the form vertically. The real question to me is: how does this affect the user in a negative sense? Does it break the user flow? Do they get lost due to it?

I think it's way less of a problem than you might assume. I even tend to think it's a non-issue with a slight benefit of the user noticing the change of content. (Which adds to discoverability). Of course, one can find it ascetically less pleasing, but that's a whole different issue.

You also ask:

Also wondering how this would best work on mobile / small portrait devices.

I think pushing the content down vertically is the correct way to go about it. There is no harm in a vertical shift in my opinion.

Answer 2

You should put the label inside the field and have the input replace the label text. It's a better design and it solves the resizing issue.

Material design does this. Here's an example of error messages from their site:

material design > components > text fields

Answer 3

If I understood your concern correctly, you are concerned about the jarring effect mainly. Here is how I would have tried to solve this:

• Just like your suggested solution above, take the error height already into consideration in the input itself. In my opinion, adding 12px-16px of height won't make your design lengthy, it would only make the inputs display clearly when an error shows.
• The error messages can be written which are quick and easy to understand so that in a majority of cases they don't break into 2 lines.
• And even if there are some cases where you can't reduce the error message to fit in one line we should keep in mind that designing for a general use case shouldn't depend on an edge case scenario.

Hope this helps.