Web Design tips: A summary of design tips for Web Forms

A good table should convey a great deal of information in an easy-to-understand, straightforward manner. The real focus should be on information, and the excessive design of the table would counteract that effect. Ingenious design, on the other hand, not only makes a table more appealing, but also increases readability.

Tabular information is usually very tedious.

In a sense, indeed. A good table should convey a great deal of information in an easy-to-understand, straightforward manner. The real focus should be on information, and the excessive design of the table would counteract that effect. Ingenious design, on the other hand, not only makes a table more appealing, but also increases readability.

Today we look at several ways to improve the table's functionality and aesthetics. We often see the application of the form on the price page of the Internet, so we mainly take this form as an example. Keep in mind that these principles can be applied to any type of information list (not limited to <table>).

Vertical, horizontal or matrix? Vertical, HORIZONTAL or Matrix?

As in the past, we started with the most obvious places. The first step is to determine the overall structure of the table. The structure depends on the type and complexity of the rendering data. Selecting a vertical column or horizontal row usually depends on your personal preference. Plan the contents of the form, then decide which method to use to better deliver the information. Obviously, if the information contains multiple variables, then select the matrix to represent. Here are a few simple examples to start with.

Vertical

Level

Matrix

Start in Excel from Excel
I hope this is the first and last time I have recommended using Microsoft Office for the design. In fact, the table is really easy to use in Excel, which is the strength of Excel. Using HTML to organize your structure requires writing complex code, which is often time-consuming than Excel.

I stumbled across a small Web application: Tableizer, which can paste the tables in Excel into HTML. In this way you still need to write some styles yourself, but it will save you the time of the previous table build.

Tableizer

Use Table builder using a table generator

Do you hate Excel? Don't worry, I am too. If you want to save yourself the HTML form time of generating simple structure, there are thousands of form generators available online. Please note that I am talking about "simple structure". Don't think you need to do anything with these generators.

Here are a few simple free form generators:

Quackit
Table Generator
Kotatsu
Spectrum

A small style has gone a long way a Little styling Goes a long Way

Now that you have a simple table, you'll need to add some CSS. Of course, you can spend a lot of time choosing a variety of styles. Just keep in mind that even a little bit of color and font style can greatly improve the readability and attractiveness of the table.

Here are some guidelines for how to add styles to a table correctly.

CSS tips: Make use of basic CSS style tables

Veerle: A CSS style table

Add feature group add a featured section

This practice is common in the price list and applies to other forms as well. Look at the information in the table to see if it is necessary to focus the viewer's attention on a particular area. Used to display the best value of a property or a common element, distinguished by different colors and/or different sizes.

There are several ways to implement this approach. Here are a few examples:

Different colors

Different size

different colors and sizes

Sort the information make the information sortable

If you have a lot of tabular information, you can sort columns, and users can choose to browse the way they want. Mint.com the list of transactions, users can easily switch from date to browse by category, so that you can compare which one you are willing to spend a lot of money. As shown in the screenshot above, obviously I prefer to eat greasy fast food.

Here are two different ways to sort a table:

Sort table rows with Ajax (Woorkup)
Table Sort JavaScript (Yoast)

Using the icon use Icons

As I mentioned above, the main point of information design for a form is to make it visible to the user at the first glance. By reducing the necessary reading, well-designed icons can improve browsing speed and increase user understanding of tabular information.

Be careful that this is a double-edged sword. Complex icons can also confuse the user, do not know what you want to express.

Increase zebra stripe add Zebra stripes

This is a very basic concept that can be traced back to the existence of the information table. Adding alternating row colors can help users focus their attention, associating classified information that is set on the edge or bottom with floating information in the table center. This simple technique can increase the readability of the size table. It's a good rule of thumb to include zebra (or other visual aids) at all times if your table requires information that is separate from the user's association.

Here are some free resources to add zebra crossings to the table:

Styling Zebra striped Tables with CSS (CSS newbie)
MooTools Zebra Table Plugin (David Walsh)
PHP Zebra Striping a Table (css-tricks)
JQuery Zebra Stripe a Table (css-tricks)

Preparing for Web 2.0

The shiny Web 2.0 style design may be a bit overused. But it can really catch the eye quickly. I definitely do not recommend adding too many redundant flashy elements to already complex tables, in which case you need to choose a simple way. However, if you need to design a small table with only a few items, then it might as well make it look magical.

Minimalism

Don't like the dazzling web 2.0 style above? It doesn't matter, there is a strong point of view that should reduce the graph of the table. This approach allows users to focus on content without any interference. Using clean, subtle gridlines (or no lines), simple fonts and colors can be a good contrast to the background.

Add search function Add a Feature

Sometimes it's not enough to just add a sort function. When you have the content of the page to sort, the best way is to use the search.

I found the following two forms of filtering methods using JavaScript. Do you have any other way?

JQuery Column Filters
Cut & Paste HTML Table Filter Script

Remove redundancy don ' t overload the Table with redundancies

Application developers like to show that they have a variety of powerful features through a table. However, sometimes designers add a lot of useless information to a table, and they could have shown it in a better way.

Take a look at the invoice machine example, in the table, in addition to the top three functions, the other features of the four entries are the same. The table thus adds no necessary 15 lines. The solution can be explained by a simple bulletin list that "our plans include the following features" that users can quickly see, regardless of which program they choose, they will have these features. The form needs to be shortened to 3-4 lines to show the different parts. I repeat that the form should make the information more readable. If your form doesn't meet this goal, it will backfire.

Creating an extensible region create expandable Areas

Another feature is to add expanded functionality to specific rows in a table. You can put a lot of content into a relatively neat space. A simple jquery widget Jexpand can implement this functionality. Concrete implementations can view the tutorial from Jankoatwarpspeed

If your table uses the Unwind feature, then the header must be designed so that the user can clearly find this feature. Don't let users sift through the data to find the information they need.

Highlighting the relevance of highlight relationships

This technique increases the readability of complex tables or matrices. The entire cell is highlighted regardless of whether the user hovers over the cell's column or row. Please see the detailed example.

You can see how to do this by clicking the example in "Ask the CSS guy" below.

How to create an air time and price matrix table similar to Orbitz ' s airline

Add Dynamic selection effect add a dynamics Selection Effect

Here is another example of ask the CSS guy that allows the user to select a given column (price list) for the table, highlighting the current selection and expanding the display for more information. This approach is consistent with the previous example, but has a different effect. To see the demo specific implementation please click:

Create a table similar to the crazy Egg ' s price list dynamic highlight column effect