Shulou(Shulou.com)06/03 Report--

This article mainly explains "What practical data form design skills are there?" Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "what practical data form design skills"!

Illustration from icon8

For most SaaS platforms, data forms are essential components that allow users to gain relevant data and insights to make the right decisions.

As a former entrepreneur, I have used various SaaS platforms such as Mailchimp, Shopify, Klaviyo, Zendesk, etc. They offer different services-e-mail, order management, customer service, etc. -and all have in common the need to feed data back to users. Data forms are the best way to transfer large amounts of data.

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

fixed header

This is especially important for forms longer than 30 lines. When users have to scroll down to see all of the available information, without a fixed header, it will be difficult for users to understand and distinguish between multiple rows of data-most of which may be random numbers. A fixed header helps them work easily with the data table and avoids scrolling up to see what the fields mean.

design tip

I prefer to design with an 8px grid system, keeping the header size at 16px(minimum)--preventing your design from looking too heavy and crowded.

△ When the user does not understand a data field, the fixed header makes it unnecessary for the user to scroll up repeatedly to view the header content.

Fixed sidebar

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

When the data form needs to scroll horizontally to display hidden columns, the same component advantage as fixed header can be obtained by fixing the item name of the first column, so as to improve the efficiency of information communication.

design tip

When designing a fixed sidebar, add a shadow and vertical divider to the right of the column to remind users that the table supports horizontal scrolling.

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

custom column

Custom bars allow users to select what the form displays according to their preferences. When multiple metrics and datasets are involved, the feature can meet different user goals. Often used on self-service advertising platforms, such as Facebook Ad Manager, Google Ads, AdRoll, etc., there are multiple marketing metrics on these platforms, and each user has different priorities.

△ Custom bar allows users to personalize the data table according to their own preferences

pager

I learned from developer friends to paginate forms to reduce load times 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 line. In contrast to the latter, pagers allow users to skip several groups of data at once, satisfying users 'need for discontinuous browsing.

design tip

Most forms can display more than 30 lines per page, so it's more user-friendly to pin the paginator to the top or bottom of the form, making it easier for users to switch between pages without excessive, rapid scrolling.

Using paging reduces load time because it limits the amount of information being processed.

filter

The filter component is critical for filtering target information and shielding extraneous data volumes. Date filtering is the most basic filter, able to display information based on user-specified dates. When each column has a fixed display field, which means that the information is not random, but fixed selection, you can also set filters for individual information.

It's best to provide checkboxes in the filter drop-down list, allowing users to select multiple variables-the more flexible the filtering system, the easier it is for users to manipulate their information.

Filter components are critical to reducing the amount of data displayed according to user requirements

data sorting

Sorting is similar to filtering, and information can be rearranged and displayed in order according to user needs. In most cases, the left column sorts the form by default, and users can click on the title to sort the form accordingly.

You can add sorting to the header, such as sorting individual data numerically or alphabetically. But don't abuse this feature, it may be redundant for certain metrics such as status or category-filters make more sense to process this data.

design tip

Avoid linear icons and use planar icons for visibility. The hover state can convey visual cues that the entire area is clickable.

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

Multi-option simultaneous operation

Check boxes allow users to select multiple items and perform an action on the selected items. Help users save time and effort by not having to repeat the same steps. Imagine all rows have the same boxes, and these boxes appear repeatedly--this makes your form look cluttered.

design tip

I usually keep the checkbox size at 24px (minimum size), centered for usability. Additionally, highlight selected rows for enhanced contrast.

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

Simple and minimalist

The word "minimalism" has been used extensively, and blank seems to be the trend these days, but in this case less is more. When designing data forms, focus should be on the data itself rather than on the user interface. Users are already interacting with a lot of numbers and information, and complex interfaces only increase the cognitive load on users.

design tip

There is no need to add additional visual distractions such as unnecessary icons, zebra rows, random colors, etc.

What happens when you drive your UI designer crazy?

Common font styles

In design, typography is a key element in style guidelines that is critical to branding. But when designing tables, you should follow the instructions above (simple and minimalist) and do not use any complex font styles in the tables.

design tip

There are no recommended fonts, but it is recommended to avoid serif fonts as much as possible because they tend to attract attention and cause extra visual burden. Also, avoid capitalized words, which can make your design look heavy.

Serif fonts look strange on tables--I don't know if you've ever seen a data form that uses serif fonts.

item links

For a particular form, the item name can also act as a link, a form of interaction that fits user habits and makes it easy for users to understand where the link takes them.

design tip

When designing text links, use a different color to show the link to the user--simply bolding or underlining the text does not provide enough visual cues.

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

hover

Form operations are usually placed in the last column. This pattern is useful when there are not many columns of information and horizontal scrolling of information is required. You can also place actions in the first or second column so that users don't have to track that row as they scroll, but with too many actions, cognitive overload can occur and lead to unnecessary errors.

Mouse hovering keeps the look simple-action icons and text appear only when the user hovers over the corresponding row.

At this point, I believe that everyone has a deeper understanding of "what practical data form design skills are available", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.