Click Here, Not There: Making Your Calls-To-Action More Effective

Calls-to-action are the most important part of landing pages. In this article, I will provide some recommendations on how to make your CTA’s work better.

A call-to-action, or a CTA, is probably one of the most important parts of a landing page. Usually designed in the form of a button, this short imperative phrase tells the user what action to take. In this article, I will provide some general recommendations on how to make your calls-to-action work better.

  • CTA text

    Avoid vague formulations, such as “Click here”, tell your visitors exactly what you want them to do:  “Sign up for the newsletter”, “Submit the registration form”.  If the phrase used for CTA seems to be very long, you can break it into two parts (e.g. Sign up now – and receive our weekly newsletter). Write the explanatory, second part either below the main CTA (in smaller letters) or put it outside the button – above or below. In the CTA text, you can either evoke the sense of urgency: “Sign up now”, “Limited offer” ; or mention the main benefit for the user: “Get free expert advice”.

  • Number of unique CTA’s

    An older rule prescribes only one unique call to action per landing page. Asking users to perform two or more actions on the same page can confuse them when navigating. However, sometimes there are two or even more options a user may have on the same landing page, depending on their stage in the buying process or their buyer type. An example would be offering to sign up for the trial or taking a feature tour first. In this case you would need two CTA buttons. They can be positioned next to each other or one on top of the other. Usually, the more important one of the two CTAs comes first and is highlighted graphically (e.g. with a brighter color).

  • CTA design

    In designing your CTA’s, you will need to balance two requirements: first, your CTA should look like an organic element of the landing page, and second, it should have enough contrast to the rest of the page to be noticed and clicked. Make your button 3-dimensional: use gradients and shadowing to get that “clickable” look. Also, an arrow within the button or outside it can have a positive influence on conversion.

  • CTA color

    It is believed that buttons with signal colors (red or orange) work better, however, do not sacrifice the look of your page in favor of a red button if does not match the overall design. You may also use some creativity and add texture or pattern to the design of your button, but only if this goes well with the look of the page and the product you are offering. Remember that in any case, the CTA text must remain clearly readable.

  • CTA positioning

    Placing the CTA button “above the fold” as the first element on the page seems like a good idea. However, visitors might not be ready to perform the desired action until they know more about what you have to offer. So I would recommend listing your main benefits first and then introducing the first CTA. A widely used strategy for longer landing pages is several CTA buttons (one above and one or two below the fold). In this case, make sure that your buttons look the same and contain the same text, otherwise it may look confusing.

  • CTA size

    Make sure that the CTA you make has large (but not disproportional) size, in order to be noticed by users “skimming” the page.  Regardless of the size, you need to leave enough white space around the CTA: this will make the button recognizable in the text flow.

The given recommendations can help you to improve the click-through rate of a CTA. However, to achieve maximum results on your particular landing page, A/B testing is recommended.

Examples of CTA buttons

Share this post

How to Create a Banner that Performs

Improving the look and the position of your banner may improve the overall performance and increase the profitability of your campaigns.

Display advertisement is often considered unprofitable due to high cost and low CTR (click-through-rate). However, improving the look and the position of your banner may improve the overall performance and increase the profitability of your campaigns.

1. Banner position.
The best position is close to the user’s eye path, that is to what a user is looking for on the page. E.g. an order confirmation, a product description, a sign-up form. Banners placed outside the main structural blocks of the page will probably not be noticed. In fact, users have learned to filter and ignore the parts of the web page typically occupied by banners (the top and the right-hand side of the page).

Banners placed on the side of the page vertically typically get half of the clicks that the banners placed horizontally do even if they are placed on the same level.

If a user has to scroll to view the banner, this reduces the CTR  drastically, so avoid placing the banner at the bottom of a longer page, unless the user normally has to scroll to the end of the page (e.g. when reading an article).

Surrounding banners, graphics and text also have a direct impact on your CTR. Experience shows that a user normally skims through blocks of content, thus grouping parts a web page together. If your banner is placed beneath or next to a bulky blinking ad, the user will often dismiss  both your banner and the ad as one content block that is of no interest to him/her.

2. Banner design.
Recent studies prove that a banner that matches the overall design of the page (i.e. uses similar colors, fonts, spacing, etc.) performs better than a banner that is a contrasting or exceptional element to the page design. My experience shows that the following elements have practically no positive impact on the CTR: moving or blinking elements, pictures of objects or people, logos, colorful backgrounds, flash animation, etc. However, consider the whole of the user journey on the website, if a graphical element, e.g. an icon, appears several times on different pages of a website, consider implementing it on your banner.

3. Banner text.
Here be specific about what your offer is. Provide the benefit the user will get from clicking on the banner in a wording that is suitable for the audience you are trying to reach. Banner title is the most important part of the banner text, often the only part of the text that actually gets read. Make sure that it captures the attention of the user, without exaggerating what you actually offer.

4. Call to action.
Make your call to action the most prominent element of the banner. Be very brief and precise about the action the user needs to take (“receive your free copy”, “register now”, “proceed to the checkout”). It is always good to make the CTR button three-dimensional and/or contrasting to the main palette.

5. A/B tests.
These recommendations are of general character and will not necessarily work on any page and for any product being advertised. Consider running some A/B or even multivariant tests in order to find out what actually performs best, both in terms of CTR and how profitable and qualified the incoming leads are.

banner example

Share this post

The Basics of Paper Prototyping

Paper prototyping allows early testing of a UI design for any kind of software. The simplest method is drawing a user interface or a series of “screens”.

This post is a recap of the Scrum User Group meeting on February 5, 2014, in Karlsruhe.Paper prototyping

During the workshop, the participants were shown some sample drawings and then could put the theory into practice, by developing a paper prototype for a restaurant app.

So, what is actually paper prototyping? This method allows for early testing of a user interface design for any kind of software. The simplest method of paper prototyping is drawing of a user interface or a series of “screens” the end-user will see. The clear advantage of this method is that it saves a lot of money and time in testing and trying out different designs before the actual development has taken place.

Some important things to remember whilst applying paper prototyping are:

  • It is better to have cross-departmental teams involving somebody from an IT, a designer, a usability specialist and possibly a marketing/sales specialist. Only in this way it is possible to evaluate the ideas from a 360-degree angle. As an example: often a small change in the design requires a lot of extra work for the IT that could be avoided if the prototype had been discussed by the whole of the development team from the very start.
  • The initial design should be kept simple, without much detail (e.g. the texts can be omitted first),  the main focus should be on the layout and functionality of the software.
  • Paper prototyping naturally has limitations in comparison to the testing on the devices, e.g. interactivity or performance on different screen sizes. These parameters should definitely be kept in mind as an adjustment in the design may be required later.
  • Remember that one picture often says more than a thousand words. Do not be reluctant to draw, even if you think you are not good at drawing. In essence, most  Graphic User Interface (GUS) elements can be depicted using simple geometric forms, e.g. “a trash bin” is nothing more than a cylinder with a parallel line with a dot on top of it.
  • Consider the user journey in developing your paper prototype. Does the user expect a “next” button at the top or bottom of the screen? Does he/she find a confirmation screen helpful? Though it is nice to be creative, the usability and clarity of your GUS  should be the primary goal.

All in all, paper prototyping is important in the initial stages of a software development process, and if done accurately, helps to save a lot of effort during the development stage.

 

Share this post