ONLINE SERVICES AGREEMENT
All about effective button design in interfaces Today's post is quite closely intertwined with two other blog posts - a post about types of buttons in interfaces and a collection of examples of button designs on sites from 2009 to the present day. It's a great companion piece for them and allows you to look at the question from a slightly different (more practical) angle. Beginners and experienced designers should be interested.
In order to properly organize user interaction with your site/application, we need to remember how physical buttons came to be. In fact, they were the direct predecessors of the user interface components so widely used in all digital products today.
The invention of buttons was a real breakthrough in its time. They could be used to set in motion a device, a car, or a system, and a person did not even need to understand the principles of these devices. In The Power Button, Rachel Carpenter traces the origins of modern "button culture" and describes how buttons have evolved into tools for digital control.
In fact, the instantaneous accomplishment of a desired task with a simple touch still fascinates people to this day. Although a host of new appliances and other devices increasingly offer touch-based control options, physical controls aren't going away anytime soon. And the behavioral habits they form directly affect how intuitive and easy to use your interface elements will be. This post is a translation of that article.
BUTTONS VS LINKS
Buttons show what actions users can perform. They are found almost everywhere in the user interface: in dialog boxes, forms, toolbars, etc. There are a number of differences between them and links:
Links allow you to go to some other place, such as another page ("Read More"), a personal account, etc.
Buttons allow you to perform a certain action: "Submit", "Create account", "Download", etc.
THE STATE OF THE BUTTON SHOWS ITS CURRENT STATUS
Correct design of the element allows you to effectively organize interaction with users. Each of the states of the button should have clear characteristics that distinguish it from other options and the environment, but they should not dramatically change the appearance of the component or create a lot of visual noise.
In the screenshot above you see:
Normal state - reports that the component is ready for use. In focus - activates when someone highlights the component, for example, with the keyboard or mouse. Hover - becomes active when a person places the cursor on an interactive element (implemented using the CSS hover property). Active, or clicked position - displays that the user has clicked on the button. Progress / Load - applied when the action cannot be performed in one click.