iGlue

Research Brief: Searching Pays Off More

Searching Pays Off More

According to Internet Retailer’s recent search engine marketing survey of 102 web-only retailers, chain retailers, catalogers and consumer brand manufacturers, 28.0% of merchants report more than 25% of their site traffic stems from paid search advertisements, while 51.5% say more than a quarter of their traffic comes from natural search. Search engine marketing is one of Internet retailing’s fundamentals, says the report. Web merchants keep pouring money into advertising on search results pages and on search engine optimization projects to move up in natural search results.
In the past year:
·      44.9% of merchants report that the conversion rate on pay-per-click search advertising went up
·      16.3% say it went down
·      38.8% say their conversion rate held steady
·      47% report more than 25% of their web sales stem from search engine marketing
·      44.6% increased their paid search budgets
·      49% say they will increase it in the year ahead
Shar VanBoskirk, Vice President and principal analyst at Forrester Research, says “Everything we see from the retail side indicates… considerable interest and investment in search related to… driving more online sales.”
37.7% of respondents spent more than 50% of their online marketing budget, 11.9% spent 61% to 75%, and 20.8% spent more than 75%, according to the Internet Retailer survey of IRNewsLink e-newsletter readers conducted with e-mail marketing and survey firm Vovici Corp.
27.0% report more than 50% of their online sales are attributable to search engine marketing:

Percent of Online Sales Attributable to Search Engine Marketing
% by Type of Retailer
Percent of Sales    All    Chain    Catalog    Web     Manufacturer
5% or less    17.0%    16.7    27.3    16.2    11.1
6-10    9.0    25.0    0.0    8.8    0.0
11-15    11.0    16.7    9.1    10.3    11.1
16-20    7.0    8.3    0.0    7.4    11.1
21-25    9.0    8.3    9.1    8.8    11.1
26-30    8.0    0.0    36.4    2.9    22.2
31-40    9.0    8.3    9.1    8.8    11.1
41-50    3.0    8.3    0.0    2.9    0.0
> 50%    27.0    8.3    9.1    33.8    22.2
Source: Internet Retailer, May 2010
Google dominates the search engine landscape. Yahoo has been the perennial second-place finisher. Bing, has been making inroads since its launch in June 2009, and gaining increasing attention from retail marketers. 19.4% of respondents to the Internet Retailer survey say more than 90% of their search engine traffic comes from Google:
·      43.9% say 71% to 90%,
·      25.5% report 50% to 70%
·      11.2% report less than 50%
Udayan Bose, founder and CEO of NetElixir, says “For 40% of our online retail clients, Bing even surpasses Google in terms of conversion rates… (showing) very clear shift from Yahoo to Bing… because the conversion rate derived for Bing is significantly superior to Yahoo…  and in many cases…  to Google.”
2010 may also see more retailers getting graphic with their search programs, says the report. Images in search results have begun popping up, especially on Google, whose Google Base, formerly Froogle, has been testing the use of product images when consumers search for product-related terms.
In the survey, 36.4% of retailers say they are working with search engines to incorporate images into paid and natural search results. 40.4% say they are not, but plan to; 23.2% say no and have no plans to do so.
Images seem to be having an effect on consumers searching for products.
23.5% of retailers using images report a 1-5% increase in click-through rates,
·      17.6% say a 6-10% jump
·      11.8% report an 11-15% boost
·      2.9% report a 16-20% increase
·      5.9% say a more than 20% jump
·      38.2% report no improvement

Average Amount Paid Per Click on Paid Search Ads
Avg. Amount Paid    % of Respondents
≤ 5 cents    14.3%
6-10 cents    9.2
11-15    5.1
16-20    7.1
21-25    13.3
26-40    10.2
41-50    9.2
51-75    11.2
76 ¢- $1    10.2
> $1    10.2
Source: Internet Retailer, May 2010
Forrester’s VanBoskirk “There are a lot more sophisticated things a retailer can be doing than just throwing an image in the search results… better tailor the content of your ad to the users’ intent… better keyword strategies and better deciphering of users’ intent.”

