I have a web form that opens inside a popup(modal) menu and displays web form input elements. I have a drop down select menu (1) that when selected, adds an additional select menu (2) based on the conditions selected from that first select menu. Would it be ideal to just disable or hide the select menu (2) when nothing is selected in select menu (1)? We are basing many of the designs of angular material design spec.
What you are talking about is Cascading Dropdowns. Here is the thing about them.
- On a negative note, they seem very annoying if there are too many steps. Especially when users don't want to fill out this form (Personally observed in a Usability Test)
- But they also reduce the information overload. The form doesnt seem to be overwhelming
So, if the select fields that keep opening up are less (lets say < three)then go aherad with cascading dropdowns else NOPE.
It's quite frustrating for the users to fill web forms in the pop-ups (which I will never recommend) especially on smaller devices and on the top if user doesn't know what's next, it adds further frustration. My suggestion would be if it is just a basic web form, then show disabled select menu (2) so at least users will know what are there their next steps
Once referred to as one of “the most hated advertising experiences” by web design and usability experts the Nielsen Norman Group, popup ads are, as most people would agree, one of the most annoying things you can experience. (The Nielsen Norman Group points out in the article above that companies should steer clear of any kind of popup, not just ads.) While many people don’t enjoy any kind of popup that makes it harder to interact with websites, annoying and effective are two different aspects of popups that can be mutually exclusive.
If it's a complicated form then take out of pop-up first.
Read this article if you want to create a user friendly web form. It will help to further develop you web form ideas: