Should a UI display actions that are not available?

Question

What is currently regarded as best practice in UI design for displaying actions that are not available in the current context.

For example, A page displays customers who can have many associated contracts. I do not wish to allow the user to delete a customer if there are active contracts. From a usability and UI perspective what is considered the best for the user experience.

1. Always show the delete option but warn the user when he selects it that the option is unavailable because there are active contracts.
2. Show the delete option but grey it out.
3. Do not show the delete option at all

Always showing the option has the benefit of consistency and the relevant actions are consistently in the same place etc, but conversely what is the point of showing them something they can't do.

Greying the option out still has consistency but does not allow them to select the action that they can not perform.

Not showing the option at all lacks consistency but will perhaps not be so confusing.

Before yesterday I would not have even asked the question and would have gone straight for option 2 (Greying out) however having watched a user try to click on the greyed out image many times and eventually asking me why they couldn't click on the button I am no longer sure what the best option is.

What do people with usability and UI testing experience feel is the best option?

Answer 1

My approach (and recommendation) would be that the button be grayed out as per your option #2.

When the UI is sparse and sufficient real-estate is available, having inline (up-front) contextual hints (such as the question mark approach suggested by Freddy, next to the button, detailing the problem in-line e.g. always display under the disabled button "No users to delete. Add some by going to (link)this tab(/link)!") can be desirable.

However, such inline hints or question marks that appear occasionally can complicate layout or hamper the effectiveness of the interface when real-estate is at a premium. In such cases it may be better to have an overlaid hint (a baloon or tool-tip) that appears when hovering over the disabled button as well as when clicking on the disabled button (i.e. the user manifests intent by approaching the disabled button with his/her cursor); the tip should explain why the button is disabled and grayed out, i.e. "There are no users to delete."

The above should take care of all (typical as well as pathological) cases. It combines the advantages of your #2 and #3 options, with hopefully none of the disadvantages.

Answer 2

Raymond Chen (of The Old New Thing fame) provides good guidelines:

When do you disable an option and when do you remove it?

From the blog entry:

Experiments have shown that if something is shown but disabled, users expect that they will be able to get it enabled if they tinker around enough. So leave a menu item shown but disabled if there is something the user can do to cause the operation to become available. For example, in a media playback program, the option to stop playback is disabled if the media file is not playing. But once it starts playing, the option becomes available again.

On the other hand, if the option is not available for a reason the user has no control over, then remove it. Otherwise the user will go nuts looking for the magic way to enable it. For example, if a printer is not capable of printing color, don't show any of the color management options, since there's nothing the user can do with your program to make that printer a color printer.