Balsamiq

Toggle navigation

Designing Effective Data Tables

With more and more products being powered by piles of data, how do you present it in an easy-to-understand format? Start by following the same approach as for any other design project: Understand how the user needs to interact with or use the content. Then make smart design choices to organize the data logically and prevent it from being overwhelming.

Good data design lets you scan, decide and act efficiently. When you're tasked with designing an interface with lots of data, it must not overload the user's senses so much that it slows them down or increases the chance of mistakes.

Start by doing your research

If you’re creating an internal product for your company or a new consumer product, you’ll need to answer questions like: What will they do with it once they have it? Do they want to find the status of something? Generate a report? Enter new data?

User setups and workflows also affect your design. Do you know how big their monitor is? Do they use dual monitors? If so, how many windows do they have open while working with your product? Do they have them open at the same time or one at a time?

Knowing what space they have available and what other content will be around your product will help guide your design choices, too. Make sure you plan for screen space.

Same application on small and big monitors

Too much white space can cause users to strain to follow the data from one point to the next. Their eyes aren’t being guided through the interface in the way it is with the smaller screen.

Data app filling the screen
Same application on a screen with many other apps

You might assume your user only uses your application, but it may be a part of a larger workflow.


Creating the initial layout

Now that you have the necessary background needed to start, let’s dive into the design of it. When starting from scratch there is a temptation to start by creating visual designs and writing code, but take a step back. The best approach is to start with a high-level layout.

For data-based design projects, start by reviewing the raw data that will populate this new product. How much is there? What are the pieces of information that will be used most to do the job?

Step 1: Create a layout of the screen(s) by sketching blocks or assembling sticky notes

Start by blocking out where the data could go

Step 2: Begin to add rough placeholder content

Add placeholder content

Use rectangles and Line of Text controls. Try to approximate the size and space it may need.

Step 3: Add the raw content into the layout

Add the raw content to the layout

Note that you can paste data into the Data Grid control straight from Excel or other spreadsheet tools.

Step 4: Apply basic UI principles to the layout and begin to iterate on your design

Apply UI design principles to improve the UX of your table


Organizing and optimizing data-based layouts

Many data-based designs stop at the previous step. There have been many times I’ve inherited a design that looks like it was copied straight from Excel. I am hoping that the next time you encounter this, you can use these tips to push your product past the obvious and into a great experience for your users.

Remember to keep in mind how people are actually using the data, or want to be using it, not how you wish for them to use it.

Here is a data table I've created for a hypothetical shipping / logistics tracking app that I'll use as an example in this section.

data and logistics table example
The raw data for the data layout in our example product.

Tip 1: Group or hide as much information as you possibly can

group columns together if possible

Reducing the number of rows in a table will improve its scan-ability, and thus the ability for the user to act upon it. Don’t feel beholden to how the data is currently displayed right out of the database. If certain data points pair together, such as a City and State, combine them.

use a dropdown to hold more information

If you have lots of data and you cannot simply get rid of it, hide it! Using dropdowns within a table to display more info is a great way to keep the focus on the core content without losing other data points that may be needed, but used less frequently.

Tip 2: Use human language

use human language

Databases are designed to speak to a computer, but they can also be designed to output natural, more human, language. Changing dates from numerical to alpha format greatly increases its scan-ability. Finding ways to make your data more readable will increase usability.

Tip 3: Use opacity to minimize the visual impact of secondary information

use opacity to reduce the visibility of less important information

Reducing the opacity of lesser important information reduces the visual noise and allows users to more easily track the content in each column.

Tip 4: Add room both vertically and horizontally to allow the user ability to easily scan

an increase of spacing horizontally and vertically allows for users to more easily scan content

Offering adequate space between each table cell affords the user a stronger ability to focus on the content. Increasing scan-ability increases usability.

Tip 5: Repeating the available actions in a UI increases unnecessary noise to the user

do not display actions on every element if they are repeated many times - use a hover action
Consider only showing actions on hover.

Tip 6: Use color in rows, cells or text to elevate its prominence on the screen.

Use color to increase visibility of select items

Highlight single rows to help the user focus. Elevate data points like status by adding a background color the text. You must use it sparingly for it to be effective


Bonus tip: Think outside the table

Excel was born out of databases, and data tables followed their example. However, there are lots of ways we can interact with data without needing to see it in a tabular form. Here are some examples of novel approaches to data presentation.

Instead of showing all the data in one long row, the example below uses order numbers as vertical navigation and puts the details to the right.

If the status of items in your data table is a key piece of information, consider using a dashboard to give an easy-to-digest overview of the current state. Pairing this with a data table can allow for a more user friendly experience.

Use a card based UI to improve the scan-ability of sets of information, as shown below.


Conclusion

Balancing complex data needs with a simple user interface is a challenge for any designer today. But the process of designing data-heavy interfaces is not much different than that of a marketing site. The principles of good design are universal.

Understanding the need, not overloading the user’s senses, and remembering to seek feedback will help ensure whatever you're designing will be a good experience for users. The tips we’ve laid out can be applied to all types of projects.

We hope you use them on your next project. If you do, tell us! We’d love to hear from you. Good luck and happy designing.


By Billy Carlson
Got questions or feedback? Email billy@balsamiq.com.