IBM Expandable Table

IBM users work with massive amounts of data. Their tables can quickly become busy, making it difficult for them to understand their data. Expandable tables increase data comprehension, by progressively disclosing information to users.

My contribution
Co-created usability test
Low fidelity designs
High fidelity designs

Contributors
Kathy G., Researcher
Adam R., Developer

Year
2020

Time
2 months

👩🏻‍💻 Product audit

IBM built a unified design system, Carbon. My product team conducted an audit to ensure that Carbon’s components covered all our use cases.

⚠️ Problem

Carbon’s expandable table only supports descriptive text. It doesn’t scale for more complex use cases such as subcategories, child to parent relationships, etc.

Iteration 1

🤔 Intent

Indent every sub row to create a clear relationship between a primary row and its sub rows. This interaction leverages users’ mental models of submenus, which already exist in our product.

🧠 Stakeholder feedback

Indenting each sub row misaligns the content and decreases readability

Development feedback

Even though the expandable table design tested well, development had concerns about the table’s scrolling behavior. To illustrate their concerns, they quickly coded this prototype. The primary row is lost when scrolling, because of the multilevel indentation.

What happens when there are thousands of rows in a expanded section? What are the sticky points in that scenario?

Developer

Takeaways

• Get development involved sooner in the design process

• Use realistic data in usability testing to get relevant user insights

Final

Usability testing confirmed that data users need 2 types of expandable tables:

Table 1: Horizontally expandable table

Helps users understand a primary row’s related information

✅ When to use
For secondary information that adds additional insight to the primary row

🚫 When not to use
When the sub rows’ values add up to the primary row’s value. If this is the case, use Table 2: Vertically expandable table

💀 Anatomy

1. Back button: return to the non-expanded table

2. Search bar (primary table): locates specific data

3. Selected row: indicates the selected row

4. Header (expanded table): shows the expanded table’s name

5. Search (expanded table): locates specific data

6. Secondary rows: contains information that supports that primary row

Table 2: Vertically expandable table

Helps users understand the entries that add up to the primary row’s value

✅ When to use
If the sub rows values’ add up to the primary row’s value

🚫 When not to use
When the sub rows contain related information. If this is the case, use Table 1: Horizontally expandable table

💀 Anatomy

1. Column header (primary table): shows the primary table’s column names

2. Primary row: shows numerical and textual data

3. Column header (expanded table): shows the expanded table’s column names

4. Indented rows: contains the values that add up to the primary row’s value

5. Caret: expands and collapses the table

6. Leftmost indented column: labels the sub-values