Explore limitations with tabular layouts

🧩 Background

The component used for list views at various different places in GitLab has a very brittle layout that could easily break when a substantial change to the table content is rolled out. This is now becoming a blocker in delivering solutions that could provide GitLab users more value from certain features. A couple of areas that have been facing issues while a number of changes are still in works are:

  1. Pipeline and job index page under CI/CD
  2. Environments page under Deployment

That apart, there's a glaring visual and interaction inconsistency in the implementation of table views across various pages in the product – especially with the fact that tables and list views can be used in very similar scenarios.

Tentative proposal

To deal with the above-mentioned problems, and to make the table component more robust and behave consistently, it is important to understand the different limitations with the component, keeping all the usability and technical challenges in sight.

Below is a high-level plan to approach the redesign process:

📝 Plan

🎢 1. Audit existing table views

Perform an audit of existing pages within GitLab that uses the table view, and possibly the list view. Focus more on the pages within the CI/CD areas.

👉 See Figma File with table views

👥 2. Analyze results

  • Identify usability pain-points and what works well on the current component
  • Identify the types of content and actions most commonly used in table views
  • Understand how users use table views today
  • Understand how tables vs list views are being applied in the product

🎯 3. Define addressable problems

Create a list of problems to be addressed in the component, and an issue (or list of issues) to tackle them

Next Steps

After we understand the context and identify & break down the problems, we will propose patterns to fix them and work with Foundations to turn those patterns into new components & guidelines, or or iterations to the existing ones.

References

  1. https://material.io/components/data-tables
  2. https://www.patternfly.org/2020.04/documentation/react/components/table#examples
  3. https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
  4. https://design.gitlab.com/components/table
Edited by Veethika Mishra