Showing/Hiding vs.Enable/Disabling form fields

Question

I would like to know the benefits and drawbacks regarding to form design of "dependent fields". For example, in my form I have a Marital Status field, and depending on it's value, I need to know the partner document number and partner name.

• What would be the benefits/drawbacks of not showing the partner fields, and show it on the fly, depending on the selection of the Marital status?

vs.

• What would be the benefits/drawbacks to let the fields disabled on the form, and enable it on other fields selection?

Also others solutions for the problem would be appreciated.

The form is a Web form for a business Web Application, not a web site.

Answer 1

What you are really asking is what is the benefit and risk of progressive disclosure in a web form design.

Benefits

The benefit of using progressive disclosure is that you lower the user's cognitive load by only showing the fields they need to complete their task. As they enter more data, more fields may be required, but they only have to examine and interpret those fields if it is necessary for task completion.

As Jakob Nielsen writes:

In a system designed with progressive disclosure, the very fact that something appears on the initial display tells the users that it's important.

[...]

Progressive disclosure [...] improves three of usability's five compontents: learnability, efficiency of use, and error rate.

Other benefits to progressive disclosure are:

• Clean, simpler, more productive interfaces (a godsend for small displays)
• Important content is prioritized by giving the initial focus to the most common features
• Less important content is hidden from view so as not to confuse visitors
• Time is saved if scrolling is reduced and fewer refreshes are needed
• Fewer errors occur because novice users will take easier, more manageable steps

Drawbacks

The drawback to this approach, however, is in the design and implementation.

Luke Wroblewski is fond of a particular Charles Mingus quote that applies in this siutation:

“Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity.”

In a UX Matters article he writes about the complexity of simplicity. Progressive disclosure, or as he calls it "gradual engagement", is the way a complex workflow can be "perceived" as simple by the user. Achieving this perception is hard:

In order to present the right user interface to the right user at the right time, designers must track multiple types of users and their various states, then map those contexts to an appropriate presentation of features and content. This, of course, is a non-trivial challenge and, as a result, is often done poorly. If the logic is not thought through completely, some users end up with too many options, while others feel they have too few.

Other drawbacks include:

• Accessibility can be tricky, as in the case of helping screen readers navigate to page sections
• Page-loading times could increase because of the size of preloading content
• Client-side technologies like JavaScript (Ajax), CSS3 or Flash could be disabled by the user (so you must take into account graceful degradation, which could add to the development time)

The Good News

The good news for you is that the main drawbacks to progressive disclosure are most prominent in applications or complex interactions, not transactional forms.

In your case, you are describing required fields that are only required if a particular state exists. You do not have any problem defining what the "right user interface" is for the "right user" at the "right time." Your business rules should clearly answer all of those questions.

The implementation challenges with regard to accessibility, page loading, and client-side technologies can be mitigated and tested.

Update:

• Here is a related question that has some additional insight/opinion on this topic.

• Here is another with a good Joel Sposky quote:

  A long time ago, it became fashionable, even recommended, to disable menu items when they could not be used.

  Don't do this. Users see the disabled menu item that they want to click on, and are left entirely without a clue of what they are supposed to do to get the menu item to work.

  Instead, leave the menu item enabled. If there's some reason you can't complete the action, the menu item can display a message telling the user why.

Answer 2

Consider alternatives to either showing or not showing them.

A drawback to not showing them is that the user doesn't have an accurate idea of how long a form is based on a quick scroll. Showing them can make a form unwieldy and overwhelm the essence of what you're seeking.

Perhaps a middle-ground approach might work, like the rough image attached where small sub-fields convey that more info will be requested under each main form field, without some of the drawbacks of showing every field right away.

Answer 3

When you have a value-contingent region (a.k.a., selection dependent inputs) like you describe, the basic rule I recommend is to:

Disable fields in a when there’s only one set of fields that are input-dependent. This provides a preview to the user of what they can expect when they select or supply a particular value for the controlling field (marital status, in your case). It’s better than hiding fields because it makes the form visually stable with no strange empty spaces or other fields spontaneously sliding around to make room. It’s better than leaving the fields enabled because users can mentally skip over disabled fields without studying them to see if they apply or not.

Hide fields when there’re alternative sets of fields that are input-dependent. That is, if you’re going to replace some fields with others depending on the user’s input, then hide those that don’t apply. Because you’re swapping fields, the form remains relatively stable. It’s preferred to disabling because it keeps the form from getting too cluttered with a lot of fields that cannot all apply at a time.

There’re gray areas, as usual. For example if for one selection you have one input-dependent field, but for another selection, you have the four input-depend-fields, it may be better to use disabling to maintain stability and provide preview. The cost in clutter is fairly low.

I’ve everything you’d want to know about disabling and hiding* at Controlling Your Controls.

*But were afraid to ask.