In a sense, they’re meant to be that way. A good table communicates a lot of information in a concise, easy to understand way. Because the emphasis really should be on the information, over-designing a table can kill the effectiveness.
The tables are our friends. They allow us to show large amounts of information in a small space, but when designing tables for print or the web there are a number of guidelines you should keep in mind.
The main aim when creating a table of data is to make it easy to digest what otherwise could be a large chunk of textual information. It’s the designer’s job to choose suitable backgrounds, borders, typography, and images that go into a table to make it eye-catching and informative.
We all know that designing tables can be a headache, especially those with a lot of data to return. You need to take care of every detail while keeping consistency and clear legibility. Dan Romero is a UX/UI Designer living in Argentina who shares some tips to improve your in the best way.
The first thing you have to format is the hierarchy of the elements. Category row names need to be clear to scan data fast. And if there are some clickable elements and complementary text, they need their different format too. Play with sizing weighs, and colors to make clean flow.
Borders are one of the visual elements that will separate your content rows in your table. Don’t fill your borders with to heavy colors (like 100% black) to create a table that feels natural, easy to scan, and good looking. The content needs more visual weigh by color instead of the borders.
Spacing & Alignment
Proper use of spacing, as well as alignment of elements within tables, is essential. You can always design a compact version of needed, but if the product allows it: give the tables some room to breathe. The user will appreciate it.
String formats? What? These are the formats of how to return data to your UI. For example, for dates, you can return data in multiple ways: “1/4/20”, “01/04/20” or “01/04/2020”. To keep it clear and consistent, use the same formats in your rows.
It’s not an exception when it comes to the content table design. To bring not only better legibility but also a touch of delight, a smart idea is to put some color in tags, categories, avatars, or action buttons when hover.
Your table probably won’t fit on your mobile device and won’t have good readability here. Because of the limitation of the screen width, you have to re-design the table and re-arrange data content for smaller screen resolutions. Start with the smallest screen resolution and scale this up.
Tables are a frequently overlooked aspect of reading, sometimes overstyled, sometimes poorly thought out. Responsiveness is a particularly thorny issue as the best solutions depend very much on the utility of the table.
Tables can be packed with data, rich in content and meaning. Give them the attention they deserve. At the end of the day, tables are a method for the organization and presentation of data. It is important to figure out which information matters most to your users and decide on an approach that best serves their needs.