ui-context-and-scope

UI Context and Scope

Users need to know three things at all times:

1. Where am I? — current location in the product hierarchy
2. What context am I in? — which section, record, or workspace is active
3. What will my actions affect? — scope of changes before committing them

When these are unclear, users make mistakes, feel lost, and lose trust in the product.

Communicating Hierarchy with Visual Structure

Lines and Dividers

Horizontal rules and borders signal the boundary between sections. Use them to separate content areas that belong to different contexts — not just for decoration.

• A line between a header and content says "the content below belongs to this header"
• A sidebar border says "this is a different region with a different purpose"
• Avoid overusing dividers — proximity and whitespace should do most of the work; dividers reinforce where space alone is insufficient

Colour Regions and Background Fills

Background colour is one of the strongest signals for "you are now in a different area."

• Use a distinct background shade for sidebars, panels, or contextual drawers
• Active or selected regions benefit from a subtle fill to confirm "this is the current context"
• When a user's changes are scoped to a specific section, that section should be visually bounded — border, fill, or both — so the scope is self-evident before the user commits

Section Labels and Context Headers

Every major region should be able to answer "what am I?" without the user having to read surrounding content.

• Name sections with the user's vocabulary, not the system's
• Show the active entity: "Editing: Invoice #2041" or "Settings for: Workspace" — not just "Settings"
• In forms that affect a specific record, show the record name prominently in the form header

Navigating Depth

Breadcrumbs

Use breadcrumbs when the product has three or more levels of hierarchy, or when users can arrive at a page from multiple paths.

Home > Projects > Website Redesign > Tasks > #142 Fix header