How does a 3d shading impact circular button use?

Question

I recently ran across a circular smiley icon with lambertian shading, specular shading, and cast shadows. The effect was a little like a ball on a table.

Here it is:

Clicking the icon toggled an on/off state, from the upper left gray version to the yellow version.

I wonder if the button image itself may be subtly discouraging clicks. In the physical world, a 3d spherical object casting a shadow on a 2d plane isn't something we often push to toggle a reversible state. A push would likely result in rolling it away.

My hypothesis is that a button that looks like sphere on a flat surface would get less interaction than a "floating" sphere in the same position, though I lack an appropriate site to test that hypothesis with.

Answer 1

This type of 3D shading doesn't as much perceived affordance as a a smiley face that appears to be a recessed button, so it appears less actionable.

Although users are slowly moving away from relying on affordances that mimic their real-world counterparts (e.g., buttons that look like they can be depressed into the screen), they're still entirely free of them.

Your hypothesis is essentially correct. A user will likely translate this 3D shading to perceive the smiley face as resting on top of the interface plane, rather than being part of it. An embossed smiley face would still appear to have depth and afford interaction, but would be recognized as part of the interface.

Another way to think about this would: if this icon was part of a dresser, would the user perceive it as sitting on top of the dresser, or as a handle on one of the drawers?

I'd draw you a representative ASCII picture to explain all this, but my rep isn't high enough.