Let’s design data tables

I am an enterprise UX designer and have spent most of the time on the dashboard, form and data tables, so I thought of sharing my experience of designing data tables.

Data is the key irrespective of any industry and if the visualization is not proper then it isn’t useful data. Enterprise interfaces are mostly filled with the form and data table than other elements.

Dashboard plays a key role in decision making for the user but even in dashboard data table has a role.

But I always find designing for enterprise products is challenging even though its interface components are limited. The most challenging part is to represent an enormous amount of data in an understandable way.

One way of representing the data for the user and allow them to make a solid decision is through tables which help them to find the organized data, do analysis and compare.

Let’s see the way of designing a data table.

A table comprises of the components like search, filter, sort, header, rows, column, actions, pagination, display density and customization.

Header

Header component will have the columns of the table, its own style and its functionality.

Style — Header can be differentiated from the rows using some colors.

Functionality — If more rows, user will scroll and they might lose the context so the header should be persistent presently at top.

Fixed Header

Rows

Rows will have a different type of styles.

· Include horizontal lines between the rows which will be visually pleasing for the user and easy to understand

· Row and Column lines is type of style we can use if user has to digest huge data and make decisions. This pattern might also add visual disturbance to the user

· If data is not huge and user is not going to have any scroll then rows lines are may not be needed

Alternating row styles will assist the user to visually separate the rows even if they are scrolling horizontally and help in comparing the data

Columns

Columns as like header have its own style and functionality

· Column text style in the header should also be differentiated like bold text, colored text, text size

· If the user scrolls horizontally then column freeze option should be there which will make the user compare

Fixed Column

· Columns should be sortable based on alphabetical order, ascending/descending

Columns can have a search which helps the user to land in the data quickly

Column Level Search

Display Density

We should provide the users the way that they can customize the row height so that they can view more number of records by avoiding the scroll. But if the row height is less users might struggle to scan the data and make decisions.

Compact Row height

Comfortable Row height

Pagination

Pagination breaks a long scroll table into multiple pages and help the user to know how many records are available, in which page they are and how many numbers of records can be shown in a page.

Pagination with Number of records, which page selection and number of rows to display

Customization

Table should have column customization like adding or removing a column based on the user needs which should have been understood in the research phase. Other customization can be like locking a column, reordering the column in the table.

Table Customization — Column order can be reordered, selected column can be locked

Table Actions

· Row level actions like edit, delete either can be given directly or if more actions are to provided that can be handled through a kebab menu or through the hover

Actions are provided directly to the user which intuitively explains the possible actions for the record

Actions are hidden inside the kebab menu. This is recommended if many actions are possible in the record

Actions are provided on hover of the row. Interaction needs learnability for the user until they get familiar with the pattern. New user might find difficulty in finding the actions. Interaction behavior is challenging for the touch based devices

User should also be provided with the bulk actions at the table level

Search

The data in the table might be huge but the user know the data he/she need. If that is the case then search option should be provided to the user so that user directly lands in the necessary data. User might not know what value to be given in the search box, so a help or hint text should be given.

If the user has to search through multiple parameters then the advanced search options should also be provided

Filter

Filter is another way of getting specific set of data from the huge list. This too will help the user to see only the required data and compare, analyze or make decisions.

Row Interactions

Each row in the table is showing a set of data but what is shown in the table might be only the high-level information. For comparing with other data this might be helpful for the user. But the table might not be always for comparison of the data alone. The user might want to see detailed information of the specific row, in this case, the row should have the interaction like

· Expandable

· Popup Window

· Side sheet

Inline Edit

Bulk Action

Data table should have additional functionalities like bulk actions where in the user will select multiple rows and perform actions like print, delete, copy, move, approve, reject. This will save the user time and avoid repeating the same actions to multiple rows.

Additional Suggestions

• Left align the text for easier readability
• Right align the numbers will allow the user to add/sum, compare the row with other rows
• Maintain the proper white space which will reduce the visual noise in the data table
• Use colors only to represent the status or progress

Summary

Thank you for reading the article. Based on the projects I have worked and from my learning I have shared the points and these are general suggestions. Definitely based on the project and user requirements these might vary.