How should a disabled-but-giving-feedback button look like?

Question

Similarly to the author of this question, I was thinking about replacing a disabled button by one giving a feedback why the action is not allowed. That's not subject of my question as in my case, I'm pretty sure the feedback must be given.

The question is how to do it. I use material-ui and there's no support for this. I considered the following

• The standard disabled button. That's bad as it very clearly indicates that it should not be clicked, so most users won't try and won't get any feedback.
• The standard non-disabled button. That's better but it'd nice to make clear that it won't really work.
• A different color. Unfortunately, there's a bunch of images in different colors nearby, so it can improbably help. Moreover, in some places, there's just a single button, so making it pale like in the image below won't work due to lack of comparison.
• An icon. Unfortunately, there's no place there.
• A strike-through text. Unfortunately, it looks more like a visual bug than anything else.

So I need something compact and clearly indicating a non-standard state yet inviting to click. Any idea?

TL;DR What I'm asking about is how to visually indicate that the wanted action can't be done, but the button can be clicked in order to get a hint. I find such an indication important as it gives the user a positive feedback when they do an action enabling the button. I'm thinking about something like in this image, just better.

Answer 1

I had to solve a similar problem recently. I had to turn all components in a screen read-only. Not disabled, but read-only, where user could interact with all values in the components, but not change it. The approach we took with buttons was:

• For web: on hover, the mouse cursor changed to the not-allowed state, with a tooltip informing the user why it was not possible to click

• For mobile: When touching the button, it shows a tooltip like the one on web

For both cases we didn't change the button style, it would look like any button on active state.

Answer 2

Since you want the user to be aware of when the button can be used, you can do a few things:

1. Add a text explaining that and why submitting is not possible yet. But you probably have no space for that.

2. Let users discover themselves that the button can not yet be used. Thus stick with the normal button, it is the only way to be sure users are going to click it.

If you need users to notice when a submit is possible and the button becomes "enabled", I would add a small indicator on the button. like a tag or something that states that the action is blocked, not disabled. Just an idea:

Answer 3

I answered something very similar not long ago:
Should disabled buttons give feedback when clicked?

Basically this is a viable solution as well, add an extra element on top of the disabled button, making it clear that there's more to it than just a disabled state:

Answer 4

Two thoughts come to my head if I understand your question correctly. Both of these are using other Material UI components.

• If you need to allow the button to be clicked, have the button not disabled and on click, have a snackbar give the message to the user.
• If you can disable the button but want to give feedback on why it is disabled, use a Popover component on hover explaining why it is disabled.