enabled=”false” Considered Harmful

Oftentimes when designing applications, certain functionality needs to be present in some situations but not in others. The traditional way of dealing with this on the desktop is to enable the controls that provide access to that functionality when it is available and to disable them when it is not. For example, consider the following application snippet where the “Merge” function only applies when the user has selected two records.

Unfortunately, disabling controls without explanation is often a pathway to confusing your users. The problem is that disabling a control does not, by itself, provide the user with any indication of why the control is disabled. It may seem obvious to us, the system’s designers/developers, but to a new user experimenting with the application’s functions the reason the control is disabled may be quite opaque, especially if the function is far away from the means of enabling it (e.g., with application menu items). Time and again in user testing, I’ve watched participants fumble when a function they were expecting to be able to perform is inexplicably disabled.

But if disabling controls is confusing, what can we do instead? It heavily depends on what your design is trying to achieve, but here are some ideas:

  • If the user must select additional content before the operation makes sense, as in the example above, consider keeping the control enabled but asking the user to choose the second item in a pop-up box. Consider including help text in the box informing the user that they could have multi-selected list items using control-click to avoid the dialog.
  • If the user needs to do something more complicated, consider leaving the control enabled but providing help text explaining how to get the function to work when the user hovers over or clicks on the control. Remember that modal dialog boxes are bad, so consider using something less intrusive like a callout to provide this information.

If anyone has other ideas on how to avoid the disabled state, please do email them to me or post them in the comments.

This entry was posted in interaction design. Bookmark the permalink.

7 Responses to enabled=”false” Considered Harmful

  1. Theo says:

    Your suggestions go against my instinct of not giving the user the means to hang him or herself. Why let the user press “merge” when it’s not possible? A dialog or non-modal error message must surely annoy much much more than the puzzlement of a disabled button.
    In your example, it is quite clear that the action “merge” requires two items, because that is implied by the label of the button, and the disabled button shouldn’t be too confusing.
    However, I agree that there are other situations where the reason for why a button is disabled couldn’t be made clear just by the label of the button, but in those situations wouldn’t it be more appropriate to describe the reason for why the button is disabled in a tool tip or text next to the button? This feels more friendly than letting the user discover that the action is not supported _after_ clicking the button.

  2. Dirk Stevens says:

    Rob – why not hide/show the merge button (with a slide out/in effect?) when applicable?

  3. Rob Adams says:

    I wouldn’t recommend thinking of this situation as “merge is not possible if only one item is selected, so we need to disable the control so users don’t click it by mistake.” Instead think of it as “the user said they want to merge, but only one item is selected. They must not realize that they need to select another item, so let’s help them accomplish their goal.”
    In this case, the Merge operation seems (to us) to clearly imply that two items must be selected. But sometimes its surprising how users interpret gestures. Some users aren’t familiar with control-select. Others may not know what Merge does and thus may not think they have to select two items to enable the command.
    Throwing up modal dialog boxes is generally an ill-advised strategy all around. However, there are modeless ways of displaying additional information, either through callouts or other means. Tooltips are an OK way although if the button is disabled you risk the user never trying to hover over it long enough to see the tooltip.

  4. Hi Rob,
    what about exploiting a visual hint like the following (try to select two rows):
    http://www.alessandroronchi.com/demo/flexmerge/index.html
    It’s a one minute coding example with the use of a poorly designed icon but it give the idea of what I mean.
    Best regards, Alessandro

  5. Keith says:

    Alessando, I think your suggestion is fantastic. Thanks for making a demo!
    I don’t think there is a clean answer here, but I would also advocate combining your method with disabling the button. Add a tooltip and it would be optimal.
    I’ve been a huge tip of tooltips lately as they seem to always be appropriate and don’t clutter the UI.

  6. milan says:

    My first thought was to hide merge button if only one row is selected, but idea of alessandro is clearly better solution.

  7. Joc says:

    Another approach might be to have some explanation above the list but also to have checkboxes in the list so that a person can select 2 items without having to hold down extra keys. I realise it’s important to use space but usability counts too.