Programs or Strategies Using (by Respondents) to Improve Paid Search Programs
Program/Strategy    % of Respondents
Adding more multiple word phrases to keyword inventory    60.8%
Writing more descriptive copy    58.8
Testing versions of landing pages    47.1
Monitoring competitors’ use of keyword and pages    45.1
Syncing keyword inventory effectiveness    14.7
Other    20.8
Source: Internet Retailer, May 2010
For additional information, please visit Internet Retailer here, or to see all of the tables accompanying the survey article, visit here.

This commentary is insightful. I recommend it to others.

Post your response to the public Research Brief blog.

See what others are saying on the Research Brief blog.

How Does Google Do When You Google Google

Google’s SEO Report Card is an effort to provide Google’s product teams with ideas on how they can improve their products’ pages using simple and accepted optimizations. These optimizations are intended to not only help search engines understand the content of our pages better, but also to improve our users’ experience when visiting sites. Simple steps such as fixing 404s and broken links, simplifying URL choice, and providing easier-to-understand titles and snippets for our pages can benefit both users and search engines.  The report, which is filled with dozens of examples taken straight from products’ pages.

http://googlewebmastercentral.blogspot.com/2010/03/googles-seo-report-card.html

How To Measure The Quality Of An Online Form

Post written by the team at Bluerank, a Google Analytics Authorized Consultant

Online forms. You enter information into them all the time. You fill them out to make online purchases, sign up for things, sing into things, complete surveys, and more. They’re an integral part of the online processes. And like all things, they can break.

Let’s talk about them from your point of view, as the manager of a website. If you have one or more on your site, it’s important to check how they perform and see whether they are a hampering a conversion process because of low quality. The great news is that you can use Google Analytics to do quality control on your forms. Read on to learn how.

Forms usually consist of a number of fields grouped into several steps. What’s more, many of them are subject to validation. The presence of validated fields is a prerequisite for conducting a test of the form. It is advisable to validate the form at the time of sending.

Form Error Rate (FER)
When we want to measure the quality of a landing page, we check the Bounce Rate. However, in the case of measuring the quality of a form, we introduce a new metric called Form Error Rate.

SubmitError: number of unsuccessful attempts to send the form

SubmitAll: number of unsuccessful attempts to send the form + number of successfully submitted forms

Example 1
A visitor was looking to buy an insurance policy online. In order to do that, he had to fill in a form with 25 fields. He got a confirmation that the form was successfully submitted on the 3rd attempt. Here is how to count the Form Error Rate in this case:

SubmitError = 2

SubmitAll = 2+1=3

Example 2
Visitor 1 managed to fill in and submit the form at first attempt, while visitor 2 submitted the form successfully at third attempt. Lastly, visitor 3 tried 3 times, but finally resigned. In this case:

SubmitError = 5

SubmitAll = 5+2=7

Error registration in Google Analytics

To track errors in online forms we can use _trackPageview() function. When the user tries to submit the form, it undergoes validation and the information about incorrectly filled fields is coded.

Example
There is a form with 2 fields.

Fields 1 and 2 get validated. When the user makes an error in a field, it will be coded as “1″ and a “0″ means that the field was either filled correctly or it was not subject to validation. So “10″ means there were two fields, and the first was filled in with an error, and the second was filled in correctly.

(click to enlarge)

If the form is submitted successfully, the code will look like this: “00″. In that case, the function that registers information about errors will look as follows:

pageTracker._trackPageview(”/onlineform/00″);

In order to analyze the data registered in Google Analytics, we should export it to an Excel worksheet. Let’s assume that during some period of time the following data was registered for our 2-field form (which the trackPageview function will populate in the Content report called Top Content):

There were 23 page views of a form. An error occurred 18 times, and 5 submissions were successful.

SubmitError = 18
SubmitAll = 18+5

The higher the Form Error Rate, the worse situation we have with our form. Obviously, an FER of 100% would mean that our form is not working at all. In the example above we have an FER of 78%. This means that our form needs improvement. In general, when the FER is under 20 % it means that our form doesn’t hamper the online sales process.

When analyzing the data, we can find the reason for low form quality. In the example, field 1 was the most problematic what means we should give it some extra attention.

