Learning session 41: Tables

Topic

Tables can be used to display data, create navigation, or provide a structure for users to interact with content. When used properly, tables can improve the usability of a website or application.

What I learned

Tables are perceived as overwhelming. But they are the most efficient way to organize complex information in a digestible manner. They help to organize information and make it easy to digest. They also allow designers to control the layout of content, making it more visually appealing.

Tables should help users to analyze data, get priceless data, and compare values.

Row height

The table’s row height should allow users to easily scan the information included in each row.

There are three standard sizes:

• Condensed — 40px
• Normal — 48px
• Relaxed — 60px to 56px

Column width

Another important component in table readability is column width. The width of each column will be determined by the width of its content, but readability must remain the top priority.

Make sure that the margins on both sides of a column are large enough so that users can easily peruse, and compare.

Designing the tables

When designing tables in a UX design product, there are a few key things to keep in mind:

• Make sure the table is easy to scan and understand at a glance.
• All information should be clearly laid out and easy to find.
• Use colors, fonts, and other design elements to help distinguish different types of information.
• Keep the number of columns and rows to a minimum. Too much information can be overwhelming and challenging to process.
• Allow users to sort and filter data according to their needs. This will give them more control over the information they see and make it easier to find what they’re looking for.
• Make sure the table is responsive and looks good on all devices. This is especially important for tables that will be viewed on mobile devices.

Sorting functionality

Sorting functionality is a common table feature that allows users to rearrange the data in the table according to their needs. This can be useful when trying to compare data or find a specific piece of information.

When designing a table with sorting functionality, it is important to consider the user experience. The sorting options should be clearly visible and easy to understand.

Toolbar in tables

Tables can gain a lot of functionality via toolbars. They typically serve a number of purposes and are located above the table. The toolbar allows you to add features like searching, exporting, printing, filtering and sorting, which improves the table’s data’s overall usability and utility.

Infinite scrolling

Infinite scrolling is an effective way to display a large amount of data in a table. It allows users to scroll through the data without paginating or loading new pages.

This makes it ideal for large data sets that would otherwise be difficult to scroll through. It's also important to ensure that the data is organized in a way that makes sense — this means using clear headers and grouping data together in a logical way.

Manual infinite scrolling

The concepts of pagination and endless scrolling are combined in manual infinite scrolling. Manual endless scrolling displays material in bite-sized bits when users scroll down the page but offers them control over the experience.

The advantage over pagination is that previous rows remain visible, but it does not immediately indicate to users how much data is left to load.

I came across a few questions that might help you create a table that achieves three key objectives:
A table that meets users’ demands, is simple to scan, and provides priceless data to users.

• What is the user’s intended use for this table?
• Which types of devices will the table be viewed on?
• Does the table need to be actionable by the user?

What challenged me

One of the challenges I faced while learning about tables was understanding how they are used in UI/UX design. In particular, I struggled to understand the importance of tables in terms of organizing information and presenting it in a way that is easy for users to understand.

Additionally, I found it difficult to determine when and how to use tables in my own design projects. However, after spending some time researching and practicing with tables, I began to better understand their usefulness and how to incorporate them into my work.

Thank you for making it this far.