Why You Shouldn’t Gray Out Disabled Buttons (uxmovement.com)
over 3 years ago from anthony thomas, ux designer
over 3 years ago from anthony thomas, ux designer
I'm frustrated by how prevalent this sort of thing is in design articles.
this approach [...] surprises users
A button that turns from gray to fully colored is an unexpected change that makes users wonder what just happened
As the disabled button transitions to its enabled state, the new appearance won’t catch users off-guard
These are all definitive statements - but there is no evidence presented to support them. This is exceedingly common when discussing design, both on a large and a small scale.
If these statements are backed by research, then I think that would make them extremely compelling. But as far as I can tell, they're not; rather, they're probably just one designer's opinion, presented as fact. I'm not even disagreeing with this opinion, necessarily. But if you are presenting your opinion in writing, I feel that it's important to make it clear that it is your opinion. And If you are presenting research-based findings, by all means provide the research.
It's my opinion based on years of experience working in the field with users and stakeholders. If you are skeptical about how a certain design affects users you should go do research on that. This way, you have substantial basis for your doubt instead of doubting because of "lack of research" which is no basis at all. A "lack of research" doesn't disprove a claim, only research or experience that goes against the claim does.
What you're saying when you need research to understand user behavior is that you have no experience working with users, and you're not sure if users behave this way because you probably wouldn't. If this is the case, I suggest you go get experience with actual users. You'd be surprised how a design aspect you expect them to understand throws them off. And you'd eventually learn that you are not the user and using yourself as the standard to judge how users behave is not usually accurate. Go get experience with users.
Appeal to experience is a fallacy.
If it's between my experience versus your zero experience, most will go with the guy who has some experience.
2) straw man fallacy. want to go for three?
Saying an article is false because it has no research is the ultimate straw man. If you had any valid experience with UX you would be dissecting the rationale presented in the article and refuting them with specifics.
The argument for transparent disabled buttons is solid and strong because I provide specific experience-based rationale to back it up. Your vague complaint "it has no research" is trash. Anyone who argues without specifics has no credibility.
Again, straw man fallacy and appeal to authority, which is worse.
No, it's on you to prove what you are claiming. Not on others to assume you're right. Anyone who dismiss research as inexperience, is a hack.
"Why You Shouldn't Take Authoritatively-toned Articles At Face Value"
At this point, I consider every article from this website spam.
This article doesn't show any evidence. It's just opinionated.
A good demonstration would be to show results, like "we tested the form with the gray button, 66% of the users thought X". Instead, it bases all the premise on the author bias, therefore, you are reading their logic. Like the greatest book ever: "Everything is obvious", your common sense is not the same as mine.
There was plenty of articles talking about putting the CTA button on the top, green color over red, and other people proved this was a false, logically biased premise. I've read blog posts about CTAs at the bottom converting better than at the top. This is the problem with UX articles, they're based on logical fallacies and not conclusive data.
I think the Baymard Institute is a legitimate source of UX information. On the other hand, this UXMovement site is just clickbait spam and the author(s) come in here and act like children when anyone disagrees.
Generally, disabled buttons are not good practice. Transparent disabled buttons are not an improvement by any means.
Why do you think its not good practice?
fingers crossed, as we may learn more from Frederick's response than from the posted article.
The article is nonsense, and should be removed. The biggest problem with it is that it's based entirely off an incorrect idea.
Form buttons should not be disabled at all. They should remain enabled, so that when a user clicks the button, there is the opportunity to display information for the user to complete the required fields in order to proceed.
A transparent button blends into the background more, while a gray one remains in the foreground (unless the background is gray).
blends into the background - rendering the text unreadable. Awesome.
Foreground elements are more noticeable to users. They tend to view them as interactive, which means they’re more likely to interact with a grayed out disabled button.
Users are supposed to be encouraged to interact with a form button. That's entirely the purpose of a form button. Once a user reaches the button, they should interact with it. And if they try to interact with it before completing all required fields, you should check to ensure you have enough signals to indicate what is, and is not a required field.
That simple form usability guideline aside - just look at the contrast on the disabled button from this article! Talk about accessibility failure.
Users can easily mistake a grayed out disabled button for a secondary call to action. Or, worst-case scenario, they can mistake it for a poorly designed button with low color contrast.
So you're aware of contrast, and how it works - yet you are suggesting a transparent button that blends into the background?... Wow
By following this technique, you’ll make your disabled buttons look disabled without giving users any surprises. Instead, the only surprise they’ll get is how smooth and seamless your interface is.
I hope people do not follow this technique, and instead take advice from websites like nngroup, or sites like this or this
From my experience: User comes at the bottom of a long form, tries to click the button to go further and it doesn't work. No idea why it doesn't work, it just doesn't. Then has to go on a wild goose chase to find why somewhere in the form something isn't validated; nothing of this is highlighted so good luck finding it.
And greying out/making this transparent in no way comes anywhere near a decent contrast rate for people with non-perfect eye-sight.
All I'm seeing in the comments is that you're presenting personal experience and opinions as facts and that you should have some sort of evidence. I don't even think that's the main problem. I am used to reading articles from random designers as 'opinions' or 'thoughts' anyway. I think that what you're saying is one option of dealing with this problem, but not the only way.
The problem is that you come across as a bit of an arrogant prick to anyone that disagrees with your article or the way you're presenting it. From all these comments here and on your article there's probably a combined total of 100 years of experience.
From every test I’ve ever ran users will try and click on the button when they think that’s the next choice for them regardless of style. If the action isn’t clear or they’re frustrated they key on the label — not the styling. I would put more stress on the importance of consistency within a visual system. If you dim disabled buttons then dim all disabled buttons. Same w greying.
As a side note I've learned from previous mistakes designing sign up forms that disabling buttons is generally less understandable than letting the user click the button and then showing them any form errors that need correction. Because of this the examples in this article aren’t great.
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Login to Comment
You'll need to log in before you can leave a comment.Login
New accounts can leave comments immediately, and gain full permissions after one week.Register now