We hope that this method is helpful, and you use it as a model for your forms, or even for other functions or operations you have on your page. Registration of errors enables you to calculate the error rate, identify the areas that are the most difficult for users, and optimize them.

Posted by Tomasz Lewandowski from Bluerank, a Google Analytics Authorized Consultant

http://analytics.blogspot.com/2010/04/how-to-measure-quality-of-online-form.html

Google wprowadził usługę remarketingu

Koncern Google udostępnił wszystkim swoim reklamodawcom funkcję remarketingu, którą można stosować w kampaniach w sieci partnerskiej Google. Pozwala ona w prosty sposób poprawić skuteczność docierania do użytkowników na podstawie ich wcześniejszego zachowania w witrynie.
Remarketing sprawdza się w różnych zastosowaniach, jak informuje Google, pozwala poprawić świadomość marki czy zwiększyć liczbę kliknięć i wyniki sprzedaży zarówno w przypadku reklam graficznych, jak i tekstowych. Teraz funkcja ta jest dostępna dla wszystkich reklamodawców AdWords.
Kampanie remarketingowe można łatwo tworzyć w całej sieci partnerskiej Google poprzez konto AdWords za pomocą karty “Odbiorcy”. Oferują one te same funkcje i raporty, które są dostępne w innych kampaniach AdWords, lecz pozwalają docierać do najlepszych odbiorców w całkiem nowy sposób.
Załóżmy, że internauci odwiedzają witrynę biura podróży, przeglądają oferty i zastanawiają się nad wykupieniem wycieczki, ale uznają, że ceny są jeszcze za wysokie i przechodzą do innych witryn. Dzięki remarketingowi można ponownie dotrzeć do tych osób z promocyjną ofertą wycieczek.
Inny przykład to klub sprzedający bilety na mecz. Właściciel może umieścić fragment kodu na stronie sprzedaży biletów w swojej witrynie, za pomocą którego trafne reklamy biletów (np. takie jak oferta z ostatniej chwili) będą wyświetlane w witrynach sieci partnerskiej wszystkim użytkownikom, którzy w przeszłości odwiedzili jego stronę. Można prowadzić kilka kampanii remarketingowych jednocześnie, kierując różne oferty do różnych grup odbiorców w zależności od odwiedzanych przez nich wcześniej sekcji strony (np. bilety, pamiątki, sektor VIP).
Google zapewnia, że remarketing jest doskonałym rozwiązaniem dla firm chcących dotrzeć do użytkowników dobrze reagujących na ich reklamy i oferty specjalne. Ułatwia to zwiększenie zwrotu z inwestycji. Pozwala także zwiększyć trafność reklam, dając użytkownikom więcej możliwości otrzymywania informacji na temat ofert specjalnych i rabatów, którymi mogliby być zainteresowani.

SEM na fali i ciągle zyskuje

