7 steps to design perfect data tables
This post is first from the series “UX of Data Tables“. Let’s get started with the first steps on how to design perfect data tables for high-density data and comfortable usage. This part is dedicated mostly to review the best practices and advice on how to display data tables and their data
First, it worth to say that the most advanced data tables are Excel🚀, and every data table you’re gonna build will be in some way compared to Excel experience. So how to build a useful, functional and effective data tables🤯? There are 7 major points I would like to cover to help you build better data tables
1. Give it more room - let your table fill as much space on the screen as possible. Try to avoid large footers, headers or nav menus
2. Data composition - combine similar data types into one column, example Full name
3. Pagination - try to provide useful pagination, divide portions of data by 50, 100 or even 200 items(avoid using an infinite scroll or “load more” — it decreases usability)
4. Color code - you can use color to mark significant data. Provide access to color legend(try to use less than 5 colors, to ease the cognitive load)
5. Remember view settings - this will remove the need for a user to re-configure preferable layout each time
6. Row/cell interactions - there is a number of ways to show active row or cell. Border, background color, elevation, etc.
7. Horizontal scroll - there is nothing wrong with adding a horizontal scroll to the large table. It much worse if columns shrink to a non readable width
And a few bonus tips
1️⃣allow to select columns and re-order
2️⃣allow controlling columns width
3️⃣allow freezing header
4️⃣allow freezing selected column
5️⃣you can use zebra coloring instead of lines (it’s arguable)
Hope it was helpful! Stay tuned for next parts of the series!
Will be happy to hear your thoughts, drop me a comment!
Thank you 👋