11 super practical data form design tips, come and collect them!

Hello everyone, this is TCC Translation Intelligence Bureau, I am Li Zehui. Data forms are a common platform design style. In the seemingly boring and dull design, there are many high-quality design experience methods. Especially in terms of information organization, information communication, information carrying and readability, data forms contain many design rules and design patterns, allowing users to easily obtain and process information. This article introduces 11 design guidelines, including fixed headers, fixed sidebars, custom columns, pagers, filters, data sorting, multiple options at the same time, simple and concise, ordinary font styles, project links, and mouse hover, to provide practical suggestions on data form design.

Of course, in actual data form design, it is also necessary to make corresponding adjustments based on product requirements and user goals. What experience do you have in data form design? What great design cases have you come up with? Welcome to share your experience~

[[398711]]

For most SaaS platforms, data forms are an essential component that allow users to obtain relevant data and insights to take the right decisions.

As a former entrepreneur, I have used various SaaS platforms such as Mailchimp, Shopify, Klaviyo, Zendesk, etc. They provide different services - email, order management, customer service and other solutions, but the common point is that they all need to feed data back to users. And data forms are the best way to transmit large amounts of data.

Data forms are effective because they organize information and data in an orderly manner, allowing users to easily scan, compare, and analyze the information of their choice. This post describes the key design patterns I follow when designing data forms.

Fixed header

This is especially important for forms with more than 30 rows. Without a fixed header, users will have a hard time understanding and distinguishing between multiple rows of data — most of which may be random numbers — when they have to scroll down to see all the available information. A fixed header helps them easily consume the data table and avoid scrolling up to see what the fields mean.

Design Tips

I tend to design using an 8px grid system, keeping headers at 16px (minimum) — to prevent your design from looking too heavy and crowded.

Fixed Sidebar

For data forms, two components are needed to sort all the information. One is the header, which is used to understand the displayed data. The other is a fixed sidebar, which is connected to each row of data and is often used for project names, such as activity names, product names, stock names, etc.

When a data form needs to scroll horizontally to display hidden columns, by fixing the item names in the first column, you can obtain the same component advantages as a fixed header and improve the efficiency of information communication.

Design Tips

When designing a fixed sidebar, add a shadow and a vertical divider on the right side of the column to indicate to the user that the table supports horizontal scrolling.

When the data table has too many columns, make the form easier to understand by fixing the item names in the first column

Custom columns

Custom columns allow users to choose what to display in the form based on their preferences. This feature can meet different user goals when multiple metrics and data sets are involved. It is often used in self-service advertising platforms such as Facebook Ad Manager, Google Ads, AdRoll, etc., where there are multiple marketing metrics and each user has different priorities.

△ Custom columns allow users to personalize the data table according to their preferences

Pager

I learned from my developer friends to paginate the form to reduce loading time by limiting the amount of information being processed. Another approach is to use progressive loading, where the form automatically loads a new set of data when the mouse scrolls to the last row. In contrast to the latter, the paginator allows users to skip several groups of data at a time, meeting the user's needs for non-continuous browsing.

Design Tips

Most forms may display more than 30 rows per page, so it is more user-friendly to fix the pager at the top or bottom of the form to facilitate users to switch between pages without having to scroll too quickly.

Using paging can reduce loading time because it limits the amount of information being processed

Filters

The filter component is essential for filtering target information and blocking irrelevant data. Date filtering is the most basic filter, which can display information based on the user-specified date. When each column has a fixed display field, it means that the information is not random but a fixed selection. You can also set filters for single information.

It’s a good idea to provide checkboxes in filter drop-down lists, allowing users to select multiple variables — the more flexible your filtering system, the easier it will be for users to manipulate their information.

Filter components are essential to reduce the amount of data displayed based on user requirements.

Data Sorting

Sorting is similar to filtering. It can rearrange information and adjust the order of information display according to the needs of users. In most cases, the left column will sort the form by default, and users can click the title to set the corresponding sorting setting.

You can add sorting to the table headers, for example to sort the individual data numerically or alphabetically. But don't abuse this feature, it may be redundant for certain indicators such as status or category - filters will handle this data more reasonably.

Design Tips

Avoid using line icons and use face icons to increase visibility. Hover states can convey visual cues that the entire area is clickable.

△ Sorting is similar to filtering, rearranging information according to user needs

Multiple options at the same time

Checkboxes allow users to select multiple items and perform some kind of action on the selected items. Help users save time and energy by not having to repeat the same steps. Imagine having the same checkboxes for all rows, which would be repeated - this would make your form look cluttered.

Design Tips

I usually keep the checkbox size at 24px (minimum size) and center it to improve usability. Also, highlight the selected row to enhance contrast.

△ Checkboxes allow users to select multiple items and perform actions on the selected items

Simple and minimalist

The term "minimalism" has been used a lot and white space seems to be the trend right now, but in this case, less is more. When designing data forms, the focus should be on the data itself rather than the user interface. Users are already interacting with a lot of numbers and information, and a complex interface will only increase the user's cognitive load.

Design Tips

There’s no need to add extra visual noise like unnecessary icons, zebra rows, random colors, etc.

What happens when you drive your UI designer crazy?

Normal font style

In design, typography is a key element in the style guide and is essential for branding. But when designing tables, you should follow the instructions above (simple and minimalistic) and don’t use any complex font styles in your tables.

Design Tips

There is no recommended font, but it is recommended to avoid using serif fonts as much as possible, as they tend to draw attention away from the design and cause extra visual weight. Also, avoid capitalized words, as it can make your design look heavy.

Serif fonts look weird on tables - Have you ever seen a data form with serif fonts?

Project Link

For certain forms, the item name can also serve as a link, which is a form of interaction that is in line with user habits and users can easily understand where the link will take them.

Design Tips

When designing text links, use different colors to show users the link — simply bolding or underlining the text doesn’t provide enough visual cues.

When designing text links, use different colors to show users the link

Mouseover

The actions in a form are usually placed in the last column. This pattern is suitable when there are not too many columns of information and the information needs to be scrolled horizontally. You can also place the actions in the first or second column so that users do not need to keep track of this line when scrolling, but when there are too many actions, it may create cognitive overload and lead to unnecessary errors.

Mouseover maintains a minimalist look — action icons and text appear only when the user hovers over the corresponding row.

at last

The above content is just a principled explanation, mainly to provide you with general suggestions. In the actual data form design, corresponding adjustments need to be made according to specific product requirements and user goals.