1,373 mld zł - tyle był wart rynek reklamy internetowej w Polsce w 2009 r. Oznacza to wzrost o 12,9 proc. w porównaniu z 2008 r. (1,216 mld zł). Zmalał udział reklamy graficznej, a wzrosła rola reklamy efektywnościowej - wynika z podsumowującego zeszły rok raportu IAB AdEx przygotowanego przez PricewaterhouseCoopers Polska i IAB Polska.
Najlepszy w 2009 r. był IV kwartał, w którym na reklamę online wydano 425 mln zł. W I i II kwartale ub.r. wydano odpowiednio 316 i 336 mln zł, a w III - tylko 296 mln zł.
Najpopularniejszą formą reklamy internetowej pozostaje reklama graficzna (display), choć jej udział spadł z 52 proc. w 2008 r. do 50 proc. w 2009 r. Spośród form displayowych wciąż najpopularniejsze są reklamy wbudowane w treść strony - ich udział wynosi 68 proc. Na kolejnych pozycjach plasują się: formy wyświetlane nad treścią (tzw. layery) - 11 proc., inne formy reklamy displayowej - 9 proc., treści sponsorowane - 7 proc., i akcje specjalne - 5 proc.
Drugą pod względem popularności formą reklamową w ogóle jest reklama w wyszukiwarkach (bez SEO), której udział w 2009 r. wyniósł 26 proc. (wzrost o 3 pkt proc. w porównaniu z 2008 r.). Na kolejnych miejscach znalazły się: ogłoszenia - 15 proc. (16 proc. w 2008 r.), e-mail marketing - 6 proc. (6 proc.), oraz inne - 3 proc. (3 proc.).
W 2009 r. do 11,8 proc. wzrósł udział reklamy efektywnościowej (CPA). Dane dotyczące tego typu reklamy przekazało 20 uczestników badania. W 2008 r. takich firm było 12, a odsetek reklamy CPA w torcie reklamowym wyniósł 7 proc. Na wzrost popularności reklamy efektywnościowej wpłynął kryzys gospodarczy, który z kolei zahamował rozwój reklamy wideo, droższej od klasycznych reklam. Udział reklamy wideo w 2009 r. wyniósł tylko 1 proc., o 0,1 proc. mniej niż rok wcześniej.
- Na polskim rynku daleko nam jeszcze do 60-proc. udziału SEM, tak jak ma to miejsce od kilku lat w Wielkiej Brytanii, jednak dążenie wielu reklamodawców do bezpośredniego zwrotu z inwestycji marketingowych powoduje wciąż rosnące zainteresowanie działaniami reklamowymi w modelu efektywnościowym. Spowolnienie gospodarcze bez wątpienia ma udział w zeszłorocznym wzroście, niemniej jednak trzeba pamiętać, że wynik ten jest w dużej mierze efektem upodabniania się naszego rynku do bardziej rozwiniętych gospodarek - komentuje Marcin Kałkucki, starszy menedżer w PricewaterhouseCoopers.
W podziale na sektory najwięcej na reklamę internetową wydała branża usług finansowych - jej udział wyniósł 13 proc. - tyle samo co rok wcześniej. Kolejne pozycje zajęły branże: telekomunikacyjna - 9 proc. (10,5 proc.), handlowa - 9 proc. (6 proc.), motoryzacyjna - 7 proc. (7,5 proc.), czas wolny - 7 proc. (5 proc.), oraz inne - 25 proc. Na reklamę graficzną najwięcej wydały firmy z sektorów: media, książki, CD i DVD oraz finanse - po 11 proc., telekomunikacja i motoryzacja - po 10 proc., czas wolny - 7 proc., handel - 3 proc., oraz inne - 22 proc.
Wyniki opublikowano na podstawie danych przekazanych przez 29 firm. Są to: Ad.Net, Ad-Vice, Axel Springer Polska, Afilo, Agora SA, Allegro, ARBOmedia Polska, Bankier, Cormedia, Eniro Polska, Fotka, GG Network SA, IDMnet, Interia.pl, Medousa, Money.pl, Nasza-klasa.pl, Netsprint, Novem, O2.pl, Onet.pl, Polsat Media, Polskapresse, Pracuj.pl, Sare, TradeDoubler, TVP i Wirtualna Polska. Dane o przychodach brutto Google Polska i Pkt.pl były estymowane. Biorąc pod uwagę te same firmy, które przekazały swoje dane w 2008 r., rynek urósł o 11,1 proc. (włącznie z SEM) i o 7,8 proc. (bez SEM).
PwC podkreśla, że wynik badania nie obejmuje wszystkich wydatków na reklamę w internecie ze względu na duże zróżnicowanie i mnogość małych i średnich podmiotów na tym rynku. (TWI)

Google’s SEO Report Card

How many of Google’s web pages use a descriptive title tag? Do we use description meta tags? Heading tags? While we always try to focus on the user, could our products use an SEO tune up? These are just some of the questions we set out to answer with Google’s SEO Report Card.

Search Engines Impact Perception Of Brands

Search engines sway consumers’ views of brands

The search engine consumers use to find a brand’s website impacts both their perception of that brand and the decisions they make while on the site, according to new research by Wunderman, ZAAZ, and Compete.

“Search begins with the choice of search engine,” said David Sable, vice chairman and COO of Wunderman. “What this means if you are managing a brand is this: you need to know how consumers relate to Bing, Yahoo! or Google and how that reflects on you.”

