1

This question already has an answer here:

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.

marked as duplicate by Shreyas Tripathy, locationunknown, Danny Varod, Joel Tebbett, Madalina Taina May 27 at 8:11

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

  • What about a scenario for Mobile Devices? Would it be better to show a text message as label above the button? – Harish Raghuraman May 9 at 19:34
  • @HarishRaghuraman Maybe if you add a little help icon, when pushed, it displays info explaining why the button is disabled. The icon only stays displayed while the button is disabled. – Mo'ath May 9 at 20:23
  • @HarishRaghuraman check This very similar answer to a case for Mobile devices. – Mo'ath May 10 at 14:46
1

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.

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