This One Psychological Principle Will Change Your CTAs!

Edition #36, Application of the Von Restorff Effect to create CTAs

Irene

Nov 18, 2024

Do you notice how Taylor shows up in a totally different outfit to set herself apart from her backup dancers?

And in general how singers usually stand out from their backup dancers?

Photos from Celebrities That Got Their Start as Backup Dancers — JLo stands out from her backup dancers. Image Source

Do you know why they do this?

They are following the Von Restorff Effect

The Basics: Von Restorff Effect

aka "isolation effect"

Our minds naturally remember things that stand out

The Von Restorff Effect is named after Hedwig von Restorff, the German psychiatrist who discovered it in 1933. She found that when people are presented with a list of similar items, they’re more likely to remember the one that stands out as different.

In her experiment, participants recalled the unique item more easily than the similar ones.

Basically, if something stands out from its surroundings, it’s more likely to stick in our memory.

Rihanna Rep Confirms the Singer is Pregnant - The New York Times — Rihanna at the Superbowl 2023. Image Source

So, back to why singers and backup dancers wear different outfits…Singers wear unique outfits to grab attention and stand out, while backup dancers keep it subtle. This contrast helps the singer stand out, making them the main focus of the performance and more memorable to the audience.

And Why does the Von Restorff Effect matter in UI/UX design?

Designers can use this principle to grab users' attention and guide them to take action by making key elements stand out.
When something looks different, like a creative navigation button, users are more likely to remember it and come back later.
Highlighted elements help users quickly find what they need without feeling overwhelmed.

Applying the Von Restorff Effect in UI/UX

The Von Restorff Effect is about making important things stand out in your design.

Be strategic about what to highlight.

The more attention for one, the less for the rest.

You shouldn't have too many things/elements competing for attention—it'll confuse and overwhelm users.

Just highlight the important stuff, like:

CTAs
Key products and features
Pricing and subscription options

In this edition, I’ll show how to use the Von Restorff Effect to make your CTA stand out.

1. Make Your CTA Visually Stand Out

Elements that are visually distinct from their surroundings are more likely to grab attention and be remembered.

Color Contrast: Choose a contrasting color or the primary color for your CTA

See how the CTA on Airbnb’s website is the dominant contrast color. Image Source

Size Variation: Increase the size of your CTA button so it’s at least 20% larger than other buttons or elements.

Notice how HubSpot’s CTA is bolder and larger than the other text! Image Source

Typography: Use bold typography for the CTA text to enhance legibility and prominence.
Shape Style: Add a shadow or gradient to make the button appear raised or clickable.

How to Design Better Buttons — See how adding a shadow to the CTA button makes such a big difference! Image Source

2. Use Motion or Animation

Changes in appearance when interacting with the CTA grab attention and make it stand out.

Hover Effects: Implement color change when the user hovers over the CTA (e.g., darkening the button).
Animation: Use micro-interactions like a gentle bounce or glow effect when the CTA comes into view or when the user interacts with it, drawing attention subtly.

See how the CTA changes when hovered and clicked! This makes the CTA really memorable for the users!

Use motion and animations subtly.   


Ensure animations are short (1-2 seconds) and non-distracting, so they enhance, rather than disrupt, the user experience.

3. Add Whitespace

Whitespace isolates the CTA, making it more noticeable by eliminating competing distractions.

Buffer Space: Ensure there is at least 20-30 pixels of empty space around your CTA on all sides.
Reduce Clutter: Remove any unnecessary text, images, or buttons that are directly adjacent to the CTA. Keep the surrounding area clean so the CTA is the focal point.
Notice the use of white space and the literal absence of clutter on Apple’s website!