Tips for designing modern tables
Every product designer encounters tables during work on a big product. User tables, product tables in e-commerce platforms, bill tables or task tables, and others (your example 🙂). As a result, we question ourselves what style does help faster orient in the table and will look great, how to design sort by column, where to place bulk actions with rows, etc.
In this article, I’ll share my thoughts about the table design and I hope that it will help you.
1. Row styles
Table rows can have different styles:
- Zebra style;
- Separation by lines;
- Hybrid option with previous two;
- And option with borders between columns.
If the table has not many columns and information we can use just borders between rows.
I use a hybrid style (zebra and lines) for most tables. I find this way the most convenient style for the view. You can compare different options by looking at the gif below.
But if the table has many columns and a lot of information we can separate columns by lines.
2. Column names styles
Column names should have different styles from other rows, they can be bold or less visible but different. Because our eyes are scanning table like this:
If your table has a sort by column option — it must be interactive. Most operations systems and well-known websites use the same pattern.
Additional tip: If content doesn’t show immediately better to add animation of loading.
3. Actions with row
Sometimes we need to delete or edit items in the table. How we can imagine It depends on the number of possible actions and the amount of information in the row. If there are only 2 actions and we have enough space — we can display it with the words.
To use only icons it’s the more compact way. I recommend adding tooltips to the icons even it’s familiar for most users.
If you have more than two actions better to use the button with a dropdown where will be all your actions.
4. Bulk actions
I mean by the words “Bulk actions” actions with a few rows, for example, if we want to delete or update a group of users. And appear questions:
- Where to place buttons for bulk actions?
- Would be they visible every time or will show/hide?
- Would be table move when buttons will appear?
I like this option because it doesn’t move the table, saves place, and adds interactivity to the table.
5. Search
And let’s make search interactive too!
Pro tip: Test your design with real data
Beginners in design create tables with usual text and it of course great looks on design. But they forget that a user can have a name like “Carolus Andriamatsinoro” 🙂 and titles of some products may not fit in one line.
These things better to foresee before developers begin to work on your design and end-user to see the broken table.
Thanks for reading! If this article was useful for you — please mark it liked and write comments if you have your thoughts about this topic. Any feedback is always welcome!
Follow me on Medium and Linkedin for other interesting articles: https://www.linkedin.com/in/baikovsky/
