Proximity: Make Relationships Visible
Make labels, controls, messages, cards, and actions visually own the right things.
Start with the moment where the interface asks too much.
A form has two fields and one help message placed exactly between them. The labels are correct. The component spacing passes in isolation. The message still feels like it might explain either field. The user has not made a reading mistake. The layout gave them a relationship problem and asked the copy to clean it up.
People infer ownership from distance before they read labels. Proximity can make a form, comparison, card, or action area self-explanatory—or quietly attach the wrong explanation to the wrong thing.
Show the failure and the correction.
The lab uses controlled markup instead of raster text so the lesson stays legible, accessible, and easy to revise.
- 1Field help between fieldsThe help message looks equally attached to both inputs.
- 2CTA between cardsThe action appears to control the nearest card, the whole group, or both.
- 3Terms far from priceThe billing condition is visually separated from the number it qualifies.
Make the useful path easier.
Ownership comes first
Before style, ask what each label, caption, error, and action controls or explains. The layout should let a reviewer draw that boundary without debate.
Spacing beats boxes until it does not
Good proximity often removes the need for extra containers. When actions affect multiple objects, use explicit scope and selection feedback rather than relying on distance alone.
Visual and DOM order should agree
A relationship that only exists visually can break for keyboard and assistive-technology users. Source order and labels should preserve the same ownership.
Turn critique into a usable rule.
Remove
Field help between fields
The help message looks equally attached to both inputs.
CTA between cards
The action appears to control the nearest card, the whole group, or both.
Terms far from price
The billing condition is visually separated from the number it qualifies.
Build
Create local units
Keep label, input, help, validation, and field action together.
Name shared scope
For global or bulk actions, state the scope in the control and reflect selection clearly.
Attach qualifiers
Price period, delivery terms, limits, and requirements should sit close to the claim they modify.
Use it on a real page.
Remove decoration mentally or with a screenshot annotation.
Draw a box around each label and what it explains.
Draw a box around each action and what it affects.
Compare boxes across desktop and mobile.
Fix any boundary that overlaps the wrong object.
- Use annotated screenshots.
- Reviewers draw the same ownership boxes as the component model.
- A label, message, or action plausibly belongs to more than one target.
The rule should help the person making the next decision.
Business owner
Do not ask copy to explain relationships the layout contradicts.
Designer
Run the ownership box test before adding extra containers.
Developer
Ensure labels, descriptions, and error IDs match the same local field relationship.
QA
Check form help, validation, card actions, and pricing qualifiers at mobile widths.
Persistent toolbars and global actions may be physically distant from the objects they affect. They need explicit scope, stable placement, and selection feedback rather than forced closeness.
Check the page, then answer the doubt.
- Help text sits inside the field unit it explains.
- Inline errors are local to the failing control.
- Card actions are inside or clearly tied to one card.
- Bulk actions state their scope.
- Price qualifiers sit near the price.
- Mobile stacking does not detach labels or actions.
- Should related content always share a card?
- No. Proximity and heading structure may be enough. Cards help when a repeated item needs a clear boundary.
- How does proximity affect forms?
- It tells people which label, hint, validation message, and action belong to which field.
- What is the difference between proximity and white space?
- White space is the distance system. Proximity is the relationship inferred from that distance.
Standards and research links support the factual parts of the rule. They do not replace original judgment on the page.
Use the rule on the page that matters.
Use this when the reader is ready to inspect their own page before asking for a rebuild.
Get the conversion checklist