Loyal users of Bing, Yahoo and Google were found to have distinct characteristics that benefit some brands more than others.

The search experience on different search engines offers different results, with some being more relevant to the consumer than others. This contributes to overall customer and brand awareness. If the search results satisfy the needs of the consumer, then the search engine has greater appeal to that potential customer leading to a deeper connection to the brand and the search engine.

“This research demonstrates that marketers have a real choice to make when formulating search strategies,” said Shane Atchison, CEO of ZAAZ.

“The search engine acts as a kind of ‘train’ on the Internet. Each train provides a different set of unique results or ‘destinations.’ Consumer preference for a specific train demonstrates a unique demographic and psychographic profile.”

The study found two reasons why different brands do better with different search engines:

• It’s About Who You Are: The demographic and psychographic profile of each loyal search engine user is different. Bing users, for example, tend to be mostly from the tip of the adoption curve (innovators and early adopters) where Yahoo! and Google’s passengers tend to be middle majority (see accompanying chart).
• It’s About the Road You Take:  Each search engine delivers a different result, whether paid for or earned. In the brands and vertical categories studied (automotive, travel, retail, and wireless), each search engine demonstrated different degrees of consumer engagement ranging from visiting to finally purchasing.

http://www.webpronews.com/topnews/2010/02/09/search-engines-impact-perception-of-brands

By Mike Sachoff

Google szuka źródeł przychodów poza wyszukiwarką

Google chce zwiększyć przychody ze źródeł spoza rynku reklamy wyszukiwarkowej. Eric Schmidt, CEO firmy, zapowiada inwestycje w różnego rodzaju projekty społecznościowe. W ostatnim kwartale 2009 r. Google miało 6,7 mld dol. przychodów i zysk na poziomie 1,97 mld. dol. (”WARC”)

Search On: Google Does Pure Branded Advertising…

Call to Action Buttons: Examples and Best Practices

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.

How can we create effective call to action buttons that grab the user’s attention and entice them to click? We’ll try to answer this question in this post by sharing some effective design techniques and exploring some examples.

By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.

Best Practices for Effective Call to Action Buttons

Designing call to action buttons into web interfaces requires some forethought and planning; it has to be part of your prototyping and information architecture processes in order for them to work well. In this section, we’ll discuss some design techniques for call to action buttons.

Draw user attention with size

In web pages, the size of an element relative to its surrounding elements indicates its importance: the larger the element is, the more important it is. Decide how vital certain site actions are, and size your call to action buttons accordingly.

Size of call to action button versus surrounding elements

Lifetree Creative exhibits this idea of size to indicate importance with their call to action button. Compare the size of their button with the company logo. To grab the user’s attention, the call to action button is roughly 20% larger (in width) than the logo. Even though the logo is placed higher on the web page, your eyes are drawn to the call to action button because of its larger size in relation to surrounding elements.

Size of call to action button versus less important call to actions

A web page may have multiple calls for action. To indicate the relative importance of a call to action with respect to other actions, you can vary their sizes. Here is an example of this concept on the paramore|redd website where the call to action button that asks the user to sign up for their newsletter is significantly larger than the continue reading call to action, indicating that on this web page, they would rather you take the action of subscribing versus reading the blog posts.

Draw user attention with prominent positioning

The placement of call to action buttons on a web page is critical to drawing the eyes of visitors. Placement in prominent locations such as the top section of a web page can lead to higher landing page conversions because users will likely notice the call to action button and take action.

Placement in a distinguished area

Putting a call to action button on a distinguished area is one way of making it stand out in a web layout. You can see this idea in action on the dailymile website where the call to action button looks to be on a higher plane (on top of) other site elements such as the bar graph graphic.

Placement at the top of the web page

To illustrate this concept, take a look at the “Post a Job!” call to action button located at the very top right corner of the Your Web Job website. By putting the call to action in a very prominent area, it is more likely that the user will notice it or remember it later, after they have looked at the site’s content. For example, if a job poster wanted to explore the site before taking the action of posting a job, the “Post a Job!” call to action will be ready for them regardless of which page leads them to a conversion, and they’ll be more likely to remember where they can easily take this action because of its prominent placement.

