◆
Attention
Von Restorff Effect
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
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.
1
2
3
4
5
6
7
CTA
9
10
11
12
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.