By Hanna Kazak
Disabling buttons in user interfaces can indeed present usability challenges. Here are some common usability issues associated with disabled buttons and tips on how to avoid them:
1. They confuse people
When people see a disabled button, what are the first thoughts in their head?
Why it’s not working?
I haven’t had time to press anything yet, but they don’t allow me to press the button anymore
What do I need to do to enable this button?
“Don’t make the user think” is the most important usability rule. When you disable the button, you make the user think about how to activate them. Users who don’t want to find what keeps the button disabled will simply abandon the process of filling out a form.
2. They don't explain what’s wrong
Based on the usability heuristics the design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. Disabled buttons communicate that something is off, but very often that’s just not enough. There is no feedback on why they are disabled when you click on them. As a result, too often users are left wondering what’s actually missing, and consequently locked out entirely.
3. They fool users into clicking
Even though the buttons are disabled, they contain a call to action words, like “Send”, “Order” or “Add friend”. And what does the user want to do most? Of course press the button. And when nothing happens users can feel angry and fooled.
4. They are hard to see
In most cases, designers like to make buttons inactive by changing their transparency to 30-40%. And this colors can easily fail to meet color contrast recommendations for text. Also, users with disabilities will face challenges in recognizing these buttons and reading the low-contrast text on them.
What to do instead?
Instead of using disabled buttons, there are several alternative solutions that can maintain a smooth user experience and guide users effectively. Here are some alternatives:
- Just don’t disable buttons :) Have them enabled and then show an error message when the user clicks them. Gmail example: When the user clicks on “Send” button, the interface displays a notification about what is needed to do to send an email.
- Hide button from UI Instead of disabling buttons, consider hiding options that are not currently available or applicable based on the user's context or actions. This approach reduces clutter and focuses the user's attention on relevant choices. Telegram example: In this case, the users do not even have the opportunity to send a message, because there is no such button. The interface helps to choose which message format to send (voice, written or attach a file).
- Buttons with tooltips showing the reason for disabling Display the button in its disabled state and add a tooltip explaining why it is disabled and how users can get it enabled. This way users will know both the reason and the required action to enable the button. Retool example: Upon hovering over the button, the user see what action needs to be taken to enable the button.
- Use a better way to communicate with users Instead of disabling the action, think of something alternative that can be communicated to users in a better way. When an item is not available for purchase, instead of providing a disabled Out of Stock button, you can provide an ‘Add to wishlist’ or ‘See similar items’ button. Uniqlo example: the shop replaces “Add to cart” button with “Back in stock” button when the item is out of stock.
By using these alternative solutions into your interface design, you can provide users with clear guidance, maintain engagement, and ensure a smoother overall user experience without relying on disabled buttons.
Sources
- https://axesslab.com/disabled-buttons-suck/
- https://uxdworld.com/2024/01/29/disabled-buttons-ux/
- https://uxdesign.cc/never-ever-disable-buttons-part-1-why-not-73d16a0fb32b