Solving the problems of inactive buttons in interface design

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 out of step with accessibility guidelines.

“Why can t I click on this item?”, “What should I do?”, “Why is it no longer available?” Let s take a look at three alternative solutions to make disabled buttons less annoying.

1. Show only elements with which you can interact

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 him?

? Consider removing unavailable options. Show only the actions that are relevant and useful to the user at the moment.

Examples:

• Links to pages that are inaccessible to users with limited access.
• Actions available depending on the user s privacy settings.
• Filters not applicable to the selected items.

2. 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.

prompt

? Consider using a tooltip to describe why the action is not available.

Examples:

• The action is not available due to a limitation.
• Data entry required to access other parameters.

3. Enable by default, then show error if necessary

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.

Thanks for reading. I am interested in the topic of web accessibility and I wrote an article on how test your designs with a screen reader… Hopefully this will inspire designers to think about accessibility early in the design process. ✨

Good button design rules

Hello pie buddy. This will be a super-short article in which I will tell you a few basic rules that will help you design adequate …

How to design better buttons

Do s and Don ts when designing interface buttons