What’s a Complex Table?

As the name implies, a complex table includes a range of features such as filters, sorting, size and column customizations, row actions, bulk actions, various cell states, pagination, and, of course, large amounts of data.

Typically, the user interacting with this type of table is already familiar with its complexity and functionalities. In other words, this isn’t about a casual user with basic software experience. However, just because the user understands the complexity doesn’t mean the user experience (UX) should be poor. By applying simple design principles, we can create functional tables that offer a great UX.

How Do You Design a Functional Table First?

I firmly believe that complex things can be simplified and made more useful by following these three rules:

1. Focus on what the user truly needs.
2. Make the complexities clear and understandable.
3. Deliver value, but not just features.

Focus on what the user truly needs

You must always prioritize what the user wants, rather than imposing your own ideas and assumptions onto them.

There are certain features that the users expect to work out of the box. IMO, these are the core needs of an user:

• Column Hierarchy: The columns must be smartly arranged in a way that the first column is of higher importance, while the last column has the least importance.
• Sorting & Filtering: Users must be able to perform basic sort and filter functions.
• Take Actions: Enable to take actions either at both row level and in bulk.

Now, there are certain features that might not be necessary for everyone, but you should still make them available for users who need them. Some examples include:

• Resizing columns.
• Applying conditions, condition groups, and rules.
• Multiple sorting options.
• Drag & drop for files.
• Reordering rows.

Make the complexities clear and understandable

Once the basics are in place, the next step is handling the complexities in a way that is clear and easy to understand. The goal is to design the table so intuitively that even a user with no prior experience can use it without needing a manual.

These complexities are the intricate details within the table, such as:

• When to truncate long text?
• What happens when you hover over truncated text?
• When to wrap text to the next line?
• How does the table behave when the columns are resized?
• How do users interact with different types of cells?
• How validation occur and how errors are communicated?
• How to handle localization for different languages and regions?

In my experience, these were the areas where I faced challenges when designing my first table. There’s no one right or wrong way to handle these complexities, there are various approaches to solving them. The key is to choose a solution that fits your specific requirements.

Some things that have helped me:

• Always set minimum and maximum limits for all the elements you design to avoid tables breaking in edge cases, this will save you trouble later.
• For handling multiple actions:
  • Use a single button to reveal all actions when clicked, or a group of actions (ideally no more than three) at the leading or trailing end of the table.
  • Avoid spreading actions across columns, even if they’re related to specific ones, as this ensures users can find actions easily without excessive scrolling.

Deliver value, but not just features

This last point is crucial, always enable your users to accomplish what they think is difficult. When they successfully complete a task they thought was challenging, it creates a sense of delight. That’s where the true value lies.

If you offer users 10 fancy features they don’t care about, then there’s little value in designing and developing those features. Instead, focus on what truly matters to the users, and work backwards from their needs to add meaningful features.

Designing Complex Data Table for Mobile

There’s a common misunderstanding that data tables must look exactly the same on desktop and mobile. If you’re a beginner or designing a table for the first time, you’re not alone in thinking this, I made the same mistake the first time too!

There’s a clear difference in how users interact with desktop and mobile devices, especially when it comes to screen real estate. Mobile screens are narrower, making vertical scrolling more natural, while desktops offer more width. On a desktop, scrolling is often unnecessary, or you can fit more columns horizontally. However, in complex tables with many columns, you might need to scroll a bit, but not as much as on mobile. If a table on mobile is designed with horizontal scrolling, it would result in a poor user experience.

Designing identical tables for desktop and mobile is a bad UX mistake. Tables are meant to draw relationships between rows and columns, making it easier for users to understand and consume large amounts of data in a structured, matrix-like format.

Replicating this behavior on mobile forces users to scroll back and forth horizontally to ensure they’re viewing the correct row for comparison. While this might be a great thumb workout, it’s far from ideal, unless, of course, you’re designing for someone training for a thumb wrestling championship!

How We Rethought the Table for Mobile?

In a recent project for the product Pulse, developed for our client Feedback Insights, we designed a table for mobile that was also used on desktop. I’ll walk you through how we addressed the challenges and created a complex, mobile-friendly table solution.

The user persona is designed for individuals who conduct surveys on behalf of respondents. These surveys may take place over a call or during in-person, one-on-one conversations in remote areas. We had to create an intuitive experience for both desktop users and those using the tool on mobile devices in these remote locations.

We reimagined the table as a list for mobile, featuring a simple UI for list items. These items were designed to display the essential information users need to see and compare at a glance, aligning with the column hierarchy we discussed earlier.

We displayed information from the remaining columns on a drill-down screen when the user clicks on a list item. However, we ensured that directly comparable columns, like Survey Status and Field Status, stayed in the main view. Moving one of these columns to the drill-down screen would require users to switch back and forth between the drill-down screen and the list, which can be even more frustrating than horizontal scrolling.

By doing this, you’ve made the first step toward designing a mobile-friendly table. However, there are other surrounding elements that are equally important to consider.

For large lists, we made sure pagination was visible at both the top and bottom of the list. Additionally, we offered the option to make the pagination sticky at the bottom on smaller screens, providing easier access and allowing users to view more list items.

For functions like sorting and filtering, we used modals as a mobile-friendly alternative to the dialogs typically seen on desktop.

TL;DR: Focus on showing only what the user needs at the list level and in each drill-down screen. Approach the table as a series of list items or cards. Use mobile-friendly components to ensure familiarity and ease of use, rather than relying on desktop-style components.

Benefits of Rethinking a Table for Mobile

You’re enabling users to perform various tasks directly on their mobile devices. This unlocks new ways of using mobile devices, users won’t need to carry around their laptops to take remote surveys or update data remotely. They can simply use their mobile, achieving the same functionality with greater convenience.

The table will be more performance-efficient on mobile, especially for users relying on mobile internet with potentially unstable connections. Instead of loading the entire table at once, fetching only the data necessary for what’s visible on the screen will optimize loading speeds and provide faster access, making the experience smoother even with less stable connections.

By keeping the UI simple and incorporating mobile-friendly practices, complex data tables will be easy to use. Users won’t feel overwhelmed by the number of columns, and the straightforward design will help navigate quickly and absorb the information effortlessly.

I hope these tips will help you to design a data table for mobile keeping UX at the forefront.

Happy Designing!