2

I want to give users a warning on a modal that changing one form field has implications on another form field. I am aware of 2 patterns that are used as shown here. I am seeking suggestions on what UI pattern to use in this situation.

  1. Inline Validation
    When user leaves the form field blank or does not complete it in the required manner. inline validation on form
    image source: https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/

Or like VSCode where a warning is given inline to the user Vscode


2. Toast like Warning on the modal
toast like warning on top of a modal

  • does this modal have a scrolling factor due to the number of inputs? Or is it just a few inputs? – Mike M May 5 at 3:27
  • this does not have a scrolling input currently, but I do have some modals that are scrollable. In that case, more important would be to direct the user to where the inline message shows up? – harshikerfuffle May 5 at 13:21
2

My suggestion would be approach 01 ie inline validation.

The reasons being:

  1. This satisfies Gestalt's law of continuation and law of proximity.
  2. Since 01 is valid, it is much easier to relate the error message belongs to which field, hence less likely user will commit the error again.

While in approach 02,

  1. It takes a while to map the error to the specific field.
  2. The percentage of committing an error again is high in comparison to approach 01.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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