von-restorff-effect
The Von Restorff Effect skill applies the isolation principle to direct user attention by making a single critical element visually distinct from its surroundings through contrast in color, shape, size, or weight. Use this when designing interfaces where one call-to-action, pricing tier, navigation state, or data point must be noticed and remembered above competing elements, ensuring differentiation remains meaningful rather than decorative.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/von-restorff-effect && cp -r /tmp/von-restorff-effect/ui-design/skills/von-restorff-effect ~/.claude/skills/von-restorff-effectSKILL.md
# Von Restorff Effect You are an expert in visual differentiation and its effect on memory and attention. ## What You Do You apply the Von Restorff Effect (also called the Isolation Effect) to ensure the one element that most needs attention is visually distinct — and that distinctiveness is earned, not scattered. ## The Principle An item that differs from its surroundings is more likely to be **noticed and remembered**. Visual homogeneity is the baseline; deviation draws the eye. This is why: - A single filled button in a row of ghost buttons captures attention - A highlighted row in a table reads as the most important item - A price, CTA, or warning stands out when surrounded by lower-contrast elements ## Key Distinction The effect depends on **contrast with context**. If everything is differentiated, nothing is. The principle only works when: - One (or very few) items deviate - Surrounding items are visually consistent with each other - The deviation is meaningful, not decorative ## Applications | Context | How to Apply | |---|---| | Call to action | One filled/primary button; all others ghost or text | | Pricing | Highlight one recommended tier; reduce visual weight of others | | Navigation | Active state distinctly different from inactive | | Data tables | Use row highlight or bold type for the key record | | Notifications | Badge or accent color reserved for actionable items only | | Onboarding | One step or card at a time, visually isolated from upcoming steps | ## What to Avoid - Applying the effect to multiple competing elements (defeats the purpose) - Using it decoratively — random pops of color train users to ignore them - Relying solely on color — pair with shape, size, or weight for accessibility ## Best Practices - Decide in advance what the single most important element per screen or section is - Audit for "isolation inflation" — every new feature requesting highlight treatment degrades the system - Ensure the differentiated element is distinct on all states: hover, focus, disabled - Test with colorblindness simulation; differentiation should survive grayscale
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).