Designing a Button: Good Practice Tips

We Cover

ALL OF IT

From the bottom on up the scale, we create tangible concepts from technical to creative.

Join Us
on Facebook!

Perfect Vision

My glasses make my eyes HUGE

I can kinda see the screen

Squinting helps

Eyesight

Pizza Remaining

Pizza Missing

Today’s Lunch

< back to blog

Designing a Button: Good Practice Tips

A good and effective button requires more thought and planning than meets the eye. Below are a few tips on what to keep in mind when designing your next button.

Purpose

The first step to creating a good button is thinking about Purpose. What is the purpose for this button? Is it just a connecting point for the user to get from one place to another? Or does it serve a more important purpose? Whether you want users to sign up or view a new product, there must be something that leads the user to perform the action you desire them to do. Different purposes will require a different design.

Once the purpose has been established, you can move on to the other factors necessary for creating a good button.

Placement

With the purpose established, one of the first things you need to think about is Placement. A button should always be placed in a space that is visible and accessible to the user. This means that the space is free of clutter and other objects that can pose as distractions. For the most part, buttons placed near the top will have a higher conversion rate, since it is visible to the user when the page first loads. If a user has to scroll down or search for the button, it will probably not be as effective.

When thinking about Placement, you must also consider the relevancy of the space that the button is placed. This will make it more obvious for the user and affords to more clicking.

See itunes.com for a good example of proper button placement. The Download iTunes9 button is prominently displayed on the website; it’s above the fold and there is adequate spacing around the button so that it is not cluttered. Lastly, the button is placed in a relevant space. The pre-text introduces you to the product, while the button follows up, allowing for easy access to download their product.

iTunes.com

Color & Size

The different combinations of color & size can greatly affect a button design. The color should help the button stand out from the rest of the page design, and is usually a brighter, bolder color to add contrast. As with color, a larger size will help a button stand out as well. For example, Amazon uses color & size to make the “Add to Cart” buttons pop from the rest of the page.

youtube.com- Since youtube's primary goal is to get people to share their videos, the "Upload" button is distinguished from the other buttons by adding in a yellow background. This makes the button easier to spot and click.

Priority

Lastly, you want to think about Priority. When there are various elements within a website, they tend to compete with each other for the user’s attention. Therefore, priority ranking must be established to emphasize what is most important. Several ways to emphasize priority is by placement, size, and color. The example below from Shopify.com illustrates my point. They want you to dig further into their site, either by clicking “Take The Tour” to get more information or by clicking “Pricing & Sign Up” to get started. Although both buttons are the same size and shape, the brighter green color indicates that it has a high priority and importance.