Data Table Web&Mobile Design

Why do we love tables?

Data tables are effective due to their ability to organize information and data in an orderly manner, allowing the user to easily scan, compare, and analyze the information of their choice.

Table Elements

Everything is start form Header

  • Try to keep the padding of the header at 16px minimum — this will prevent your design from looking too heavy and crammed.
  • Fix header. It allows users to understand and scan data tables easily (NO needs to scroll up. Yeah!).
  • Or you can Fix Column. The most common pattern — use back-side navigation. Same things here.

Progressive Loading vs Pagination

The first way to reduce the data loading time is by splitting the dataset into parts (pagination) and show each one on a separate page.

Every single case should choose its own customization according to the user-flows, devices, etc. The example could be the place of pagination component on top/bottom or on both. The main goal is to allow users to easily toggle between the pages without excessive scrolling.

An alternative could be progress loading. Somehow it's a more restrictive way from the user side perspective. This case doesn't allow users to skip straight to the last few datasets if required.

Filter & Customizable Columns

The more flexible your filtering system, the easier it is for the user to manipulate their information. How we can reach it:

  • Customizable columns allow the user to personalize the data table according to their preference. This is used when there are multiple metrics and data sets involved, and when your users have different objectives when using the data table.
  • The filter component is essential for reducing the amount of data shown based on the user’s requirement. It's also great to include filters based on each column that has a fixed input field; meaning the input is not random and that there’s a fixed selection.

Sorting

Sorting is NOT filtering. It's a way that rearranges the information based on the user’s needs. In most cases, the “date” or “number” column sorts a table by default — users are then able to click on the header title to sort the table accordingly.

You can add sorting to most of the header titles to sort the respective data either numerically or alphabetically. Good to mention, that NOT all variables should have a sorting feature.

Better to avoid chevrons and stick with arrow icons to increase visibility. Use hover states to provide visual cues that the header title is clickable — make the whole area clickable.

Multiple Actions

Checkboxes for the Filters and Selecting rows:

  • Normally maintain the checkbox size at a minimum of 24px and centered on the row to improve usability. In addition, the selected rows should have a different background color to highlight it.
  • Good to include checkboxes within the filter dropdown.

Font Style & Links

  • Best to use but try to avoid serif fonts as they tend to be attention-grabbing — creating additional visual noise.
  • Also, avoid capitalizing the words as it would make your design look heavy.
  • Choose a font for numbers — make sure it contains equal-height (lining) and equal-width (tabular) numbers.
  • Check out the assortment of special characters. For example, the characters “$” and “%”. You can test the characters “%” and “$” by using the following test: $ 123 456 789.00%.
  • Check the design of each number — make sure “one” is not like “seven” and “five” is not like “six”, etc.
  • When including text links in your design, use a different color to highlight this to your users — just bolding or underlining the text doesn’t provide enough visual cue.

Experience Designer