Independent reviews. IonBin has no partnerships with the tools on this page and was not paid for these listings. Our evaluations are our own, based on public documentation and our research. Product names are trademarks of their owners and are used for identification only. How disclosure works.

Visual organization

Proximity

Spacing should tell the same story as the content: related things belong together.

Perceptual principle

Source review

How to read the evidence

The idea in plain language

What it means.

Nearby elements tend to form perceptual groups. Use that tendency to associate labels, values, explanations and actions. Relative spacing matters more than a universal gap size. A label that sits halfway between two fields leaves the relationship needlessly ambiguous.

Evidence and interpretation

What supports it.

Perceptual principle

A Gestalt grouping principle demonstrated in perceptual displays. Specific spacing tokens and layout choices are design applications, not experimental constants.

From principle to interface

Where you could use it.

Proposed applications, not tested outcomes. The expected effects are hypotheses to check with realistic tasks and users.

Application 1

Clarify a form

Keep each field's label and hint close to its input, with a larger gap before the next field group.

Expected effect to test

The visual association between an input and its explanation is easier to follow.

Keep in view

Also associate the label and hint in code; spacing alone does not provide a screen-reader relationship.

Application 2

Explain dashboard metrics

Place the reporting period beside the metric it qualifies and separate unrelated metrics with additional space.

Expected effect to test

Readers can tell which time range belongs to which number.

Keep in view

Preserve those associations when cards stack on narrow screens.

Turn the idea into a check

Use it deliberately.

  • Compare spacing within a group with spacing between groups.
  • Check associations at zoom and after responsive reflow.
  • Use semantic labels, headings and table relationships alongside visual grouping.

Where the rule gets complicated

Keep the limits attached.

  • Proximity interacts with similarity, boundaries and other cues.
  • More whitespace is not automatically clearer.
  • Visual position cannot carry essential meaning on its own.

A named principle does not settle an accessibility requirement, prove a conversion lift or replace testing the particular interface.

Application and implementation boundaries

What the application check shows.

Limited evaluationAccount-free ·

The example associated a label and hint with its input programmatically, and retained that relationship without authored CSS. Spacing comprehension was not measured.

Methods: Local application example. A completed check covers the stated sample; it is not a safety certification.

Target
Original IonBin synthetic interface example; no external product or human-participant study.
Version or capture
2026-10-19 local fixture
Integrity scope
SHA-256 f85d1056afd667225a1e0364edfb8f25b4693ffa7b2b8c7d7af5b92338b85ee4 identifies the exact HTML fixture only.

Test conditions

  • 155.0.8059.82 Chromium; fresh context with all network requests blocked.
  • Synthetic inputs, memory-only state, reduced-motion preference, 1280px and 320px viewports.

Individual checks and observations

  1. Semantic group

    pass

    Local application example: Exercise the original local application fixture and inspect the resulting controls or DOM state.

    Observed: A fieldset/legend, explicit label and described-by link identify the input independently of spacing.

  2. No style order

    pass

    Local application example: Exercise the original local application fixture and inspect the resulting controls or DOM state.

    Observed: With authored CSS disabled, the named input and ordered process remained present.

Security findings and boundaries

Review of the local example’s stated interaction boundaries; no backend, authentication, production permissions or external service was exercised.

Practical advice · caution

Visual grouping is not a trust boundary

Keep permission labels and explanatory text programmatically tied to the correct control. Proximity cannot prevent a forged or misleading label.

Practical caveats

  • Check labels and descriptions after responsive reflow, not just at the design canvas width.

What remains untested

  • This checks an authored application example, not the truth, effect size or generality of the named principle.
  • No users, assistive-technology participants, physical devices or production task outcomes were evaluated.

Security limits

  • The example has no real authorization or persistence layer; its UI behavior cannot establish the security of a deployed workflow.

Evaluation sources

  1. Wertheimer: Laws of Organization in Perceptual Forms

    University-hosted translation of the 1923 original.

  2. W3C: Info and Relationships

    Preserving structural relationships beyond visual presentation.

Download this evaluation record (JSON)

Go to the source

Research and further reading.

  1. Wertheimer: Laws of Organization in Perceptual Forms

    University-hosted translation of the 1923 original.

  2. W3C: Info and Relationships

    Preserving structural relationships beyond visual presentation.

Related questions

More on visual organization.

View this concern

Perceptual principle

Prägnanz

Make the structure easy to perceive without removing the information that makes it useful.

Perceptual principle

Similarity

Use a shared visual treatment when elements share a role or meaning.

Perceptual principle

Uniform connectedness

A continuous visual unit and a set of items inside a box are different grouping cues.