Placement at the center of a layout

Locating a call to action button in the middle of a web layout with no (or significantly smaller and deemphasized) flanking elements can be an effective way of drawing attention and enticing an action. In the case of PicsEngine, even though the call to action button doesn’t have a high color contrast with its background and surrounding page elements, it still manages to draw attention simply by its centered placement.

Use whitespace to detach call to actions from other elements

The use of whitespace (or dead space) around a call to action button is an effective way of making it stand out in areas where there are many elements.

Whitespace used to distinguish a call to action button

IconDock shows just how effective sufficient whitespace is. Even with a small and plainly-designed call to action button, it still stands out because of the space in between its adjacent elements.

Vary the amount of whitespace to indicate a logical connection

The more whitespace there is in between a call to action button versus a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the whitespace in between those elements and the CTA.

For example, Donor Tools has text above their “Sign Up” call to action that tells the user the benefits of signing up. On its right is a browser screenshot that is there for aesthetics and not necessarily for prompting the user to click on the “Sign Up” call to action button. By reducing the whitespace in between the text and call to action button, you group these two elements visually. The whitespace in between the browser screenshot and an image ensures that the eyes are not distracted from the call for action.

Use highly contrasting colors

Deciding what colors to use for call to action buttons is very important. Use colors in your call to action buttons that have a high contrast relative to surrounding elements and the background because it is critical to ensure that the user notices your call to action.

Color contrast versus surrounding elements

Notepod exemplifies how color contrast between a call to action and its surrounding elements can be effective in drawing user attention directly to it. The surrounding elements are all black, while the call to action button is a bright blue color.

Background/foreground color contrast

Valley Creek Church sets its bright yellow “Learn More” call to action button above a grayscale image. Even with a simple call to action button design on top of a complex element (a photo in this case), it still stands out because of the color choice.

Offer secondary alternative actions

A web page can have multiple calls for actions. Sometimes it’s necessary to offer a secondary action in order to convince the user to later take your desired primary call for action. For example, before the user signs up for a web service, some users may need further information to be prompted to take the action of signing up; secondary actions may be calling them to take a product tour or to visit a web page with more information about the product.

Displaying secondary actions beside the primary action

OfficeVP displays two call to action buttons beside each other — centered and located at the top of the web layout. By differentiating the color, users can see that they have two distinct routes: they can either sign up directly (primary action), or if they wish to learn more before committing, they can take the secondary action of taking a tour first.

Transmissions also shows this notion of having a secondary action next to the desired primary action. In this case, the primary action is for the user to purchase the application. If they want to try it before purchasing, then the secondary desired action is to download the application first. Notice that the primary action is indicated by making it more prominent than the secondary action, having a higher color contrast to its background than the secondary call to action button. Thus, you effectively draw the eyes from left to right.

Also, note the use of reduced whitespace between the two call to action buttons relative to other elements in the area, effectively grouping the buttons together.

Displaying secondary actions below the primary action

Alternatively, you may wish to display the secondary action below the primary action. This may be necessary if you need to have greater visual separation of your calls for action. Virb shows this situation where the “Join Now” call to action is placed above the secondary action of taking the product tour. Notice that the secondary action is further separated from the primary action by using a more muted color for its default state.

Convey a sense of urgency

Phrasing of the action by using bold, confident, and commanding words can alter the user’s perception in such a way as to convince them that they shouldn’t wait any longer to take action and that waiting to take action would result in a penalty or a missed opportunity.

tap tap tap demonstrates this idea of adding urgency to a call for action. The “Buy Now” call to action button has the text “Intro price”, subtly suggesting that the longer the user waits to take action, the higher is the risk of having to pay more later on when the introductory price will have passed.

Oftentimes, suggestions to perform an action can be effective in creating a sense of urgency. Using words such as “now”, “immediately” and “right now” can convey such urgency. Take the Organizing for America (BarackObama.com) example of appealing to website visitors to “DONATE NOW”. If instead it simply said “Donate”, the sense of urgency would disappear and users may be less likely to take action.

