Skip to main content

Predictability and Consistency

Principle​

Interfaces must behave in predictable, consistent ways so users can confidently understand actions, navigation, and component behavior.

Consistent Patterns​

Guidance​

  • Use the same visual pattern for the same component across the interface (e.g., all primary buttons look and behave the same).
  • Do not redesign components locally — changes must be made at the design system level.
  • Ensure spacing, iconography, radii and typography follow the same design rules across all screens.

WCAG Reference​

Predictable Interactions​

Guidance​

  • Design interactive elements to behave in ways users already expect based on common UI conventions.
  • Make the purpose of each element visually clear:
    • Buttons initiate actions or changes.
    • Links navigate or open another page/section.
  • Avoid mixing these roles through styling or placement.
  • Avoid designs that imply unexpected or disruptive behavior (e.g., elements that visually look passive but trigger a major change).
  • Ensure that components keep their purpose and behavior consistent across states, pages, and breakpoints.
  • Do not design interactions that require hidden or surprising triggers (e.g., content appearing without user intent, hover-only important actions, auto-triggering behavior).
  • Keep interactions predictable — users should never be surprised by what happens when they click, tap, or focus an element.
  • Avoid unexpected changes of context without user interaction (e.g. automatic navigation, content changes or focus shifts).

WCAG Reference​

Consistent Navigation​

Guidance​

  • Keep navigation items in a consistent order and position across pages.
  • Keep navigation structure stable across breakpoints — hiding entire sections only on mobile can confuse users.
  • Key actions (like search, cart, profile) should remain discoverable across all device sizes.
  • Highlight the current location consistently (e.g., active menu items).

WCAG Reference​

Consistent Terminology and Labels​

Guidance​

  • Use the same terms for the same actions throughout the interface.
    • Good: “Sign in” everywhere
    • Bad: “Log in” in one place, “Sign in” in another
  • Link labels must clearly describe their destination or purpose.
  • Avoid vague link labels such as “Click here”, “More” or “Read more” without sufficient context.
  • When possible, make link labels understandable on their own, not only from surrounding content.
  • For repeated actions or links, provide enough context visually or in the accessible name.
    • Example: “Read more about accessibility guidelines”.
  • Avoid ambiguous or overly clever labels that require interpretation — labels must be clear, direct and actionable.
  • Keep icons consistent in meaning (e.g., a magnifying glass always means search).
  • When a component uses only an icon, the design must specify the accessible name (e.g., aria-label) so screen reader users understand the action.
  • The accessible name should start with the visible label, and only afterwards include additional context if needed (e.g., “Edit – billing address”). This supports voice navigation systems that match the first spoken words with the visible UI.
  • The accessible names should be concise, predictable, and reflect the same meaning as the visible UI.

WCAG Reference​

Avoid Disruptive Changes​

Guidance​

  • Do not redesign or rearrange components in ways that unexpectedly change the user’s flow or visual structure.
  • Avoid layouts where content suddenly shifts position (unexpected layout shifts).
  • When an interaction triggers a noticeable change (e.g., item added, filter applied, content revealed), the design should clearly communicate that change visually — for example through subtle transitions, highlighted areas, or confirmation feedback.
  • Ensure that any significant change remains predictable and discoverable, so users always understand what happened and why.

Reduce Cognitive Load​

Guidance​

  • Keep designs simple — unnecessary complexity harms both usability and accessibility.
  • Avoid overusing different visual styles, shapes or colors without functional meaning.
  • Use consistent patterns and behaviors — consistency helps users learn the interface and reduces cognitive load.
  • Group related elements together, maintain symmetry and visual rhythm.
  • Use whitespace actively — not everything needs to be packed closely together.