Designing smarter data tables
Data tables are hard. There are many different ways to think about them. So, naturally, the first step would be to figure out what your users need.
- Do they want to see as much information as possible?
- Do they want to compare the information?
- Do they want to execute actions quickly?
- Do they want to view only and export the table to Excel?
Depending on that you should think, what functionality and design choices make these tasks easiest to do.
Visuals
Table design should be as minimalistic as possible. Adding elements without reason will increase eye strain and reduce readability. After all, we are designing a tool.
Colors
Data tables should have as few colors as possible. You can specify one for negative and positive trends and the header. This way elements that need to be seen can be seen, but they won’t add excessive clutter.
Font and border colors should not be black. Opt for dark grays for fonts and light grays for borders as they reduce eye strain and won’t make the table look as daunting.
Dividers
Having dividers is not always necessary. Add them if extra clarity is required.
It’s very popular to have only horizontal dividers. It leaves a clean, relatively spacious look. Opt for vertical dividers, when you have many columns and they get too close together.
With smaller, less dynamic tables, you can leave out all dividers and get a striking look. This, of course, is more for beauty projects rather than tools.
If it becomes hard to follow rows (or following them is what users do a lot) you can always separate them with either borders or alternating colors. Making your borders gray will reduce eye strain significantly. Also, if your tables don’t have many rows, alternating colors might make people think that highlighted rows have special meaning.
One less conventional way to separate rows is by highlighting rows with hover effects. This will look great, but it won’t bode well with mobile users as they don’t have a mouse to hover with and power users who might want to use their cursor for other purposes.
White space, line-height
Adding white space will increase readability and most users are happy to scroll more for that perk.
Lower line-height means having more info on the screen at the cost of readability. Too long line-height will make it hard to compare rows. If you are feeling extra fancy, you can have buttons that change the line-height to accommodate everyone’s needs.
Typography
Alignment
Generally, you should align text left and numbers right. This way it’s easier to differentiate between the two and numbers are easier to compare. In addition to that, you should align the table headers according to their column data as that makes your table more structural.
When your table has cells with multiple lines of content (eg subtitle or description) you should align cell content to top. Otherwise, you may have cells where the text starts from the second line, relative to cells with multiple lines. This will reduce the structure of the table.
Tabular numbers
Tabular numbers are designed so that every digit takes up the same amount of space. This is very useful in table design as tabular numbers are very easy to compare.
Digits like dates should be formatted in a way that they are always the same length. For example instead of 16/4/2020 you use 16/04/2020.
Functionality
Often you don’t need to add dozens of features to your table. Tables are already filled with information and unnecessary features add only clutter.
When choosing what functionality to add, you must know what the end-users expertise is. Ask yourself if they can manage all the data manipulation tools you want to add.
In addition to that, important functionality must be easy to access. For example, having buttons at the end of each long row might prove to require a lot of cognitive effort as users will have to follow the row accurately.
Here are some examples of functions to spark creativity:
Sorting and filtering
Sorting and filtering are almost always justified. Unless you are making a fancy table for less than 10 items, sorting and filtering will simplify almost any task.
Sorting should present users with logical ordering rules — alphabetical, edit time, insert time, or any other that makes sense in their specific use case.
You can implement sorting in two ways. First would be to put a button above the table which will open up a modal where the user inputs their sorting logic. The second one would be to have sorting buttons by the headers of columns that support sorting. Additionally, you can add a hover effect that will show an explanation.
Resizeable columns
Resizeable columns are good if the length of data in the same column may vary. Other than that, with more static tables, it may simply complicate things for no big reason.
Customizable columns
If comparing data in the same row is important, being able to reorder the columns or hide unnecessary ones will be a powerful tool.
If it seems unreasonable to invest time and money into implementing this, then make sure to pay close attention to the order of your columns.
Expandable rows
This feature can add a lot of dimension to your tables. Instead of having more columns you can show elements in greater detail in a modal window or an accordion. This way users can get important data quickly but can dig deeper if required.
You can also hide buttons to many different functionalities into these expansions.
Hover actions
Common actions, such as delete or edit, should be made easily accessible. One way is to present them while the user is hovering over a row. This will reduce visual noise quite a bit, but newer users might have trouble finding them at first.
Bulk actions
These common actions should also be made possible to do on multiple rows at once. Often this implementation is the only one required as you can do single line actions this way too.
Cell editing
Cell editing is a complex topic of its own. There are numerous ways to tackle the problem and different use-cases might benefit from different options.
Here are some ways to add cell editing to your table:
Having an input field in every cell
Good for complex tables, that requires a huge amount of flexibility and freedom to edit.
On the other hand, this will make it easier for your customers to make mistakes. It also causes issues with UX as users may not know whether the inserted data got saved or not.
Edit button by editable cells
In this solution, users have to make more clicks, but it’s easier to implement and general confusion is much lower — most people are already familiar with related iconography.
If overused, it can add a lot of clutter. There is already very little space and heaps of data. To counter that you could use hover effects, but then you can’t distinguish editable cells by a glance.
Edit button by rows
This way you can open up a modal (or something even fancier) for each row and fill in the data in an editable cell on that row. To reduce visual noise you can hide the buttons behind hover effects.
I certainly didn’t cover everything there is, but I hope the most important thing came through — Keep in mind what the end-user is used to, what they want to do with your table and how these tasks would be easiest to complete. To make your tables shine they must be as concise as possible rocking only features that are needed. Last, but not least I want to thank Uku Pattak, Mirko Känd, Lydia Petrova and eAgronom team for their advice!
References
- UXdesign — “Design better data tables”
- UXdesign — “Design better tables for enterprise applications”
- UXdesign — “Designing data tables for reusability”
- Material design
- Mobile Spoon — “How to design data tables that don’t suck”
