How to show that multi-dependent optional forms are linked together without hiding?

Question

So I am creating a form with 3 optional items that are dependent on one another. The first is date. If the user adds a date, they have the option to add an alert time. Once they select a time, they can add multiple alert times if they wish. Once they add an alert time, they have the option to add additional time and/or set a repeat setting. Additionally, once the user sets a time, they have the option to select their alert settings (sound, vibration, sound + vibration) Currently, I have them disabled until the dependent form has an input. My problem is, I feel that this is too cluttered and makes my overall form a bit longer than intended. I would prefer not to hide the items since they let the user know about the alert functionality, but I feel that having the disabled features take up a lot of space. To clarify, "alert" will be available when "date is input. "Repeat" and "Sound" will be available once an alert is input. Date and alert are optional, but if an alert is input, then repeat and sound must have at least the default value shown.

Edit: Once repeat is enabled, repeat will also have additional options i.e. when "weekly" is selected, additional options like "days of the week selector" would pop up. I left that part out to simplify the problem, but it is something to consider.

Answer 1

There are a couple of strategies that you can consider, but it really depends on the existing designs and what the most common use cases are.

One thing I can think of is to mark the mandatory fields instead of the optional ones, because if there are more optional fields then it is better to highlight the more important fields. I think your current design is already clear enough, and in the context of a task, it should be clear that the optional features can't be used unless a date is provided.

Another thing you can do is to group the optional features and hide it in a collapsible content block, which gives someone an option to look at it if they want to, or for you to trigger it when the date values are entered. That way you can strike a balance between letting the user know there are additional features available but not putting everything on the screen at the same time.

Another approach could be to create a hierarchy visually, for example by indenting the optional input after the date field, or to use whitespace. That way the user knows that the optional features fall under the date input field.