Designing better data tables – a primer and resource guide.
As a designer working in the enterprise/B2B space for nearly 10 years, I’ve come to appreciate the critical function of a well-designed data table.
Data tables are critical because they make information actionable.
Databases are a foundational piece of businesses across the world. A data table is simply the visual representation of a database. For instance, Salesforce is a $100B+ company built on the visual organization of what is, in essence, a gigantic database. Google’s sole purpose is to “organize the world’s information.” From that vantage, consider the importance of a representation of that information that is easy to recall, access, add and edit.
How can we build better data tables?
- Start with a the basics
- Add core filtering, messaging, and feedback functionality
- Visual design and readability are important components
Google’s ‘Material Design’
I don’t think Material Design is the be-all-end-all, especially in the enterprise world. However, Google’s data tables are battle-tested (in Gmail especially) and common enough to resonate with users as a pattern.
If you want the details of hover states and column header sorts, please check out the Google Material Design page on data tables. I won’t cover those in detail in this article.
The basics:
- Clear delineation of rows and columns
- Column sorting
- Column hover
- A select-all checkbox
- Row checkboxes for selecting an individual row
What’s missing?
- Condensed/compact view
- Feedback — how can a user understand the impact of a given action?
- Selection actions
- Pageination
- Filters
- Export to CSV / Excel
You can’t go wrong combining the clean lines of Material Design with the advanced functionality of Quickbook’s data table design system.
In my experience, Material Design works well in the enterprise world — provided you make a few key additions. Here’s an example of a design that combines Material’s strengths with some of the necessary items to make a data table work even in a complex world (like Quickbooks, for instance).
Condensed view
Look to Quickbooks for inspiration.
If you’re looking for battle-tested enterprise-ready data table design, look no further than the Quickbooks app. Quickbooks has an incredible design system page just on data tables.
User feedback is critical to usable data tables.
Successful applications give users clear feedback about the results of their actions on a continual basis. Enterprise users are typically working fast in a complex business area — the results of their actions could have far-reaching consequences.
Column hover states gives the user critical context about data.
Build in hover states for column headers. Tooltips are usually best for this.
Feedback includes user messaging and UI animations.
Mouse clicks, text entries and other user actions are all opportunities to let the user know that the application is listening closely to their intent. In the example I’ve provided below, user messaging comes in a few different flavors:
- Notice how much information is revealed with the first mouse click
- (The red dots indicates a mouse click and is not part of system feedback)
- When a row is deleted, notice how much information is conveyed at once
The select all / select none / select some paradigm is one that shouldn’t be ignored.
A key interaction with table tables is row selection. This can be done individually, or in bulk.
The select all and select none actions are typically well-known. What’s less well defined (since it’s not a part of HTML) is the select some, or indeterminate state. Here’s a good article on indeterminate state. Having all 3 states allows your data table to handle all sorts of selection interactions.
Consider how “select all“ interacts with pageination.
In the above example, you’ll notice that the table gives the user feedback in the form of how many records are selected. Also notice the difference between selecting 1 record and selecting all records.
The “select all” interaction lets the user know that they’ve only selected the records on the first page in the pageinated results. It also gives them the option to select all options in the data table.
Also consider what actions a user can take with a selection action.
This can include move, delete, flag, mark as unread etc.
Exporting is important for users that want more functionality than you can offer.
Let’s not forget the humble ‘export’ button. Many users, especially those familiar with Excel, will want to be able to export the raw data and process it inside of a UI that they are more comfortable with (like Excel). Excel also has lots of functionality that’s not practical or reasonable to duplicate.
Filtering is a necessity in enterprise applications.
When users are faced with hundreds, if not thousands of records, the ability to filter becomes critical. Here we’ll look at the filtering example from Quickbooks, as they have successfully implemented this to hundreds of thousands of enterprise users.
In Quickbooks, applied filters don’t take up much space. They can also be deleted without having to open up the full filtering menu.
Visual design and readability are important pieces of the data table puzzle.
My only gripe with Quickbooks is that the core font (Avenir) just isn’t as readable as it should be, especially inside the data table. For excellent readability, I prefer Roboto, per Material Design’s specification.
Roboto is a readable alternative to the more in-style (but higher contrast, harder to read) geometric fonts like ITC Avant Garde, Futura and others.
Roboto also has a condensed style, perfect for column headers, since those often get truncated.
Consider all aspects of the visual design.
The header should stand out, as in the case of Quickbook’s design. Columns need clear separators (this is where I differ from Material Design’s standard).
Think about alternating row colors (should be subtle if used at all). Also consider link, button and accent colors and how those will look together. Quickbooks appears to use an orange status indicator and a blue interactive indicator, which might be initially confusing to users.
