Web page forms and usability design guidelines

Many people agree that tables are often overlooked, although they are an important part of user interface design. 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 their design of this 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 the 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 about it.

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.