Conditional forms and disabling input fields?

Question

I'm working on some forms that I see as complex.

Step 1: 3 radio buttons (a, b, c)
Step 2: 2 radio buttons (yes, no)
Step 3: input fields, amount varies based on the combination of step 1 & step 2 selections.
Step 4-6: not required, non-conditional.

If I select "a", "b" or "c" in step 1, and then select "no" in step 2, I don't see step 3.
If I select "a" in step 1 and then select "yes" in step 2, I see 3 input fields in step 3.
If I select "b" in step 1 and then select "yes" in step 2, I see 5 input fields in step 3.
If I select "c" in step 1 and then select "yes" in step 2, I see 1 input field in step 3.

What is the best practice for loading conditional inputs on page load?
Should the input fields be disabled until the pre-conditions are met?
If it's disabled, what does step 3 look like on page load (meaning, what input fields are displayed -- 3, 5, 1)?

Answer 1

The typical convention is to use progressive disclosure, adding items to the interface as the user provides data. This helps keep the form quite small and non-intimidating.

If you cannot do this, I do not recommend using 'progressive removal', where items are removed, as this can actually be quite jarring. When an item a user hasn't quite parsed is suddenly removed from view, users seemed quite unnerved in tests.

You may also find it helps to make the dependent fields seem 'subordinate' to their controlling fields, using techniques like grouping or indentation to make the dependent objects seem to 'belong' to the controls that manage them. This will help communicate the action of the form.

Answer 2

Simple example from YouTube's Search that removes any clutter until absolutely necessary

The Why

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.

The How

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:

1. Dynamically appear on current page
2. 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:

• Avoid page jumps when adding elements to the current page
• Use animations to reveal new elements (e.g. Bootstrap's collapse)
• Highlight new fields that require user attention (e.g. jQuery UI's highlight)

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

Answer 3

A common element in very long forms (my experience is from research questionnaires, advertising etc.) is to simply present one question at time, and then show next element depending on previous answers. That way the users are never confused where they are at and the screen is not cluttered by disabled questions. Also non-conditional questions can be grouped on the same page if needed.

This might not be a good fit if the form is short.