Some tips for improving table readability

Application of the table

Dlin: Regular contact with forms for work reasons. We find that tables are not only widely used in various types of data collection and analysis, at the same time, through the form of a two-dimensional matrix to organize and display information (even if the final presentation is not a typical table style), it is very good to express the logical relationship between information, easy to help understand the relationship between vertical and horizontal information.

In the practical application of web design, the patterns of vertical and horizontal tables are independent and interrelated, especially for:

　　1. Organizing and presenting a large amount of information

The simple structure of a table not only contains a lot of information, but also ensures the readability of the information, so that readers can quickly scan the information and find the necessary information from a large number of entries.

　　2. Presentation of contrast information

Through a reasonable layout, the table can clearly show the same kind of comparative information, so as to make it easier for readers to distinguish between different items of information, so as to focus on key and problem items.

In general, a well-defined table layout will greatly enhance the reader's acceptance of the information and the degree of understanding

For example, the following image of Apple's website on different types of MAC book information display mode, the structure of the table, a clear display of 4 different MacBook, and their respective performance, price and other attributes, while the reader can scan and understand the first glance of the table structure, horizontal is the 4 MacBook arrangement, The respective attributes are listed vertically, and then further can be compared to the different attributes of the 4 MacBook according to their points of interest, and the information is complete and easy to scan.

As mentioned above, tables are often used to display a large number of contrasting information, so improving the readability of the table, easy to scan users, is the key to table design. This article only on the author read a few of the article on the table design combined with some of the work of some humble opinion, to organize the written, share the following.

Elements of a table

Before we study how to improve the readability of the table, we will briefly explain the elements of the table, here we will summarize: Table = title + header + Row label + cell data (information), as shown below

The table title is a description of the table as a whole, containing the source and attributes of the tabular data, giving the reader an understanding of the contents of the table, such as the date of the data collection, the region, and other attributes of the table data.

Row and column labels (header) are descriptions of the bank/This column, which can be understood as the skeleton of the table and a key element for users to quickly scan and receive table layouts.

Cell data (cell information) Here is not more said, is the main content of the table.

Some tips for improving table readability

　　1. According to the use of the table, design the layout of the table

The figures in the two tables below are identical to the data on the height of the 10 peaks and the year of the ascent of the human race. The difference is their way of listing: Table 1a is arranged according to the height of the peaks, table 1b, according to the ranking of the highest peaks of human display, at the same glance, the two tables without the advantages and disadvantages of design, decided to use the two-station table which is the basis for this set of data, if this table is used to The top 10 peaks in the world are displayed by the reader, and the height of the mountain is the key information, table A will be more suitable for presentation; Conversely, if this table is intended to show the top of the 10 peaks, which mountain is the first person to reach the top, the chronological order of the human race is the main point of interest of the reader, then table B is more applicable.

　　2. Reducing Reader Computing

As a matter of fact, the indicator of a table is not always fixed, but rather from the point of view of the reader's reading of the table, adjust the indicators that need to be displayed. On the basis of the original data to the travel value, the total and other analytical data, can direct the user to read the goal, and minimize the user in mental arithmetic or offline processing process. For example, the following figure shows the corporate financial statements for 2010 and 2009, it's certainly necessary to look at the data for two years, but in depth analysis, the reader is looking at two years of data to compare data changes over two years, so listing changes in metrics can help users achieve goals faster.

　　3. Streamlining indicators and creating information levels

Minimize or compress the number of indicators, to avoid the user does not need the data, the default only to display the necessary information users, the user needs of the focus of information can provide in-depth details of the entrance (window, pull) and other forms to solve, only when users need to provide. Create the information level, avoid the primary and secondary spread of all information, interference users quickly scan positioning target entries. For example, in Ishun's "My Orders" list, the user's information, order status tracking information is hidden by default, while the link color is a good hint of further details of the entrance, when the user needs, you can easily access.

　　4. Do not leave blank cell

Avoid leaving blank cells directly when there is no corresponding data in the table cell. Blank cells can easily cause confusion and even misunderstanding, readers will not know whether there is no data, or no value at all? correctly, there is no data showing 0, a cell with no value or a fork. The following figure:

