0

I have a configuration menu with multiple menu, tabs, and some required options. I have asked a similar question regarding this issue, but I have a more specific question. At what point should I show that the required forms are incorrect i.e. red? The menu and tabs can be done in any order and are not required to go sequentially. Additionally, in a scenario where the feature is disabled, the required fields are not required. When it is enabled though, the user must input the correct information. In that case, when the user moves tabs/menus, I have decided to turn the input field red and show an icon, shown in the selected answer to my previous question here. Best user experience for settings menu with required fields?

My question is, when the input fields are blank or incorrect, at what point do I show they are red? Some options I have thought of are

  1. Immediately red until they are filled in correctly. This would make it apparent immediately, but can be irritating if the user is inputting the field and it is constantly changing back and forth from red to normal.

  2. When focus is lost on the input form. This wouldn't work if the user never clicks on the input form in the first place as they wouldn't know anything was wrong.

  3. When the user leaves the tab/menu, they see the warning icon. This makes the user leave the menu and then have to go back and search for where they missed the required form.

Are there any other ways I can achieve this or a combination of options that will best show the user that there is an error? The error can be an empty field, or an incorrectly formatted input.

enter image description here

Improve this question

1 Answer 1

Reset to default
0

The answer is 2.

If the user doesn't click on the form, it means they didn't change anything, so their intentionality is probably not to change anything, therefore there's no error, and consequently, no need to display an error status. However, if they interact with one of the fields and effectively change values (not just focus, but value input), then you can (and should) show this message or alert.

A caveat

All this being said, there's a chance that the user interacts with the form by mistake, or that they realize they actually don't want to change anything. So I'd add two elements:

  1. A cancel button: if users change their mind, they should be able to cancel the process.
  2. A confirmation dialog: if the user actually wants to make changes but they leave an incomplete field, you can show a dialog to reinforce that they need to complete that field. Likewise, if they made changes but they want to leave (whether fields are complete or incomplete), you should inform the user that changes have been made and ask if they are OK with those changes or want to cancel them.
Improve this answer
3
  • But the required forms are not always required. In my wireframe, I show that if the switch is disabled, no forms are necessary to be completed. The minute they enable it, some required forms appear. What happens if the user enables the switch but ignores the forms? They still are required whether the user ignores them or not, and will cause issues if the user submits the changes with those forms as empty
    – Gene Lee
    Sep 25 at 17:59
  • 1
    What about a confirmation dialog that tells them "you have mandatory forms that are incomplete/invalid. By leaving this page, you are reverting the changes you made on this form." This would appear when the user tries to leave the page without all mandatory forms filled out
    – Gene Lee
    Sep 25 at 18:02
  • 1
    yes, as long as you inform the user what is going to happen, and the consequence of their choices, you'll be OK
    – Devin
    Sep 25 at 18:09

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.