Made with 🧠 and 🫀 by Youssef Bouksim

Back to library
💎

Law of Prägnanz

The mind gravitates toward the simplest, most ordered interpretation of any visual. Given a choice between complexity and simplicity, perception always resolves toward the cleanest possible form.

5 min readUX · Visual Design · AI

Prägnanz is a German word meaning “conciseness” or “precision” — the quality of being expressed in the most essential, clear form possible. The Law of Prägnanz, one of the core Gestalt principles formulated by German psychologists in the early 20th century, states that when the visual system encounters ambiguous or complex stimuli, it automatically resolves them into the simplest, most stable, most regular form available.

When you see a circle partially hidden behind a rectangle, your brain perceives a complete circle — not an arc. When you see a complex diagram, your eye finds the dominant axis first, then the secondary structure, then the details. The perceptual system is constantly performing this simplification, before any conscious thought occurs. It is not a choice users make; it is a reflex that happens to all visual information, every time.

For designers, Prägnanz has a direct prescription: the structure of your interface should match the structure the brain wants to find. When information is presented with clear hierarchy, clean grouping, and obvious visual order, the brain's simplification reflex confirms what it sees and moves on. When information is presented without clear structure — equal weight everywhere, no dominant axis, no clear grouping — the reflex works against comprehension, producing fatigue and confusion rather than clarity.

✦ Key takeaways
✓
Hierarchy is not decoration — it is perception. When one element is visually larger, bolder, or more contrasted than its neighbours, the brain reads it first — not because the user decided to, but because the visual system has no other option. Designing hierarchy is designing the order in which a user perceives a screen, which is designing the order in which they understand it.
✓
Equal visual weight means equal cognitive load. An interface where every element looks similar — same size, same weight, same colour — provides no perceptual shortcuts. The brain cannot resolve it into a simpler form and must process every element with equal effort. This is experienced as complexity, busyness, or “hard to read,” even when the information itself is simple.
✓
Simplification serves the user, not the designer. Prägnanz isn't about making things look minimal or clean for aesthetic reasons. It is about reducing the perceptual work users must do to extract meaning. A dashboard that groups related metrics, a screen that leads with one clear action, an AI response that uses structure to surface the key point — all of these are applications of Prägnanz to real comprehension problems.
“Organisation always tends toward the simplest possible structure given the existing conditions — the law of Prägnanz.”
— Wolfgang Köhler, Gestalt Psychology, 1929

The dashboard — eight equal metrics vs a visual hierarchy

Analytics dashboards are the canonical example of Prägnanz failure. The temptation is to show every available metric — sessions, users, bounce rate, conversion rate, revenue, average order value, pages per session, time on site — at equal visual weight in a uniform grid. Every metric is present. None can be found instantly. The brain cannot resolve the grid into a simpler form because there is no simpler form: every element is equally loud.

Applying Prägnanz means establishing a visual hierarchy before choosing what to show. The three metrics that drive decisions get the top row, rendered larger and with more visual weight. Secondary metrics are grouped below in a smaller format. Related data sits in proximity. The eye has a dominant axis to follow, and it resolves the layout in a single glance rather than scanning every cell.

Before — eight equal-weight metrics
analytics.yourapp.com/dashboard
Analytics
OverviewReportsAudience
Sessions
24,182
+8.2%
Users
18,441
+5.1%
Bounce rate
42.3%
-1.4%
Conv. rate
3.8%
+0.3%
Revenue
$84,210
+12.4%
Avg order val
$124.50
+3.8%
Pages/session
3.2
-0.1
Avg time
2m 41s
+0:12
Sessions over time
PageViewsUsersBounceTime
/home8,4206,81238%1:24
/pricing3,2102,98044%2:10
/product2,8402,10031%3:22
Eight metrics at identical visual weight. The eye has no anchor, no dominant axis, no perceptual shortcut.
After — three primary KPIs, secondary below
analytics.yourapp.com/dashboard
Analytics
OverviewReportsAudience
Key metrics
Revenue
$84,210
+12.4% this month
Conv. rate
3.8%
+0.3pp
Sessions
24,182
+8.2%
Revenue over time
Secondary
Bounce rate42.3%
Avg order$124
Pages/session3.2
Avg time2:41
Three primary KPIs at full size, secondary data smaller and grouped. The eye follows a clear path: revenue, chart, context.

The good dashboard doesn't show less data. It shows the same data with a clear perceptual hierarchy: the three metrics that matter most are largest, the revenue trend is the dominant visual element, and the secondary metrics sit quietly to the right for when they're needed. The brain can resolve this layout into a simple form — “three numbers, a trend, some context” — and move on.


Onboarding — the instruction wall vs icon + one line

Onboarding screens frequently violate Prägnanz in the name of thoroughness. Every feature is explained. Every caveat is included. Every benefit is listed. The result is a screen with no dominant element — dense text blocks at equal visual weight that the brain cannot resolve into a simpler form. Users skim, miss the key point, tap through, and arrive in the product with less understanding than if they'd read nothing.

The Prägnanz-aligned onboarding screen has one dominant element — usually a large icon or illustration — and one sentence of supporting text per feature. The visual hierarchy is: icon first, title second, one-liner third. The brain resolves it immediately: “this is what this does.”

