Von Restorff Effect

When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Why it matters

When every action on a screen looks identical in color, size, and weight, nothing reads as primary. Users stall, misclick, or leave without completing the intended task.

Key Principles

1Visually differentiate important information or actions.
2Use color, size, or shape to make key elements stand out.
3Don't overuse emphasis: if everything is highlighted, nothing is.
4Apply the effect to CTAs, errors, and critical status indicators.

Try It

One item in the grid is visually different. Notice how your eye is drawn to it immediately.

CTA

The isolated item (the CTA) is remembered because it breaks the visual pattern.

Code Pattern

tsx

1// ✅ Good: Primary action stands out from secondary options
2<div className="flex gap-3">
3  <button className="bg-gray-100 text-gray-700 px-4 py-2 rounded">
4    Cancel
5  </button>
6  <button className="bg-blue-600 text-white px-4 py-2 rounded font-semibold">
7    Save Changes
8  </button>
9</div>
10
11// ❌ Bad: All buttons look the same
12<div className="flex gap-3">
13  <button className="bg-gray-100 px-4 py-2 rounded">Cancel</button>
14  <button className="bg-gray-100 px-4 py-2 rounded">Save</button>
15  <button className="bg-gray-100 px-4 py-2 rounded">Delete</button>
16</div>

Make the primary action visually distinct from secondary actions.

AI Analyzer

Analyzing against Von Restorff Effect

Your code and images are sent directly to the AI for analysis and are never stored or logged. This tool is for educational purposes only.