A comprehensive B-side design guide: tree selection

Long time no see. In the next few weeks, I will use three articles to talk to you in detail about tree selection, cascade selection, organizational structure selection and other related contents. This is the first one: Tree Selection

[[406336]]

Tree Selection

Regarding tree selection, we must first know its basic concept. What exactly is a "tree"? Let's first look at the definition of a tree structure.

1. Tree structure:

The tree structure is actually a hierarchical expression. It can abstract the tree to express the complete structural relationship. The reason why it is called a tree is because it is more like an upside-down tree, with the root at the top and the branches and leaves at the bottom.

Similarly, the overall naming of the tree structure follows a similar expression:

Node: It is the basic unit in the tree structure. Nodes can be used to represent the composition relationship between different data (subordinate relationship and parallel relationship). Usually nodes are divided into several special cases.

Root Node:

The beginning of the entire tree structure is called the root node. A tree structure must have only one root. In a mind map, the root node represents its beginning and is used to extend more tree structures. However, in the current tree selection, due to the requirement for ease of use, the root node is usually hidden and only the child nodes are displayed. The root node is hidden in the title and option text.

Child nodes:

• Nodes other than the root node are called child nodes. There is no specific limit on the number of child nodes in a tree structure, and they are directly displayed in the tree selection.

Leaf Node:

• A node that is not connected to other child nodes. Leaf nodes are a special type of child nodes. They are the end nodes of the entire tree structure. They are an important concept in tree selection, which will be discussed in detail below.
• Branch: The link between nodes. In our tree selection, the branch lines can be made visible or invisible. The combination and usage are also different.

At the same time, we will also use several basic concepts of nodes:

• Node level: refers to the level where the current node is located, for example, the root node is the first level, the child node of the root is the second level, and so on;
• Node height: The height of a node is the number of leaf nodes under the node from top to bottom;
• Node depth: refers to the unique path length from the node to the root node. The depth is similar to the level.

Where do tree structures appear in our daily lives? What use do tree structures have for us? You may find it boring to understand, so let me give you an example:

Recalling the scene when we used dictionaries in elementary school, we first used the initial consonants to determine the approximate page range of the Chinese character, then used the finals to determine the detailed location of the Chinese character, and finally used the tone to find the Chinese character we wanted to find:

In fact, the design of the dictionary is a typical tree structure. In the B-side system, the company organizational structure, provincial, municipal and county address selection, online education class structure, etc., which are common in our B-side system, all use a complete tree structure.

The tree form can be used for rapid structured expression, and its purpose is to enable users to quickly add, delete, modify and check. For students who want to know more about structured expression, I recommend you to read a book called "The Pyramid Principle", which talks about a lot of logical thinking, expression methods and content. The content is relatively rich, and this kind of thinking can actually be used in our work and life.

2. Tree structure composition:

Level indentation:

• In order to fully express the entire structure of the tree, hierarchical indentation is used to distinguish them. Usually, 8px is used to indent the next level node, which can express a more complete hierarchical relationship.

Note that if you want to emphasize the hierarchical relationship of the tree selection or the tree content itself is relatively large, you can refer to the idea of ​​the Coding Editor, that is, use "branch lines" to express the indented content, which is clearer. After using the hierarchical lines here, the folding icons will also be different, as explained below.

Collapse icon (node ​​button):

• It mainly displays all leaves and child nodes under the node. In the entire tree structure, the folding icons are generally divided into two types: triangular folding and square folding
• Triangle fold: It is used when the page has fewer levels. Because with fewer levels, users don’t need to think about the level of the current node.
• Square fold: It is more often used in conjunction with page hierarchy lines. Through level indentation, the page hierarchy lines can be clearly marked, which can better distinguish them reasonably in multi-level situations.

Select the control:

• The entire tree structure is still in the selection input framework, divided into single selection and multiple selection. Therefore, its type needs to be displayed, especially in the multiple selection scenario, its type must be marked to facilitate user understanding and use.

Usually this control can be hidden when a single selection is made. I will not discuss this here, and I will analyze and explain it in depth in the tree selection type.

Option text:

• Just pay attention to the word limit and what to do if it exceeds the limit. I won’t go into details.

3. Type of tree selection:

Before talking about tree selection, I will first explain to you about similar products. In order to facilitate your memory, I have selected two different types of components for comparison. Interested students can follow "CE Youth" and reply to the tree comparison to view it. I have explained it to you in the form of a video, and I believe you will gain something after watching it.

Single selection tree:

• Single-select trees can only select leaf nodes, which means that each tree needs to be expanded before selection can be made.

It is a more traditional selection method. Because its selection hotspot is small and the cost of understanding is high, this method does not meet the current requirements for improving the efficiency of B-end products, and the requirements are very special. Therefore, it is rarely used. Now it is mainly based on single-selection node trees.