　　5. Use of zebra stripes

Horizontal or vertical zebra crossing and hover highlight background can well guide the user's view, avoid reading when the wrong line, lost situation: the zebra crossing will make the line and line lines more distinct, especially when the data columns more horizontal guidance is enhanced, so that the contents of the line is not easy to wrong line, The hover color line is mainly in conjunction with the operation Interaction, clearly distinguish the cursor on the line.

　6. Highlight key information, improve reading speed

Through reasonable use of icon, background color and other visual elements highlighting key information, can improve the user's reading speed, help readers locate key information more quickly, such as the following table using red and green arrows to the user to express the annual financial changes.

　　7. Alignment, easy for users to browse

The contrast of the data, if there is a clear alignment, will greatly enhance the data browsing efficiency, increase the effect of contrast. Typically, we align the data to the right to make it easier to compare: by the length of the number of digits can be compared to the magnitude and size of the numbers; The text is aligned to the left, consistent with the habit of reading from left to right, while some fixed-length state literals (such as completed, pending payments, etc.) are centered to make these state text more prominent.

As in the following figure, if the data is centered without a clear boundary, reading will reduce efficiency.

After the adjustment of the next picture, we can see that when the data alignment design, the data automatically formed a regular line, to facilitate the flow of sight.

　　8. Design visual level, guide the reader's view

By adjusting the title, the font of the label, the design of the border line, the use of the background, so as to calculate a reasonable visual level, guide the reader's flow of sight curve. For example, the following figure:

　　9. Insist on using simple matrix layout to minimize visual noise

A lot of ways to improve table readability by using table style, but we also need to keep in mind that the body of the table is the data contained in the table, in the design of the table, designers should pay special attention to remove all non-essential visual elements, so that users can focus all their attention on the data information, Instead of irrelevant borders, background and so on. All visual elements should serve the better to help the user read, and in addition, the exquisite design is the destruction of the table.

The illustration below is an extreme example of a meaningless border design that greatly reduces the readability of the table.

In the 3rd, we improve, in the selection of the contents of the table, we should try to simplify the target, reduce the amount of information that users receive at once is too large, especially do not exceed the user's visual range, through the way of dragging and so on lookup table. But in practical use, the table indicators too much situation, or often appear. But there are several ways in which we can improve the readability of a table when it is impossible to streamline the metrics.

　　10. Fixed table header, header column

When reading data in large tables, readers have to drag the horizontal or vertical scroll bar to read the data, fixed table header or row header column, can help readers in the reading process is still clearly aware of cell data properties. For example, Baidu's Nirvana system provides a wealth of data columns, and if the lack of a table header description I am afraid will soon forget what the column data is.

　　11. Provide custom selection

Because of a data report, it is often necessary to meet the needs of different roles in different situations, therefore, in the data content, generally adopt the principle of better or less, that is, the system provides as much detailed data as possible to the user, resulting in too many table indicators, it is difficult to complete the display in a screen, resulting in the need for horizontal stretching, Greatly reduced the readability of the table. In this case, the approach we take is to list all the indicator names above the table and provide check box selection, by default, to show only the most common and important indicators (pictured below). The advantage of this is that, first of all, users can look at the top of the table all the index name, to avoid the original need to drag sideways to browse all the indicators of the situation; second, users can according to their own needs, free choice to display the required indicators, hide unnecessary indicators, reduce interference.

　　12. Provide search and screening

Providing form search and filtering is an effective tool to help readers reduce the amount of data according to their own needs, and users can quickly get the target data entry by entering special conditions that they need.

13. Provide sorting

Through the way of data sorting, can quickly dig out the information of concern, good help readers find the relationship between information items, improve the priority of key items. This method not only applies to data, but also applies when the amount of data is not that large.

Summarize

1. Design the content and layout of the table from the user reading the table's goal

2. To improve the user reading speed of the functional perspective of the form of visual design, to avoid excessive design

3. When table metrics, data overload, provide some custom tools to help users choose the most needed data items