Tell users that taking action is easy

Often, a user’s hesitation to take action stems from thinking that an action will be difficult, costly, or time consuming. By taking care of these concerns, your call to action buttons can lead to more conversions.

For example, on Basecamp, the call to action button explicitly defines the time it would take the user to sign up and tells users that signing up is costless (free). This approach weakens two primary users’ concerns when it comes to taking action online: paying (which also requires them to take additional actions such as getting their credit card) and time constraints.

In the example of Tea Round App, they tell that user that they won’t be getting spam emails by taking the action of signing up for their email service, which is a cause for concern whenever giving your email to a third-party service.

Tell users what to expect

Most web users are hesitant to take things they’re presented on the web at face value. By experience, their trust has been burnt before by links that promise free service only to find out that they’d have to put in their credit card numbers to get what they want. To increase click conversion and to build trust, anticipate users’ scepticism and tell them what they will gain by taking the action you’ve presented to them. When designing a call to action button, think of all the potential questions users will have, and make sure that you answer them in time.

Mozilla Firefox tells users what exactly to expect by clicking on their call to action button. The call to action button tells you that you’ll be getting Firefox 3.5, that it’s free, and (for those needing greater specificity) that the exact version is 3.5.3 for the Windows operating system, that the language is English, and that you should expect a 7.7MB download.

Onehub anticipates the question of whether the user (upon taking action) needs to pay up front or whether they can take the product for a test drive by telling the user that if they take the action of signing up, they’ll have a 30-day trial free of charge.

Design Showcase of Call to Action Buttons

Now that we’ve covered some best practices for designing call to action buttons, let’s look at some exemplary implementations of call to action buttons on websites. We’ll tie in these designs with the techniques and best practices from above and explore how they aid in accomplishing good design practice.

Campaign Monitor
This set of call to action buttons presents two potential user actions: “Try it for free” and “View features”. For users who know about Campaign Monitor already and want to try it now, they can take the primary desired action, while others who’d like to explore before making the time commitment can take the secondary action of viewing the features of the web application.

Fileshare HQ
This call to action button tells users what to expect (”start sharing files in minutes”).

Livestream.com
This set of call to action buttons uses vertically-arranged grouping to indicate the desired order of importance of the actions being presented to the user. The desired primary action is to get an estimate, followed by getting details about the service, and lastly, to compare and contrast between different plans.

Traffik CMS
This call to action button is placed in a prominent location at the very top of the web page and is highlighted relatively to the surrounding elements by size and color use.

Hambo Design
This call to action button tells the user what to expect: by getting a quote, there are no strings attached. It anticipates the question of “how much will a quote cost me if I were to invest my time in going through this process?”

The Resumator
You can see many best practices in action on this call to action button implementation. First, it uses whitespace, size, and color to clearly separate it from other page elements. Then, to create a logical grouping with elements that can help convince the user to take action, it has less whitespace with the feature text above it, and the secondary action of “Take a tour first” below it.

Wufoo
Wufoo offers two actions that the user can take in a horizontally arranged fashion with the primary desired action on the left. The buttons are large and very hard to miss, yet they are not obtrusive when looking at the overall design.

Mobile Web Design
This call to action button is placed in a prominent location; it has large size and a distinctive color with respect to surrounding elements. To provide additional context on what it means to “Purchase the book”, the call to action button is followed by text explaining cost and available format (traditional book or PDF).

NCover
These call to action buttons are stacked. The primary desired action is on top of the blue secondary desired action. The user is drawn to the button because of the size, and using a blue hue for the secondary desired action mutes it relative to the primary desired action. Notice the use of whitespace to create a logical grouping of the three related elements that can help make the sale: the text that tells users what NCover does, the sign up call to action, and the tour call to action. In contrast, notice the increased margin between this group and the element on the right.

Xero
This set of call to actions exhibits the use of providing users a secondary action. On the right of the primary desired action, there is a text link that calls for the user to “find out more”. For users not willing to sign up right away, the design may have increased the likelihood that the user will “find out more” before signing up.

