Why Disabled Buttons Hurt UX (and How to Fix Them)

About this video

• Video Title: Why Disabled Buttons Hurt UX (and How to Fix Them)
• Channel: NNgroup
• Speakers: [No speakers identified in the transcript]
• Duration: 00:04:34

Overview

This video explains the user experience (UX) issues associated with disabled buttons, detailing why they can be problematic, when they might be useful, and providing actionable tips for designers to make them more accessible and less confusing for users.

Key takeaways

• Disabled buttons are often deceptive: They appear clickable but do not respond, leading to user confusion and frustration, a phenomenon known as negative affordance.
• Contrast guidelines are not violated: Disabled buttons, while often grayed out, do not technically break contrast guidelines because these rules apply to interactive elements.
• Problematic aspects: Disabled buttons are confusing because they offer no feedback, are hard to read due to low contrast, and can complicate form completion by relying on designers to create robust inline validation.
• Useful scenarios: Disabled buttons can be useful to indicate processing states, prevent duplicate submissions (e.g., requesting an SMS code), or signal that an action is no longer available.
• Accessibility tips: When using disabled buttons, ensure they are focusable for keyboard users, announceable by screen readers, and always explain to the user why the button is disabled and how to proceed. Avoid making active buttons look disabled, as users associate gray with inactivity.

Disabled buttons are problematic for user experience for four main reasons:

1. They are deceptive: The visual cue of a button invites users to click, but nothing happens, which can be confusing. This is also referred to as negative affordance.
2. Low contrast makes labels hard to read: The reduced contrast makes it difficult to see and read the button's label, which is important for understanding the interface's context.
3. They do not provide feedback: Users don't receive information on what went wrong or how to correct an error if a disabled button doesn't explain the issue.
4. They add complexity: While intended to prevent wasteful clicks, not allowing clicks and system feedback places pressure on designers to create flawless inline validation systems, which can still fail, leaving users stuck.