The problem with disabled buttons and what to do instead

This content originally appeared on Adam Silver and was authored by Adam Silver

In 2009 I prototyped a form that disabled the submit button until all the answers were valid.

The idea being: the best error is the one the user never sees.

But disabled buttons takes this rule to the extreme.

And as a result it can frustrate users or worse, cause them to give up completely.

Here’s why:

Problem #1: They don’t give feedback

When a form has mistakes, the user has to look at each field, spot a mistake and work out how to fix it.

Problem #2: They make the interface feel broken

If the user thinks their answers are valid, the UI may feel broken. If there are multiple errors and 1 is fixed, the button stays disabled. This feels unresponsive.

Problem #3: They’re hard to see

Disabled buttons have low contrast to signify to users they’re disabled. But this makes them hard to read, especially for users who have visual impairments.

Problem #4: They’re not focusable

This means keyboard users won’t be able to tab to the button. And users with poor vision won’t see the button.

This is confusing as most users expect to find a button to illuminate a clear path to proceed.

Problem #5: They’re deceptive

While disabled buttons have low contrast to signify that they’re disabled. It’s not always obvious. So some users still try and click them.

Problem #6: Users may not notice the button becoming enabled

Users may not notice the button as it becomes enabled.

The button may be off screen due to screen size or the length of the form. And if the button is on screen, users are focused on filling out the fields, not the button changing state.

What to do instead

Whenever I talk about disabled buttons people say ‘just validate as the user types’.

But live validation is problematic. Plus it doesn’t solve all of the above problems.

Instead:

1. write clear label and hint text so users understand the question
2. start with one thing per page to reduce cognitive load
3. enable the button so users can always get feedback
4. forgive trivial mistakes to avoid unnecessary errors

Boring UX > clever UX

This content originally appeared on Adam Silver and was authored by Adam Silver

Print Share Comment Cite Upload Translate Updates

APA

Adam Silver | Sciencx (2023-05-14T00:00:00+00:00) The problem with disabled buttons and what to do instead. Retrieved from https://www.scien.cx/2023/05/14/the-problem-with-disabled-buttons-and-what-to-do-instead/

MLA

" » The problem with disabled buttons and what to do instead." Adam Silver | Sciencx - Sunday May 14, 2023, https://www.scien.cx/2023/05/14/the-problem-with-disabled-buttons-and-what-to-do-instead/

HARVARD

Adam Silver | Sciencx Sunday May 14, 2023 » The problem with disabled buttons and what to do instead., viewed ,<https://www.scien.cx/2023/05/14/the-problem-with-disabled-buttons-and-what-to-do-instead/>

VANCOUVER

Adam Silver | Sciencx - » The problem with disabled buttons and what to do instead. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/14/the-problem-with-disabled-buttons-and-what-to-do-instead/

CHICAGO

" » The problem with disabled buttons and what to do instead." Adam Silver | Sciencx - Accessed . https://www.scien.cx/2023/05/14/the-problem-with-disabled-buttons-and-what-to-do-instead/

IEEE

" » The problem with disabled buttons and what to do instead." Adam Silver | Sciencx [Online]. Available: https://www.scien.cx/2023/05/14/the-problem-with-disabled-buttons-and-what-to-do-instead/. [Accessed: ]

rf:citation

» The problem with disabled buttons and what to do instead | Adam Silver | Sciencx | https://www.scien.cx/2023/05/14/the-problem-with-disabled-buttons-and-what-to-do-instead/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.