UX Principles

Visual Hierarchy & Perception

Law of Uniform Connectedness

Visually connected elements feel more related than disconnected ones.

Illustration for Law of Uniform Connectedness

In practice

Takeaways

  • 1

    Connect sequential steps with lines or progress rails.

  • 2

    Use consistent color threads across related items.

  • 3

    Show process flow rather than isolated states.

Origins

Visual connectors — lines, rails, shared color families — strengthen perceived relationships between elements. This is especially useful in timelines, wizards, and multi-stage workflows.

Disconnected UI can make users unsure whether steps belong to the same journey.

Design Applications

  • Add connectors in step indicators and onboarding.
  • Link timeline events with a continuous vertical rail.
  • Carry category color through labels, icons, and charts.

Frequently Asked Questions

Further Reading

Related Principles

View all ›

Visual Hierarchy & Perception

Law of Proximity

Near elements are perceived as related.

Learn more ›

Visual Hierarchy & Perception

Law of Common Region

Elements within a bounded area are perceived as a group.

Learn more ›

Interaction & Behavior

Goal-Gradient Effect

Motivation increases as users get closer to completing a goal.

Learn more ›

Tools worth a look

Some links are affiliate links — see disclosure.