How to design a B-side button? Check out this expert summary!

In the B-side interface, buttons are the most basic elements that appear on every page. The user's task flow starts with buttons. A well-reasoned button design can add a lot of points to the interface and product professionalism. If the interface of a product is as shown below (button design rules are irregular and arbitrary), not only will the user experience of the product plummet, but the reputation of the company and the product itself will also be questioned. At the same time, as a part of the product design specification, if buttons are not constrained, there will be too many combinations in each scenario, resulting in a chaotic interface experience.

[[407690]]

Therefore, it is very important to organize the inside and outside of the button to improve the product experience from the subtle details.

Below, I will explain the buttons on the B side to you layer by layer, just like peeling an onion.

What the buttons do

Before understanding what a button is, we need to first understand the role of a button on the B-side interface.

First: trigger a certain type of function

Users can trigger functions and complete tasks by operating buttons.

Second: Guide the next step

Guide users to take action by placing buttons in appropriate locations.

Third: Aggregate information

When there is too much content to display, you can use a button to trigger the jump to the details without having to display all the content on the current page.

Fourth: Forming user mindset

When the position, form, and text of a button are relatively fixed, and the functions it triggers are consistent, users will form a habit with the button and become dependent on the product.

The elements of a button

Don't underestimate this small button, it hides huge details. The more you understand it, the more you will look at it with new eyes.

1. Button Type

In the B-side scenario, buttons are mainly divided into 5 types, including primary button, default button, dotted button, text button, and link button. By adding attributes to the buttons, there can be danger buttons, ghost buttons, disabled buttons, loading buttons, etc. Note that it is not recommended to mix multiple buttons in a button group, which will cause a confusing interface, and each button has its own usage scenario.

2. Button shape

According to the button type and the usage needs of different scenarios, buttons can be divided into icon buttons, icon + text buttons, combination buttons, drop-down buttons, and Block buttons.

3. Button Status

Each type of button has a set of basic states, including Normal, Hover, Pressed, and Disable. The different states of the button inform the user of the next action that can be performed.

Normal (default state): This state is when the button is displayed normally on the page.

Hover state: The feedback displayed by the button when the mouse pointer stays on the button.

Pressed state: When the mouse pointer presses the button, the button effect feedback.

Disable state: When a page button is unavailable, it may be because the information is not completed or the operation does not meet certain conditions. The button will be displayed in an unavailable state. For disabled buttons, you can let the mouse float over them to display a prompt to unlock them, which will be more user-friendly.

4. Usage scenarios

The author found that many students do not know how to choose the appropriate button when calling the button. Each type of button has its specific usage scenario. It is not an object created by God at will, but an object created by the design industry specifically to improve the user experience of the product.

Main button: The main button is a call button, which is more eye-catching on the interface and calls on users to operate. Usually there is only one main button in an operation area.

Default button: There is no primary or secondary button in the button group. Usually there is no limit on the number of secondary buttons in the button group.

Dotted button: Dotted button is usually used to add content to the current page.

Text button: In some scenarios where primary and secondary buttons are not needed, text buttons can be used, such as table row operation items.

Link button: As the name suggests, it is a button used to link to an external page.

Dangerous button: Dangerous buttons are generally used in places where a second confirmation is required, such as deletion, modification of permissions, and other scenarios.

Ghost button: A button that needs to be placed in scenes with different background colors or complex backgrounds.

Disable button: The current operation is not available and the button needs to be disabled.

Loading button: After submitting the content, if there is no immediate feedback and the content still needs to be loaded, a loading button is required.

Icon buttons: Some buttons use pure icons, which not only saves interface space but is also intuitive, such as printing, changing text color, content layout, etc.

Icon + text button: Icon buttons will make the page more dynamic and clearer, especially buttons such as uploading and downloading files. Buttons plus icons are more intuitive than simple text.

Combination button: When there are multiple buttons with similar properties, it is appropriate to use a combination button, such as a view switching button.

Drop-down buttons: When there are too many buttons, it is suitable to store some low-frequency buttons.

Block button : This type of button appears when some pages need strong guidance, and the operation is more global, such as login, registration, payment, form submission, etc. When using this type of button, pay attention to the number of controls within 2, usually one main button and one secondary button. Don't have too many buttons, too many will not show the characteristics of the button.

5. Visual Style

A small button contains a very rich visual style. In the design stage, the style needs to be carefully disassembled and defined. The visual style of a button includes size, color, text, button, spacing, shape, and style, as follows.

