Table Design What you need to know (the next)

Next, the seemingly simple form is really designed or need to spend some effort to see the following details of the design points, do you know?

5. The focus is on rows or columns

Tables are made up of the simplest rows, columns, and cells, and depending on the purpose of browsing and the information you want to highlight, rows, columns, and cells can be emphasized by some changes, which is the most fundamental way to convey information through a form.

e-mail product is to emphasize the model of the table design, such as Gmail, Yahoo Mail, 126 mailbox, these tables do not have vertical lines, with horizontal line frame travel vision, data information evenly distributed, more emphasis on each line of information continuity, do not emphasize the row and row data contrast. At the same time, it can improve the continuity and efficiency of reading by supporting the background line and ground color.

and the horizontal line of information expanded into the same as Taobao merchandise page, the row to distinguish between the weakened form of the table, not only to meet the rich information of the presentation, but also very fast and the line between the same as the price of key information such as the comparison.

Like GA, Baidu Nirvana This kind of emphasis column table is also widely used, especially this vertical column is used in conjunction with the table column sorting function, data columns need to be sorted according to a column of data, as a primary key to enhance the hint.

6. Coherent alignment

The vertical alignment of information in a table can be a good form of visual guide lines, in line with the Gestalt psychology of similar principles, generally common is the text information left-aligned, the number left aligned, the amount of the right alignment, while the table is the right one column right, such a table vertical column even if there is no split line can be very good to play a role in separating.

The contrast of the data, if there is a clear alignment, will greatly enhance the efficiency of data browsing, increase the effect of contrast, as in the following figure, if the data center alignment without clear boundaries, reading will be less efficient.

7. Table Head Fixed lifting use

As the rows and columns of the table increase, the instantaneous memory of the user encounters a threshold limit, as 7±2 's principles exceed this range, users need to add information to help navigate the data in the form, such as Baidu's Nirvana system, which provides a rich array of data, and if the lack of a description of the headers is likely to quickly forget what the column data is.

Another use of the table header is to make the information of the operation and the table better contact, select the data rows in the table can be the corresponding operation, improve the efficiency of use, no longer time-consuming search operation area.

In addition to the table header row fixed, the table column is also often used, such as Baidu Statistics, the first column is time needs to be compared, fixed the first column makes reading a foundation.

8. Reduce user Mental arithmetic

For comparative analysis of the data, to travel value, a total for users to read, but to minimize the user mental arithmetic or offline processing process, the current table will be prompted to change or increase the total value of information, understanding and reading efficiency.

The details of the form need to be considered in a number of places, is a form needs to be flexible according to the actual needs of the design, the greatest degree of attention to highlight the user's information, to weaken other information, while considering the user's behavior expected to give guidance and help to maximize the advantages of the table.

Series Tutorials:

table Design What you need to know (on)

Article Source: Baidu Commercial Product user Experience Department