TutorialsWeb Design

How to design effective call to action buttons in iWeb 09

Call to action buttons are everywhere on the WWW, but what makes an effective call to action button? What is a call to action button and why do we use them?

In this post I want to explain the call to action button ‘best practices’ and how you can use iWeb 09 to build your own.

What is a call to action button?

As the name dictates, a call to action button is a click-able object, normally an image, whose soul purpose is to get users to click it. Whether it be to download something, visit another page or web-site or sign up for a service you are offering; there are hundreds of uses.

How can a call to action button be effective?

Before you create your call for action button however, there are a few things to take into consideration. These can be divided into 5 separate elements.

  • The size of the button.
  • Its position on the web-page
  • The color for the button
  • What shape the button takes
  • What text is written on the button

Careful thought must be given to each of the elements above before publishing your site; none is more or less important than the other, so let’s go through each one.

Size

Only you can decide what size of button is best for your iWeb site, but make it too small and your button will get lost on the page. Make it too big and it may not even look like a button so users will not even click it. Size does matter!

If you have multiple call to action buttons you should consider sizing them in order of importance to ensure the most important stands out more on a page.

Position

As with the size, only you will know where a call for action button looks good on your site, but bear in mind if you place it so far down a page that users get bored scrolling to find it, what good is it? Additionally don’t surround the button with loads of text or other images. White-space is your friend, so allowing room around your button to make it stand out and placing higher up the page will always result in more clicks.

Color

Call to action buttons should, in reality, be in a contrasting color to the rest of the site. After all, you want it to stand out. For example, if you use the DarkRoom theme for your iWeb site it’s no good using a gray call to action button as it will get lost within the rest of the page. A nice bright color should be used instead. On-line apps such as Kuler can help you decide on the best color for your button.

Always bear in though that if you have more than one call for action button on your site it may be wise to have a different color for each one; just don’t go mad you don’t want your iWeb site to end up looking like a rainbow.

Shape

Once again the shape of your button will depend upon other elements on your iWeb page. You want it to stand out, but as a button not as any other image such as an advert. Easily the most common form of button today is the rounded corner rectangle, and if users are used to clicking buttons of this shape why change?

Text

‘Click Me’ doesn’t tell a user very much about what the button does whereas ‘Add to Cart’ does. Think about what you write on your button; it must be short concise, but tell users what to expect if and when they do click it.

Using iWeb to create buttons.

Obviously we are going to use the shape menu for this exercise, but before we do select the page in iWeb you want to add the button to and make a copy of it (highlight it in the left-hand navigation pane, right-click on the mouse and choose ‘duplicate from the drop-down menu). You don’t have to do this step but then again you don’t want to be mucking up your beautiful iWeb page do you.

Insert a rounded rectangle and drag the size, using the handles, to what you think is correct. Now take a it of time moving the rectangle around the page, adjusting the size if necessary, until you are happy with both position and size. Remember not too big, not too small and with plenty of space around it.

Time to open (if you haven’t already) Inspector and select the Graphic tab. You should have some idea of a contrasting color for your iWeb site so select the ‘Fill’ drop-down and choose ‘Gradient’.

You can of course elect to have just one color as the fill for your button, but that will make for a flat button; we want to stand out. Here’s the settings I used for my button.

When it comes to adding text make sure you pick a font that goes with the rest of the site. I found that despite the font being set to ‘Regular’ it still looked too bold; so I added a shadow to it, but colored it the same as the button so as to make it look a bit ‘thinner’. Here are the settings I used.

And the final button looks just right.

It ticks all the boxes as far as my 5 points are concerned. The color, size and shape fit the site and make it stand out. The text explains what the button will do and it positioned directly underneath the text so users will see it as soon as they have finished reading the paragraph.

Do you use call to action buttons on your iWeb site or will you start using them now? Leave a comment and let us know.

You may also like

8 Comments

  1. I want to add a SKYPE ME button to my site. How can connect the button with the skype?

  2. […] This post was mentioned on Twitter by Tim Bowden, Tim Bowden. Tim Bowden said: Another new post at All About iWeb: http://tinyurl.com/28p8dso. Trying to make up for the long absence. […]

  3. Panos,
    Go to this page to create a Skype Button: http://www.skype.com/intl/en-us/tell-a-friend/get-a-skype-button/

    Copy and paste the script into an html snippet in Iweb, upload your site and it should appear in your website.
    Good luck
    Thierry

  4. Thanks for the post! I have already included some buttons!

  5. Thank you Thierry

  6. Will your directions to create a call-to-action button work for iweb 08 as well?

    1. Hi Lynne,

      yes they will, but you won’t have the ‘Advanced gradient’ option in Inspector. The principle is the same.

      Tim

  7. it is easy enough to make a button, but how to get the html to make the snippet work?

Leave a Reply to Lynne Cancel reply

Your email address will not be published. Required fields are marked *

More in Tutorials