Giving users immediate feedback is a very important principle in interaction design. It's about the design of how the system responds instantly and efficiently to what the user does. It is important to give immediate and appropriate feedback when the user is doing something.
A simple example can illustrate this: when your computer freezes, no matter what you order, the computer will not respond. Without feedback from the system, the user's heart will collapse. What we are going to discuss today is a very special kind of feedback: how to provide user feedback when the button is grayed out?
Let's look at a case first. This is a floating layer for b2b data voting. There is a voting button below each player. Each user can only vote for one player per day.
At first glance, there is nothing wrong with this solution. But if you add the page after the vote, the problem is exposed:
Figure 2 In order to express "can't vote anymore", all the buttons are grayed out, so we get a screen of grayed-out buttons. Although the button is gray, the button still looks like a button, and there is still a desire to click.
So here comes the question. Clicking this gray button at this time should pop up a toast prompt: "You can only vote once a day~~~"? With this question in mind, let's study the grayed-out button.
greyed out button
Grayed out buttons are widely used in login and registration, such as WeChat:
The left picture is the default login page, the login button is grayed out; when the user enters a password (even if there is only one digit), the login button lights up.
At first glance, it seems unreasonable that it lights up after only one password is entered. After all, the number of digits in the user's password is almost impossible to be in one digit. At this time, the user is unlikely to log in when the password is turned on, but it is suspected of interference.
But if you think about it again, assuming that the user's password is 6 digits, and WeChat lights up the button at the time of 6 digits, then it is actually disguised to reveal the number of digits of the user's password. What if you set a minimum number of digits for the button to light up? For example, it starts to light up after the user has entered 6 digits. This is also an option, but it is slightly more complicated than the current solution, and it is not as simple and direct as the current one.
The following example should be the top configuration of the grayed-out button application during login and registration: