When was the last time you loved designing tables? Well let me tell you, I still have anxiety from time to time when I start working on a new table design.
But, what if I tell you that there is a step-by-step process you can follow in order to design the table you need for your next project.
Let’s admit it, they are a vital part of almost any product out there and without them, it would be extremely difficult to visualize complex data and gain clarity on what it all means.
Some Context on Data and Tables
In today’s ultra-competitive business world, data has become an essential commodity. With the right data at one’s fingertips, organizations gain insight into every nuance of their operations and customers, helping them streamline processes, forecast more precisely, and eliminate inefficiencies that impede customer service and profitability.
When it’s leveraged to its full advantage, business data is capable of transforming an organization from just about every angle.
As the move toward digital transformation progresses, even small businesses produce and collect massive volumes of data—from their websites, applications, social channels, and on-premise activities. But to make this data useful, stakeholders must be able to view and manipulate it in an uncomplicated way—and this is where tables come in.
Serving Customer Intent
As a UI/UX designer, you need to focus on serving the customer’s needs and intent. Data is a fact of life in today’s business world. Your customers have lots of it, and they need to have a way to understand it that doesn’t necessarily involve a team of data scientists. Tables make it easy for us to deliver on that need.
Since our entire philosophy is based on making life easier for the end-user, getting this right will give you superpowers—at least in the eyes of your customers, and that’s what counts.
So whether you’re designing an inventory system, a dashboard for managing SaaS integrations, global logistics, or a distributed workforce, you want to make your tables as user-friendly as possible, or else they won’t serve their purpose. From a design standpoint, this can be challenging, especially if you need to make sense of massive amounts of data and cells that need to “speak” to each other.
Fortunately, we have these capabilities, so it’s more a matter of knowing what’s possible and then tailoring your tables to address the client’s priorities.
Good table design should make it easy for the user to visualize, digest, sort, and leverage the data any way they choose. Further complicating the matter is today’s need for responsive design because people will want to look at your tables on their mobile devices, and you want to make it easy for them to do that.
As you can see, the topic is a bit nuanced from a design standpoint—but not impossible. So today, we’re going to talk about what you need to know to design complex tables that look and perform exceedingly well on any device.
Designing a Table Style
Ultimately, you need your table to match the existing front-end framework—meaning it should look like the rest of the website, not like a crazy Excel spreadsheet. The challenge here is how to incorporate all the data you need to include in a way that doesn’t blow up your layout.
A well-designed table makes it easy to scan, sort, compare, and manipulate the data in various ways to obtain the desired results, so at the basis of everything is what the client needs to see.
What Does The Client Want?
Before you begin, it’s vital to understand a few things that only the client can tell you. For example, you’ll want to understand the use case, the types of data you’re working with, where the data is coming from, and the client’s top priorities.
- What Kind of Data? The design choices you make will largely depend on the type of data that needs to be in the table. For example, if you’re dealing with numbers, links, dates, and so on, the layout will be different than it will be for blocks of text or files.
- What Is The Purpose of The Table? Knowing how the customer will interact with the table will help you drill down your options. For example, do they just need to scan sales figures? Or do they want to be able to compare product performance across channels or date ranges? There’s no point in adding a lot of functionality they don’t need or won’t use.
- Will They Need To Interact With The Data? Some users will want to simply view the data, while others will need interactive functionality. The answer here will inform your design choices.
- Who Is Interacting With The Data? Different departments will have different needs when it comes to the data they want to see and use. Know these items before you start, as it will help you make critical design decisions and avoid changes later on in the process.
Table Design Best Practices
As a general rule, you always want to keep your end-users satisfaction and comfort front and center. The process of building out a complex table takes a lot of brainpower as it is, and maintaining focus is essential, so you don’t get sidetracked.
Here are a few tips to keep in your back pocket:
Alignment is key. Put at least as much effort into how the data behaves within your tables as you do on the interface. Alignment issues are critical to readability. Ensure the data flows and is easy to read and adjust your layout to accommodate—not the other way around. Most people read left to right, so aligning your fields to the left is preferable.
White space is your friend. Increasing your cell padding a little makes the data in the table more readable. Too cluttered, and it just looks chaotic. A little scrolling wins out over densely-packed information every time. That said, you might as well get rid of any unnecessary borders while you’re at it. If you have a lot of data and feel you must have borders, make them as thin and light as you can.
Put some personality into it. Don’t be afraid to color-code status indicators or use checkmarks or icons for items if it makes sense. Colors and shapes help to break the monotony and can actually be very helpful. For example, if you have a color-coding system for invoice status, it’s easy for the user to see what’s been paid, what’s overdue, or what needs attention from a specific department. Be sure it makes sense in context—for instance, green usually indicates completion, while red or yellow tells you it needs attention.
Choose functions people will actually use. Once you get fluent with table design, it’s tempting to throw all kinds of functionality into it. But if it doesn’t need to be there, it might lead to problems at some point. Ask yourself, “what’s helpful?” “what’s useful?” and “does this add value?” and proceed accordingly. This is where having a solid understanding of the business use case and the organizational workflows come in handy. You can make design choices knowing they will be used and appreciated and avoid those “what the heck is this?” conversations.
Don’t clutter the table with buttons. If there is more data to be viewed on a line, adding a hover function to the data is preferable to a button. Buttons tend to break up the flow, so if you don’t really need them, don’t bother. Do consider, however, if you’re allowing in-line editing, you probably can’t limit those actions without some form of pause. A button puts a layer in between the data and the user, so in the case of in-line edits, it’ll help you avoid frequent data mishaps.
If you allow in-line edits, add a success/error state indicator. This way, users will know whether their entry was saved or not and avoid frustration. You might also want to think about how you enable edits, as this could be indicated in various ways. For example, the pencil icon is a pretty standard indicator for any editable field. Or, if you need to apply edits to multiple rows, you might consider a batch action bar, where if one row is selected, you get a bar at the top of the table (make it in a contrasting color, so it stands out) where you can apply the action to multiple rows.
Table Display Functions
Here are some of the most common/expected display functions you will need to consider:
General Table Styles
- Fixed Headers. Fixed headers lend context to the data and eliminate the need to scroll back up to confirm the column headings.
- Row Styles. You can design your row styles to make the data more scannable. You want to make the table as clean-looking as possible. Removing row lines and adding zebra stripes (on alternating rows) work well for limited datasets. However, if you’ve got a long list of rows, dividing lines help the user keep their place, whereas zebra stripes can get confusing.
- Row Density. If you’ve got a lot of data to parse, you might want to think about adding an option to control row density. Some users might want to look at more data without scrolling, and others would prefer a bit more space—so giving them control is ideal.
- Horizontal Scrolling. This is critical when designing tables for large datasets. You’ll want to place identifying data in the first column and anchor it, so when the user scrolls, it’s easy to associate.
- Pagination. You can deploy pagination in your tables to help the user define how many rows or columns they want to see in their view. The alternative is infinite scroll, which loads data progressively during scroll. Again, one method might be preferable to another, depending on the type of site and data at issue.
Table Views
- Row Expandability. Enable the user to view additional data for a row item without losing context in the bigger picture.
- Row to Detail. Accessing the link on a row enables an additional detail view while still maintaining the list view in the anchored column.
- Resizable Columns. Long descriptions will abbreviate so it’s good to have the option to expand the columns to see the complete description.
- Visual Table Summaries. Summarizing the table data into a visual graph, pie chart, or both, is a fantastic way to add at-a-glance functionality to your table. The user can immediately see the points contained in the table and then drill down to the most relevant details as needed.
- Modal View. Modal view lends more focus to specific data. For example, you can highlight a data set in a pop-out without leaving the table and access additional actions, like print or share.
- Multi-Modal View. Like modal view but adds the capability of selecting multiple items to view and compare.
Filter, Sort, and Search
- Sortable Columns. Gives the user the capability to sort data by columns or alphanumerically.
- Filtering. Allow the user to filter by date, range, status, or whatever is appropriate.
- Searchable Tables/Columns. Apply search values to the entire table or within selected columns.
- Customizable Columns. Allow the ability to choose and sort the columns in the view. Within this function, you can also allow users to save custom views for later use.
Table Customization
- Enable Inline Edits. This function allows users to change or edit data without having to open the data set in a separate view. This is helpful, for example, if you need to change the price of an item or add a note on the fly.
- Add Columns. Allow the user the option to add columns based on a relevant dataset.
Responsive Table Design Considerations
Chances are, you won’t be able to control what device your customer is viewing your table on. If you’ve got voluminous columns across the screen, that’s probably not going to fly on a tablet or handheld device. It’s a problem, but it can be solved.
The question is: how do you fit all the data in your table onto a screen without losing its purpose and context?
There are a few ways you can go about this, so let’s dive in.
Collapsed Table
A collapsed design means that no columns are hidden. Your primary column is fixed, and the user accesses the other columns by swiping left across the screen. Since the legend column is static, you don’t lose context with what you’re looking at. If you want to make sure your table looks and performs on any device, this is probably the easiest way to go, as long as the data meets specific parameters. For example, it’s probably not ideal if you’ve got a lot of columns. However, if your table is relatively small, it’s an easy solution that users will appreciate.
Moveable Table
Much like collapsed, moveable allows you to swipe to view columns. However, it swipes the whole table and doesn’t anchor the primary column, which might be an issue for context.
Shortened Table
A shortened table is a great way to maintain the look and function of your table, but you’ll need to prioritize what data you want to display. In general, it’s easy and straightforward to deploy, but you’ll only see as many columns as will fit the vertical view, so it might not be the best solution in some circumstances.
Transformed Table
A transformed table collapses rows into separate cards, so in essence, each card has the same row headings and different data sets. It also gives you the ability to hide or collapse cards that you don’t need to look at. This is a useful approach when you’re dealing with large data sets. On the downside, you’re looking at repeated row headings and multiple pages of data. Plus, comparing data from different columns might be a challenge.
Compared Table
Compared tables are a subset of transformed table design. It makes it easy for users to choose and compare two columns—a real plus for making business decisions on the fly or for customers to compare features on two different plans. You’ll need to add additional navigation tools, but it’s suitable for large amounts of data—as long as you don’t need to compare more than two columns.
Final Thoughts
Last but certainly not least, consider the possibility that your users might want to export their table data so they can share it with others or upload it to other programs. Adding an “export to CSV’ button at the top of the window solves issues that a pdf just can’t.
