Dense data products fail on hierarchy, not on volume

A dense product doesn’t fail because it carries too much data. It fails because it shows all of it with the same weight. When every field has the same size, color and spacing, the eye has nowhere to start, and the screen stops telling you anything.

Hierarchy is a decision about importance

Nielsen Norman Group defines visual hierarchy as the structure that guides the eye to the most important elements on a page. It is built through color and contrast, scale, and grouping.

On a dense screen the decision is which three numbers drive the next action. The rest is support. If nothing steps back, nothing stands out.

The same article states the idea in one line: if everything is contrasted, then nothing stands out.

Weight and space before color

Two levers carry the hierarchy: type weight and space.

Weight marks the primary number in a row, and the primary row in a group. Space separates groups, because an element with more room around it is read as one unit. That is the proximity and common region principle, from the same article.

Nielsen Norman Group recommends no more than three type sizes and no more than three contrast variations in a complex design. A dense screen that respects that budget spends color on exceptions, not on structure.

The cost of color as the only layer

WCAG 2.2, success criterion 1.4.1 at level A requires that color not be used as the only visual means of conveying information.

Two consequences follow for a table. First, a green cell and a red cell mean nothing alone, because color needs a second channel: the value, a word, an arrow. Nielsen Norman Group records that up to 4.5 percent of the general population has some form of color blindness.

Second, color doesn’t order values. The same article notes that people don’t perceive different colors as being in a particular sequence, so color encodes category and never magnitude. A gradient across cells asks the reader to rank what the eye can’t rank.

The two NN/g articles disagree on how much work color can do. The visual hierarchy piece lets saturated color mark important items. The dashboards piece keeps color in a secondary role, reinforcing what another channel already said.

Color also spends attention. A palette of six alert tones on one screen leaves no room for the one line that matters.

Grouping sets the scan path

Group related columns, then separate the groups with space instead of a border. Space is lighter than a line and holds up better on a small screen.

Carbon Design System advises placing data tables in the main content area with enough room to display data without truncation. It also warns against nesting a table inside another table, or inside a container that forces truncation. A squeezed table isn’t a dense table. It is a broken one.

Filter and sort are part of reading

Filter is how the reader asks a question of the table. Sort is how the reader finds the extreme.

Both belong to the reading loop, so both stay visible next to the data, with the active state named in words. When the filter hides behind an unlabeled icon, reading the table turns into setting it up.

Jakob Nielsen describes the split. Everything the reader needs often stays on the first level, and the primary view can’t hold too many options, or it stops focusing attention. He also notes that designs past two disclosure levels usually have low usability.

When the filter returns nothing

An empty result is a state of the interface, not a mistake by the reader.

Kate Kaplan names three jobs for an empty state: communicate the status of the system, teach the system, and offer a direct path to the key task.

Three cases need three messages. No data exists yet. Data exists and the filter excluded it. The filter itself is invalid.

Each case needs its own exit: create the first record, clear the filter, fix the term. A blank panel with a zero makes the reader think the product is broken, and they trust what they see.

Row density

Row height is a reading decision, not a style preference.

Carbon keeps the header row and the body rows at the same height, and warns against mixing row heights. It recommends the extra large height only when a row holds two lines of content.

A tighter row fits more context on one screen and separates rows less. A light rule or an alternating background restores the row without adding weight to the text. The spacing and grid guide applies the same rule to the screen as a whole.

Number alignment

Numbers are read digit by digit, so they are right-aligned. Text stays left aligned.

The GOV.UK Design System implements this through a numeric cell format, which right-aligns the numeric columns.

Two details complete the alignment. Decimals line up on the separator, and the unit lives in the header instead of repeating in every cell.

Reading on a small screen

The GOV.UK Design System offers a class that reduces text size on small screens when a table holds a lot of data, so each value has more empty space around it. The same page warns against using it on a table with little data.

Fewer columns beats a smaller font. Keep the two or three columns that answer the main question, and move the rest into a row detail.

Jakob Nielsen lists deferring secondary material as a key guideline for mobile design. The narrow screen is where the hierarchy decision shows.

When the dense table is the right answer

The table wins when the reader needs an exact value, when comparison runs across two axes, and when the exception is the point.

The chart wins when the question is shape or magnitude. Nielsen Norman Group notes that visualizations should use length and 2D position to communicate quantitative information quickly. A bar answers which value is bigger faster than forty rows.

The chart loses the exact value. Reading a bar to the third digit is guessing. So the visual alternative loses in three cases. The reader looks up one field per row, the values are close and the ranking matters, or the number will be typed somewhere else.

The dense table is also the lazy answer in two cases. First, when the question is a single aggregate that one line could answer. Second, when nobody will ever open a row.

The laziest case is a table used to avoid deciding what matters. That is the same failure as the flat screen, in a different shape.