So I have been developing a way for users to track where they left mandatory fields blank, so that they can freely go back and forth between menus, the input field would just turn red. In the example below, the left picture shows the UI when you are on a separate menu and the right shows what it can look like when it opens. The right picture, I purposely placed an icon in every possible location I could think of. My issue is, I feel like with the image on the left, it is necessary to lead the user to the warning, but on the right it can be overwhelming. How can i properly place these icons to lead the user to where the warnings are, without overwhelming them with all these icons on the same page? Would making the icons disappear from "Menu 4" upon opening and reappear upon closing the main menu work, or would that confuse the user even more?
I would go with what Gmail and similar products are doing. It solves for the following:
- The first touch point is red color. the
- The subsequent ones are having lesser emphasis as the focus should be on the content itself.
Promotions (11 new)
- And in your case, finally when it comes to the required field, we can make that red too.
I think this will solve for problem you have mentioned in the question
Users are overwhelmed with all the red icons.
So it could look like this:
Note that I have moved
Required Field Invalid inside the final form – as it is not required if I am looking at a form where there are no invalid forms.
It's fairly straightforward. The indications are meant to leave a trail from the lowest level of navigation where the error is present, to the highest level - so that the user can easily find the error and doesn't need to browse the different tabs looking for it. So you need one indication on each navigation level. So pretty much like in your "worst case" image, except maybe for the general one at the bottom. They should not disappear upon expanding Menu 4, since the error is not resolved - and you're right in that this would only confuse the users.
If you skip the level of Tab or of Submenu 2/3, then a user who is currently on Menu 3 will see that there's an error in Menu 4, but will have no idea in which of the submenus and tabs they should look for this error.