Is a layout with '3D' elements easier to parse?

Question

Contemporary web applications favor designs that make heavy use of shadows and gradients to create the effect of 3D elements.

One justification for this practice is that 3D effects can be used to enhance the recognition of objects in the layout as visual affordances.

But 3D elements have only recently found popular usage in graphic design (of which web application design is a sub-field). This leads me to question whether 3D elements are simply a fad – or a crutch – rather than a legitimate improvement over 2D elements.

Is there any evidence that a layout that relies on 3D elements to distinguish sections and controls is easier to parse? Do users really perceive affordances in 3D elements more than in properly designed 2D elements?

Is this a contextual question? For instance, in color perception, the eye adapts to the contrast ratio in a scene, which frees designers to use low-contrast designs (within reason). Can something similar be said for depth-perception?

Answer 1

I'm not aware of any academic studies that specifically examine the effects of drop-shadow or other height effects. So I will just have to give you my opinion:

3D elements are so much more than a crutch! Beyond being vital to creating physical analogies, where the web page somehow represents a 3D object in the real world, height effects are great for communicating relationships and hierarchy. If used properly, a designer can create a 'dual-plane' effect, where elements in each level have a particular purpose or status.

A good example of this is admin or 'meta' controls that sit outside the context of the current view. By using raised effects like rounded gradients, underlighting or a slight drop shadow, the user perceives that the element is separated from its peers - that it exists in a different context.

Another point is that physical analogies are powerful. Let's say I want to show that an element can be scrolled. Designing my page as though it were a piece of card with a cutout window, I could help communicate that the bounds of the container aren't the bounds of the content underneath. And to do that, a slight drop shadow on the edges of the cutout would be ideal.

Also, bear in mind that humans - like most animals - pay particular attention to elements close to them, because they're the most threatening (that's why animations that 'come towards' viewers are the most noticeable). Raising an element slightly is an appropriate practice for important notifications (don't do it for ads, though).

Finally, always remember that there's a big difference between 'the heavy use of 3D' and 'the use of heavy 3D'. Using subtle raises and shadow effects in a consistent, simple way is fine. Giving every element its own height on the viewport is not, because it means that height and 3D effects lose their meaning, and it gets harder to identify which 'pane' a particular element belongs to. Raising an element excessively can also mean that it's so close, users can't look at anything else - which erodes usability across the page.

tl;dr - some good practices for 3D:

• make sure height has meaning. Don't raise elements just to draw attention to them - elements should be ordered into meaningful layers. And never break layer groupings.
• keep effects subtle, else they distract.
• you don't even need shadow or gradient to create 3D effects. Lighting alone can be enough.