Button State Design
In truth, mouse effects are probably the least important to design. By taking into account more functional states at an early stage, you can reduce the risk of possible costly redesigns as your library of templates evolves. Here are the main states you should pay attention to at an early stage, approximately in order of importance.
1. By default
Not surprisingly, the standard button display is really important. If you make it too catchy or too invisible, you will see that without additional modifier classes or alternative styles you cannot move on.
It is also important to create buttons with context. One of the common mistakes is to choose a button style that is not sufficiently different from the input fields, which can lead to a form that becomes incomprehensible.
It is also important to choose colors with adequate contrast for most users. I use the Contrast application to test my projects for WCAG 2.0 compliance:
The most important condition you should consider: focus. Without it, navigation through the keyboard or other devices with direct input is almost impossible. The good news is that browsers already include a default solution for it, which is usually a dotted outline or a blue glow:
These outlines may sometimes seem incompatible with the project’s visual styles, so they are often turned off … and many users remain in the dark. So let’s all raise our hands and repeat after me: “I solemnly swear never to turn off browser focus styles without including a reasonably thought out replacement.”
Fine! From this point of view, this is what you need to keep in mind when developing a custom focus style:
In a group of buttons, focusing should be easily distinguishable.
It should not completely rely on color changes that may be difficult for some users to see.
Ideally, it should be flexible enough to work with many styles of buttons without frequent redefinitions.
Current trends and approaches in web development
3. Expand / Switch / Select
Although this may seem like a very distant perspective in the early days of system development, it is very likely that at some point you will need buttons that act as switches: opening and hiding menus, switching to favorites / bookmarks, switching tabs, etc. Considering this possibility at an early stage, avoid potential conflicts with other button states.
The design of the disclosure buttons may vary depending on the project. You may even need more than one. Important considerations are that the “on” and “off” states are different from each other, and that both are combined with focus styles.
4. Disabled buttons
Like the focus and disclosure states, disabled buttons should be easily identified. But unlike previous states, they should not differ much from the default state. The disabled state should look muffled, less bright.
One of the most popular ways to turn off buttons is to reduce their opacity. This works well for buttons with the same default style, but less so when the disabled button has more saturated colors than the next active button. The combination of opacity and decreasing saturation can play a cruel joke:
5. State of guidance and active
Yes, I know that many do not want to postpone the development of these states to the very end. But there are at least two really compelling arguments for this:
These states will only apply to certain users and input methods. Not everyone uses the mouse, not everyone uses the fingers.
Thus, we will be able to take into account in the development of these states, so that they differ from the rest.
Now we can know which effects will intersect with other states:
We also know enough to gracefully move between these states and emphasize them through color, scale, and animation:
This is just the tip of the iceberg …
This is by no means an exhaustive list of considerations for developing robust, extensible button templates in the design system (for this I recommend reading the Buttons in Nathan Curtis design systems). This is simply a call for designers to refocus their efforts in designing button designs.
The next time you open your image editor or application, consider postponing the development of the state of guidance until you define more important states, such as focus, disclosure, and disabled. This can make all your button interactions more efficient and beautiful.