Button Balance: Using design to differentiate and prioritize buttons
It matters where you put things. I learned this basic design principle in 4th grade band class, where I noticed that each type of instrument had a specific place to sit within the larger group. The soft-sounding flutes were up front, closest to the audience, while the loud tubas and drums were in the very back. To reverse this arrangement would’ve unbalanced the sound of the band, making tubas too loud and flutes pretty much nonexistent.
Thus, one of my first design lessons: Look at the context, and arrange things so they balance the way you intend. Tubas in back, flutes in front.
What is button balance?
What I call button balance is simply a broader view of button design, one that considers the impact of where the button will be placed and what’s around it. It takes into account the button’s context, to help ensure the button is as effective as it should be. In other words, it means looking at the whole band, not just the trumpet section (wonderful though trumpets may be).
Why does button balance matter?
Button balance matters because if you don’t consider context when designing buttons, they may not produce the results you expect. Is your Signup button not being clicked? It may be because it looks exactly like three other buttons on the page. Or it’s being drowned out by noisy ads, splashes, or promotions.
Context matters. A button may look beautiful on a page by itself. It may be large, colorful, and professionally designed. But it can still fail if its surroundings are distracting or confusing.
And yet, many buttons are designed with little thought to their eventual context.
Here’s how it usually happens: a button is created as a blue-rounded-rectangle-with-white-text. Voila! Says the designer, I’ve created the perfect button for this site! And every button on every page becomes a blue-rounded-rectangle-with-white text. That’s fine if your pages are fairly simple, like so:
But what happens when a page is more complex? What if you have more than one call to action? Or you need to indicate several different functionalities? Should you still use the same blue button for everything? Hopefully, by now you’re thinking, “Of course not, silly!”
Designing for button balance
But enough talking! Since this is a visual topic, I thought walking through some examples would be fun and helpful. So, let’s look at a few ways to use design and placement to achieve the right button balance on a web page.
1. Varying color
One easy way to affect button balance is with color. Generally speaking, use stronger colors on more important buttons and more neutral colors for those less important.
In the example below, notice the two largish buttons: the gray “Continue Shopping” button and the blue “Checkout” button. Here’s a full-size closeup of them:
Other than their colors, these two buttons are very similar. Their height is the same, they both have corners of the same roundness, and they both have a flat, simple appearance. Despite these similarities, and despite all the other distracting images on the page, notice how the blue color helps the Checkout button stand out:
If both buttons were blue, however, notice how the button balance changes. The Checkout button, no longer unique in its blue color, becomes less prominent:
Varying the color of your buttons is a useful technique, but it can go only so far. A site with buttons of many different colors will soon fall prey to what I call the “Circus Effect” — the site loses its visual professionalism and credibility as colors are introduced that bend or break the branding guidelines. You can almost see the clowns, waiting in the wings.
2. Varying Size
Another simple way to affect button balance is to vary the size of the buttons according to importance — larger sizes for more important buttons. For example, take a look at this Bank of America promotion page:
There are five buttons, all using the same red color and same general design treatment. Two of the buttons are quite large, which helps them stand out on the page and appear more important. Notice that they are not only long — because of their long labels — but also taller than the other buttons. Their size helps shift the button balance in their favor. And yes, their placement is also a factor here — but we’ll come to that topic later.
3. Varying Shape
Shape is another way to change button balance. Shapes can be used to change emphasis and also to hint at the button’s function.
For instance, in the next example there are four button shapes:
- a blue rectangular Go button
- a round “toggle display” button next to the word Locate
- several triangle “toggle” icons next to text links
- a round “close” button over on the yellow information layer
Notice how the shape variation helps differentiate the buttons from each other:
If all of these buttons were rounded rectangles, their functions would be a little less clear and it would take a little longer to understand and use this map tool. Certainly it would look clunky and less professional:
4. Varying Style or Treatment
Most sites wisely have branding guidelines in place to restrict the variation of design elements. But there is usually enough wiggle room to create a range of treatments that still support the brand.
In this example, the large red button is rendered in the standard button style for this particular mini-site. To the right of it, another button appears. This one, reading “No Thanks”, has a very different design treatment, and barely looks like a button at all:
To my taste, the No Thanks button is TOO de-emphasized, which means plenty of people are likely to miss it. But we’ll leave that discussion for another time.
Here’s how the buttons look in context:
Now notice how much the button balance on this page changes if we give both buttons the same style — the de-emphasized style, this time:
5. Varying Placement
The placement of buttons can indicate both their association and their purpose. For example, in this next Kodak example we see two red buttons:
They are very similar to each other, but we can easily tell at a glance, even without reading them, that they do slightly different things; the one on the left has something to do with the $99 printer, while the one on the right has something to do with the $149 printer. How do we know this? Because of their placement. Each one is placed very close to its associated product and price.
What if we moved these buttons somewhat lower on the page, further away from the product images? It’s not a complete disaster, but it becomes somewhat less clear what each button does:
A common challenge on web pages is the presence of ads, promotions, and other strong visual elements. Like unruly trumpet players, loud, busy images can often shift the button balance in ways that are unexpected or even undesirable.
In this next example, a Disney ad dominates the product detail page. Although the “Add to Cart” button is still visible, it is less dominant on the page than it would be without the ad, and the small buttons at the bottom of the page nearly disappear entirely:
See how much stronger the green button is without that ad:
But let’s suppose we don’t want to lose our ad revenue, so we can’t get rid of the ad. Instead, we could achieve better button balance simply by changing the button’s placement, moving it away from the ad and closer to its associated product:
In this next example, the position of the “Free 60-Day Trial” promotional splash element crowds and distracts from the “Try Now” button. Not only is the splash element larger than the button, it also uses stronger colors, larger text, and a more dramatic shape:
Here’s the same page with the promotional splash moved to a different location, further from the call to action button. Personally I don’t think this is an overall improvement to the visual page flow, but it does give the Try Now button more room to breathe:
Achieving Button Balance
As you become more aware of button balance, you’ll start to see many examples across the web. The best tend to use not just one but a combination of the techniques we’ve discussed to distinguish and prioritize their buttons. For example, take a look at this page from the Apple site:
To begin with, the two buttons — Free Download Now and Upgrade Now — are different colors. They are also placed in separate areas that each have different background colors, which helps group and associate the buttons with the content inside those areas. Both buttons have plenty of space around them, with no other nearby images crowding or distracting from them. Lastly, the Upgrade Now button has a slightly different treatment — it has an arrow icon where the Free Download Now button has only text.
A Final Note
The takeaway I’d like to leave you with is this: if a page on your site seems to be under-performing, be sure to take a look at its button balance. Is there enough variety — but not too much? Are buttons placed near their associated product or information? Are the more important buttons emphasized with color or size? Some simple changes to your button designs can translate into better clarity and improved results.
Tubas in back, flutes in front. Take a bow.