Visual organization
Similarity
Use a shared visual treatment when elements share a role or meaning.
The idea in plain language
What it means.
Elements with similar properties tend to group perceptually. A consistent component vocabulary can use that tendency to communicate repeated roles. When two controls look alike but behave differently, the visual pattern creates an expectation the product does not meet.
Evidence and interpretation
What supports it.
A Gestalt grouping principle. Component consistency is a practical application; similarity alone does not establish a control's meaning or accessibility.
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
Standardize status labels
Use the same text, icon and treatment for Pending across lists, details and exports.
Expected effect to test
People can recognize the same state in different views.
Keep in view
Include text rather than relying on color alone, and distinguish genuinely different states.
Application 2
Separate links from commands
Use a consistent link treatment for navigation and button treatment for actions such as saving a preference.
Expected effect to test
The visual vocabulary supports predictable interaction.
Keep in view
Use the correct underlying elements and keyboard behavior; styling does not supply semantics.
Turn the idea into a check
Use it deliberately.
- Document what each repeated visual treatment means.
- Review component variants for conflicting behaviors.
- Keep states distinguishable with text and other cues when color carries meaning.
Where the rule gets complicated
Keep the limits attached.
- Similar-looking items need not be identical; retain differences that matter.
- Similarity competes or cooperates with other grouping cues.
- A consistent inaccessible pattern remains inaccessible.
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.
The example represented pending, failure and saved states with explicit text. It did not rely on their shared visual treatment to communicate the outcome.
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
Honest failure
passLocal application example: Exercise the original local application fixture and inspect the resulting controls or DOM state.
Observed: Failure was stated in text and did not erase the input or claim a successful save.
Honest completion
passLocal application example: Exercise the original local application fixture and inspect the resulting controls or DOM state.
Observed: Completion offered review/edit wording after the simulated success state.
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
Similar controls need accurate effects
A repeated button style must not make a high-consequence action look equivalent to navigation. Explain the effect and apply appropriate confirmation.
Practical caveats
- Pair consistent appearance with consistent behavior, accessible names and non-color state information.
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
- Wertheimer: Laws of Organization in Perceptual Forms
Original proximity and similarity demonstrations in translation.
- W3C: Use of Color
Alternative visible cues for meaningful color distinctions.
Go to the source
Research and further reading.
- Wertheimer: Laws of Organization in Perceptual Forms
Original proximity and similarity demonstrations in translation.
- W3C: Use of Color
Alternative visible cues for meaningful color distinctions.
Related questions
More on visual organization.
Perceptual principle
Proximity
Spacing should tell the same story as the content: related things belong together.
Perceptual principle
Prägnanz
Make the structure easy to perceive without removing the information that makes it useful.
Perceptual principle
Uniform connectedness
A continuous visual unit and a set of items inside a box are different grouping cues.