Active and inactive button
1. Active and inactive state
The active state is when the button is “clickable”. Although this may seem obvious, it is important to note that the button may be inactive if the user has not completed the necessary steps. For example, if you do not enter a name and email address, the user will not be able to click the Confirm button.
2. Hover & hover off (move the cursor/remove the cursor)
On desktop devices, the button must have different States so that the user knows that it can be clicked. The animation can also prompt the user to click. Usually the “hover off” state is the opposite of the “hover on” state, but this is not necessary.
A button that reacts when the cursor is hovered over.
Note: hover States will never be visible on your tablet or mobile phone, because your fingers can’t “hang”. So if you are developing an app, don’t worry about this state.
Read also: UX design and creativity: how to find a balance between development and creativity
3. Focus of attention
The state of focus is quite difficult to understand. So the easiest way to explain it is to show it in action.
If the user has poor motor skills, you may need to use navigation in the form of tabs. To show that the tab button is “clickable” but not yet clicked, there must be a “focus” state.
Another example of the focus state is when you click on an input field. If you started typing, only this input field would be filled in, not the other one.
The default focus state is a blue glow that you have undoubtedly seen on websites. Fortunately, we live in a time when you can create your own button States. It seems that most designers use the same visual cues for the hover and focus States.
4. Pressing of button
Clicking a button is the state when the user’s cursor or finger is holding the button. When the user releases their finger or cursor, the button appears as pressed.
A button that shows the click state.
5. Press the button
Buttons need a pressed state to indicate to the user that they were pressed.
A button that shows the status of the button being pressed.
5. The label of the button
1. The use of verbs
Most buttons contain verbs to indicate what the button will do, such as “Save”, “Publish”, or “Edit”. Although “Back” and “Next” are not verbs, they work the same way in the context of the interface. I like to use the “verb” + “noun ” structure. This way the action sounds more instructive, such as “Save message”, “Next step”, and so on.
Read also: UI and UX design Trends 2019
You must also decide which font option to use. Here are some General recommendations:
All letters are capitalized, for example, “NEXT SECTION”. I use them for more professional platforms.
Capitalization of the initial letters of all words in a sentence, for example, “Next Section”. I try not to use it, as the text becomes difficult to read. As for the tone, it is a cross between a professional and a conversational tone.
Capitalize the initial letter of only the first word in a sentence, for example, “Next section”. I use it for more friendly or conversational platforms.
All letters are lowercase, such as “next section”. I very rarely use labels with lower case letters. This is probably the most unofficial choice available.
When selecting labels for buttons, make sure that you keep the sequence. Here are a few things to do at the beginning of the project:
Select the number of words: One, two or more words per button;
Select case: Capitalization of the initial letter of only the first word in the sentence, capitalization of the initial letters of all words in the sentence, all uppercase letters, or all lowercase letters;
Label structure: for Example, “verb” + “noun” or just “verb” and so on.
6. Touch targets
The size of the button to desktop devices
Since the cursor on the desktop is smaller than the finger on the touch screen, you can make the buttons much smaller.
The user should never search for a button, so you should determine the correct hierarchy and navigation for your interface.
Touch screen button size
A MIT Touch Lab study found that the part of the finger used to touch the screen is 8-10 mm, so the minimum target size should be 10 mm or more.
So, what size do I need to make buttons? Here’s what the experts say:
Material Design believes that the touch target should be 48dp x 48dp with 8dp between the touch points.
7. The placement of the buttons
Disputed position of the primary button
If you had 2 buttons next to each other, which side would the primary button be on?
Two positions for primary and secondary buttons.
Option A shows the primary button on the left. The main argument is that the user first looks to the left.
Option B shows the primary button on the right. Used for the user to see the additional button first. Thus, he is aware of the possible options and can make a choice. The elements on the right also indicate a continuation.
8. Honor Board button
In that section, I want to mention some cool design principles and systems. I like the Material Design System buttons precisely because their principles are really well thought out.
Material Design System Button
Image button from Material Design.
No one talking about the buttons would not be complete without mentioning Material Design. Their work on buttons and how they interact with other components in the system is noteworthy.
Browse their section on the buttons here.
You can also view information about floating action buttons here.
9. Final thoughts
It is impossible to create an interface without buttons. They perform one of the most important functions, which is why the buttons deserve special attention. Take the time to understand how they work and how to use them correctly. This is the only way you can create the most comfortable interface for your users.