Mike's Notes
This gem was listed in a recent Smashing Magazine article. Will be included in a future update to the Pipi Design System.
Resources
References
- Reference
Repository
- Home > Ajabbi Research > Library > Subscriptions > Smashing Magazine
- Home > Handbook >
Last Updated
03/10/2026
Designing Nested Tables: The UX of Showing Complex Data Without Creating Chaos
Damilola Bamgbelu: Product Designer, best known for crafting great experiences that deliver audacious results for both users and stakeholders.
...
Nested tables have a bit of a reputation. They’re often seen as messy or overwhelming, but when used thoughtfully, they can actually help users make sense of complex, layered information, without jumping between screens.
UI comparison of single vs. multi-level nested tables showing category data, with notes on usability benefits for each approach
I remember the first time I designed a nested table. It looked amazing in Figma: beautiful rows expanding neatly into sub-rows. I thought I was a genius.
Until user testing.
One participant squinted at the screen, clicked a few times, then said:
“Wait… where am I now? What row was I just looking at?”
That’s when it hit me:
Nested tables aren’t just about organizing data. They’re about organizing thinking.
…If you’ve ever struggled to design tables that show parent and child data together , without overwhelming users, this article is for you. Let’s walk through it step by step.
1. Always Start with “Why Nest This?”
Imagine you’re packing for a trip. Do you cram everything into your backpack just because you might need it? Or do you only pack what you’ll actually use?
Nested tables are the same. If users don’t need the child data right now to make a decision or take action, don’t show it inline.
Always ask:
- Why does this need to be visible right now?
- What task does seeing both parent and child data help users complete faster?
- Could a modal, tab, or progressive disclosure do it better?
If you don’t have a strong reason, nesting is clutter, not clarity.
As Steve Krug puts it in Don’t Make Me Think,
“Every element you add competes with every other element for your user’s attention.” [1]
The more things you show on screen at once, the harder it is for users to know what to focus on.
A designer processing thoughts on what design decisions to make. Source: Freepik
2. Keep It Shallow: Two Levels Max
Picture this: you’re standing at the edge of a swimming pool. Jump into the shallow end? Great. Dive straight into the deep end with no bottom in sight? Panic.
Deep nesting feels like drowning in data.
- One level of nesting (Parent > Child) is good.
- Two levels (Parent > Child > Grandchild) is manageable — if truly needed.
- Three or more? Stop. Redesign.
Humans aren’t built to track endless layers while scanning a screen. This aligns with George Miller’s Law, which says:
“Humans can comfortably hold 5 to 9 items in working memory.” [2]
If you must use multi-level nesting:
- Visually differentiate each layer (indentation, color bands, labels)
- Limit nesting to 2 levels
- Provide expand/collapse all and clear context cues
To borrow a thought Jared Spool and Steve Krug might both agree on:
“The deeper the nesting, the higher the cognitive load. Use with restraint, and always design for collapse.” [3]
3. Make Expanding and Collapsing Feel Effortless
Ever opened a drawer and it jammed halfway? Now compare that to one that slides open smoothly. That’s how expanding a nested row should feel: smooth, responsive and satisfying.
When someone clicks to expand a row, they should get immediate, clear feedback, such as:
- A smooth animation
- A skeleton loader
- A rotated chevron
These are microinteractions, small signals that say, “Yes, that worked.”
According to Jared Spool:
“Good UX reduces uncertainty at every interaction.” [4]
If there’s silence, delay, or confusion, users hesitate or worse, assume it’s broken. Every tiny motion helps users trust what’s happening.
UI showing nested tables with chevron icons to expand/collapse rows and a skeleton loader for loading child data illustrating that expanding and collapsing should feel effortless
4. Prioritize Scanning, Not Cramping
One of the biggest mistakes with nested tables is trying to show everything at once. The result? A wall of numbers, labels, and rows that’s hard to parse.
You know that feeling you get when you walk into a store that’s so packed you can’t even move? That’s how users feel when a table is over-stuffed with information.
Your goal: Make it insanely easy to scan. If someone can’t scan your table in 2–3 seconds and find what they need, it’s too dense.
How to improve scan-ability:
- Clearly indent child rows to show hierarchy
- Use soft shading or dividers to separate levels
- Keep typography clean and consistent
- Add sticky headers to maintain context
As Edward Tufte famously said:
“Clutter isn’t about the information itself. It’s a failure of layout.” [5]
Table UI showing clear row indentation for hierarchy, soft shading to separate levels, clean typography, and sticky headers to maintain context while scrolling
5. Never Leave Users with a Blank Expansion
Expanding a nested table row should feel purposeful, not like a dead end. Think of it like opening a fridge expecting leftovers, only to find it empty. No note, no label, no clue what happened.
That’s what it feels like when a user clicks to expand a row and sees nothing. When there’s no child data to display, it’s not enough to show an empty cell. A blank space can confuse users and make them wonder:
Instead:
- Explain the state: e.g. “No related tasks found”
- Suggest the next step: e.g. “+ Create Task”
- Make it visually distinct: muted icons, faded backgrounds, or subtle illustrations
This tiny design choice adds clarity.
As Luke Wroblewski advises:
“Empty space should guide users toward their next action, not leave them wondering what went wrong.” [6]
Nested table UI showing an expanded row with an empty state message and a clear call-to-action button
6. Build Accessibility in from Day One
You’ve designed a slick, responsive table. It expands smoothly. It works in dark mode. But here’s the test:
- Can a screen reader user understand the structure?
- Can a keyboard-only user navigate the table easily
If not, you’re unintentionally excluding users. As Whitney Quesenbery puts it:
“Accessibility is not a feature. It’s a foundation.” [7]
Nested tables add visual hierarchy and relationships that are obvious to sighted users, but completely invisible to users relying on assistive technologies.
Without proper semantic markup, screen readers can’t tell what’s expandable, what’s nested inside what, or even what content is currently visible. And for keyboard users, expanding a row should be as easy as clicking, but often isn’t.
To make a nested table accessible;
- Use semantic HTML
Use actual <table>, <tr>, <td>, and <th> elements — not divs styled to look like tables.
- Use aria-expanded and aria-controls
These attributes help screen readers announce whether a row is open or collapsed, and which section it controls.
- Ensure keyboard navigation
Users should be able to tab through parent and child rows, expand/collapse with Enter or Space, and not lose focus in the process.
- Design an alternate flat view
For users who don’t benefit from inline nesting (e.g. screen reader users), offer a simplified version — a grouped list or summary view that doesn’t require expanding/collapsing.
Accessibility doesn’t only benefit users with disabilities.
- Clear structure improves usability for everyone.
- Keyboard-friendly interfaces help power users navigate faster.
- Screen-reader compatibility often translates to better semantic structure and more maintainable code.
Side-by-side nested table designs, one accessible with semantic HTML, ARIA support, keyboard navigation, where the other lacks these features.
Final Thoughts
Nested tables aren’t the enemy. Careless nesting is. When designed intentionally, they:
- Reveal relationships
- Enable fast decisions
- Prevent unnecessary page hopping
But if poorly designed, they:
- Confuse users
- Increase cognitive load
- Exclude those who rely on assistive tech
Designers must treat nested tables not just as containers of data, but as tools for clarity and action. That means:
- Start with why
- Design for scanning and accessibility
- Plan microinteractions
- Never leave users wondering what’s happening
Good UX isn’t about making data visible.
It’s about making it useful, usable and usable by everyone. Nested tables are powerful. Use them with care.
References
- Steve Krug, Don’t Make Me Think, 2000.
- George A. Miller, “The Magical Number Seven, Plus or Minus Two,” Psychological Review, 1956.
- Paraphrased synthesis of ideas from Jared Spool and Steve Krug on cognitive load and interface clarity.
- Jared Spool, quoted in multiple UX talks and writings on reducing uncertainty in interactions.
- Edward Tufte, The Visual Display of Quantitative Information, 1983.
- Luke Wroblewski, “Designing for Empty States,” blog and presentations on interface design.
- Whitney Quesenbery, quoted in A Web for Everyone: Designing Accessible User Experiences, 2014.
No comments:
Post a Comment