Suggesting "Clickable" or
"Interactive"
In the real world, things that are
pushable tend to be three-dimensional, such as buttons on a radio. The
designers of early graphical user interfaces for computers used this to
create a really concise GUI shortcut to say "clickable".
The button effect is one of the
strongest design conventions in interactive design.
Examples:
The top navigation area of this web
page (50% scale) uses 3D in 3 ways: to give the horizontal line
richness and weight, to make the top-right buttons appear more
clickable, and to make the first-level navigation appear more
clickable.
The 3D effects on the links are
subtle, but they obviously say "Click me". This is helped by the fact
that the page uses a flat white background.
In a similar idiom to buttons being
clickable, we are used to the concept of instrument 'panels' in the
physical world. Often, groups of controls are put together on a raised
or lowered panel (which has the ergonomic benefit of being locatable by
touch alone). Also, screens nearly always have a bevelled edge.
Graphical user interface (GUI)
designers have taken advantage of this convention when creating digital
controls. Input fields, drop-downs, multiple-select controls and radio
groups have traditionally used bevelled or grooved effects to
distinguish them from plain 'page'.
Application windows have bevelled
edges, which helps to strengthen their 'container' properties.
Example:
This table uses cascading style
sheets (CSS) to give the column headers a solid appearance.
The subtle 3D effect makes you
suspect that there's something to click on the headers, which sorts the
columns.
Differentiating objects from their
surroundings
3D creates a sense of space between
different elements. That makes it a very effective way of reinforcing
differences. Shadowing, including drop-shadows, gradients, and
highlighting, is the most useful principle.
This example shows five typical
techniques that use shading (lighting effects) to differentiate an
element from its surroundings.
Drop-shadows and bevelling/embossing
are familiar.
This bevel example shows how real 3D
effect can be achieved with very subtle colour changes.
Remember that gradients are also
lighting effects: they suggest an illusion of light.
Highlighting makes an element seem
nearer. It can be as simple as putting a lighter tone next to a darker
one: this one puts a lighter gradient over a shaded background.
Example:
Subtle drop shadows and embossed
lettering make the site logo and strapline stand out from their
background.
Adding richness
3D effects can suggest a rich,
multi-layered, realistic, believable environment. The golden rule is:
use with care Nothing works if it's applied to everything - things need
something to stand out *against*.
Be consistent
Light source is often crucial. Two
things to remember about all 3D/shading effects is that they're both light
effects and illusions.
For the illusion to work, the user
needs to believe that what they're seeing could be real. To create a
physical illusion, you need a plausible facsimile of reality, and
consistency in treatment. For example, if you had an element appearing
to be both behind and in front of another element, the illusion effect
could be broken.
One of the most common mistakes in 3D
effects is to use different lighting sources on different elements.
It's OK to have more than one light source, and a lot of design does
that today, because it produces lighter and softer effects. However,
the overall light environment has to be just believable enough.
