2

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?

enter image description here

Improve this question
2
  • Hi there! I have some questions on the requirements before jumping to a solution. What happens once all the fields are filled up? Do you have a global button to submit everything? It seems like a strange user flow having so many forms on so many pages. What I am trying to understand, is how all the forms are related. And why would the user want to know at any moment, anywhere the status of all forms.
    – hoodybites
    Oct 12 at 10:49
  • Yes, there is a global button to submit everything. It's in the bottom left corner, currently disabled in a dark grey. Once all the mandatory fields are filled out, the button turns green and is clickable. For some more info, this is not a form that you fill out from beginning to end. Its like a settings page where all options will already be filled out. The errors and disabled button only appear when someone inputs a field incorrectly or leaves it blank, so the this is essentially a worst case scenario. Most users would probably fix the error asap and would have 1 error max at a time.
    – Gene Lee
    Oct 12 at 16:17

2 Answers 2

Reset to default
1

enter image description here

I would go with what Gmail and similar products are doing. It solves for the following:

  1. The first touch point is red color. the Mail (99+)
  2. The subsequent ones are having lesser emphasis as the focus should be on the content itself. Social 73, Promotions (11 new)
  3. 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:

enter image description here

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.

Improve this answer
2
  • Interesting, do you think the numbers are a clear indicator that there is an error? Does that even matter? I guess what I'm asking is, can I have just a number instead of the warning icon on every tab or will users not know what the "number" means?
    – Gene Lee
    Sep 29 at 16:44
  • It actually depends on how many fields you have in total -> leading to how many errors would there be. I put it in my wireframes above because I expect that you have 5 menus * 3 submenus * 3 tabs = 45 input fields. Upto you to decide. If not a number, then can be just dots or triangles to represent..
    – Kishan
    Oct 2 at 10:08
1

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.

Improve this answer
2
  • 1
    I tend to agree with the logic, but I am having trouble wrapping my head around 5+ icons at a time. I think the UI side of my just doesn't like the overall look. Ill take your advice ux wise, but I will need to come up with a cleaner UI for cases where every menu will have an error, just in case.
    – Gene Lee
    Sep 29 at 16:48
  • I agree, a lot is up to the UI here.
    – Vitaly Mijiritsky
    Sep 30 at 16:35

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.