Simple example from YouTube's Search that removes any clutter until absolutely necessary
According to this great guide on 58 Form Design Best Practices & Form UX Examples:
Use conditional logic to shorten your forms
Conditional logic (sometimes called 'branch logic') is where you only display a question if a user has answered a previous question in a certain way.
This technique reduces the average length of your form, while also reducing form abandonment by not displaying questions that might be irrelevant to certain users.
According to this UX question on What is the best way to show conditional fields?:
Showing only the fields that are pertinent to the user is generally better
It becomes more important in mobile, but is valid in desktop applications too. The idea is simply to not expose items the user does not need by default.
Luke Wroblewski also points out that studies have shown that hiding irrelevant form controls:
- create forms that are faster to complete
- have less errors
- result in more satisfaction
According to the Nielsen Norman Group's #1 Rule on Website From Usability
Keep it short
Eliminating unnecessary fields reduced user effort and increased completion rates make it worthwhile. Remove fields which collect information that can be (a) derived in some other way, (b) collected more conveniently at a later date, or (c) simply omitted
NNGroup also advocates for Conditional Logic in Forms and Applications
Eliminate irrelevant steps
Users never need to see questions and options that don't apply to them. If, for example, your business logic requires you to know whether customers are married, don't show single customers questions relating to the spouses they don't have.
There are a lot of possible forms, so there's not going to be one right answer.
Globally speaking, dynamic elements will fall into 2 possible categories:
- Dynamically appear on current page
- Added to flow in subsequent views
1. Adding a conditional element to the current page
Any new element must either a) occupy currently unused spaced or b) displace existing elements.
In either case:
Example of a Conditionally Added Field:
Exception: Conditionally disable VERY common fields
If you have a highly common field that the majority of your users will expect to be visible, users may be confused if they are unable to find it. In that scenario, you should conditionally enable/disable it based on user testing, feedback, and research.
Note: All disabled fields should always include helper text with an explanation of why the field is disabled and how to enable it if applicable:
Example of a Conditionally Enabled Field:
2. Multi-Page Wizard - add dynamic step
Any wizard/stepped field collection should always give the user a sense of their current progress within the total set of questions. There are pros and cons of hiding/disabling anticipated sections that we may or may not need.
- A few additional pages is okay and will keep your form visibly short
- Don't add so many dynamic pages that users are spinning their wheels
Example of a Wizard with a conditional section:
Here's an interactive demo in Fiddle
Luke Wroblewski also offers several layout options for Selection-Dependent Inputs