Designing a better data table: Ingredients

The ultimate objective of every project is to streamline the user experience by simplifying the interface, interactions, and design, thereby delivering an effective solution. While working, designers face many challenges using data tables due to their varying sizes, complexity, data-heavy content, usability, and purpose.

In this blog post, I will guide you through my methodology for utilizing data tables and their ingredients, using the internal tool Oversight as a practical example. Although data tables don’t have a good reputation, they can be a very effective solution, offering several distinct advantages. Firstly, they streamline the process of scanning and managing large volumes of information. Secondly, they enhance clarity by presenting data in a structured format. Lastly, they enable users to effortlessly compare and analyze data.

First things first – What is Oversight?

Oversight is an internal tool developed by the employees of the ProductDock company. The application’s main benefits are the availability of data related to absences and annual vacations, transparent data on billable days, and the educational budget, with the possibility of submitting requests for conferences, workshops, and other company needs. The application is utilized at every level within the company by employees, unit leads, and other designated administrators.

Upon joining the project, I came across instances where certain aspects were executed without proper UX support. Mainly, the app fell short of meeting all the requirements, with many tasks still being performed manually or documented in external sources. As a result, it became necessary to address the pain points that arose during the development process and improve the system accordingly. Once we tackled the issues mentioned, we managed to simplify and make the reviewing requests more intuitive by using consolidated, collapsible tables. Employees and administrators no longer have to dive through other external documents they have previously used.

The design system of the Oversight dashboard now includes all necessary components and offers a consistent approach to the design process, with flexible tables built on the functional grid system.

How do we deal with tables? Let’s figure it out!

Let’s be honest, as with everything else, a well-thought-out start reduces the headaches. It would be preferable to think of table views as a flexible container where new cells can be added or subtracted and additional filters and options can be upgraded to the table itself during the development process.

How can we create something flexible enough for our particular use case?

Before you start designing your table, understand your user’s priorities and business constraints. To discover functional gaps, set direct and specific questions that can help you understand the final goal.

Start by asking questions such as these:

How does the user feel interacting with your product? What is the user trying to do on the table? What does the working environment look like? On what devices will the table be displayed (desktop/tablet/mobile)? Should it look like a table on a mobile phone? What kind of data will table cells contain? Do you need pagination or just an infinite scroll? Should the table offer customizable viewing options (filtering, sorting, searching, etc.)?

Depending on the user’s needs and the table’s complexity, the list may go on and on.

Defining a question of this kind can help you identify your problem, especially if you have a great beast in front of you. Users should experience a delightful and effortless interaction, free from the burdens that come with processing large amounts of data while reading.

1. Container 2. Title 3. Table header 4. Row/Accordion 5. Filters 6. Search 7. Pagination

Additionally, it is important to prioritize the accessibility of the product and ensure its usability by a wide range of individuals, regardless of their abilities, especially for individuals with disabilities or limitations. User experience isn’t magic intuition or artistic flair but a simple set of rules and helpful guidelines that work well in most cases. It’s that simple, learn to play with them and make things efficient, clear, and informative.

Data table ingredients

Responsive table layouts

When designing a table, it is crucial to lay a good foundation and anticipate as many problems as possible that can potentially arise.

How will the table be placed in our precious modern interface?

Most complex data tables occupy 100% of the available width. Due to the large amount of content, there are limitations to simply stretching the view.

Resizing the table container requires us to think outside the box so the table content doesn’t have to look like a table to fit nicely on a tiny mobile screen. A possible solution could be to collapse columns, transform them into carousel columns or display the data as cards, with the possibility of appropriate scaling depending on the screen size. When resizing, always choose to show what’s the most relevant and useful to the user. Since the first column always contains the key data being compared, it should remain locked in place as well as the header so users can always see it regardless of screen size as a reference point.

The type of design solution you choose depends mostly on the technical side. Close cooperation with the front-end developers is necessary to select the most reasonable solution in terms of time consumption and technical requirements needed to achieve the final result.

Filtering and sorting

There are many different ways to filter, such as single or multiple filters, filters with multiple criteria, etc. In the end, users don’t need to learn how to do it, regardless of the complexity of the table or the filters themselves. On the contrary, they should be simple, visible, and useful to get the desired data more easily.

