UX: Disable or hide button?

UX: Disable or hide button?

Hide controls when users cannot use them. Disable controls when users need to understand that an action exists but is not available yet.

Some arguments for using a disabled state:

• Users can learn that the action exists, even if they cannot use it yet. Add a tooltip that explains the requirement.
• The user can learn where controls and buttons live within the interface.

Some arguments for hiding the button:

• The screen stays focused on the current task.
• You can reuse the same space for controls that matter in the current context.

The questions you should ask yourself are

• "What does the user need to know at this point?"
• "What does the user need to do at this point?"

Simplicity helps until it hides useful context. If users need to know an action exists, keep the control visible and explain why it is disabled.

Common guidance

1. When an element is not permitted to be used by a given user due to a lack of permissions to use it, it should be hidden from the interface.
2. When an element is permitted for a user:
   1. If an element may become available for use based on other things changing on the same screen (such as a Button being useful only when the value of a Select dropdown is changed, or an input field filled), show the element at all times, but disable it until it is possible to use it. Additionally, show a tooltip on the disabled element explaining what might cause it to become enabled.
   2. If an element can never become interactive by changing something on the same screen, but it is necessary to show it to users because of the information it contains (such as auto-generated ID fields on Edit record screens), show the element in a non-interactive format (i.e. show a text expressing the value in question instead of an input field).
   3. If an element can never become interactive by changing something on the same screen, and it is not necessary to show it to the users (such as a button that is non-functional until a certain type of sub-record is added), hide the element altogether.

Examples

Gmail:

Gmail screenshot of disabled button

Gmail disables the Archive button for spam emails, but allows it elsewhere.

Reference:

1. https://medium.com/swlh/what-happens-when-you-hide-important-ui-functionality-c6b16ffd3b74
2. https://ux.stackexchange.com/questions/24386/inactive-state-of-buttons-to-hide-or-not-to-hide-that-is-the-question
3. https://ux.stackexchange.com/questions/107513/what-is-better-for-ux-hiding-or-disabling-irrelevant-buttons#:~:text=If%20you%20hide%20the%20button,to%20do%20a%20user%20test.
4. https://ux.folio.org/docs/guidelines/ux-patterns/hiding-vs-disabling-elements-ux-pattern/
5. https://www.quora.com/When-is-it-preferable-to-hide-a-disabled-button-in-an-interface-instead-of-showing-it-in-a-disabled-state