Tao Effect – Espionage
Here is a set of call to action buttons that provides users with three options: Download, Buy Now, or Upgrade. In this case, the primary desired action is to download the application, followed by the two equally-prioritized actions of Buy Now, or Upgrade. This distinction is made by varying the colors of the call to action buttons, with the primary action more prominent than the two secondary actions.

The Invoice Machine
Here you can see two call to action buttons that are highlighted with a blue border. Because they’re both styled the same way, we can assume they have equal importance. Perhaps the company determined that it is unlikely that the user will take the action of signing up before seeing what they have to offer, or perhaps they’ve determined that the product tour will help them convert viewers to members more effectively.

Ekklesia 360
This set of call to action buttons showcases the use of icons to denote a sense of moving forward (indicated by the arrows pointing to the right). They use a high-contrast color against the dark blue background to make the call to actions prominent in the page design.

Checkout
By using a very prominent color for their call to action button relative to the overall design, even though the image above it is significantly larger than the button size, it still manages to attract the user’s attention.

spinen
Using direct and clear language tells users what to expect when they take action: in this case, clicking on the call to action button will let them find out more about the product.

Codebase
This call to action button tells users what they can get by taking action: a free 15-day trial. It manages to draw the user’s attention by using a high-contrast color, an icon on the left, and plenty of whitespace.

GoodBarry
In this call to action, you can see how whitespace, size, and smart color decisions are effective in making a call to action very noticeable. Emphasizing that the action will be “FREE” conveys to users what to expect.

Wake Interactive
Here, the color of the call to action button relative to its surrounding elements makes it pop out even with the small amount of whitespace surrounding it.

OH! Media
This call to action button really stands out of the page because of its position, the whitespace surrounding it, and – most importantly – the color choice. Looking at the page, the eyes are drawn directly to the call to action.

Pixelcrayons
Check out how whitespace can greatly improve the amount of attention that this call to action button draws.

Ballpark
The size of this call to action button is effectively attracting the user’s attention. Its clear and direct language tells the user exactly what to expect when taking the action.

One Theme Per Month
This call to action group puts the primary desired action in the middle of alternative actions. By choosing a very prominent color for the primary desired action, along with a larger area, it manages to put it above in order of importance compared to the secondary actions.

Scrapblog
You can see the effects of using a prominent color, sufficient whitespace, and size relative to surrounding elements to attract users’ attention. Straightforward language conveys a sense of easiness, claiming that you can “start” right away by taking action.

13 Creative
This call to action button shows how by using an unconventional design, you can still draw attention even if surrounding elements are proportionally larger.

Kalculator
This call to action tells users exactly what to expect: by clicking on this call to action, they should anticipate shelling out $3.99. Using the word “only” hints that this is quite a good deal, which can help make the sale.

Web Design Beach
Below is a set of call to action buttons with two distinct colors. The more prominent one, “get a quote” suggests that it is the desired primary action.

The Highland Fling
This call to action button manages to call attention to itself by plenty of whitespace, prominent positioning, and the use of an icon to distinguish itself. By using the word “now”, it conveys a sense of urgency and a need to act immediately.

Commercial IQ
The size and prominent positioning of this call to action button draws users’ attention. A magnifying glass icon adds context to the purpose of the action. Adding the text “Free to search” anticipates the question the user may have about the cost of the action.

dashboard
Here, you can see the use of a high contrasting color to make the call to action stand out, even among significantly larger page elements.

Additional Resources on Call to Action Buttons

If you’d like to read more about Call to Action buttons, here are some relevant resources and articles on other sites.

How to Create a Slick and Clean Button in Photoshop
This tutorial on Six Revisions, written by me, will show you how to make large and noticeable call to action buttons step by step.

Inspirational Buttons in web design – Pattern Tap
If you need some inspiration on good button designs, check out this Pattern Tap collection.

10 techniques for an effective ‘call to action’
Paul Boag discusses some techniques for making good call to action buttons.

Good Call-To-Action Buttons
UX Booth has a good piece on what a good call to action button consists of.

Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance
Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer.

Web Design Trends: Call To Action Buttons
Lee Munroe puts together a showcase of call to action buttons, along with a discussion on current design trends.

http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/