Pop-Out Ads - Using 3D to Get Attention
One cool way I’ve found to draw attention to advertisements on a page is by using the “pop-out effect.” Basically, when we see a gradient with a much lighter color at the top transitioning into a darker color at the bottom, it appears to “pop” out at us. If the gradient is darker on top, it appears to sink away from us.
Through millions of years of evolution, our brains have come to the conclusion that the light (sun) is up, and shadows are down. As part of Windows 3.0, Susan Kare with Microsoft developed a button with a light bar at the top and left, and a dark bar at the bottom and right. This 3-d effect has been copied by every operating system since then, because it gives an immediate clue as to where we are supposed to click (and everyone says Microsoft is the copycat!)
I have experimented with this effect and was surprised to find that even when I cheated by making it look like the light was coming from below ( I created a gradient background, with light coming from below), objects lit from above still had the greater pop-out effect.
Check out this picture. In figure B, notice that the light source appears to be coming from below, but the objects lit from below still don’t pop-out very well. Figure A makes it obvious that the light is coming from above, but the objects don’t pop-out any better than they do on a flat background. The hard-coded mechanism is more powerful.
A study of this effect found that people can find items that are colored to pop-out faster on a page. Our eyes seem to jump quickly to the popped out things. This is probably another evolutionary defense mechanism as we subconsciously give more importance to 3-d objects than we do to flat backgrounds.
Using a light on top, dark on bottom gradient background can cause the eye to jump to an advertisement. I use this type of gradient quite a lot for advertisement backgrounds, and even though it doesn’t really look 3-d in a rectangle, it captures attention more and produces better results than a flat background.
