E4.04.3horizontal overflow affordancedesignresearch

Horizontal overflow needs an explicit visual cue

Aliases: scroll shadow · clipped column cue · more columns indicator

What it is

When columns are wider than the viewport, the off-stage columns have no shape. If the clipped edge looks like a table’s natural end, people assume they have seen every attribute. A horizontal overflow affordance — a sliced cell, an edge fade, a shadow, or a pan hint — states that more columns exist. It does not freeze the header or the first column. It only makes the act of panning discoverable.

Why it happens

A viewport is a window, and what sits outside it has no silhouette. A clean right edge is read as the end of the object — especially on a table, whose grid is already drawing borders. Without an overflow cue, that end is mistaken for the end of the dataset, and comparison on distant columns is never attempted. The cue has to be incompleteness at the edge, not a small arrow in a corner: incompleteness shows that a window cut the object; an arrow has to be found and then interpreted as a control. When panning reaches the end, the cue should vanish or reverse, or it keeps promising columns that are gone. A hint that flashes only on first entry habituation-fades; later visits to a wide table are again treated as complete. Touch has no hover, so a changing cursor cannot leak the fact of overflow.

Studying it

Present the same wide table with a sliced last column, an edge shadow, a thin scrollbar only, or no cue, then ask “how many columns?” and have people find an attribute hidden at the far end. Record whether they try to pan, time to discover the far column, and false confidence that they have seen everything. Independent variables: cue type, whether the right edge happens to fall on a column seam (flush clips look most like an end). Dependent variables: overflow discovery rate, false “that’s all” judgements. Discovery should be worst when a flush clip has no cue.

Where it stops holding

A shadow on a table that already fits is a lie and invites empty pans. Overlay scrollbars that the system hides cannot be the cue. Screen-reader users do not see shadows; columns must be reachable through header navigation or a column picker. The visual cue only serves people who see the grid. A “see more to the right” button turns panning into explicit paging, which raises discovery and also slices the comparison surface into pages — a different interaction, not a substitute for an incomplete edge.

Applying it

  • Clip a last column so part of it is visible, or put a shadow on the overflowing edge that appears with the pan direction and goes away at the end.
  • Do not size the viewport to land exactly on a column seam; a flush cut is the clip that most looks like “the end.”
  • A scrollbar may supplement; it must not be the only cue, especially on platforms that auto-hide scrollbars.
  • How to check: show a first-screen shot, before any pan, to someone new to the table, and ask whether any columns are unseen. “No” when columns remain is a failed cue.

Related

  • Within the group: E4.04.1 Keep the table header visible while the rows scroll vertically · E4.04.2 Keep the first column visible while the table pans horizontally
  • Adjacent: E4.03 Tables · E5.11 Tabs
  • Search terms: overflow affordance · scroll shadow · clipped content

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E4.04.3