Skip to content

Isolation Effect

Layered slices of orange

Image: rawpixel, Unsplash

Isolation Effect: Stand out from the crowd

Different, distinct, or dominant makes memorable. How can you make your product design stand out from peers and leave a lasting impression?

Feb 19 4 min read Patterns

You rarely see identical twins. But when you do, you begin to play spot the difference, right? There’s got to be one thing, one feature, one spot on the one that isn’t as identical on the other! So, you look for that spot.

Identical twins. Image: Amusing Planet

And so whenever people come across similar objects - terraces, roads, animals, etc - they immediately get to work looking for distinctive features in order to tell apart, to remember. By our very nature, we don’t want to be lost in a sea of sameness. We look for markers of recall.

Now you as a product designer don’t have to let people do the work of differentiating your product from the rest. Make the difference. Give them the markers.

With isolation effect you can make your product, feature, or call-to-action stand out, be noticed, and be memorable. It’s a small pattern but can make really big difference (all pun intended).

What is the isolation effect?

Also named von Restorff effect, after the German psychiatrist and pediatrician Hedwig von Restorff who coined it during her memory experiments, the isolation effect states that in a list of similar items, the distinctive, isolated one or ones are more memorable.

According to the theory, working memory tends to hold the item for longer when it’s distinct in meaning or physical nature such as in size, shape, color, spacing or underline (for printed text). Von Restorff’s theory was further corroborated by Taylor and Fiske, who, in their studies, found that “attention is usually captured by salient, novel, surprising, or distinctive stimuli.”

Over the years, several theorists and researchers have observed the von Restorff effect at work in their experiments and in real life. These observations have given rise to such descriptions as “distinctiveness principle”, “prominence effect”, “environmental salience effects”, and “ novel popout effect”.

Today Explained podcast cover graphic draws attention to its title using the isolation effect. Image: Vox

How to use isolation effect

  1. On product cards, isolate the one item you want to draw attention to. Appropriately, that item is price - it should be the most distinctive. A common practice, because people are drawn to imagery, is to make the product image bigger and dominant; also, add to cart and/or buy now button is colored differently to stand out. But amid these competing elements, the price/amount text should be most striking.

    High-contrast black as well as bolding makes the amount text most striking on the product cards on Jet.com.

  2. On content cards, the title information should stand out most. Again, the card image can appear dominating, because image, but making the title text bigger, bolder, and blacker will isolate and make it leap out.

    Title texts are made to stand out most on Medium.com content cards. Isolation effect also helps the bookmark icon get attention.

  3. On a pricing table, there has to one plan the business is anchored on or you want to draw people to. Isolate that plan’s column by enlarging it, placing it in the middle, and giving it a slightly contrasting background color.

    Where did your eyes go first, looking at this pricing table? Image: Spunger.com

    The challenge for such a table may be on small mobile screen; but by stripping out most less important information, the columns can be shortened and stacked so in a single view at least 3 sections is seen.

A few closing thoughts

To put the isolation effect to delightfully profitable use you need to

  1. Sit back and do your own independent thinking - what do you want? what core message should stick out? what’s this thing’s purpose? Don’t first rush to see what others have done in the name of “inspiration”. But then,
  2. Go see what others have done because just in case there’s well-worn metaphors, which people have already been habituated to, you don’t want to release a confusing interface for the sake of different. Lastly,
  3. Don’t go overboard - there’s difference between distinctive and outlandish, blinding. Stay within the bounds of comfortable to the eye.

Sources:

  1. Isolation Effect (Design Patterns), UI-Patterns, accessed Feb 18, 2019.

  2. Von Restorff effect, Wikipedia, accessed Feb 18, 2019.

  3. Von Restorff Effect, Changing Minds, accessed Feb 18, 2019.

Comments

Copyright Information


2019 Kabolobari Benakole (K16E) Version 1.0.24