When we design a form, it’s really tempting to change the default state of the Confirm/ Save button to the disabled state. Why?
- We don’t need to think about error scenarios of the form.
- The data will be perfectly valid before being sent to the system.
- Users don’t have a chance to make mistakes.
No errors, no mistakes, sounds like heaven, right? Yeah, but it feels like hell for users.
- Users may find it hard to find out why the button was disabled and what should be done to enable it. Just remember the one above all principle is “Don’t make users think”
- Poor contrast makes it difficult for users to read or recognize the button.
Alright then, we still have some cases for a disabled button. This is the reason why this button state is still in our Tini design system. So when you use a disabled button, make sure the design communicates well with users. You can use inform/ helper text/ tooltip component to help users understand why the button was disabled.
In the context of the Tini team, we have 2 cases:
In this case, we should provide the inform component to let users know why this button was disabled.
e.g., the amount is 0, or users can’t go to the previous page when the current page is the first page.
And that’s enough buttons for today .
p/s: When do you use disabled buttons for your designs? Let’s discuss.