An inactive button is used to visually indicate that an action is unavailable due to non-compliance with certain conditions. However, when it lacks feedback, context, and guidance, these experiences can be frustrating, confusing, and inconsistent with accessibility guidelines.
Show only items you can interact with
How important is it for the user now to access the disabled item? Does he need to know that something is not available? Does displaying a disabled action have any value? Will he be able to complete the task without it?
Consider removing unavailable options. Show only the actions that are relevant and useful to the user at the moment.
Examples:
-
Links to pages inaccessible to users with limited access.
-
Actions available depending on the user’s privacy settings.
-
Filters not applicable to the selected items.
Provide context
Is it obvious to users why the action is blocked? Will they guess what it takes to continue?
Text and disabled button
Consider adding more information to a disabled action.
Examples:
-
To use the function, the parameter must be enabled.
-
A choice is required to proceed.
-
Requires data entry to calculate pricing and display payment options.
Enable by default, then show error if needed
How likely is it that users will enter an incorrect value or submit an incomplete form? Is this the only way to validate the form?
Sometimes verification is done only after the form has been submitted. It is okay if the error is expected to occur very rarely. Be sure to include which fields are required and which are optional so that users have a better chance of completing the form on the first try.
Example:
Forms with a minimum number of input fields, such as login and password recovery pages. Button states such as hover, click, and current state provide users with the visual feedback they need. Without event states, users may not understand what happens or will happen after the action is taken.