User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm talking about Desktop applications, Windows applications.
In my application, user needs to perform a certain steps, before a button can be clicked. The issue now is that for that button, what is the desired behavior if the user clicks on it before prerequisite steps are not completed? Is it better to
A disabled button signals to the user that some mandatory steps haven't been completed yet, and offers an accurate representation of its own state (that it can't be activated). An enabled button falls short in both these aspects, so it's usually best to disable it.
Sometimes we do prefer the "enabled + message" approach - this usually happens when the prerequisites are hard to figure out. For instance, if the mandatory fields are spread out across several tabs and can't be seen all at once, we'll need a message summarizing all of the prerequisites. Since a disabled button discourages the user from interacting with it, users are less likely to see the "hover" message, so we pretend that the button is enabled just to increase the chances of the user pressing it and seeing the prerequisites summary.
Bottom line - if the screen is relatively simple and the user should have no special difficulty in figuring out what's wrong, it's best to go with a disabled button. This is also the best practice in most cases. In complicated screens, an enabled button can be justified.
I agree with Vitaly Mijiritsky's answer: https://ux.stackexchange.com/a/120380/98561
And let me tell you a short story from my own experience of developing a medical application.
The very early step of the user story was to start a study by entering some details like study ID, patient's name, birth date, type of study, etc. In fact, only study ID was mandatory and had to be unique. A small dialog was used with input fields, OK and Cancel buttons. All enabled.
Once the user filled in the fields and hit OK, the checking begun whether study ID is entered and is unique. Should that not be the case, a suitable message box was displayed (an info box, only OK button) and the user got another chance. The more chances they used the more annoyed they were. I lost count of the complaints.
In the second iteration this is what was changed:
The observation was that the users did play "hide and seek" (thus finding out when the OK button gets enabled) before asking any questions about this dialog. And slightly any questions were asked.
To sum it up and answer your question - go for:
disable the button and show a message balloon when the user hovers over the button
This solution:
From your question, the button should definitely be disabled. If the button doesn't function, its appearance should indicate that to the user. It shouldn't be enabled for click or show the hand pointer on mouseover.
In general, you shouldn't have disabled buttons. A disabled button is like a dead end. The user has to look at the button, figure out what it does, figure out it doesn't work, figure out why it doesn't work, then work their way back through the site to the point where they can activate the button or whatever.
Show users what they'll be doing in the future if it helps them. Use deactivation on things that require no discovery and are easy to understand like text, numbers, or images.
Here is steppers from the archived version of material design. You can see how the design doesn't use disable buttons.
https://material.io/archive/guidelines/components/steppers.html#
Do not disable the button. An invisible button is better than a disabled button.
If you want your button to be visible due to UI implications, then make use of tooltip pops (Indicating the "next to certain" task to be performed), not modal view or dialogue.
Take StackExchange as a sample, when you want to upvote a post, the upvote button is not disabled, it's always enabled, it only pops a message in form of a custom tooltip telling the user what they have to do before that button can be clicked.
