Data Tables Design

Basics

7 min readOct 3, 2016

The ability to query and manipulate data is one of the key requirements to majority products that being designed right now. Taking into account the business goals and objectives, and making everyday work easier and more productive for thousands of people forced to use product you designed 8 hrs a day. Today we talk Data Tables.

Working as UI/UX designer, specially if your focus are enterprise products you always encounter a lot of data tables. Frankly saying if we talking about complex web apps majority of screens you will need to design contains, or just is a big grid. As I’m one of the lucky ones to work on this kind of projects there is hardly a day that I don’t need to design one of those. So what is table? Combinations 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.

1. When to use tables, and what are the benefits?

Data table is great solution when you need to show a lot of information for big number of items. For example list of clients with their I’d, status, contacts, last activity etc… would be best displayed as a data table. There are many other benefits, like: great use of space, easy scalability, easy in development, user comfortable working with grids (majority already working with Excel for many years). Easy way to find and change something.

But remember, there a lot of ways to represent data. Decision to use or not to use grid should be driven by user needs. When you need to provide an overview/summary better to use more graphs than tables . For example, stock price history of some equity for a year can be shown in a huge table but chart is just much more effective way to soak in all this info.

2. What information to display?

The information you display in a grid and order in what user see it matters. So deciding what values do display an in which order plays crucial role in the end. It affects time and amount of effort it will require for user to complete his task. Selection of data points should be based on user personas and scenarios, previous application versions and good portion of logic. So don’t rush to design it, and 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 needles column to the table even if it looks empty, it will just distract user focus from important values. But it’s almost never a case, in most scenario us you have a stakeholder request to fit 23 columns in their oldest and smallest monitor. But think about it as too much of a good thing is bad. More columns you add harder for a users to scan it. Better be strict in you selection and remove everything unnecessary. Keep that secondary information hidden unless user is interested in list item.

3. Focus on most important

Try to position key columns from left to right ( this may be the opposite way, based on region you making design for ) this is based on the way we read information. Columns on the left will just get the most amount of attention and only if we interested I something we will check other columns.

The F-Layout relies upon various eyetracking studies for it’s foundational concept. These scientific studies show that web surfers read the screen in an “F” pattern — seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eyetracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.You can find out more about F-patterns in this artive by Brandon Jones http://webdesign.tutsplus.com

4. 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.

Right-aligned numeric columns
Left-aligned text columns
Column names aligned as 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.

5. Size matters

The form of the table should be based on users needs and abilities. More information table display, more complex its gets, fonts and row height are getting smaller to fit more rows above the screen fold. On other hand if you know number of rows will not be so big, like for example list of items in your shopping cart you should not make it very small.

Very often smaller size is the way to go. When you have huge lists of items, number of items you can display without any scroll or interaction is very important . Decreasing row height sometimes increase number of items you display above the fold twice and that’s a big deal. Usually you want row height to be thinner till the point it still look clean, and information don’ t blends in one big mess.

But, don’t get me wrong I not encouraging you to cram as much as possible in your screen real estate. Try to double your whitespace. Even if data table has a ton of information if you have decent padding your design will look not heavy.

6. Typography

In design typography is one of key thing that either make your work great or ordinary, or even terrible. Tables design is not a difference. Art of working with fonts is not a part of story and I not the best person to talk about it ) Here are several tips even I can give

Don’t Use All caps as is hard to read
Avoid using Serif fonts as they create additional visual noise
Avoid using bold and italic
Use good fonts only

7. Remove everything unnecessary

You probably heard term clean design to often before you reading this article. What I try to say — less is more. User interface should be as invisible as possible. Especially when dealing with big amounts of data, you already putting a lot of pressure on human that will be working with you product, so no need to add visual distractions. Your goal is to make content shine not the wrapping around it.

Remove needless separators
Remove Row stripped background
Remove shadows, 3d effects, glow etc..

8. Avoid Duplication

I see needless duplication very often in UI design. It has big impact on readability as it ads additional items that dont add any value.

9. Design Patterns and common interactions

UX designers can easily take advantage of users’ pattern-seeking tendencies. Key lies 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.