Disabled buttons don’t have to suck

Three alternative solutions other than just disabling buttons

Published in

Justine Win Stories

3 min readMar 2, 2021

A disabled button is used to visually communicate that the action is unavailable because certain conditions aren’t met. However— when it lacks feedback, context, and guidance— the experience may feel frustrating, confusing, and inaccessible.

“Why can’t I click this?”, “What am I supposed to do?”, “How come it’s not available anymore?.” Let’s look at three alternative solutions that make encounters with disabled buttons less frustrating.

Disclaimer: This article hopes to encourage readers to provide more clarity and context other than just disabling options. Situations may vary and so does the best solution. Use your best judgement 😉

1. Only show what’s actionable

How important is it for the user to access the disabled element now? Do they need to know something is unavailable to them? Does displaying a disabled action provide any value? Will they still be able to fulfill the task without it?

👍 Consider removing options that are unavailable or not applicable. Show actions that are only relevant and useful to the user at a given time.

Examples:
• Page links that can’t be accessed by users with limited access.
• Actions that are available based on the user’s privacy preferences.
• Filters that are not applicable to the selected items.

Both photos are “Export products” modals. The left photo shows all enabled and disabled options. While the right photo only shows the selectable options.

2. Provide context

Is it evident why the user is blocked from performing an action? Will they figure out what is required to continue?

Text and disabled button

👍 Consider pairing a disabled action with additional information.

Examples:
• A selection is needed to proceed.
• A line item is needed to calculate the cost and show payment options.
• A setting should be enabled to use the feature.

Both photos are Order cards. The left photo shows disabled payment action buttons that will only be enabled when products are added. While the right photo, instead of showing disabled buttons, provides a text that explains what is required to view payment options.

Both photos are “Add product” modals. The left photo has a disabled “Add button” in the modal footer. While the right photo has a “0 item selected” caption supplementing the disabled button.

Both photos are feature cards. The top photo shows the name of the feature and a disabled “schedule a pickup” button. While the bottom photo shows the same disabled button with texts explaining what is needed to set it up.

Tooltip

👍 Consider using a tooltip to describe why the action is unavailable.

Examples:
• An action is not available due to a limitation.
• An input is required to access other options.

Both photos are “account” cards. The left photo shows a section with a username and a disabled “change” button. While the right photo shows an info icon (instead of the “change” button), which on hover or click, opens a tooltip explaining that it can only be changed once a week.

Both photos are top navbars of an article website. The top photo shows disabled “publish” and “more action” buttons. While the bottom photo left the “more actions” enabled, which on click, opens a tooltip explaining that an input is required to view other settings.

3. Enable by default, then show error as needed

How likely will users input an incorrect value or submit an incomplete form? Is this the only way we can validate the form?

👍 Sometimes validation can only occur after form submit. This is okay as long as the error is expected to happen very rarely. Make sure to indicate what fields are required and what fields are optional so users have a greater chance of accomplishing the form on their first try.

Example:
• Forms with minimal input fields like login and forgot password page.

Both GIFs are login pages. The left photo shows a disabled “login” button by default. While the right photo left the “login” button enabled and on page submit, shows an email field inline error.

Thanks for reading. I’m quite passionate about web accessibility and wrote an article on how to test your designs with a screen reader. I hope to inspire designers to consider accessibility early on in their design process. ✨