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

2
  • does this modal have a scrolling factor due to the number of inputs? Or is it just a few inputs?
    – Mike M
    May 5, 2020 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? May 5, 2020 at 13:21

1 Answer 1

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.

Your Answer

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

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