Three characteristics that make action buttons more clickable

I can't help it. Every time I walk by that chair in the living room I have to sit down. It's like the chair is talking to me. "Look how comfortable I am. Don't you want to take a couple of minutes of rest?"
That's because the chair has a special property. It's called sitting affordance.

A chair is designed to make you sit. A door handle is designed to make you pull. Handles on a bicycle are positioned in such a way that they can be easily grabbed with your hands.
When an object helps the user interact with it without even thinking we say it has good affordance.

Good affordance is what we strive for when we position a button on our website. The reason we add a button on our web pages is that we want visitors to click. And if we want them to click we need to increase the affordance of the button. How can we do so?

Let's look at three characteristics of buttons that increase their pressing affordance and make them more effective:

- the 3D look
- the lighting
- the change of status

Why action buttons should have a 3D look

In the virtual world of computers we don't have real objects that can be pulled or pushed. The action takes place on a flat screen and everything is two dimensional. But we can recreate the look of physical objects with design.

By making our buttons look like real world buttons we automatically increase their pressing affordance.
3D buttons beg to be pushed and always perform better then 2D buttons or plain text links.

The importance of light

Light that falls on the button is a subtle but effective way to make it look even more real and natural.
Humans find more natural a source of light coming from top-down. This is probably due to the fact that we live on a planet where the main source of light comes from the sun, which is above us.
Interestingly, right handed people prefer a light that comes from top left. If the source of light comes from below, the object won't look natural and it may even look a little scary.
So, it's important for our buttons to have a source of light that comes from the top left corner.
This can be achieved by using a color gradation that starts with lighter colors at the top left corner of the button and darker colors at the bottom right.

The change of status on a button.

What do we mean by change of status? Changing the status of a button means changing the way it looks when we move the mouse over it.
By changing color and shading when the mouse rolls over the button we give a strong hint that something will happen if we click it.
The illusion of interactivity gives us instantaneous visual feedback and makes us want to push the button even more.

A change of status is called a rollover effect and can be achieved by using CSS or Javascript, two languages that define how elements on a web page are displayed.

But you are not a designer. How can you possibly create such complex buttons?

Many graphics programs like Photoshop come with plugins and filters that make creating buttons an easy process. There are even some stand alone programs that just build buttons and some of them are free.
In addition to programs installed on your computer, you can find online services that let you create buttons with different colors, backgrounds and many other fancy options.
A good way to find out about these programs and services is to head to Google and search for "button generator".

By taking advantage of the rules of affordance you will be able to create gorgeous buttons that will persuade your visitors to click on them, like my favorite chair persuades me to sit every time I enter the living room.