What is the best way to orient or show the user off-screen required fields that need to be filled out?

Question

What is the most effective way to direct the user to unfilled "required" form fields that are off screen after pressing submit or save on a form?

I've seen methods that I'll list below, scattered across questions about fields & errors, but none of the answers seem concretely based on results as far as I could find. Is anyone aware of what a data-supported best practice might be on this?

Here are some of the methods I've seen mentioned previously without reference to why or when they'd be picked:

• Auto-scrolling to the top-most missing field
• Display a list of which field items are missing
• Interaction/animation on the button itself (like a shake) that gives the impression something went wrong

Answer 1

Assuming that the user will work their way from the top of the screen to the bottom of the screen before hitting the 'Submit' button, it seems unlikely that they will skip mandatory fields that they have to fill in (especially if good field validation practices are in place) by the time they get to the end of the form.

But for argument sake, they skip to the bottom of the page and there are still mandatory fields that are incomplete, there are a couple of strategies you can use to indicate off-screen fields need to be completed.

Firstly, you would need to design an area of the screen that is always visible and used for this type of notification. Typically this is at the top of the screen in a fixed area (e.g. just below the main navigation) even if the page scrolls infinitely, or at the bottom right corner that is overlaid on top of the existing interface (e.g. toast notification that can be dismissed).

Secondly, you have to decide where the focus of the screen is going to be once they have hit the button and the notification is triggered. And you have outlined an example of setting the focus to the first incomplete mandatory field. Or you can simply allow the user to click on the notification relating to the specific errors or fields and use that to send them to the right place.

Finally, you have to decide whether this pattern is going to be consistent with the rest of your notification and error handling interactions, or if you need to adjust it so that it can be consistently applied elsewhere.

Answer 2

I'd argue that something like an auto scroll could be rather confusing for any user and should not be used in a case like this. Especially not if there are multiple errors.

A better solution would surely be to highlight with a clearly visible list what went wrong ie what field is missing input or contain faulty characters. This highlight should be positioned somewhere very close to the button pushed.

In conjunction to the highlighted list I would also highlight the field containing the error in order to easily find it and correct it.

Now I obviously don't know your users, however by assuming there are a wide range of different users, I believe the best way is to go with a design that is known or recognized by most users.