Size: In B-side products, buttons usually come in three sizes, divided into large, medium and small. Large buttons are mainly used on global operation interfaces; medium buttons are usually standard buttons, which basically appear anytime and anywhere; small buttons are mainly used in drop-down panels or some places where small buttons are needed. Note: The method for calculating the height of a standard button (for reference only) is 2.4 or 2.5 times the text size, and the calculated value is the number closest to a multiple of 4. For example, the value of a 12-point font at 2.4 times is 28.8, and the closest multiple of 4 is 28, so the standard button height is 28px; the value of a 14-point font at 2.5 times is 35, and the closest multiple of 4 is 36, so the standard button height is 36px.

Text: How a button conveys its meaning to the user, the text plays a very important role, the user sees the text to understand the intention, guide the user to operate. The text placed in the button needs to pay attention to three issues: first, the text color should be clear; second, the text size should be appropriate; third, the meaning of the text should be clear.

Icons: When designing buttons for printing, importing, exporting, downloading, etc., we will find that icon buttons are more suitable than text buttons. The design of icon buttons should be consistent with the text.

Color: The color of a button is mainly composed of the container background color and border color (note: it is the inner stroke), font color and icon color. Different button colors represent different button types. For example, a button with a primary color is a primary button. For some special style buttons, there is also a shadow color. The shadow color can be designed with a transparency of about 50% of the button color value.

Spacing: The spacing between the icon and text in the button, the spacing between the text and the button border, etc., are important factors in forming the breathing sense of the button. In the design of button rules, simplicity and beauty are recommended. Simplicity means that the rules are simple and easy to expand, and beauty means that after the button is designed according to the rules, it should be visually reasonable.

Shape: The shape is formed by the rounded corners of the button. When the rounded corners are 0px, the button shape is upright, giving people a rigorous and sharp feeling; when the rounded corners are 4px, the button shape is slightly soft, giving people a professional and soft feeling; when the rounded corners are semicircular (the radius of the rounded corners = 50% of the height), the button shape is very soft, giving people a friendly feeling.

Style: The styles of buttons on the B-side are mainly light objects, raised buttons, gradient buttons and flat. Flat buttons have become more and more popular. The advantages of flat buttons are:

• First: It makes the interface information display clearer, and users will focus more on the content and task operations.
• Second: It is more convenient in development, and flatness eliminates a lot of unnecessary designs.
• Third: Reduced details such as shadows and improved product performance.

6. Interaction

In addition to visual styles, buttons also have interactive methods. Only when buttons are interactive can they truly serve users. They are a portal for users to input information, a portal for the system to receive information, and a portal for human-computer friendly interaction.

There are six types of button interactions:

First: Click the button and a pop-up window will appear, such as add or delete.

Second: Close and exit the current operation after clicking the button, such as saving the operation on the form.

Third: After clicking the button, feedback information will be displayed on the current page, such as adding a new form item to the current page.

Fourth: After clicking the button, a drop-down or other floating feedback appears, such as a drop-down menu, a table "more items" operation, and a toolbar "more items" operation.

Fifth: Jump to the page after clicking the button, such as the next step in a step-type operation or a new form in a page-type operation.

Sixth: Hovering the mouse over a button triggers panel feedback, such as user settings and skin changes.

7. Number of impressions

The number of buttons displayed refers to the number of buttons in a button area. I have seen three ways of placing the number of buttons for B-end products, and only the third one is recommended below.

• The first one is to display all the buttons that can be provided to users, for fear that users may not be able to find them.
• The second type is to appropriately converge the buttons, but the reason is not clear. Some buttons are symbolically placed in "More".
• The third type is to be very familiar with the business goals and user interface operation scenarios, and to display the buttons in an orderly manner, ensuring that users can operate smoothly and that the product interface is organized.

In general, it is recommended that the number of buttons in a button area be controlled within 5, and the excess buttons should be placed in "More".

8. Classification and aggregation

Classification aggregation means that buttons with the same meaning need to be classified and displayed. For example, add, delete, modify, and view are usually displayed together; start and stop, import and export, download and upload are all displayed together and should not be too far apart.

9. Button Location

The position of a button refers to where the button or button group is located in the content block. To a certain extent, we can also regard the page as a content block, that is, a content block is a block containing content. If a content block needs to be divided into orderly parts structurally, it usually consists of three parts: Header, Body, and Footer.

