The importance of shadows in UI and interaction design

shadows_ui_design_

Plato gave shadows a terrible name. In the Allegory of the Cave, he declared that shadows mislead people about the genuine nature of reality, setting up a distrust of darkness and shadow. Light is actual knowledge and shadow is the opposite of this, a distrust that persists to this day.  Ah, those ancient Athenians. They really knew how to spin a sturdy allegory.

Viewed as superficial visual treatment, shadows are mere decoration, a foolish attempt to mimic the actual world and ruin an otherwise polished interface.

Yet shadows have an important role. They communicate vital visual cues in layered and highly interactive interfaces. Using subtle and refined shadowing, even in minimalist design, lends better depth perception without ruining the designer’s aesthetic principles and can be used as a visual tool like colour and line.

Shadows communicate 

Elevation

Use shadows to convey elevation on a page and show a hierarchy of layered elements. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.

Affordance

Shadows help give cues to what actions a user can take with interactive elements such as buttons and sliders. Affordance is the perceivable characteristics of an object; colour, size, shadow, that signal how we can use an object.

Interaction 

Shadows can add vital visual cues for interaction, giving hints about direction of movement and intent. When the user sees an element crossing the screen, as with other things like speed of animation, a shadow gives us a clue which direction it has come from because of the angle of the shadow. The deep shadow on the left side of the element signals that it has entered from the right.

A shadow has two parts

Design software gives us shadow effects out of the box, and we never feel the need to refine them, but we can do better.

In the physical world, the shadows we see cast by the coffee mug on our desks are created by objects blocking a light source, and creating a shadow beneath the object. The stronger the light source, such as the sun, the stronger the effect. This shadow is composed of different tones and graduations of darkness.

Cast shadow

This is the primary part of the shadow, and it graduates out from darkness into lighter, softer edges and can have a large vertical offset depending on the angle of the light source.

Occlusion shadow

This is part of the cast shadow. This is the tight, dark and sharp shadow directly underneath the object. It is the darkest segment as it is least affected by the light source and reflected light.

Putting them together, we now have a more refined and natural shadow.

I hope we can agree that Plato could be a little short-sighted and that shadows are an important element in creating a clearer understanding of how things behave.

For those who code, here’s a CSS example.


Cover image by Kevin Dooley

2 Comments
  • Gary
    14 Jun 2020
    Reply

    Nice explanation. It is something I have overlooked in design. Will try this out. Thanks

  • Kate
    26 Jun 2020
    Reply

    Thank you for sharing. I like the accompanying gifs. Very clear. Do you include shadows in your styleguide?

Leave a Reply

Your email address will not be published. Required fields are marked *