UI Component Series: Buttons Design
Button design is one of the main interactive blocks for creating user interface, that have an essential role into the interactive scene.
The origins of physical pushbuttons are a great reference to understand the mechanism of digital buttons in UI. Buttons brings the largest possibilities of interaction with users, giving all possible capabilities and chances to something new occurs. Buttons means action and motion.
Today “push buttons culture” become a norm, as a means for digital command which represent effortless, interaction and fully control. Buttons as a certainly way to trigger magic to happen.
This is what fascinates users, the simple fact of making things happens with a simple touch. Despite tons of new appliances, touchscreen devices, and another new digital habits, physical buttons are not disappearing yet.
Buttons VS Links
Buttons allows to the user take an action or step forward in the user interface, placed as dialogs, forms, toolbars…etc “submit” “merge” “ok” “create new” “view” “upload” etc Links are used to navigate to another website page.
2-Type of Buttons
Normal — communicates that component is interactive and enabled.
Focus — communicates that the user has highlighted an element, using a keyboard or other input method.
Hover — communicates when a user has placed a cursor above an interactive element.
Active — or pressed state communicates that the user had tapped on the button.
Progress/Loading — used when action is not performed immediately and communicates that the component is in the progress of completing the action.
Disabled — communicates that component is currently noninteractive, but can be enabled in the future.
3.Buttons Components
Buttons are defined by colors, shapes and sizes..it can be rectangular or rounded corners. Also needs to be fully differenced from rest of user interface elements and totally visible.
4-Hierarchy of buttons
The mission is to guide the user when multiple choices or plenty options.
- Primary and Secondary Buttons
- Text or icons buttons
- Arrows buttons
5-Status of the buttons
Make clear the differences between the status of the buttons from active to default or disabled.
This helps to users to clearly identify the different options and dispositions, and helps out to create a better guidance of the user and avoid error or mistake.
6-Structure of the buttons
Buttons normally are represented like squared or rounded shapes to be clearly identified as a button. Don’t confuse the user with another type of shapes or text without an underline box. Make it clear, simple and do not make the user to think “What is this?”
7-Interactive / Non Interactive
Avoid using same colour of buttons for interactive and non interactive elements. Make it clear for the user of which elements has interaction click or not to make a better identification.
8-Consistency and Unification
Consistency and unification improves the speed and accuracy of a digital product. “Things always behaving the same”. It is an essential point for make interfaces more effective and improve usability in terms of a better use. “Users needs to feel they have the control using an Interface” The objetive is user can easily achieve a goal
9-Size Buttons
Design buttons larger enough at least 48 x 48 dp and a physical size of 9mm regardless of screen dimensions. Small buttons breaks down usability
Recommended target size for touchscreen element is at least 7–10mm.
For icon buttons, make sure the touch target extends beyond the visual bounds of an element.
10 Accessibility
In terms of UI factors as font size, color and contrast for a better accessibility performance.
11.Gestures
Gestures allows the user make interactions using touch as another option of performing a task.
-Swipe
-Double Tap
-Scroll Down
-Lond Press
12.Buttons Writing
The best practice is inviting users to take actions ideally like by verbs: Submit, Allow, Confirm, Pay..etc
13-Dialog Positions
Having OK action first should be the right practice then after Cancel. Rarely is seen Cancel as first option in a button. First positive.
14.Dissabled Buttons
Disabled buttons that only get activated when you fill all the blocks of a form or survey.
Avoid let the user trying to figure out why the button is disabled in grey. Make it easier. The recommendation is having always buttons allowed and activated to avoid confusion and frustration of the user.
