How to use the figure-ground relationship to improve your home page

Please, do a simple experiment for me.
Look at one object on your desk. It can be a pen, your printer or flowers in a vase. Just stare at the object for a moment. Do you notice that the object becomes the focus of your attention and everything else that's on the desk seems to fade in the background?

Now look at another object near the first one. If you stare for a moment you will notice that this second object is now the center of your attention and everything else on the desk, including the first object, fades away.
Congratulations: you have just experienced the figure-ground relationship. Why is this important for our websites?

The importance of the figure-ground relationship

If we own a website we also have a goal in mind. We want visitors to buy a gadget for example. Or we want them to read an article. In short, our goal is to have them perform an action.

In order to perform the action we want, our visitors need to clearly see and understand right away what they are supposed to do. If they can't see it, they won't do it.

So, if we want to achieve our goal we need to place an "actionable object" right in front of their noses. This actionable object is an attractor for their clicking finger. We want them to click on it and pay attention to nothing else.
The actionable object needs to be their main focus.

We call the actionable object "figure" and everything else on the web page "ground".

The actionable object needs to become the "figure" and everything else needs to become the "ground" if we want our visitors to click. How do we do that?
To understand how we do that we need to find the differences between figure and ground.

The differences between figure and ground

If we repeat our little experiment we will notice that the object we focus on has a definite shape. Its boundaries are well defined.
On the other hand, the ground is kind of out of focus, shapeless.

We also notice that the figure seems to pop out from the background. It seems closer to us, while the ground seems a little farther away.

We perceive the figure colors better, like they are more vivid while the colors in the background are somewhat dull.

Notice another fact. When you search for objects to look at, you rarely pick objects that are above your line of vision. Most objects will probably be below the horizon line.

So, here we have four differences between figure and ground:
1. figures have a definite shape, grounds are shapeless
2. figures seem closer, grounds seem farther away
3. figures have more vivid colors, grounds are duller
4. figures are placed below the horizon line, grounds extend below and above it.

Let's see how successful websites use this recipe to build a better home page.

Here's an example from the amazon.com website.

In this case, the actionable object is simply text: Amazon cloud player The text is placed into a box and it's given a border so it has a well defined shape. Colors are stronger then the surrounding text and the whole box is placed below the horizon line so it seems closer to the viewer.

Here's another example from the Apple site.

The recipe applies as well: the main image has well defined shapes with a very sharp contrast, bright colors and is placed below the horizon line. Clearly, they want you to buy another iPod.

As you can see, the rule is simple and can help you build a more effective website that doesn't confuse visitors and keeps them focused on the action you want them to take.

Speaking of confusion, here's an example that breaks the rule and comes up as confusing as a result. As you can see, there's no "figure" in this home page. Bright colors and defined shapes are all over the place so there's no one single focus for the viewer. What do you think the actionable object is in this page?

To summarize

Everything we look at is perceived by our brain as "figure"[/i] or [i]"ground". The figure is the center of our attention while the ground fades behind the figure.
If we want visitors to our website to take an action we need to make that action the focus of their attention. We need to create a figure that attracts their click.
We create a figure by giving it a well defined shape, more vivid colors and if possible we place it below the horizon line.

Want to do another experiment? Look at your home page and ask yourself: what's the goal for this page? Where do I want the visitor to click first? Is the most important area a clear "figure" that pops out or is it just blending into the background?
You will be surprised at how you can make your web page better by using the figure-ground relationship.