Before — equal-weight text blocks
9:41
Here's what you can do with Appname
Organise your work
Create projects and tasks to organise everything you’re working on. Assign due dates, set priorities, and add labels to keep your work structured and easy to find.
Collaborate with your team
Invite team members, assign tasks, leave comments, and track progress together in real time. Everyone stays aligned without needing to send emails.
Track progress automatically
Appname automatically tracks completion rates, time spent, and upcoming deadlines so you always know where things stand without manual reporting.
Get started
Three equal text blocks. No dominant visual element, no hierarchy. Users skim and retain almost nothing.
After — icon + title + one line
9:41
Everything in one place
Tasks, projects, and team updates — no more switching between apps.
Organise your work
Projects, tasks, priorities — in one view
Collaborate in real time
Assign, comment, and track together
Progress tracks itself
No manual reporting — ever
Get started
Skip
Icon, headline, three one-liners. The eye resolves it in one pass — Prägnanz at work.

The good onboarding screen has exactly the same information density as the bad one — the same three features, the same benefits. What changed is the perceptual structure. Each feature now has a dominant visual element (the coloured icon), a short title (the primary text), and a one-liner (the supporting text). The brain can resolve each row immediately and move on.


AI responses — the paragraph wall vs structured hierarchy

Language models produce text — by default, flowing prose with no visual hierarchy. A well-reasoned, accurate, detailed response delivered as a single paragraph is perceptually no different from a wall of noise, because the brain has no way to resolve it into a simpler form. Every sentence has equal visual weight. The key insight is somewhere in there, but finding it requires reading everything at the same cognitive cost.

Applying Prägnanz to AI output means structuring the response with visual hierarchy: numbered steps, bold labels, section dividers, and a distinct callout for the most important point. The information doesn't change. The perceptual cost of finding and understanding it drops dramatically.

Before — single paragraph, no structure
9:41
AI Assistant
How do I improve my website's Core Web Vitals?
To improve your Core Web Vitals, start with Largest Contentful Paint (LCP) by optimising your images — use modern formats like WebP, add width and height attributes to prevent layout shift, and use a CDN to serve assets faster. For Cumulative Layout Shift (CLS), make sure you reserve space for any dynamic content like ads or embeds by specifying dimensions in CSS before they load. For First Input Delay or Interaction to Next Paint (INP), reduce JavaScript execution time by deferring non-critical scripts and breaking up long tasks. You should also use lazy loading for images below the fold and enable text compression like gzip or Brotli on your server. Running a Lighthouse audit in Chrome DevTools will give you a prioritised list of what to fix first based on your specific site.
Follow up...
All correct — impossible to scan. Every sentence carries equal weight. The reader must parse the whole paragraph.
After — hierarchy reveals the shape
9:41
AI Assistant
How do I improve my website's Core Web Vitals?
LCP — Largest Contentful Paint
1
Use WebP images with explicit width/height
2
Serve assets via a CDN
CLS — Layout Shift
3
Reserve space for ads and embeds in CSS
INP — Interaction Delay
4
Defer non-critical JS and break up long tasks
Run a Lighthouse audit in DevTools first — it prioritises what to fix for your site.
How to fix LCP?
Good LCP score?
Tools to measure
Follow up...
Three labelled sections, numbered steps, and a tip callout. Users find their specific issue in seconds.

The structured response is also shorter. When structure does the organisational work, the prose doesn't have to — transitional phrases, repetition, and connective tissue disappear because the visual structure replaces them. The information compresses, the hierarchy expands, and the total cognitive load drops even as the density increases.


Applying this to your work

The practical test for Prägnanz is to squint at your interface. When squinting, all the detail blurs and only the visual structure remains. What you see when squinting is what the brain's perceptual system sees before conscious reading begins. If everything blurs together into a uniform grey mass — same weight, same size, same contrast — the interface has no Prägnanz. If a clear hierarchy is visible even through the blur — dominant elements on top, secondary elements below, clear groupings, a single visual axis — the interface is working with perception rather than against it.

✓ Apply it like this
→Establish a clear visual hierarchy on every screen — one dominant element, secondary elements smaller, supporting information smaller still
→Group related information together and separate groups with whitespace, colour, or borders — proximity creates perceived similarity
→Replace text blocks in onboarding and instructions with icon + title + one-liner structures
→Structure AI responses with section labels, numbered steps, dividers, and callouts
✗ Common mistakes
→Displaying all available metrics at equal visual weight — dashboards that show everything equally effectively show nothing clearly
→Using the same font size and weight throughout an interface — equal weight means no perceptual shortcuts
→Writing onboarding content as paragraphs — text blocks at equal visual weight cannot be resolved into a simple form
→Allowing AI to output unstructured prose for complex multi-part answers — without structure it cannot be scanned

Wertheimer, M. (1923). Laws of organization in perceptual forms. Psychologische Forschung, 4, 301–350. · Köhler, W. (1929). Gestalt psychology. Liveright. · Koffka, K. (1935). Principles of Gestalt psychology. Harcourt Brace.