Single-select node tree:

• The biggest difference between a single-select node tree and a single-select tree is that it can select child nodes, so that the child node and its various leaf nodes can be quickly selected.

At the same time, the traditional single-select node tree adopts the radio button method. With the continuous improvement of the requirements for the B-side and the increasing complexity of the tree's functions, the radio button form has been almost cancelled. Instead, the entire text label is used as the hot zone for selection, and users can make a selection after clicking.

Therefore, in the tree selection, the single-select node tree is gradually evolved into a control consisting of two hot areas:

On the left side, the main operations are tree-type expansion and collapse, and the hot zone is usually the part of the icon folding icon; on the right side, the operation of selecting the option and node is mainly performed, and the hot zone range is based on the entire option text and can be extended.

Here is a tip for new readers: this type of selection must be handled in the Hover state, otherwise the user cannot determine whether it is clickable based on the change of the cursor. Of course, old readers can skip it.

Multi-select node tree:

• When you compare single-choice and multiple-choice, you will find that why there is no multiple-choice tree? There is no multiple-choice that only selects options?

It's time to think again. Don't forget to slide down and think about it yourself first.

Although multiple selection trees exist in theory, their value is rather strange. First of all, among the nodes in the tree, if I select a child node, I select all the options under that node. Therefore, it can be said that a node is selected; or it selects multiple options under that node. Therefore, in actual situations, such scenarios are too rare, and more often multiple selection node trees are used instead.

Of course, the structure of the multi-select node tree is very similar to that of the single-select node tree, which is to display the checkbox to facilitate selection. Considering everyone's lack of experience, it is recommended to put the checkbox in front of the collapse icon for two reasons:

In the subsequent expansion of tree selection, we often encounter the need to add some operation functions, such as adding, deleting, copying, pasting, and dragging and sorting. I have seen many designers put the selection component part at the back for various reasons, which makes it impossible to expand the subsequent operations, and then crash, and then make a mess of the tree selection~

The existing infrastructure basically follows this type of design, which can reduce the workload of front-end students and also reduce the occurrence of bugs.

There are many usage scenarios for multi-select node trees. I will give you an example that everyone will make mistakes in tree selection. I hope you can understand the special logic in it:

For example, in a large listed company, as a boss, I would set permissions for the entire "design department", and I want any new employees to use this permission. If you are a new designer, it is easy to use the multi-select node tree to select the entire organizational structure, but this selection is quite different from what the user actually wants.

In product design, the concept of "Design Department" mentioned above is actually a dynamic data, that is, all employees added to the "Design Department" later do not need to be reconfigured in the permission management. When we encounter dynamic data, we do not recommend that you use tree selection first, because the cost of understanding this concept is very high, and it is impossible for users to understand it through tree selection; at the same time, the system recommends special processing for this type of dynamic data. As for how to deal with it, you can discuss it in the comment area, and I will explain it to you in subsequent articles.

Advantages of tree selection

Easy to understand:

Because the tree structure itself has existed for a long time, as early as the DOS computer era, after a long period of development, it will be relatively easier for users to understand.

Quick Browse:

When the amount of data is particularly large, you can prioritize finding the leaf nodes you want based on the child nodes, thereby improving selection efficiency. This is very similar to the Tab selection mentioned in "Selection Entry 02". Students who have not read it are recommended to take a look at it first.

Look at the structure:

The structure can help people memorize quickly, so that they can have a deeper understanding of the overall framework. The tree selection structure can make it easier for more people to know and understand the business faster.

Common Misunderstandings of Tree Selection

1. Data volume

First of all, for the control form of the tree selection itself, you need to analyze the amount of content data it can carry. It should be within a suitable range. When the amount of data is too large, asynchronous loading, data paging and many other situations will definitely occur. Therefore, in the design, such situations need to be designed.

2. Select All Function

The select all function itself is relatively simple, it is nothing more than a check box, but given the large amount of data mentioned above + the existence of select all, there will be some problems that require your attention.

3. Keyboard Mapping

In the tree selection, you can use keyboard operations to improve efficiency. The basic rules are:

• ↑ key: switch to the same level node upwards; from the first child node, return to the parent node in sequence;
• ↓ key: switch to the same level node downward; enter the first child node that has been expanded in sequence;
• ← key: close the current level node; return to the previous level parent node;
• → key: expand the list of child nodes; sequentially enter the first child node that has been expanded;
• Enter key: submit the node options of the current foucs;

Tree selection is a common method, but due to insufficient understanding of the basic tree structure, there are many misunderstandings in its design. If you have any questions about tree selection, you can discuss it in the comment section~