Do Your Site Visitors Push Your Buttons?

Many a parent has angrily warned their children “Don’t push my buttons!” and of course what they are implying is that the children know exactly what to do to create a certain response, or reaction, from Mom or Dad. When you think about it, isn’t it funny that an expression that has been around for generations is so applicable to web design and conversion optimization today? Most landing pages include a button as part of the main call to action. So the question is: do your visitors know exactly what to do? Are your buttons so clear that it leaves no doubt in the visitor’s mind as to what will happen when it’s clicked?

Here are some guidelines you can keep in mind when creating buttons that beg to be pushed.

First, Prioritize

Ideally you should have a single, clear call-to-action button on your page. If you have more than one, you need to create a visual hierarchy so that their importance is clear to your web visitor. One way to do that is to change the color or size of the non-primary buttons to something visually less interesting (make those buttons duller and smaller).

If you have two side-by-side buttons, remember that the one on the right is by convention considered the default one (most likely to be clicked on). You may consider demoting some of your secondary buttons to text links.

Experiment With Format

The exact format of the button matters. Experiment with a wide range of button shape parameters to see what works best. Possible changes to the button include:

• • Shape (amount of rounding and corner “radiasing,” or having them remain square)

• • Dimensionality (drop shadows and curves)

• • Color (contrasting and ideally unique on the page)

• • Visual embellishments (adding small triangles or chevrons to indicate action)

• • Size (try radically smaller or larger versions)

Be Specific and Manage Expectations

Buttons should accurately describe the intended action. Make sure that the button describes exactly what will happen when it is clicked. For example, many e-commerce sites mistakenly put “Buy It Now!” buttons next to products when the actual action is “Add to Cart.”

Another common mistake is to use the label “Order Now” when you really mean “Proceed to Checkout.” This causes unnecessary stress and anxiety for visitors as they try to figure out the threat or opportunity presented by your button. It is always best to remove the hesitation and assure them that taking the next step is a small and safe action.

Use unambiguous standard language for all button labels. Do not try to be funny or cute. The attempt will often be lost on the audience, especially when you consider the international nature of Internet traffic. Most people from other cultures who are non-native speakers will find it difficult to process and understand unfamiliar button labels.

Label From the Perspective of Your Visitors

Button text should always be written from the perspective of your visitors and address their intentions and desires. In many cases you should try to complete the thought in the mind of the visitor: “I want to…” Appropriate examples of possible completions for this sentence include “Download the Whitepaper,” “Start My Free Trial,” “Get Details,” or “Select This Plan.” This formulation is unlikely to work with commonly seen button text such as “Submit,” “Create Account,” or “Reset.”

Remember, good usability is all about matching and managing visitors’ expectations. The last place you want to fail in this task is on your buttons. And while there are some general best practices like those outlined above, the only way you’ll know what works best for your audience is to test it. Never assume that a button style that works on a competitor’s site will work on yours. Test button color, shape, design/styling, label, position, and size. Because, unlike Mom, you really do want your buttons pushed.

This article originally appeared in Tim’s ClickZ column May 1, 2012