How To Design Complex Data Tables (+ Figma Kits)

How To Design Complex Data Tables (+ Figma Kits)

By: Vitaly Friedman

LinkedIn: June 19, 2024

https://www.linkedin.com/pulse/how-design-complex-data-tables-figma-kits-vitaly-friedman-spaue/

Architecting a complex data table is quite an adventure. Wonderful work by Goldman Sachs team.

Complex data tables are difficult to get right. They always come along with filters, sorting, customization options, batch actions, cell states, pagination and a huge amount of data. Their purpose is usually to help people compare data points and find insights — yet navigating a table is often painfully slow and frustrating, especially on mobile.

Let’s explore practical techniques and useful Figma toolkits to help users find and compare the right data faster, without relying on endless horizontal scroll.

Architecting A Complex Data Table

When we start designing a complex data table, we need to first understand what features, states and accessories we actually need. Slava Shestopalov has put together a tree of table features — a practical overview of what goes into complex tables, along with all features, states, accessories that might need to be considered in the design process.



A comprehensive tree of features for a data table. Neatly put together by Slava Shestopalov.

In the design, we start with observing, collecting and prioritizing user needs. Based on them, we define a full set of complex functionality that we need — such as drag-n-drop, resizing, reshuffling or multi-sorting. These features will require separate accessibility considerations as all draggable controls must be keyboard-accessible due to WCAG 2.2 AA requirements.


The different types of cells, from the (incredible!) Goldman Sachs Design System.

Then, we define the different types of table cells that we need. Some of them will be accessible to everyone, others will have restrictions applied to them. So we discuss logic and permissions, such as read-only, comment-only or editable. We explore filtering, sorting and customization features. We discuss sticky headers and columns. And for each of them, we set default values, presets and templates.


For nested filters, you might consider an overlay with horizontal stacking, instead of a tree.

Eventually, we move to the fine little details of the data table design. Things like truncation, wrapping, stretching and resizing rules. We look at interaction design with validation rules and error messages. Some tables might require very long technical titles or localization, so stress test your design with very long and very short titles — this might also require compact, comfortable and condensed modes.


Data table design with a dedicated "Actions" buttons might perform better than hover actions.

And: whenever possible, try to avoid row hover actions: they often cause errors and rage clicks. Instead, use a standalone button ("Actions"), or few buttons, on each row instead.

Drawing a table tree diagram like the one pictured above is a good way to document your decisions — and understand the beast that is actually in front of you. A data table might seem like just another regular component, but its complexity is often underrated and it's effectiveness is often undermined. Especially when it comes to mobile display.

Useful resources:

Complex Data Tables on Mobile

We often assume that customers expect data tables to appear exactly the same on mobile and on desktop. That's not necessarily true. What they do expect is that features that they heavily rely on for their work exist in all environments — but these features don't have to work or look exactly the same way.


Row-column-data-tables are terribly inefficient on mobile — you might consider cards instead. Example: Goldman Sachs Design System.

In general, row-column-data-tables are terribly inefficient on mobile — that's where users often struggle, making mistakes and scrolling back and forth to make sure that they are looking at the right piece of data.

Instead, it's a good idea to think about the data alone, rather than its tabular structure. See how to aggregate data and span it across fewer columns. Show only what users really need, then show more on tap. And while doing so, try to leave out unnecessary data and details and eliminate repetition. For example, we could abbreviate dates, long labels, units of measure and currency. Replace statuses and permissions with icons and badges.


Users rarely need all columns and rows at once. We can use drop-downs to navigate and explore data cells in bulks. By Joe Winter.

As of interaction design, expand rows to show details if your data doesn't need much vertical space, and use a drawer when your data does need it — preferably instead, not in addition to, modal dialogs. However, don’t rely on tooltips or hover to show critical details.

It's worth noting that users rarely navigate through all columns in the table. So let them show and hide columns, for example with a “Columns” button. There, let them also re-arrange, lock and reset columns. You could use tabs above the table to change the view, or use tabs within the table to jump between columns.


Clever: use tabs within the data table to navigate its columns. By Netty Konovalova.

For row actions, you might be better off with a bottom sheet (edit, delete, move). A helpful way to make the content more accessible is by re-inggroup data from columns across multiple rows (pivoting). You could also combine columns within vertical accordions (stacked columns) and add a sticky filter in each column to help users navigate faster. Finally, if you do use pagination, show it above and below the data list.

Bottom line: Show only what users really need. Think “card”, not “row” to present a single record of data. Aggregate and re-group data across the table. You might not always need labels, but keep them available to screen reader users. And most importantly: re-organize, rethink and redesign data, rather than squeezing a multi-column table layout in a narrow mobile space.

Useful resources:

Data Tables Figma Kits

Designing data tables in Figma from scratch is remarkably tedious and time-consuming. You can get off the ground with a few helpful kits, kindly shared and released by the community:


Data Tables Figma Kit, by Jordan Hughes.

A huge thank you to contributors, authors and designers who spend time and effort and energy into making these resources available for everyone to use!

Resources

By ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)