Two different modes, two different designs
A user opening a task list is scanning: looking for a specific row, a specific status, a specific number. A user reading the detail panel after they've found that row is reading: taking in full sentences, checking details before acting. These are genuinely different cognitive modes, and a screen designed for one performs badly at the other.
Most interfaces get this backwards — writing full sentences into a table row (scan mode) or cramming a detail view into a dense grid (read mode) — and users end up working harder than the content requires.
Designing each mode on its own terms
Scan surfaces need fragments, not sentences
A table cell should show "Overdue — 3 days" not "This task became overdue three days ago." Scanning eyes read fragments and keywords, not grammar.
Consistent column position, every row
The eye learns "status is always column three" after two or three rows. Any layout that shifts field position row-to-row breaks the scan pattern users have already built.
F-pattern and Z-pattern are real, design with them
Users scan text-heavy pages in an F, and simpler layouts in a Z. Put the highest-value information along those paths — top-left first, then across, then down — not buried in a corner the pattern skips.
Reading surfaces need line length and rhythm
A detail panel of full sentences needs 60-75 characters per line and real paragraph spacing — the density that works for a scanned table actively hurts comprehension here.
Bold sparingly, only for scan anchors
Bolding an entire sentence defeats the purpose — bold text is what a scanning eye locks onto, and if everything is bold, nothing is an anchor anymore.
Let the transition between modes be a deliberate moment
Clicking a scanned row to open a detail view is the exact moment a user switches from scan to read mode — design that transition (a slide-in panel, a clear focus shift) so it reads as a deliberate mode change, not a jarring page reload.
Test scan surfaces by covering half the screen
A practical check: cover the bottom half of a table or list and ask whether the visible rows still communicate their key information clearly. If the answer depends on scrolling to read every field in full, the layout is asking users to read when it should be letting them scan — a strong signal to cut copy and lean harder on fragments, icons and consistent column position.
The takeaway
Scan surfaces need fragments, consistent column position and sparing bold; reading surfaces need real line length and paragraph rhythm. Design each mode on its own terms instead of splitting the difference, and make the transition between them — click a row, open a detail view — a deliberate moment rather than a jarring reload.
Let's talk about your productRelated reading
Visual Design · Hierarchy
Contrast, Weight and Whitespace: The Three Levers of Visual Hierarchy
Visual Design · Typography
Typography Hierarchy in Dashboards: Guiding the Eye Before the User Reads a Word
UX · Interaction
Micro-Interactions That Earn Their Keep (and the Ones That Don't)
See this thinking applied in production on the FarmGate case study.