ila Bank ila Bank
Recent Case Study

Data tables design basics

Taras

UX Team Lead

Data tables design basics - Qubstudio

Not a fan of tables? You think there is no possible way to make them interesting and user-friendly?

Our lead designer Taras Bakusevych is here to convince you otherwise. Use his tips to create tables your users will love!

The ability to query and manipulate data is one of the key requirements of many products that are being designed right now. Do you want to make sure the product you are working on meets business goals and objectives and makes everyday work easier and more productive for thousands of users?

Let’s talk about Data Tables!

Working as designer at UX/UI design studio, especially if your focus is enterprise products, you always encounter a lot of data tables. Frankly, if we are talking about complex web apps majority of screens, you will need to design contain or just are a big grid. As I’m one of the lucky ones to work on this kind of projects, there is hardly a day when I don’t need to design one of those.

So what is a table? Is it a combination of columns and rows that help you present your data in a most boring way?

Well, it’s not so easy as it sounds. Here are several tips to make your data tables better.

When to use tables, and what are the benefits?

A data table is a great solution when you need to present multiple information points for a large number of items. For example, a list of clients with their IDs, status, contacts, last activity, etc. would be displayed best as a data table.

There are many other benefits:

  • a great use of space,
  • easy scalability, simplicity in development,
  • users usually are comfortable working with grids (majority already working with Excel for many years),
  • it’s easy to find and modify data in a table.

But remember, there are a lot of ways to represent data. A decision whether to use a table should be driven by user needs. When you need to provide an overview/summary, it’s better to use graphs rather than tables. For example, stock price history of some equity for a year can be shown in a huge table; however, a chart is a more effective way to digest this info.

Data tables design basics - blog-post-img - Qubstudio

What information to display?

The information you display in a grid and the order in what user sees it matters. Deciding what values to display, and it’s sequence, plays a crucial role in the end. It affects time and amount of effort it will require a user to complete his task. Selection of data points should be based on user personas and scenarios, previous application versions and common sense. Don’t rush to design it, just spend some time thinking about it.

Thinking is the hardest work there is, which is probably the reason why so few engage in it.

Henry Ford

There is no point in adding needless columns to a table even if it looks empty; it will just distract user’s focus from important values. However, it’s almost never the case — usually, the situation is quite the opposite: you have a stakeholder’s request to fit 23 columns on their oldest and smallest monitor. But think about it as too much of a good thing becomes bad. The more columns you add — the harder it is for users to scan it. A better way to go about it is to be strict in your selection and remove everything unnecessary. Keep that secondary information hidden, unless the user is interested in checking it.

Focus on the most important

Try to position key columns from left to right (this may be the opposite way, based on the region you’re designing for) — this is based on the way we read. Columns on the left will get the most attention. We will check the other columns only if we’re interested in something specific.

The F-Layout relies upon various eye tracking studies for its foundational concept. They argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.

Brandon Jones

Data tables design basics - focus point in UX - Qubstudio

Text Alignment

Alignment plays a big role in table readability, how easy you can do calculations in your mind, and comparison between different rows.
There are 3 simple rules to follow:

  1. Right-aligned numeric columns
  2. Left-aligned text columns
  3. Column names aligned according to column content

Following these guidelines will help make your text in the grid look appealing and easy to read. What your text says to users is important.

Data tables design basics - dont and do in UX design - Qubstudio

Size matters

The form of the table should be based on user needs and abilities. The more information a table displays and more complex it gets, the smaller fonts and row heights become in order to fit more information above the screen fold. On the other hand, if you are designing for fewer rows right from the start (list of items in your shopping cart, for example), you should set up generous row heights.

Very often a smaller size is the way to go. When you have huge lists of items, the number of items you can display without any scroll or interaction is very important. Decreasing row height sometimes doubles the number of items you display above the fold. That’s a big deal. Usually, you want rows to be shorter until it still looks clean, and information doesn’t blend in one big mess.

Don’t get me wrong — I am not encouraging you to cram as much as possible in your screen. Try to double your whitespace. Even if a data table has a ton of information, you can still save it with decent padding. Your design will not look heavy.

Data tables design basics - row height in UX design - Qubstudio

Typography

In design, typography is one of the key elements that make your work either great or ordinary, even terrible. Table design is not an exception. Discussing the art of working with fonts is not part of this article, and I am not the most knowledgable person to talk about it. However, here are several tips I can give:

  • Don’t use all caps as it is hard to read;
  • Avoid using Serif fonts as they create additional visual noise;
  • Avoid using bold and italic;
  • Use good fonts only:)

Data tables design basics - font is tables - Qubstudio

Remove everything unnecessary

You have probably heard the term ““clean” design” too many times. Less is definitely more. User interface should be as invisible as possible. Especially when dealing with big amounts of data, you are already putting a lot of pressure on users who will be working with your product. There is no need in adding visual distractions. Your goal is to make content shine not the other way around it.

  • Remove needless separators;
  • Remove row stripped background;
  • Remove shadows, 3d effects, glow, etc.

Data tables design basics - data tables ui - Qubstudio

Avoid Duplication

I see needless duplication very often in UI design. It has big impact on readability as it adds extra items without any value.

Data tables design basics - enterprise design mistakes - Qubstudio

Design Patterns and common interactions

UX designers can easily take advantage of users’ pattern-seeking tendencies. The key is in design patterns, which are reusable solutions to usability problems. They’re also time-savers. Patterns are the first solutions people go to when they don’t have time to invent something new. And like many “it just works” solutions, patterns tend to stick around.

Data tables design basics - bulk actions in UX design - Qubstudio

Data tables design basics - group by & sorting in UX design - Qubstudio

Data tables design basics - Pagination in UX design - Qubstudio

Data tables design basics - fixed columns in data tables design - Qubstudio

Data tables design basics - inline, batch & edit design - Qubstudio

Data tables design basics - data tables detail preview design - Qubstudio