Elements arranged along a line or smooth curve are perceived as related, and the eye naturally follows that path.
Overview
The eye likes to follow smooth paths. When elements line up, whether in a row, a column, or along a curve, people perceive them as a continuous, related sequence and their gaze moves along it. Psychologists call this good continuation.[1][2]
When two lines cross, people see two continuous lines passing through each other, not four separate segments meeting at a point. The mind prefers the interpretation that keeps paths smooth and unbroken.
In interfaces, continuity guides people through content: aligned form fields lead down the page, a row of items invites scanning across, and a line in a chart is read as a single trend.
Why it matters
Alignment and continuous paths help people scan faster and understand order without effort. Broken alignment, by contrast, signals a break in relationship, intended or not, and creates a sense of disorder.
In data-heavy business screens, consistent alignment of columns, values, and labels makes comparison much faster and reduces misreading.
Key takeaways
- Align related elements so they form clear rows and columns.
- Use a single, strong alignment edge in forms so people can move straight down the page.
- Use continuous paths to show sequence, such as timelines, steps, and flows.
- Break alignment only on purpose, to signal a new section or a change in relationship.
- Make sure visual order matches reading and focus order so keyboard and screen reader users follow the same path.[3]
In practice
Common patterns in business applications, portals, and internal tools:
Supports the principle | Undermines the principle |
|---|---|
Form fields in a single column with aligned left edges. | Fields scattered in multiple columns of uneven width. |
Numbers right-aligned in tables for easy comparison. | Mixed alignment within a numeric column. |
Charts with clear, continuous lines for trends. | Overlapping lines in similar colors that are hard to follow. |
Horizontal rows of items that invite scanning. | Items staggered unevenly so the eye cannot follow them. |
Tab and reading order follow the visual layout. | Focus jumps unpredictably around the screen. |
Questions to ask in a design review
- Does the eye move through this screen in the order we intend?
- Are related elements aligned along a clear edge?
- Is any misalignment intentional, or accidental?
- Does the keyboard focus order follow the same visual path?
Origin
The principle is one of the Gestalt laws of perceptual organization, developed in Germany in the early 20th century by psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Köhler. Gestalt means “form” or “shape,” and the school’s central idea was that people perceive organized wholes, not collections of separate parts. Max Wertheimer described the factor of “good continuation” in his 1923 paper.[4]
In 1993, vision scientists David Field, Anthony Hayes, and Robert Hess showed how the visual system links small aligned elements into continuous contours, providing a modern account of how good continuation works in the brain.[5][6]
Related concepts
- Law of Uniform Connectedness — connected elements are strongly grouped
- Law of Closure — the mind completes continuous shapes
- Law of Proximity — spacing and alignment work together
- Serial Position Effect — order affects what people remember
- Goal-Gradient Effect — continuous progress paths motivate completion
- Selective Attention — clear paths guide where attention goes
References and further reading
- Interaction Design Foundation. What is the Law of Continuity? https://www.interaction-design.org/literature/topics/law-of-continuity
- Wikipedia. Principles of Grouping. https://en.wikipedia.org/wiki/Principles_of_grouping
- W3C. Understanding WCAG 2.2 Success Criterion 2.4.3: Focus Order. https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html
- Wertheimer, M. (1923). Laws of Organization in Perceptual Forms (English translation, Classics in the History of Psychology). http://psychclassics.yorku.ca/Wertheimer/Forms/forms.htm
- Field, D. J., Hayes, A., and Hess, R. F. (1993). Contour Integration by the Human Visual System: Evidence for a Local “Association Field.” Vision Research, 33(2). https://doi.org/10.1016/0042-6989(93)90156-Q
- Wagemans, J., et al. (2012). A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure-Ground Organization. Psychological Bulletin, 138(6). https://doi.org/10.1037/a0029333
- Nielsen Norman Group. Visual Hierarchy in UX: Definition. https://www.nngroup.com/articles/visual-hierarchy-ux-definition/
- Yablonski, J. Laws of UX (format inspiration for this series). https://lawsofux.com/