UI interactive mode Guide for tables

Many people agree that tables are a significant part of http://www.aliyun.com/zixun/aggregation/7236.html > user interface design, but they are often overlooked. Tables should show structured data that makes it easier for users to read, scan, and compare, but in many cases tabular data is ambiguous. That's why a lot of people don't like forms.

Users often use tables for their daily work, but who needs to make them crash? To change the status quo, here are some guidelines for making tables easy to use.

Row alternating style alternating rows styling

This is obvious, but is that the case? Look at today's web apps and you'll find that a lot of them don't apply. Therefore, the alternate style of the line is not obvious, which is why he was listed as the first to elaborate.

Using different styles to display different rows alternately in multiple rows and multiple lists with more data increases the user's ability to differentiate data. You can use background color or background image, if you use background color, background color should be lighter or darker than the page color. The image background should be selected and matched with a picture of the overall color scheme. You can also apply background color and background chart combinations to table borders. The header and footer portions of the table should be easy to identify, and can take a darker or lighter color than a table row.

The Blinkcampaign table row uses a lighter light green, and the header uses a slightly darker green.

Entire row select Full row selection

If you need to do a local operation on a row, make the entire row available for clicking. This approach increases the click area and reduces the clutter in the interface. An example of an application is that each row has only "view details" to operate, and the entire row style should be different when the mouse hovers over the line. There are several ways to do this, recommending the rowselect of the jquery plugin.

Crazyegg the full line selection to expand the details of the currently selected row (we'll talk about it later), and the mouse hover line is highlighted. I like the design of the area and other applications.
Table Group Section Table sections

When you want to group related rows together, consider using a table group section, which combines the relevant data together and is part of the table. All group sections apply the same column settings. For example, in a table showing a list of countries, the region is the natural way to combine rows. All table group sections have different styles and can be shrunk and expanded. If necessary, a summary of the data can be displayed in each group section.

Pulseapp Use the Table Group section to display the first and two levels of revenue and expenditure details, each level can be expanded.

Sort sorting

If you don't know the keyword, it can be difficult for a user to query a row from a table with a large amount of data. When users compare similar information, they usually arrange the table columns in ascending and descending order.

A common use for table sorting is to have the table title clickable. The sorted column should be marked, usually by placing a triangular arrow along the column heading text, indicating the order of the current row (ascending or descending). Each click order is reversed.

There should be a distinct distinction between sorted and unordered columns. The default sort for an important column.

Tablesorter is a simple and easy-to-use plugin. The plug-in can classify multiple types of data, or you can customize it. The plugin also supports multiple column sorting, but I'm not very cold.

The Onehub application clearly identifies the sorted columns and order. The reason I like this design is that even in such a small area, the details are very specific.
Filtration Filtering

Filtering is useful when there is a lot of data to be processed. Use the Drop-down list, radio button, or check box to filter the selection. In the following example, Builditwith.me uses a drop-down list to filter the user's career interests and current status.

However, this filter can only be defined in advance filter values. For example, you can classify work types according to their full-time/part-time, design/development categories, and you can't categorize them by their last name, because there are infinitely many of them. In this case, you can filter the data by using keywords. Entering any keyword will result in filtering by keyword.

Builditwith.me provides several filtering methods, each of which has a corresponding list display.

Pagination display pagination

When a table has a large amount of data, it should be paginated. Paging is common, but sometimes the effect is not good. Pagination applies to search engines, but does not mean that they are applicable in any case.

Product Planner uses a standard paging display with page numbers and a previous page next. But can you tell me what page 2nd is? Page 3rd? Of course you can't. Don't worry, standard paging can be improved. As shown below, the address book is very large, they use numbers and letters to pagination. This example shows all pages as good as hidden pages. You can apply it to other tables with similar conditions. If the form is sorted by date, you can replace the traditional paging number with a date range (such as the 1th page can be written 2.10-2.12, etc.)

If such a paging link is too wide, use standard pagination (as in the previous example) and display a hint when the mouse hovers over it.

Continuous Rolling continiuos scrolling

In contrast to pagination, continuous scrolling is a new way of displaying data. This way, you don't have to select a particular data type, and the new data is added to the list. Show progress while loading, as shown in the following example, in Dzone.com, the progress bar shows how many items have been loaded.

The usability and usability of this approach need to be tested to prove appropriate for your users. You can see more information about continuous scrolling in the UI patterns.

There is a Variant version (or another way). Unlike the continuous scrolling display data, at the end of the list, users can choose to click More buttons to browse the data. Twitter is such a good example.

Fix header Fixed table header

This is a nice simple trick you can use to keep the table head always visible. When the list of data is quite large and complex, use it to help users distinguish between multiple columns. The Fixedheadertable plugin is a good example.

Header headerless Table not required

If tabular data can be interpreted in a self explanatory form, the header may not be needed. The email form is a good example, the subject of email, the sender, the date of sending is self-evident and not confusing. Of course, there are cases where the header is not removed, for example, there are two ambiguous dates, at which point you need to define a table header.

RIVALMAP Bulletin board is a good case without a header, the data in the table at a glance and fixed format, this situation does not need a table header.

I have written an article about this pattern and also built a jquery widget that can be easily implemented. The key point of this pattern is that you can add more relevant information to the table. Taking Buysellads as an example, the expand row displays the publisher's advertising details, while always displaying important information in the main line.

Actions of rows Row actions

For a large amount of data, a table is far more than a common placeholder. Some specific interactions can be made in the table. You can manipulate a row (or rows). The operation is displayed in a row, in the form of a mouse hover or a menu.

Inline operations
It's a simple way to put an action at the beginning or end of each row of data. As shown below, Mixx the action at the end of each line, so it is easy to vote.

Mouse hover operation
If there are multiple operations, you can take the mouse hover operation mode, which is derived from the operation of the line. Mouse hover and mouse left to show and hide the operation, through this way can save the interface space. Project Estimator by Astuteo has edit and delete operations on each row, and when the mouse hovers over a row, the action button icon appears, leaving does not appear.

Menu actions
If you have multiple actions in each row, you can display them by hovering over the mouse or clicking a row. Dropbox uses a two-level menu to show multiple operations for each file, effectively using this approach.

Multiline operation actions on ListBox rows
This is a good way to allow users to do multiple lines of operations in bulk. Select the check box in front of each line, and click on the Bulk Action link or button to select multiple rows to operate. Or take Dropbox as an example, users can select more than one file, click on the menu for bulk operation.

Option provides a full selection and a full selection feature.

Concluding

This article basically includes the common form form, and supplemented with the example. It is recommended to read another two articles on the table: Big table issue tries to find a way to fit the view for a large table; Tips for designing terrific tables reveal the different hierarchies that tables can apply.

Thanks to Theresa Neil,designing, one of the authors of WEB interfaces, you can see in her book three Modes of the table: inline editing, extra wide tables, and filtered by columns.

Translation: Mey99