• Header: Buttons placed in the Header are usually global operations, such as editing all data, switching view display, batch deletion, etc. But should these buttons be placed on the left, in the middle, or on the right?
• Body: Buttons placed in the body usually directly operate the following content, such as editing a single form item, editing a part of the form block, etc. But where should these buttons be placed?
• Footer: Buttons placed in the Footer are usually global completion operations, such as Cancel, OK, Save, etc. But where should these buttons be placed?
• The following usage suggestions are given for the Header, Body, and Footer button positions based on the "F" and "Z" visual browsing rules. In the figure, blue is the primary button and white is the secondary button.

10. Button Order

Button order refers to the order in which different buttons should be placed in a button group. The order here includes two levels: the first is the order of primary buttons and secondary buttons; the second is the order between buttons of the same type, such as the order of secondary buttons. In the same product, keeping the button order consistent not only helps improve user operation efficiency, but also reduces the probability of user operation errors.

From "2.9 Button Position", we can find that when the button group is located in the Header and Footer area, the order of the primary button and the secondary button is designed according to the principle that the primary button is on the right, which conforms to the "Z" reading mode + Fitts's law. When the button group is located in the Body area, if the primary and secondary buttons are to appear at the same time, the primary button should be on the left of the secondary button, which conforms to the user's "F" browsing mode.

In addition to the above basic design suggestions, there are three design principles that need to be followed:

Directionality principle

Buttons such as Back, Forward, Previous, Next, Undo, and Redo are all directional. If the placement of the buttons is consistent with their direction, the user's cognitive cost will be very low.

The principle of proximity of related buttons

Put related action buttons closer together, which not only visually enhances the user's perception of their relevance, but also makes them easier to operate. For example, Save, Save and Return to Homepage; Publish, Schedule Publish.

Conform to conversational habits

When users operate buttons on an interface, they are actually in a dialogue with the interface. Therefore, it is more appropriate to design buttons that conform to the natural dialogue of users. For example, if you want to share your favorite drink with a friend, you would ask, "Do you want to drink it?" If he doesn't want to drink it, you would ask, "It tastes good, can you add some sugar?" If he shakes his head, you would say, "Okay, you can put it aside and drink it when you want to." You wouldn't start by saying, "Do you want to drink it? If not, throw it in the trash can," right?

Therefore, the order of placing pop-up buttons is: Save, Cancel, Delete. That is, "Do you need to save?" - "If you don't want to save, do you need to cancel?" - "The original file is no longer needed, so delete it."

Here I would like to share with you some of my own experience. When designing a button group, you can use the following steps to think:

• First: Determine the design position of the button group in the content block of the product design specification you are responsible for, such as where the button group in the Footer area is located (you can distinguish between scenes or not, depending on the business scope covered by the product).
• Second: determine the position of the primary and secondary buttons (whether to distinguish between scenarios also depends on the product situation). In the Alibaba Cloud platform design specification, the primary button is on the left; in antd, the position of the primary and secondary buttons is based on the scenario.
• Third: Determine the order of each button in the button group. It is recommended to refer to the three design principles in 2.10.

Button design principles

1. Let it be what it is

Let it be that the button should look like a button in appearance. From the user's mental model, only when the user recognizes that it is a button at first glance and can achieve good results after operating it, will the user use it.

2. Clear types

Clear type means that designers need to use different types of buttons reasonably and correctly, correctly express the interaction logic of buttons, and allow users to predict the results of operating the buttons in advance. For example, do not let users click a link and a pop-up window pops up. The correct way is to click a link and open a new page.

3. Simple form

Simple form means that in B-side products, buttons should not be designed to be too fancy, but should be neat and tidy, with the mindset of users completing tasks quickly, rather than hindering users' operations, excessively interfering with and distracting users' attention.

4. Clear feedback

Each button carries a function. Functions and operations require feedback. Clear feedback is the basis for the user's next operation.

5. Clear rules

Different design specifications have different definitions of button usage rules. As long as you can reasonably define the button usage rules for the product you are responsible for and make them accepted by users, they are good rules. Defining clear button usage rules not only reduces the communication costs between product designers, improves the consistency of product interface operations, but also reduces the user error rate.

Conclusion

Defining the design rules for the B-side interface is a complex and arduous project, but in the long run, it is something that must be done. We hope that the rules are simple, constrained, easy to expand, and inclusive. Regarding buttons, there is still a lot to be solved, and friends are welcome to communicate with us.