The App is showcasing the error messages below the text or input fields when the user press the [Next] floating action button. But the issue is users can't grab the attention on those fields because it can appear when they scroll down. In short, it required physical efforts.

P.S I couldn't split it into the wizard interface because it's a 3-page longer form and each page has minimum 6 fields.

  • There's a very complete answer about this issue here
    – Danielillo
    Aug 18, 2020 at 9:32

1 Answer 1


There are three patterns I have seen that seem to resolve this pretty well.

  1. When the user submits the form and an error occurs, scroll the page up/down to where the error occurs. The animation is important here because it helps orient the user, where a direct link/jump would disorient.
  2. When the user submits the form and an error occurs, jump to the top of the page, display a notice or banner at the top that an error has occurred, hopefully with context as to where on the screen the error occurred.
  3. This is not always possible, but you could validate the form fields as content is added, allowing the user to see errors as they occur before navigating away.

Development constraints can sometimes unfortunately drive which solution to adopt.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.