It is not uncommon for companies to sink large amounts of money into obtaining traffic to their websites in an attempt to increase conversions. Some of their money might go towards search engine optimization and some might go towards pay per click or search engine marketing. Little do they know their problem might not be about getting more traffic. The real problem could be that they have a poor call to action.

A plain “Click Here” link buried underneath a wall of text is not going to yield very good results. Driving traffic to your website is important, however what good is the traffic if the primary call to action is nearly invisible? Having a well-designed call to action could be all the difference needed to rocket conversions sky high. The design of a call to action can be broken down into 4 simple elements, size, shape, color, and position.

Design Elements

Size

Make your call to action large enough that it stands out on top of everything else on the page. It is your primary focus, right? Generally speaking, the larger an element is on a page the more noticeable it will be, thus the more importance it should hold. A good call to action is large enough so that it is easily recognized without being tacky in the process.

Before going off the deep end realize that it is possible to create a call to action that is too large. If you create too large of a call to action users may not understand that it is clickable and will miss the call to action altogether. Create a call to action that is large in relation to other elements on the page, but not over done.

Alternatively, if you have more than one call to action, size them in relation to their importance. The primary call to action should be larger than the secondary call to action.

Sortfolio Call to Action
The “get listed” call to action stands tall above the rest of the navigation as the primary call to action.
MailChimp Call to Action
The home page over at MailChimp features two large call to action buttons that ensure they are not missed.

Shape

The best calls to action are most commonly shaped like buttons as they attract attention and are instantly identified as clickable. Use rounded or circular corners on the ends of your call to action to give it the shape of an ordinary button. Square corners do work as well, however some users may misinterpret your call to action for an ad or banner and steer clear from it. Feel free to use square corners, just do so with a bit of caution in mind.

On top of shaping your call to action to that similar of a button it is also beneficial to use a unique font from the rest of the page for your call to action. The difference in the shape of the font will help attract attention to the call to action and draw users in. As always, choose a font that is distinctive yet complimentary to the other fonts on the page as well.

Apple Call to Action
Apple uses multiple rounded corners to enforce that the element is indeed clickable. They also make use of a “+” circle on the top left corner to help draw users attention.
Authentic Jobs Call to Action
Authentic Jobs uses a dominant button with an accent below it to guide users eye path.

Color

To say that any of the 4 elements being outlined here has more importance than the other is too close to call, however the color of your call to action is right at the top. One of the quickest ways to grab a user’s attention is by using a bright, contrasting color right within your call to action. Choosing a color that stands out from the rest of the colors used within the page will enforce its significance.

Pick a color that is specifically unique to your call to action and is not used anywhere else on the page. For example, if all of your text is black and all of your links and buttons are blue you should use a different color than black or blue for your call to action. Instead, use a brighter contrasting color such as orange. By using orange the call to action will not fade in with the rest of the blue and black and will stand atop of all the other elements on the page.

It is also recommended that you need to practice using colors appropriately. By all means pick colors that are bright and contrasting, however make sure you pick colors that fit the overall color scheme of the page. Throwing in random colors in order to get a call to action to stand out will look unprofessional and perhaps worse, untrustworthy. Additionally, be careful when using more than one call to action on a page. Too many colors can quickly turn your page into a rainbow, draining the impact of the primary call to action, and pushing users to an unresponsive state.

h2desk Call to Action
h2desk uses a beautiful bright red call to action on top of a dark background.
Less Time Spent Call to Action
The bright green button on Less Time Spent is a high contrast of the other colors used on the home page.

Position

Positioning your call to action instinctively within the eye path of users is incredibly important. No matter how large, oddly shaped, or brightly colored your call to action is users will never see it unless it is placed within an intuitive position. The exact position for your call to action will depend on the page layout itself, however the best practice is to keep the call to action above the fold and in a prominent area with plenty of breathing room.

You are able to prioritize the elements on a page simply by the order in which they are placed. Keeping the call to action toward of the top of a page, not requiring users to scroll down to find it, places more value on the call to action and allows it to receive more impressions. Leaving the call to action in an instinctive position allows users to also come back to it after browsing other parts of the website.

Leaving a fair amount of white space around the call to action prevents other elements of the page from interfering with the importance needing to be placed on it. Positioning the call to action in an intuitive position without any clutter in the way will reward the highest amount of conversions.

Textpattern Call to Action
Textpattern places their primary call to action right underneath the logo ensuring it is going to be seen.
Notable Call to Action
Notable positions their call to action above the fold with plenty of whitespace surrounding it.

Examples of Great Calls to Action

BuySellAds Call to Action
BuySellAds
VideoTeaching.com Call to Action
VideoTeaching.com
Site Remark Call to Action
Site Remark
CoTweet Call to Action
CoTweet
File Share HQ Call to Action
File Share HQ
Catch Mail Call to Action
Catch Mail
Templatic Call to Action
Templatic
Pulse Call to Action
Pulse
Campaign Monitor Call to Action
Campaign Monitor
Home Theater Forum Call to Action
Home Theater Forum
Healogix Call to Action
Healogix
Livestream Call to Action
Livestream
Donor Tools Call to Action
Donor Tools
WebNotes Call to Action
WebNotes
TrackMyPeople Call to Action
TrackMyPeople
FreeAgent Call to Action
FreeAgent
SugarSync Call to Action
SugarSync
1Password Call to Action
1Password
Pastebot Call to Action
Pastebot
MemberFuse Call to Action
MemberFuse
Droplr Call to Action
Droplr
Zaplee Call to Action
Zaplee
Xpelo Call to Action
Xpelo
HelpSpot Call to Action
HelpSpot
EnStore Call to Action
EnStore
Jolicloud Call to Action
Jolicloud
Xero Call to Action
Xero
POP Creative Group Call to Action
POP Creative Group
Glasscubes Call to Action
Glasscubes
Planning Center Call to Action
Planning Center
Bidsketch Call to Action
Bidsketch
Virb Call to Action
Virb
WWF Call to Action
WWF
LemonStand Call to Action
LemonStand
Crush It! Book Call to Action
Crush It! Book
Matthew Henry Call to Action
Matthew Henry
Shopify Call to Action
Shopify
Medical Licensure Group Call to Action
Medical Licensure Group
Halogy Call to Action
Halogy
LightCMS Call to Action
LightCMS
International ArtExpo New York 2010 Call to Action
International ArtExpo New York 2010
Osmond Interactive Call to Action
Osmond Interactive
Magntize Call to Action
Magntize
Mobile Roadie Call to Action
Mobile Roadie
Microsoft MIX10 Call to Action
Microsoft MIX10
Art in My Coffee Call to Action
Art in My Coffee
Onehub Call to Action
Onehub
Sprouter Call to Action
Sprouter
SliceMyDesign Call to Action
SliceMyDesign
Essay Academia Call to Action
Essay Academia
Ambition Wordpress Edition Call to Action
Ambition Wordpress Edition
Brite Revolution Call to Action
Brite Revolution
StreetMavens Call to Action
StreetMavens
Vuu Media Call to Action
Vuu Media
Message Stream Call to Action
Message Stream

Additional Information

Putting it all Together

At the end of the day creating a good call to action is all about getting users to convert. No matter how you go about getting conversions you cannot ignore the design of your call to action. The 4 simple elements outlined here may not seem like much, but can work wonders on your conversion rate. Take a look at your website and reevaluate your call to action. Could it use a little work? Would any of these 4 elements help give it a boost? Please let me know about it in the comments below. Maybe I can give you a hand or lend you some advice?