What should the behavior of Disabled Link/Button be? [duplicate]

Question

What is the best practice for designing disabled states? In general disabled states cannot be interacted with. Any opinions on presenting a tooltip/pop-up on hover or click when the user interacts with a disabled/greyed out link or button.

Answer 1

Adding a Tooltip to tell users why a button is disabled is a good way to reduce frustration!

Disabling a button could be frustrating and confusing to users in many cases, as yes users usually cannot interact with a disabled button/object. Adding a Tooltip that guides users on the reason an object is disabled is one way of interaction that would reduce users' frustration.

Take this example: Add Course button is disabled till all mandatory fields are filled out. When the button is hovered, a Tooltip will display to explain why the button is still disabled.

-Note: When all mandatory fields are filled out, the Tooltip content could be changed to explain the button functionality, or simply do not display it if it is not needed anymore.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Update: I just found this answer to support the idea.

Answer 2

Personally, I can always tell a disabled state from two things:

1. The element is 'greyed-out' in some fashion, to distinguish it from other, active elements around it. (Which you've mentioned)
2. The 'pointer' cursor does not show when hovering over the element.

The Material design guidelines have some good information regarding disabled states, but I'd start with completely disabling interaction on the button - clicking it does nothing, hovering it does nothing, etc.

I'd also advise against a pop-up on hover or click, as it will remove the user from the current experience in a very jarring fashion; pop-ups should generally be used for immediate, high priority feedback.