A quick look into why adding 3D effects to web buttons makes them jump out at us

I’ve been making 3d effect buttons for my web interfaces for many years now and although I know that adding a gradient fill, a highlight, stroke and shadow are techniques that make the button look 3d – I never really knew why it makes it look 3d. To be honest I’d never even thought about it until I was sitting in bed one night reading Gut Feelings: Short Cuts to Better Decision Makingby Gurt Gigerenzer.

Gigerenzer is a psychologist and behavioural expert and the book is about fast and effective decision making. More specifically how intuition works and why we should rely more on our brain’s short cuts, or heuristics in certain situations. I admit it’s pretty heavy bedtime reading however, one of the chapters talks about how intuition works and, very simply, when we have insufficient information about our environment, our brain makes things up based on instincts – its rules of thumb or heuristics that have been adapted to the word we live in.

Image re-made from an example in Gut Feelings by Gurt Gigerenzer


Consider the two images above, the left one is clearly a set of concave circles and the one to the right convex. But why do we see the circles this way? This is the interesting bit, apparently our eyes don’t have enough information to know how to interpret these images so our brains make a ‘best bet’ based on what it knows. Assuming a 3d world, it uses the shaded parts of the circles to determine what direction of the third dimension they extend into. In order to reach this conclusion it assumes that firstly light comes from above and that secondly there is only one source of light.

Here’s the really interesting bit; the reason our brains assume these two situations is because they’re characteristics of human history i.e. the only sources of light were the sun and the moon. It relies on another adapted simple rule of thumb; if the shade is in the upper part, then the circles recede into the surface and if the shade is in the lower part then the circles project from the surface. And very simply, that’s why adding highlight and shadows to web buttons can make them ‘pop’ out of the page!

Please share this post if you've enjoyed it...
  • LinkedIn
  • Twitter
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • Google Buzz
  • Yahoo! Buzz
  • Google Bookmarks
  • Technorati
  • Tumblr
  • Posterous
  • Reddit

Tags: ,

Get Adobe Flash playerPlugin by wpburn.com wordpress themes