Our table can filter according to the main parameters (status, type of request, period) to get the desired data as efficiently as possible. Table filtering is often very complex, so I advise you to research it as a separate topic. To learn more about it, I recommend you to take a look at this blog post.

Column sorting is a convenient and useful feature that allows users to effortlessly identify the most recent entries at the top of the table with a single click (e.g., oldest to newest – newest to oldest; A to Z – Z to A; largest to smallest – smallest to largest). To help users find information as quickly as possible, the column can be sorted by default so that the user will immediately see the desired result with the option to reverse it.

Pagination

Before you even think about navigation, remove everything unnecessary that may distract the eye. The goal is to let the content shine. If you already know in advance that the table will have a large number of rows, with the possibility of expanding that same number, the pagination pattern comes to the rescue. Users should always be aware of the current page they are on, ensuring smooth navigation through the table. Additionally, splitting content into separate pages empowers users to customize the number of rows displayed on each page. This feature allows users to jump to their desired page instantly, enhancing the overall data overview experience.

Cell editing

Editable cells offer numerous advantages, including the ability for users to easily compare content across cells and rows, all in one convenient location. One significant benefit is the ability to fill and update the table with minimal effort and without the

need to navigate to a separate detailed view. In addition to the visual cues that cell contents are editable and clickable, remember that the cursor also changes to a text cursor on hover. Visualize well which row the user is on, and be sure that the user doesn’t accidentally edit the wrong cell. Also, with editable tables, think about validation: whether the data is valid or not, messages that help correct errors, or a mechanism that automatically fixes them.

Oversight allows users to enter an initial amount, which they can adjust later to accommodate changes in budgeted costs. Additionally, it offers editable fields related to invoices and associated notes, allowing for seamless management and customization.

Cell editing saves time and reduces frustration for your users by allowing them to quickly perform common actions without having to navigate to a new page. A quick overview of additional data and details such as modal, slide-over, etc., cover part of the entire page content. This also slows down the editing process. There are a bunch of better ways than that to focus more on detailed information, like using famous and beloved accordions.

Accordion – Expandable rows

Accordion is a common pattern that fits many needs and universally serves well if you don’t want to burden people with displaying all the data simultaneously. Using an accordion allows the user to expand table rows to get additional related content without losing the flow and context of the information. The expanded section should automatically collapse when the next one is opened so that the user can access the other large chunks of data efficiently.

In our particular case, it served as an ideal place to include additional features to attach invoices. There are frequently additional costs that the employee does not count on when planning expenses from the budget. By adopting this approach, we have minimized the chances of misplacing invoices while increasing clarity for employees regarding the utilization of budgeted funds.

Multi-select and Bulk command

At some point, while working on your design, you will need something to manipulate and take action on multiple items at once. – that is where the bulk command comes to the rescue. It’s well-designed, clean, minimal with intuitive functionality, widely applicable for list or grid view, and serves users to delete table entries easily. As a result, the table containing the invoices has become very easily adaptable, even for different requests.

Tooltips

Although often seen as unnecessary, tooltips can still represent a cool UI solution. However, know that poorly designed ones can significantly worsen the user experience. Tooltips act not only as additional information, support, or instruction for unfamiliar UI elements and new features. They also block and cover a certain part of the interface, making it hard to spot them.

A few things to mention regarding tooltips:

If a design requires many additional explanations, rethink your approach – you might not be on the right track.

Tooltips don’t work well on the mobile version and will only appear when the user long press.

Be careful if you use them when designing complex data tables, and remember, it’s always best to keep things simple.

Conclusion

In the long run, we all need to stay on track to make a product that people want and benefit from. Keeping that in mind empowers us to make the right decisions. It’s all about finding the perfect balance for specific needs. There is no ideal recipe, and each one should be adapted to the person who consumes it. Do the hard work so users don’t have to, and give them what they need when they need it.

The overall story of the tables cannot fit into just one text. Much more could be said about the data table ingredients due to their complexity.
I hope you enjoyed and found this article helpful. Additionally, I hope it encouraged you to love data tables and sparked your interest in learning more about their ingredients. Thanks for reading!