Displaying Lots of Data: Table Usability


Poor usability with workplace applications is no secret

The usability requirements and tradeoffs for workplace app designs are different from consumer apps. As UX experts, we have to focus on different points. For consumer apps, we tend to focus on the UI and fix show-stopping roadblocks. Meanwhile, for workplace apps we must focus on making the day-to-day tasks easier and more efficient for the users that have to use this product. You can read more on this topic in this article.

One of the major differences between consumer apps and workplace apps is the sheer amount of data that it holds. The more data you have, the higher the chance that information is displayed in a table. They are a compact way of showing multi-level information. However, large tables present challenges to both designers and users. Table usability must be good in order for the table to actually work well.

In this article, we will discuss the following four points:

    • 1. When to use tables
      2. What main user tasks are in a table
      3. What users need for good UX
    • 4. How to avoid information overload

When to use tables

When it comes to data presentation, tables are definitely not aesthetically pleasing. Compared to other ways of displaying data such as charts, dashboards, or cards, tables are unexciting. The reason is obvious – all of the other examples are more visual, whereas tables rely solely on text and numbers.

Tables appear cold and cluttered, but they do have one important advantage: they are capable of holding multi-level information. A single chart, dashboard, or card is incapable of displaying large amounts of data without defeating their purpose. Moreover, adding rows and columns is straightforward and easy with tables. However, the key to creating a good table is usability.

Common main user tasks in a table

Tables displaying large amounts of data are capable of four main user tasks.

  • Finding records that fit specific data
  • Comparing data
  • Editing data
  • Taking actions on records

visual display of main tasks of a usable table

What users need for good table UX

1. Table basics

When creating a table, the basics listed below are must-haves no matter the content size. These features are key to making tables productive and easy to read for the user tasks mentioned above.

✅ Scrolling behavior

Rows with extensive text should be scroll-able to reveal further information. It is not user-friendly when you try to provide all information in one view – this is one of the main causes of information overload.

✅ Sticky headers, or rows and columns with toolbars

Providing users with sticky (sometimes called “frozen”) headers, rows, or columns. This is an easy way for users to navigate, and makes it easy to compare data side by side. Furthermore, giving users the choice of which information they can freeze increases the value of the tables.

✅ Ability to make actions in bulk

When users want to edit an entire group of information, clicking each entry one by one is inefficient. A bulk select option can speed the user through their tasks.

✅ Alignment

Text aligns to the left according to standard reading conventions. It is important to note however, this may change depending on what writing system the table is using. Meanwhile, numbers to the right to line up place values consistently. Headers are aligned to the data in their respective columns so users can easily group the type of information they’re looking at.

Visual display of table basics

2. Importance of Data Relevance

Let’s talk about another crucial point that is necessary for users dealing with large table usability. Users need to quickly find and compare data that is relevant to their role, goals, or needs. However, with only the basics, their eye will still have to swim through overwhelming loads of information. The following are the most useful features to include in a dataset table for your user.

Column and row management

Users only need to see what’s relevant to them. The best way to make this possible is to provide users with the ability to reorder, hide, or resize columns. This works for both columns and rows, but is most commonly used for columns, as they present the distinctive types of information that relates to the rows.

✅ Filtering and sorting

Filtering and sorting allows the users to hide information that isn’t relevant to them. Combined with column and row management, users can process a minimum amount of data, ignoring all other information that is not useful to their needs.

The complexity of filters should be based on the user’s needs. No matter the complexity, include select, deselect all, and search for your filters — especially for large data sets.

Examples of data relevance

How to avoid information overload

Now that we have covered the basics, let’s get to the important part: How can we keep tables useful without overwhelming the users?

✅ We can utilize modals, expandable rows, and viewable sidebars when users need to take extra actions or view more information.

It is worth pointing out that modals and sidebars are the best option if users have to make edits in the table. These options would allow more space for users to click or type, and appear visually separate from the table. Users can focus on a specific area of the table, reducing the possibility for them to make a mistake.

On the other hand, expandable rows would not take any content space away, allowing users to have the option to view the full table.

examples of how to display further information

✅ Duplicating words

Avoid duplication. Words that repeat themselves in a row can be omitted and put into the column head, which will drastically reduce the amount of visual overload.

example of duplicating words

✅ Harsh lines

Harsh lines can make a table look busier than it actually is. Use thin, light colored lines in order to make the content easier to read.

example of using table lines

✅ Leveraging visual cues

There are multiple ways to separate your eyes from text- and number-heavy elements. These are called visual cues. Elements such as icons, images, color coding, and font size indicate status, groups or single pieces of data, and other important information at a glance.

example of leveraging visual cues

✅ Zebra rows

“Zebra rows” are a way of alternating row color to improve readability. Users are less likely to lose their pace thanks to the visual cue. However, the color difference should be subtle so that it does not strain the user’s eye.

example of zebra lines

Conclusion

Showing large amounts of data in a way that is easy for users to be efficient and productive is tricky. Tables have remained a consistent way to do this. However, without good table usability, it can end up more confusing than helpful. With a better understanding of user habits and what causes visual strain, we can make workplace apps a painless experience. Good table usability when presenting data increases productivity, efficiency, and reduces the margin for human error.

 

References

Get in Touch

Learn how Standard Beagle can help you turn your customers into raving fans.
Schedule a short conversation to talk about how Standard Beagle can be your guide.