24

Possible Duplicate:
Don't hide or disable menu items?

On a create/edit form, where the options available to the end user will depend on their previous input, in order to give the user some guides on how to fill the data, we shall:

  • Disable the controls and enable them only when the pre-requisites are meet.
  • Hide them instead
  • Do nothing
  • Other options

Example: when asking who is the legal representative of someone, the form will contain a combobox with the following options: the own person, their parents or someone else. Only in the case the user chooses someone else, he was to fill a textbox telling who.

Which option will provide the best user experience?

4
  • 1
    Impossible to say in general. Sometimes hiding is right, sometimes disabling is right. Mar 31, 2011 at 14:57
  • Check out this post: stackoverflow.com/questions/90813/…
    – Brandon Moretz
    Mar 31, 2011 at 14:59
  • It is possible to use the option after an action on the current page or does the user need to take action somewhere else first? As you said "depend on their previous input", it made me think they can enable it only by taking action in some other place of the website.
    – Lode
    Apr 2, 2011 at 21:35
  • Another Q: Should disabled options ever be hidden?, might also be of interest.
    – Lode
    May 3, 2011 at 7:33

6 Answers 6

23

Usually favor hidden over disabled fields

Disabled fields give extra thought for the user about why it is not available. As per Steve Krug's "Don't make me think" you should remove elements that make the user think and which they don't need anyway. (It would be better to give this attention to the field/setting that would make the disabled one available.)

Further, hidden fields can be used in other cases as well. For example when fields are optional and you don't want to user to be distracted while they don't need them. Hidden fields can be used for more cases and thus can be learned by the users as the default behavior for all kinds of fields; they are hidden until requested / needed.

When to use disabled

That said, I can think up a few moments when disabled fields are usable:

  • a lot of these fields: constantly hiding and showing fields may distract because the view changes constantly. Then showing disabled fields by default might be better.
  • disabled part of a sentence: like the email address field in the [x] Notify [email address] daily of any new answers on SE when asking a question
  • games / discovery: when you want to user to play around and discover when certain fields become available.

Handle with care

It is good to always make very clear what enables a disabled field. So users at least get a clear clue what to if they feel they need/want the disabled field.

When using hidden or disabled fields, make sure you respect the reading order; place the action to show/enable higher up in the flow. So the selection legal representative is above the representative name. Otherwise you show/enable something higher up where people don't look anymore and they will never know they've enabled another field.

Also, remember that people with javascript disabled can't change hidden nor disabled fields without refreshing the page completely. Make sure you they can use your form as well, for example by using enough visually and textual explanation.

1
  • (Personally) I think the comment about "remove elements that make the user think a they don't need anyway" is meant in the way you explain. In general it means to remove unnecessary/redundant clutter. Hiding a field does provide a user with information that a field exists, but not at that time. So I think the answer of @michael_zuschlag is more suitable.
    – Remi
    Nov 4, 2020 at 15:47
13

A disabled control tells the user:

  • Input is possible.

  • Just not right now.

  • But the user can make it possible.

That pretty much describes your example where simply changing an adjacent option makes input possible. It’s better to use disabling rather than hiding because it helps the user anticipate what is necessary for certain options. Whenever disabling is used, you should make it clear what specifically enables the control. In your example, it’s probably sufficient if you use radio buttons so the text box is right next to the Someone Else option. Worse case, use a text label or tooltip to indicate how to enable the control. For commands (menu items and command buttons), it may even be preferred to leave the control enabled and display an error message explaining what needs to be done first, although that should only be done as a last resort.

Unless there is some simple action the user can do to get access to the control (e.g., by selecting some other controls in the same window), do not use disabling. Rather, hide the controls. For example don’t use disabling for controls users of a certain job or class are never allowed to use. Disabling may confuse some users who will then hunt around the window for something to do to enable them. As far as the users are concerned, actions they don’t have the rights for are not their job (otherwise they’d have access), and so the associated controls should simply not exist in their UI. Documentation or organization procedure manuals may tell users how such actions are accomplished.

Hiding should also be considered as an alternative to disabling when you’re replacing access to one set of controls with access to another set. This is to avoid cluttering your window with excess unavailable controls.

In your particular example there is yet another alternative, assuming you’re using radio buttons: Leave the text box enabled. If users type in the text box, automatically select the Someone Else radio button for them. This saves the user a click. MS Office does this with the Pages radio button and text box in its Print dialogue.

I’ve far more than you ever thought was possible on the subject at Controlling Your Controls.

For similar issues and answers related to disabling and hiding, see also:

Fair to call it a perennial question.

3

In normal circumstances:

  • Enable/Disable if just a few fields affected.
  • Hide/Show if many fields affected.

It really helps to have the dependent fields immediately after the field that affects them so that the dependency is clear... either on the same line, or on the line below and indented to indicate the dependency.

0
1

I believe disabled controls are most of the times only confusing: why is it disabled, what should i do?

If, inside a form, a user first has to select something, and depending on that decision, maybe extra fields need to be filled in, i would hide them, and only show them when necessary.

So in your case i would hide the textbox always, until the user has selected Someone else. Otherwise i can imagine people might expect to be typing the name (whether or not it is own, parents or someone else). It will only confuse people. Avoid to make them think.

1

It depends on the UI layout you are using. If the rest of your site brings on more fields dynamically as the User makes choices, then go for it. I have to say that this approach is both dangerous and demanding. It cannot be one off thing, it has to be within the whole site's mentality for the User to grasp the concept.

There are many cases that a User may feel confused by the absence of some fields. I believe your example is one of these cases.

  • If you have the option hidden in a drop-down menu then I would not expect he extra field to be there

  • If you have a radio button or other method that leaves the option exposed then I would look for the extra field even if it is disabled.

0

Depends on the use. But generally if he has to fill then make all fields which has to be filled enable and if it is not filled, just give the user a warning. Making it enable after filling some fields might be annoying sometimes.

Not the answer you're looking for? Browse other questions tagged or ask your own question.