Edgi

Data tables and their role in visual design

Tables are a visual way to display complex data without the clutter and chaos of a long and unorganized list. In situations where you need to present large or complex sets of data in a format that is easy to read; using a table can achieve this.

Data tables use rows and columns to convey relationships between different items within a dataset. In practice tables can be used anywhere; whether it’s information about your customers or tracing how you spend money.

In this post, we’re going explore some examples of how tables are used in different aspects of visual communication to store and present information.

History of tables in data storage

Ancient data table for maths
One of the oldest surviving data tables

“Data tables” have been around for nearly 4,000 years. The ancient Egyptians used them to explain complex calculations.

In addition, their scribes and accountants would use a papyrus scroll to record financial transactions and other economic data in columns and rows. This is a very similar layout to what we see today in “data tables.” The data table also has its roots in the hieroglyphic script, where tables of numbers were arranged in vertical columns with horizontal lines.

The first modern tables appeared in mediaeval Europe during the 12th century and were used for statistical analysis.

Nowadays, we use computers for drawing tables in all fields from biology and economics to User interface and graphic design.

The role of data tables in 4 example use cases

Consider these reasons to use a table to avoid a long, rambling paragraph in visual design:

To provide a concise overview of complex information.

a classic example of using data tables for visual communication
The periodic table uses colored rows and columns to illustrate every element in the universe.

A good example of this is the way data is organized in the periodic table of elements to promote learning and understanding. The periodic table uses colored rows and columns to show how every element in the universe relates to others.

Reports that contain complicated data may also benefit from tables that break down information into smaller chunks.

To compare or contrast two or more items

Tables are good for comparing or contrasting two or more items, they can be as simple as a list of numbers and descriptive words 👉👇 or as complex as a statistical analysis of a businesses performance.

In accounting, tables are used frequently as a way of making comparisons of business performance, budgets and much more.

Over a particular period of the time. Accounts can be grouped together in a number of different ways, so this makes it easy to compare something like turnover or profit margins.

Sample table of accounts for a small business

To present complex information divided into smaller, more easily digestible parts for Visualization

Data tables often use color to divide information into smaller, more easily digestible parts. This allows the reader to focus on one piece of information at a time without getting overwhelmed by the whole. The goal in this case is to give the reader fast and easy access to the section of information he needs.

The most effective tables are simple, easy to understand and visually appealing. the table pictured here table clearly identifies what data is being presented. Headings are clear and descriptive so the reader knows what data is being presented.

Notice how groups of information are in a separate row with a heading above it so the reader can quickly skim down to see.

To help organize content on your page to improve user experience

The underlying structure of modern web layout design is a bunch of rows and columns used to create a user experience that is both attractive and functional.

A well-designed table is not only visually appealing but can also improve the usability of the information it contains.

Usability is more than just whether your website can be parsed by screen readers, It also about how information flows among the rows and columns of data

data tables as a basis for digital layouts

Planning your data tables

When considering if a table is appropriate for your design, ask yourself if you need to communicate a lot of information that is not hierarchical. Does this information have columns and rows?

The next step is deciding if you want to use a horizontal or vertical layout. The choice should be based on the type of information you are presenting. If your data is more wide than tall, then you will likely want to use a horizontal layout. If your data can fit, either way, make sure you test it both ways to see what fits the best with the rest of your design.

Finally, make sure that your table will fit within the space you have allotted for it. It should not draw attention away from the other parts of your design when it appears.

data tables with horizontal scrolling
Horizontal scrolling is useful when presenting large datasets.

Conclusion

Tables are an indispensable tool in visual design, whether it be for formatting data or creating a user-friendly dashboard. Visualizing data is an essential part of creating a great user experience, which makes tables a great tool to have in your designer’s toolkit.

If you use Adobe XD in your workflow and have been searching for an efficient means to create data tables, then you should check out our Tables Plugin which does this for you with ease.

See you later!

0 Comments