12 Essentials of a High Converting Landing Page

Goal:  To create the world’s most effective landing page.

Problem:  Where the heck do I start?

Crafting a competition-crushing landing page is not for the faint of heart. There are dozens of different components to keep in mind, a whole science of psychology lurking beneath the surface, and the vague idea of “what the customer wants” whispering in the background.

How can you demystify the process and unleash your landing page, to the amazement of the watching world?

Keep reading, and I’ll lay it out for you. But before I do, I want to assure you…

There is no standard manual on the creation of a perfect landing page.

Isn’t there some practical, step-by-step guide to putting together such a landing page? There are guides on how to build a real rocket. What about landing pages? Where is the easy, go-to guide?

You’re reading the closest thing to it.

Sadly, there’s no one-size-fits-all instruction book. No matter how hard you look, you’ll never find landing page Holy Grail. Why?

Landing pages have so many differentiating factors.

Landing pages are as different as the people looking at them. Every landing page has a different call to action (goal), a different reader (user), a different product or service, and a different niche.

  • Some landing pages are selling zero drop shoes to ultramarathoners.
  • Another landing page might be inviting in-house marketers to a two-day conversion conference in Toronto.
  • Yet another landing page may be inviting sommeliers to take an online pairing quiz.

There is an incredible amount of variation among audience, purpose, intent, product, angle, focus, industry, niche, perception, buy-in, cost, messaging, value proposition, testimonial approach, shipping method, and a host of other factors.

One size does not fit all.

landing page essentials - placeitSource:

There are unifying elements that characterize highly successful landing pages.

Because we’re talking about landing pages, however, some things do remain constant. High-converting landing pages do have several characteristics in common. Although this article does not provide a full review of each element, you’ll know enough by the end to get to work creating your own compelling landing page.

Essential Element 1:  Killer Headline

A headline is where everything begins — interest, attention, and understanding. The headline is your first and most critical action of a landing page. Here’s what it needs to accomplish:

  • The headline should grab the reader’s attention.
  • The headline should inform the user what the product or service is all about. Note: If your headline complements an image that explains the product/service, then you’re good.
  • It should be short — never more than twenty words, and preferably only ten.

This landing page for a social skills course emphasizes the problem that the course solves. Immediately, readers know the problem that they will overcome.

essential 1

Notice this headline from PictureMarketing. It makes no attempt to be clever, but identifies exactly what the service is intended to provide. Mission accomplished.

essential 2

Monsoon uses a short, attention-grabbing headline, then immediately backs it up with a subheadline. This landing page’s clean design helps to give further power to the image and headline.

essential 3

MailChimp uses a simple, declarative statement to democratize its product and emphasize its importance.

essential 4

Essential Element 2:  Persuasive Subheadline

If the headline makes the user look, then the subheadline should make them stay. A subhead is part of the one-two punch of a landing page’s power.

  • Normally, the persuasive subheadline is positioned directly underneath the main headline.
  • The subheadline should have some element of persuasiveness. Remember, you’re luring them to stay on the page with the subheadline. You take the concept of the headline, and push it a little bit further.
  • The subheadline can go into slightly more depth and detail than the main headline.

HelpDesk’s landing page does a position flip on the headline and subheadline. In the image below, notice how the main headline is, “A delightful customer experience.” The subheadline, positioned smaller and above it focuses that general idea (customer experience) with this statement: “A help desk for teams that insist on.”

essential 5

The position switch seems to be intentional. Taken together, it forms a whole sentence, but the attention should be first directed on that emotionally-loaded phrase:  “delightful customer experience.”

Essential Element 3:  Pictures

The brain processes images 60,000 times faster than text. A user will be affected by the images on your landing page immediately.

  • The pictures should be large.
  • The pictures should be relevant to your product or service. If you are selling a physical product, it is essential that your landing page contain an image of the product.
  • If you are selling a service, then the primary purpose of the image should be to grab attention, and demonstrate relevance to the product.
  • Make sure the pictures are high-quality. This is not the place to feature stock photographs or last-minute Photoshop botches.

Mixpanel uses images to show the functionality of the product, and to help explain it. These images are fun, and attention-grabbing.

essential 6

Repumatic’s landing page uses large screenshots to display the software’s functionality.

essential 7

Shutterstock sells images, so it’s only natural that they would have a landing page with a large, prominent picture.

essential 8

PictureU, whose service also includes photos, does a great job of featuring hero graphics on its landing page:

essential 9

Essential Element 4:  An Explanation

If a user doesn’t understand what your product or service is about, you’ve lost them. An explanation — in whatever form it comes — is crucial. The best explanations are those that are straightforward; cuteness not required.

  • Your explanation can be integrated with your headline, or completely separate.
  • Your explanation may combine elements from several sources: 1) your headline, 2) your subheadline, 3) your image, 4) a separate paragraph. Taken in isolation, each of these elements does not explain the product or service, but as a composite, they accomplish what an explanation should do.
  • An explanation should be benefit-oriented. Explanations are functional, but functionality should be tilted in favor of the user. For example, “We make websites” is a functional explanation, but it lacks the user-focused orientation. To make this explanation even more compelling, you could angle it towards the user to show them the value: “Get a website that makes you money.”

This explanation is given in picture form. Using parallax scrolling features, the website displays how the mailbox and response function of the software work.

essential 10

Essential Element 5:  Value Proposition or Benefits

The value proposition is defined as “an innovation, service or feature intended to make a company or product attractive to customers.” When it comes to your landing page, this element needs to have pride of place. The value proposition basically answers the user’s question, “What’s in it for me?”

  • Like the “explanation,” a value proposition can be found spread among the various essential elements.
  • One of the best ways to advance your value proposition is through a list of benefits. Many landing pages use an unadorned bullet point list to explain the benefits of their product or service.
  • Benefits should be clearly focused on the user. It’s easy to drift off mark with benefits, and start talking about yourself as a company. Don’t do this! Instead, always think about the user and how he or she will benefit. Benefits aren’t “we are awesome.” Benefits are “the user will be awesome with this product or service.” For example, let’s say you are selling Web hosting. Option 1: “We have 99.98% uptime!” Option 2:  “Your website will have 99.98 uptime!” Which one is customer-oriented? It’s the second one. That’s the kind of benefit you should be going for.

Crazy Egg’s landing page has three simple benefits. Each of these focuses directly on the upside for the user.

essential 11

Repumatic’s benefit list is simple and straightforward.

essential 12

The benefits listing on Instapage provide the same simple, straightforward presentation. They are explicitly user-focused with the phrase “All the Features You Need to Succeed.”

essential 13

Essential Element 6:  Logical Flow

The logical flow of a landing page is just as important as the actual content you have on the landing page.

A truly interested customer will be cognitively engaged with the landing page. They will read the content and follow the thought process. Thus, you must lead them through a process of thinking that is logical and compelling.

  • Start with your explanation, continue with your benefits, include your testimonials, and end with your CTA. This is the most obvious and persuasive method of structuring a landing page.
  • CTA placement is a critical component of landing page flow. You can use multiple CTAs on a single landing page, positioning each one at the end of each discrete section of the landing page.
  • Allow your design to demarcate sections. You don’t have to be subtle about the way that a page is organized logically. In fact, if you augment the logical flow with corresponding design flow features, then you will improve the process with visual/cognitive coherence.
  • Use persuasive elements throughout. Don’t confine persuasion to a single section. Persuasive features should be present in every section of the landing page.
  • Remember, long-form landing pages are highly effective. Don’t be afraid to make a landing page really long.

Short pages don’t need the same level of hierarchical rigor that a long-form landing page needs. Optimizely uses a short-form landing page that has a single visual focus, and the simple flow of headline, explanation, and capture form, followed by the CTA button.

essential 14

Repumatic has a long-form landing page, so they use multiple CTAs throughout. This particular landing page has six, each located after a section. Notice the button that appears twice in the image below: “Personal Accounts are free! Get Started!”

essential 15

Essential Element 7:  Something about Pain

Wait. “Something about”? Isn’t that pretty vague? This point is intentionally vague, because the idea of “pain” can be anywhere.

Here’s the psychology behind pain. Humans are wired to avoid pain. Every product or service can help to alleviate pain in some way. If you can cause the user to think about their pain, they will subconsciously seek relief from that pain, and thereby be more likely to convert.

  • Mention what a user will lose, not just what they will gain. According to the theory of loss aversion, we are more likely to anticipate the pain of losing something than we are to feel the pleasure from gaining something of equal value. In other words, it feels good to get $50, but the pain that we feel from losing $50 is twice as intense as the pleasure we received from gaining the same sum.
  • You can implement pain references in the testimonials, as well as in the remainder of the copy. Since pain is a powerful human element, real human testimonials are often very effective at conveying this pain in a trustworthy way.
  • Be sure to relieve the pain. Your product or service is provided as an antidote to the pain. Don’t leave the user wallowing in the pain. Draw it to a conclusion by featuring the answer to the pain.

Prudential has a landing page designed to persuade people not to procrastinate. The pain point that they focus on is the worry about not having money enough to retire on, the concern about living in poverty, and the guilt for procrastinating. They emphasize this pain with several interactive features, like this one:

essential 16

Ramit Sethi’s landing page for his course, “How to Talk to Anybody,” is packed with pain. Sethi is selling a course and it’s predicated on pain — the pain of embarrassment, missing out, being rejected, and feeling lonely. He features dozens of testimonials that drive this feeling further and further, making for a very effective landing page:

essential 17

Essential Element 8:  Something about Pleasure

Just as humans are pain-avoiding machines, we are also pleasure-seeking animals. Every human is motivated by the desire to gain pleasure, which can have a variety of forms.

  • Your goal in the landing page is to show how pleasure is a by-product of having the product or service. So, for example, you are selling arthritis-relief medication. But you’re not just selling a pill. You’re selling freedom, relief, and joy. If you sell cross-training footwear, you’re not just selling something that goes on a customer’s foot. You’re selling respect, trendiness, security, vibrancy, and fulfillment. Each product can be presented in such a way that it brings emotional and psychological pleasure.
  • Use emotional pleasure cues. Discover the ways in which your product meets an emotional need beyond its mere functional role. We all desire to be accepted, loved, appreciated, recognized, honored, compensated, admired, etc. What emotional craving can your product or service help to satisfy?

Mixpanel sells A/B testing services. Not all that emotionally powerful, huh? Think again. The landing page they use helps to inspire a sense of wonder and surprise. Humans have a psychological proclivity for surprise. It scratches an emotional itch. That’s exactly why this headline is perfect for speaking to the brain’s pleasure center.

essential 18 helps users gain back their reputation. It’s easy to see their pleasure-added headline, subheadline, and CTA:

essential 19

Instapage’s landing page presents the user with this question, “Want to get it right on your first try? Welcome to Instapage.” This desire to get things right on the first try resonates with an emotional need. We recognize that doing so will build our confidence, our reputation, and maybe our income.

essential 20

Essential Element 9:  Trustworthy Testimonials

A landing page’s testimonials are one of its most important trust signals. A user wants to know that they can trust the product or service. If they see a trustworthy testimonial, this goes a long way in cultivating the user’s trust.

  • Use testimonials from real people. Celebrities and experts are great, but you don’t need testimonials from these people. Choose testimonials from people who are most relevant to your target audience.
  • Make sure you use pictures. Pictures are the keystone of trust in testimonials. It’s important that every featured testimonial be accompanied by a photo of a real person.
  • Testimonials should be specific. Glittering generalities don’t make great testimonies. The best testimonies are those that are backed by real numbers, real data, and specific applications.

TasksEveryDay, which provides offshore virtual assistant services, uses a rotating carousel of testimonials. Each featured testimonials has a picture, a name, a video, a specific geolocation, and a clear discussion on how the service benefited them.

essential 21

The testimonial on Curalate’s page uses three different detailed numbers:

essential 22

These testimonials on Instapage also feature pictures, names (first and last), positions, and companies.

essential 23

Essential Element 10:  Methods of Contact

Are you legit? Then prove it.

Some of the most persuasive landing pages that I’ve visited have multiple methods of contacts — a phone number, a physical address, an email address, and a contact form. Some even have popups where a customer service representative asks me if they can be of help.

These go a long way to help strengthen my trust in the company, and to eliminate any friction in the conversion funnel.

  • At the most basic level, provide some assurance that you are a real company. Usually, this involves a physical address and a phone number.
  • Live chats featured in a popup can be helpful, but not a must-have. Using live chat is somewhat controversial. If you insist on using one, do your homework, and make sure you have some convincing reasons for keeping it there.

While researching this article, I chatted with one of the representatives from IwillTeachYouToBeRich. She was helpful and courteous, and answered my questions. Besides, I knew, as a customer, that the company was present and responsive. If I had any questions about signing up for the course, I knew I would be able to get answers:

essential 24

The “Chat Here” box is always present, regardless of scroll depth, on FotoZap’s landing page:

essential 25

A large contact form on the TasksEveryDay landing page made it easy to get in touch with the company with any questions or concerns.

essential 26

SignNow, a service of Barracuda, has a landing page with an easy-to-use chat function.

essential 27

Retargeter has a simple landing page with an easy-to-use “support button” in the upper left.

essential 28

Clicking “support” brings up a lightbox chat form.

essential 29

Essential Element 11:  A Guarantee

Customers love guarantees. A guarantee, regardless of what it is or how it’s presented, can help people feel reassured while on your landing page. Simply the word itself improves the likelihood of a conversion.

  • Guarantees can take many forms. Choose a type of guarantee that works for your business type, and state this guarantee on your landing page. There’s no need to delve into the legalities of it. Just say it. The point is that you have a guarantee, and the customer knows it.
  • In the absence of any explicit product guarantee (e.g., satisfaction, money back, etc.), you can provide a different type of guarantee: e.g., “100% No Spam Guarantee.”
  • Position your guarantee statement close to the CTA. This proximity will help the user 1) receive a final bit of assurance, and 2) be ready to convert.

Ramit Sethi gives his customers a killer guarantee and he goes into detail to explain how it works:

essential 30

At the bottom of Help Scout’s landing page, they provide this reassurance. Although it doesn’t necessarily give an explicit guarantee, they do provide a level of comfort that’s similar to a guarantee. The award and shield icon are also reminiscent of trust badges, further enhancing this assurance.

essential 31

Essential Element 12:  Powerful Call to Action

The last position is for the most important element of all — the call to action. No element listed in this article is as important as your call to action. Here are a few CTA must-haves.

  • Make it big. Generally speaking, the bigger the better.
  • Make your copy compelling. The actual CTA copy is the most significant copy on your entire landing page. Don’t use the word “submit.” Instead use something explosive, exciting, and persuasive.
  • Use a button. Users have been trained to expect the CTA to be a button. Do not attempt to force back years of expectation by using something other than a button. Stick with the tried and true. People know what to do when they see a button.
  • Use a contrasting color. Your landing page, your company, your stylebook, and your designers all have certain colors that they like. Your landing page has a color scheme. Now, whatever color you use on your CTA, make it different. At the most basic level, your CTA needs to possess color. And, to make it stand out, that color needs to contrast from the other colors on the screen. Contrasting colors help to attract the eye, and compel the click.

The CTA for Help Scout is located directly underneath the testimonial section. This provides a seamless and logical flow, both from a design and cognitive perspective.

essential 32

At the bottom of Mixpanel’s landing page is their CTA. It’s positioned brilliantly, and the copy on the button is perfect (“Try it for free.”) Instead of using a contrasting color on the button itself, the designers chose to use a contrasting color for the entire CTA section.

essential 33

CTA positioning is important. Although the landing page featured below has some shortcomings, the positioning of the CTA underneath the image helps to draw user’s attention to it, thus enhancing the noticeability and clickability of the CTA.

essential 34

Instapage has a great example of a high-contrast CTA button. Notice how this button is a contrasting red, which totally stands out from the grays, and blacks of its surroundings.

essential 35

Monsoon’s CTA is exactly what a CTA should be — big, bold, well-written, and orange.

essential 36

Look at the size of the CTA for Monetate:

essential 37

Get Response goes for the big CTA, too.

essential 38


A landing page is the place where all your efforts come to fruition. This is the place where customers click, people buy, and you make revenue.

Don’t screw it up.

You will create a powerful and high-converting landing page by implementing each of these 12 essentials. And once you’re done, do some A/B testing, and keep improving. The process of creating a landing page is never finished. You will always improve.

What do you consider to be some of the absolute essential elements of a high-converting landing page?

Read other Crazy Egg articles by Neil Patel.

The post 12 Essentials of a High Converting Landing Page appeared first on The Daily Egg.

See original article:

12 Essentials of a High Converting Landing Page


An Introduction To Unit Testing In AngularJS Applications

AngularJS1 has grown to become one of the most popular single-page application frameworks. Developed by a dedicated team at Google, the outcome is substantial and widely used in both community and industry projects.

One of the reasons for AngularJS’ success is its outstanding ability to be tested. It’s strongly supported by Karma112 (the spectacular test runner written by Vojta Jína) and its multiple plugins. Karma, combined with its fellows Mocha173, Chai184 and Sinon205, offers a complete toolset to produce quality code that is easy to maintain, bug-free and well documented.

“Well, I’ll just launch the app and see if everything works. We’ve never had any problem doing that – No one ever.”

The main factor that made me switch from “Well, I just launch the app and see if everything works” to “I’ve got unit tests!” was that, for the first time, I could focus on what matters and on what I enjoy in programming: creating smart algorithms and nice UIs.

I remember a component that was supposed to manage the right-click menu in an application. Trust me, it was a complex component. Depending on dozens of mixed conditions, it could show or hide buttons, submenus, etc. One day, we updated the application in production. I can remember how I felt when I launched the app, opened something, right-clicked and saw no contextual menu — just an empty ugly box that was definitive proof that something had gone really wrong. After having fixed it, re-updated the application and apologized to customer service, I decided to entirely rewrite this component in test-driven development style. The test file ended up being twice as long as the component file. It has been improved a lot since, especially its poor performance, but it never failed again in production. Rock-solid code.

A Word About Unit Testing

Unit testing has become a standard in most software companies. Customer expectations have reached a new high, and no one accepts getting two free regressions for the price of one update anymore.

If you are familiar with unit testing, then you’ll already know how confident a developer feels when refactoring tested code. If you are not familiar, then imagine getting rid of deployment stress, a “code-and-pray” coding style and never-ending feature development. The best part of? It’s automatic.

Unit testing improves code’s orthogonality. Fundamentally, code is called “orthogonal” when it’s easy to change. Fixing a bug or adding a feature entails nothing but changing the code’s behavior, as explained in The Pragmatic Programmer: From Journeyman to Master6. Unit tests greatly improve code’s orthogonality by forcing you to write modular logic units, instead of large code chunks.

Unit testing also provides you with documentation that is always up to date and that informs you about the code’s intentions and functional behavior. Even if a method has a cryptic name — which is bad, but we won’t get into that here — you’ll instantly know what it does by reading its test.

Unit testing has another major advantage. It forces you to actually use your code and detect design flaws and bad smells. Take functions. What better way to make sure that functions are uncoupled from the rest of your code than by being able to test them without any boilerplate code?

Furthermore, unit testing opens the door to test-driven development. While it’s not this article’s topic, I can’t stress enough that test-driven development is a wonderful and productive way to write code.

What and What Not to Test

Tests must define the code’s API. This is the one principle that will guide us through this journey. An AngularJS application is, by definition, composed of modules. The elementary bricks are materialized by different concepts related to the granularity at which you look at them. At the application level, these bricks are AngularJS’ modules. At the module level, they are directives, controllers, services, filters and factories. Each one of them is able to communicate with another through its external interface.

Everything is bricks, regardless of the level you are at.7
Everything is bricks, regardless of the level you are at. (View large version8)

All of these bricks share a common attribute. They behave as black boxes, which means that they have a inner behavior and an outer interface materialized by inputs and outputs. This is precisely what unit tests are for: to test bricks’ outer interfaces.

Black box model (well, this one is gray, but you get the idea).9
Black box model (well, this one is gray, but you get the idea) (View large version10)

Ignoring the internals as much as possible is considered good practice. Unit testing — and testing in general — is a mix of stimuli and reactions.

Bootstrapping A Test Environment For AngularJS

To set up a decent testing environment for your AngularJS application, you will need several npm modules. Let’s take a quick glance at them.

Karma: The Spectacular Test Runner

Karma112 is an engine that runs tests against code. Although it has been written for AngularJS, it’s not specifically tied to it and can be used for any JavaScript application. It’s highly configurable through a JSON file and the use of various plugins.

If you don’t see this at some point in this process, then you might have missed something.12
If you don’t see this at some point in the process, then you might have missed something. (View large version13)

All of the examples in this article can be found in the dedicated GitHub project14, along with the following configuration file for Karma.

// Karma configuration
// Generated on Mon Jul 21 2014 11:48:34 GMT+0200 (CEST)
module.exports = function(config) 

    // base path used to resolve all patterns (e.g. files, exclude)
    basePath: '',

    // frameworks to use
    frameworks: ['mocha', 'sinon-chai'],

    // list of files / patterns to load in the browser
    files: [

    // list of files to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
      'src/*.js': ['coverage']

      type: 'text-summary',
      dir: 'coverage/'

    // test results reporter to use
    reporters: ['progress', 'coverage'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests on file changes
    autoWatch: true,

    // start these browsers
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false

This file can be automagically generated by typing karma init in a terminal window. The available keys are described in Karma’s documentation15.

Notice how sources and test files are declared. There is also a newcomer: ngMock16 (i.e. angular-mocks.js). ngMock is an AngularJS module that provides several testing utilities (more on that at the end of this article).


Mocha173 is a testing framework for JavaScript. It handles test suites and test cases, and it offers nice reporting features. It uses a declarative syntax to nest expectations into cases and suites. Let’s look at the following example (shamelessly stolen from Mocha’s home page):

describe('Array', function() 
  describe('#indexOf()', function() 
    it('should return -1 when the value is not present', function() 
      assert.equal(-1, [1,2,3].indexOf(5));
      assert.equal(-1, [1,2,3].indexOf(0));

You can see that the whole test is contained in a describe call. What is interesting about nesting function calls in this way is that the tests follow the code’s structure. Here, the Array suite is composed of only one subsuite, #indexOf. Others could be added, of course. This subsuite is composed of one case, which itself contains two assertions and expectations. Organizing test suites into a coherent whole is essential. It ensures that test errors will be reported with meaningful messages, thus easing the debugging process.


We have seen how Mocha provides test-suite and test-case capabilities for JavaScript. Chai184, for its part, offers various ways of checking things in test cases. These checks are performed through what are called “assertions” and basically mark a test case as failed or passed. Chai’s documentation has more19 on the different assertions styles.


Sinon205 describes itself as “standalone test spies, stubs and mocks for JavaScript.” Spies, stubs and mocks all answer the same question: How do you efficiently replace one thing with another when running a test? Suppose you have a function that takes another one in a parameter and calls it. Sinon provides a smart and concise way to monitor whether the function is called and much more (with which arguments, how many times, etc.).

Unit Testing At The Application Level

The point of the external interface of a module in an AngularJS application is its ability to be injected into another module — that it exists and has a valid definition.


This is enough and will throw an error if myAwesomeModule is nowhere to be found.

Unit Testing At The Module Level

An AngularJS module can declare several types of objects. Some are services, while others are more specialized. We will go over each of them to see how they can be bootstrapped in a controlled environment and then tested.

Filters, Services and Factories: A Story of Dependency Injection

Filters, services and factories (we will refer to these as services in general) can be compared to static objects or singletons in a traditional object-oriented framework. They are easy to test because they need very few things to be ready, and these things are usually other services.

AngularJS links services to other services or objects using a very expressive dependency-injection model, which basically means asking for something in a method’s arguments.

What is great about AngularJS’ way of injecting dependencies is that mocking a piece of code’s dependencies and injecting things into test cases are super-easy. In fact, I am not even sure it could be any simpler. Let’s consider this quite useful factory:

angular.module('factories', [])
.factory('chimp', ['$log', function($log) 
    ook: function() 

See how $log is injected, instead of the standard console.warn? While AngularJS will not print $log statements in Karma’s console, avoid side effects in unit tests as much as possible. I once reduced by half the duration of an application’s unit tests by mocking the tracking HTTP requests — which were all silently failing in a local environment, obviously.

describe('factories', function() 


  var chimp;
  var $log;

  beforeEach(inject(function(_chimp_, _$log_) 
    chimp = _chimp_;
    $log = _$log_;
    sinon.stub($log, 'warn', function() );

  describe('when invoked', function() 


    it('should say Ook', function() 

The pattern for testing filters, services or other injectables is the same. Controllers can be a bit trickier to test, though, as we will see now.


Testing a controller could lead to some confusion. What do we test? Let’s focus on what a controller is supposed to do. You should be used to considering any tested element as a black box by now. Remember that AngularJS is a model-view-whatever (MVW) framework, which is kind of ironic because one of the few ways to define something in an AngularJS application is to use the keyword controller. Still, any kind of decent controller usually acts as a proxy between the model and the view, through objects in one way and callbacks in the other.

The controller usually configures the view using some state objects, such as the following (for a hypothetical text-editing application):

angular.module('textEditor', [])

.controller('EditionCtrl', ['$scope', function($scope) 
  $scope.state = toolbarVisible: true, documentSaved: true;
  $scope.document = text: 'Some text';

  $scope.$watch('document.text', function(value) 
    $scope.state.documentSaved = false;
  , true);

  $scope.saveDocument = function() 
    $scope.state.documentSaved = true;

  $scope.sendHTTP = function(content) 
    // payload creation, HTTP request, etc.

Chances are that the state will be modified by both the view and the controller. The toolbarVisible attribute will be toggled by, say, a button and a keyboard shortcut. Unit tests are not supposed to test interactions between the view and the rest of the universe; that is what end-to-end tests are for.

The documentSaved value will be mostly handled by the controller, though. Let’s test it.

describe('saving a document', function() 

  var scope;
  var ctrl;


  beforeEach(inject(function($rootScope, $controller) 
    scope = $rootScope.$new();
    ctrl = $controller('EditionCtrl', $scope: scope);

  it('should have an initial documentSaved state', function()

  describe('documentSaved property', function() 
      // We don't want extra HTTP requests to be sent
      // and that's not what we're testing here.
      sinon.stub(scope, 'sendHTTP', function() );

      // A call to $apply() must be performed, otherwise the
      // scope's watchers won't be run through.
      scope.$apply(function () 
        scope.document.text += ' And some more text';

    it('should watch for document.text changes', function() 

    describe('when calling the saveDocument function', function() 

      it('should be set to true again', function() 


An interesting side effect of this code chunk is that it not only tests changes on the documentSaved property, but also checks that the sendHTTP method actually gets called and with the proper arguments (we will see later how to test HTTP requests). This is why it’s a separated method published on the controller’s scope. Decoupling and avoiding pseudo-global states (i.e. passing the text to the method, instead of letting it read the text on the scope) always eases the process of writing tests.


A directive is AngularJS’ way of teaching HTML new tricks and of encapsulating the logic behind those tricks. This encapsulation has several contact points with the outside that are defined in the returned object’s scope attribute. The main difference with unit testing a controller is that directives usually have an isolated scope, but they both act as a black box and, therefore, will be tested in roughly the same manner. The test’s configuration is a bit different, though.

Let’s imagine a directive that displays a div with some string inside of it and a button next to it. It could be implemented as follows:

angular.module('myDirectives', [])
.directive('superButton', function() 
    scope: label: '=', callback: '&onClick',
    replace: true,
    restrict: 'E',
    link: function(scope, element, attrs) 

    template: '<div>' +
      '<div>label}</div>' +
      '<button ng-click="callback()">Click me!</button>' +

We want to test two things here. The first thing to test is that the label gets properly passed to the first div’s content, and the second is that something happens when the button gets clicked. It’s worth saying that the actual rendering of the directive belongs slightly more to end-to-end and functional testing, but we want to include it as much as possible in our unit tests simply for the sake of failing fast. Besides, working with test-driven development is easier with unit tests than with higher-level tests, such as functional, integration and end-to-end tests.

describe('directives', function() 


  var element;
  var outerScope;
  var innerScope;

  beforeEach(inject(function($rootScope, $compile) 
    element = angular.element('<super-button label="myLabel" on-click="myCallback()"></super-button>');

    outerScope = $rootScope;

    innerScope = element.isolateScope();


  describe('label', function() 
        outerScope.myLabel = "Hello world.";

    it('should be rendered', function() 
      expect(element[0].children[0].innerHTML).to.equal('Hello world.');

  describe('click callback', function() 
    var mySpy;

      mySpy = sinon.spy();
        outerScope.myCallback = mySpy;

    describe('when the directive is clicked', function() 
        var event = document.createEvent("MouseEvent");
        event.initMouseEvent("click", true, true);

      it('should be called', function() 

This example has something important. We saw that unit tests make refactoring easy as pie, but we didn’t see how exactly. Here, we are testing that when a click happens on the button, the function passed as the on-click attribute is called. If we take a closer look at the directive’s code, we will see that this function gets locally renamed to callback. It’s published under this name on the directive’s isolated scope. We could write the following test, then:

describe('click callback', function() 
  var mySpy;

    mySpy = sinon.spy();
    innerScope.callback = mySpy;

  describe('when the directive is clicked', function() 
      var event = document.createEvent("MouseEvent");
      event.initMouseEvent("click", true, true);

    it('should be called', function() 

And it would work, too. But then we wouldn’t be testing the external aspect of our directive. If we were to forget to add the proper key to the directive’s scope definition, then no test would stop us. Besides, we actually don’t care whether the directive renames the callback or calls it through another method (and if we do, then it will have to be tested elsewhere anyway).


This is the toughest of our little series. What is a provider exactly? It’s AngularJS’ own way of wiring things together before the application starts. A provider also has a factory facet — in fact, you probably know the $routeProvider and its little brother, the $route factory. Let’s write our own provider and its factory and then test them!

angular.module('myProviders', [])

.provider('coffeeMaker', function() 
  var useFrenchPress = false;
  this.useFrenchPress = function(value) 
    if (value !== undefined) 
      useFrenchPress  = !!value;

    return useFrenchPress;

  this.$get = function () 
      brew: function() 
        return useFrenchPress ? 'Le café.': 'A coffee.';

There’s nothing fancy in this super-useful provider, which defines a flag and its accessor method. We can see the config part and the factory part (which is returned by the $get method). I won’t go over the provider’s whole implementation and use cases, but I encourage you to look at AngularJS’ official documentation about providers21.

To test this provider, we could test the config part on the one hand and the factory part on the other. This wouldn’t be representative of the way a provider is generally used, though. Let’s think about the way that we use providers. First, we do some configuration; then, we use the provider’s factory in some other objects or services. We can see in our coffeeMaker that its behavior depends on the useFrenchPress flag. This is how we will proceed. First, we will set this flag, and then we’ll play with the factory to see whether it behaves accordingly.

describe('coffee maker provider', function() 
  var coffeeProvider = undefined;

    // Here we create a fake module just to intercept and store the provider
    // when it's injected, i.e. during the config phase.
    angular.module('dummyModule', function() )
      .config(['coffeeMakerProvider', function(coffeeMakerProvider) 
        coffeeProvider = coffeeMakerProvider;

    module('myProviders', 'dummyModule');

    // This actually triggers the injection into dummyModule

  describe('with french press', function() 

    it('should remember the value', function() 

    it('should make some coffee', inject(function(coffeeMaker) 
      expect(coffeeMaker.brew()).to.equal('Le café.');

  describe('without french press', function() 

    it('should remember the value', function() 

    it('should make some coffee', inject(function(coffeeMaker) 
      expect(coffeeMaker.brew()).to.equal('A coffee.');

HTTP Requests

HTTP requests are not exactly on the same level as providers or controllers. They are still an essential part of unit testing, though. If you do not have a single HTTP request in your entire app, then you can skip this section, you lucky fellow.

Roughly, HTTP requests act like inputs and outputs at any of your application’s level. In a RESTfully designed system, GET requests give data to the app, and PUT, POST and DELETE methods take some. That is what we want to test, and luckily AngularJS makes that easy.

Let’s take our factory example and add a POST request to it:

angular.module('factories_2', [])
.factory('chimp', ['$http', function($http) 
    sendMessage: function() 
      $'', message: 'Ook.');

We obviously do not want to test this on the actual server, nor do we want to monkey-patch the XMLHttpRequest constructor. That is where $httpBackend enters the game.

describe('http', function() 


  var chimp;
  var $httpBackend;

  beforeEach(inject(function(_chimp_, _$httpBackend_) 
    chimp = _chimp_;
    $httpBackend = _$httpBackend_;

  describe('when sending a message', function() 
      $httpBackend.expectPOST('', message: 'Ook.')
      .respond(200, message: 'Ook.', id: 0);


    it('should send an HTTP POST request', function() 

You can see that we’ve defined which calls should be issued to the fake server and how to respond to them before doing anything else. This is useful and enables us to test our app’s response to different requests’ responses (for example, how does the application behave when the login request returns a 404?). This particular example simulates a standard POST response.

The two other lines of the beforeEach block are the function call and a newcomer, $httpBackend.flush(). The fake server does not immediately answer each request; instead, it lets you check any intermediary state that you may have configured. It waits for you to explicitly tell it to respond to any pending request it might have received.

The test itself has two methods calls on the fake server (verifyNoOutstandingExpectation and verifyNoOutstandingRequest). AngularJS’ $httpBackend does not enforce strict equality between what it expects and what it actually receives unless you’ve told it to do so. You can regard these lines as two expectations, one of the number of pending requests and the other of the number of pending expectations.

ngMock Module

The ngMock module22 contains various utilities to help you smooth over JavaScript and AngularJS’ specifics.

$timeout, $log and the Others

Using AngularJS’ injectable dependencies is better than accessing global objects such as console or window. Let’s consider console calls. They are outputs just like HTTP requests and might actually matter if you are implementing an API for which some errors must be logged. To test them, you can either monkey-patch a global object — yikes! — or use AngularJS’ nice injectable.

The $timeout dependency also provides a very convenient flush() method, just like $httpBackend. If we create a factory that provides a way to briefly set a flag to true and then restore it to its original value, then the proper way to test it’s to use $timeout.

angular.module('timeouts', [])

.factory('waiter', ['$timeout', function($timeout) 
    brieflySetSomethingToTrue: function(target, property) 
      var oldValue = target[property];

      target[property] = true;

        target[property] = oldValue;
      , 100);

And the test will look like this:

describe('timeouts', function() 


  var waiter;
  var $timeout;

  beforeEach(inject(function(_waiter_, _$timeout_) 
    waiter = _waiter_;
    $timeout = _$timeout_;

  describe('brieflySetSomethingToTrue method', function() 
    var anyObject;

      anyObject = foo: 42;
      waiter.brieflySetSomethingToTrue(anyObject, 'foo');

    it('should briefly set something to true', function() 

Notice how we’re checking the intermediary state and then flush()’ing the timeout.

module() and inject()

The module()23 and inject()24 functions help to retrieve modules and dependencies during tests. The former enables you to retrieve a module, while the latter creates an instance of $injector, which will resolve references.

it('should say Ook.', inject(function($log) 
  sinon.stub($log, 'warn', function() );



In this test case, we’re wrapping our test case function in an inject call. This call will create an $injector instance and resolve any dependencies declared in the test case function’s arguments.

Dependency Injection Made Easy

One last trick is to ask for dependencies using underscores around the name of what we are asking for. The point of this is to assign a local variable that has the same name as the dependencies. Indeed, the $injector used in our tests will remove surrounding underscores if any are found. StackOverflow has a comment25 on this.


Unit testing in AngularJS applications follows a fractal design. It tests units of code. It freezes a unit’s behavior by providing a way to automatically check its response to a given input. Note that unit tests do not replace good coding. AngularJS’ documentation is pretty clear on this point: “Angular is written with testability in mind, but it still requires that you do the right thing.”

Getting started with writing unit tests — and coding in test-driven development — is hard. However, the benefits will soon show up if you’re willing to fully test your application, especially during refactoring operations.

Tests also work well with agile methods. User stories are almost tests; they’re just not actual code (although some approaches, such as “design by contract26,” minimize this difference).

Further Resources

(al, ml)


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14–ipsum/smashing-article
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29–ipsum/smashing-article

The post An Introduction To Unit Testing In AngularJS Applications appeared first on Smashing Magazine.

Link to original: 

An Introduction To Unit Testing In AngularJS Applications


11 Lovely Landing Page Optimization Infographics and SlideShares (with Takeaways)

There are hundreds of landing page optimization resources out there – don’t fall down the rabbit hole. Start with these brief but actionable infographics and SlideShares. Image by Valerie Hinojosa via Flickr.

Whether for lead gen or customer acquisition, landing pages allow you to create delightful experiences for your prospects that are laser-focused on the action you want them to take.

This may seem pretty straightforward, but there’s a lot of conflicting advice out there about landing page optimization “best practices.” And weeding through all the LPO literature can be daunting and painfully time-intensive.

That’s why I spent hours searching the web to bring you a hand-curated list of the best easy-to-digest resources: five SlideShares and six infographics to help you master landing page optimization. I’ve even pulled an awesome takeaway from each so you can leave with a checklist of LPO tactics you can try today.

That way, instead of falling down rabbit holes, you can focus on what counts: increasing your conversions and maximizing ROI.

Let’s dive in.

Landing Page Optimization SlideShares

1. 7 Ways to Improve Your Landing Pages Today


This SlideShare by Three Deep Marketing includes seven actionable tips for creating more effective landing pages.

Rather than simply repeating standard-fare advice, they explore advanced optimization tactics, such as optimizing your landing pages for mobile users. 

For example, did you know that up to 70% of all advertising-generated conversions occur over the phone? If you’re designing for mobile, they suggest testing a click-to-call button rather than an email opt-in form.

Awesome takeaway:

Humans follow information like a dog follows a scent. Make sure your ads have a scent trail – in other words, make sure there is a clear link between each step of the user’s journey, from the moment they search for a particular keyword to their arrival on your landing page.

Humans follow info like a dog follows scent. Make each step of your user’s journey consistent.
Click To TweetPowered By CoSchedule

2. Toolkit for Landing Pages: 13 Simple Exercises to Rock Your Digital Marketing Results


This SlideShare by Ion Interactive is a comprehensive toolkit for creating landing pages that convert. It includes templates to help you track key metrics, evaluate your design and score your “message match.”

It also takes a deep dive into how to chose between A/B testing and multivariate testing as well as how to select the right statistical confidence for your tests.

Awesome takeaway:

Message match is achieved when the words from your ad are echoed on your landing page. Motivation match is about ensuring that you’re matching your offer to the intent of your prospects. Are you offering an ebook to someone who just searched for “download software”?

Are you offering an ebook to someone who searched for a free trial? You need motivation match.
Click To TweetPowered By CoSchedule

3. How to Optimize Landing Pages for Conversions


This HubSpot ebook-turned-SlideShare takes you from a basic overview of landing pages to the specifics of their anatomy. What I love about this ebook is that it’s easy to implement; it’s got checklists and pop quizzes that can help you perform quick, high-level optimization.

Also, this resource is packed with interesting stats – did you know that the brain processes visuals 60,000 times faster than text?

Awesome takeaway:

Because our brain processes visuals faster than text, it’s imperative that you select a landing page image that communicates what your offer is – and what benefits it brings. If you’re offering an ebook, show the cover of the ebook. If you’re selling a physical product, show that product in context: show a happy customer using it.

We process visuals 60,000x faster than text. Your landing page should show your product in context.
Click To TweetPowered By CoSchedule

4. Advanced Landing Page Optimization with Conversion Centered Design


Given how many resources about optimizing landing pages you can find online, it’s surprising that so many companies continue to, well, suck at it.

In this SlideShare, Unbounce’s Oli Gardner shows how to not suck at it by using conversion-centered design: a set of design and usability principles proven to increase conversions.

According to Oli, there are seven design principles that increase conversions: attention, coupling, context, congruence, clarity, credibility and continuance. In this SlideShare, he reveals how each one can improve your conversion rates.

Awesome takeaway:

The first aspect of conversion-centered design, attention, is a simple but powerful principle that 98% of people get wrong on their landing page.

Minding your attention ratio – the ratio of links on a page to the number of campaign conversion goals – can help you rise above the majority (as you’ll see on page 43, even companies like Google get it wrong!).

As Oli explains, your landing page’s attention ratio should always be 1:1 or you’re disrespecting your prospect’s click.

98% of landing page experiences suck. Are you minding your attention ratio?
Click To TweetPowered By CoSchedule

5. Copywriting for Conversion Webinar with Joanna Wiebe


This SlideShare by conversion copywriter and Copy Hackers co-founder Joanna Wiebe includes four actionable tips for writing copy that converts – plus a guide for writing a killer value proposition.

Joanna shares some copy testing ideas that can bring big conversion lifts. For example:

  • Making calls to action match what your prospect is thinking (“Buy” or “Submit” vs. “Get” or “Yes, give me access”)
  • Applying the psychological principle that gain is more powerful than loss aversion (“Generate more leads” vs. “Stop losing leads)

Awesome takeaway:

Implementing Joanna’s quick tips for creating better-performing copy is important, but as she points out, if you don’t start by creating messaging that is based on deep customer research, your copy will inevitably fail. Always research your customer before you put pen to paper (or finger to keyboard)!

The key to writing landing page copy that converts is to start with deep customer research.
Click To TweetPowered By CoSchedule

Landing Page Optimization Infographics

6. Landing Page Optimization: What You Should Be Testing and Why


According to this infographic by Marketing Mojo, you only have about four seconds to impress visitors – so you better make sure that your landing page is in top shape.

If you’re reading this, you already know about the importance of LPO – but what exactly should you be testing? This infographic explains the various tests most likely to impact your conversion rate, including headline copy, form layout, page length, visual media and calls to action.

Awesome takeaway:

Always remember that the landing page is the stage within a sales funnel that is most vulnerable to abandonment. Give it the attention it deserves!

Your landing page is the part of your sales funnel that is most vulnerable to abandonment.
Click To TweetPowered By CoSchedule

7. The Complete Guide to Successful Landing Pages


According to this infographic by Pardot, a typical landing page loses over half of its visitors immediately. Ouch.

Don’t fret. This infographic gives you tips for ensuring that your landing page is far from typical.

It provides a cheat sheet for ensuring that you’re providing delightful design, friction-free forms and irresistible value. It takes things a step further by providing a framework for analyzing and revising your landing page optimization efforts by making sure you’re paying attention to key metrics and continuously adapting.

Awesome takeaway:

Providing value for your visitors isn’t enough – you need to provide timely value. Your landing page’s tone and offer need to match the prospect’s stage in the buying cycle and move them closer to making a purchase.

Providing value for your visitors isn’t enough – you need to provide timely value.
Click To TweetPowered By CoSchedule

8. How Colors Affect Conversions


This infographic by KISSmetrics isn’t specifically about landing pages, but the information it provides about how color affects conversion is valuable to anyone who wants to improve their conversion rate.

Case in point: Performable changed the color of a CTA button and saw a 21% increase in conversions.

Disclaimer: This isn’t a color bible – every audience responds to color differently. These are good tips to get started with, but you have to test for yourself!

Awesome takeaway:
Red and green are the colors most frequently imperceptible to people with color blindness, but most people can see the color blue. If a shade of blue contrasts well with the rest of your page, it may be a safe bet for getting your CTA button noticed by the majority of your users – even those with color deficiencies. :)

Blue buttons are color blind-friendly, but make sure they contrast with the rest of your page.
Click To TweetPowered By CoSchedule

9. Landing Page Tips That Should Be Set In Stone


This stat might make you want to bang your head on your desk: 70% of small B2B companies don’t have a clear call to action on their landing page.

Hanapin Marketing created this infographic in order to help companies avoid such silly mistakes and give marketers a cheat sheet for creating high-converting landing pages. It covers best practices for layout, copy and imagery, with stats to back up their advice.

You’ll learn what type of imagery is most effective for landing pages, how to format your text to make it more reader-friendly and where to put your CTAs in order to facilitate conversions.

Awesome takeaway:

No matter how compelling your copy is, if you’re showing visitors a wall of text, you’re going to make their eyes glaze over. Always avoid large block paragraphs in favor of skimmable bullet points, bolded benefits and clear (not clever) language.

Even if your copy is compelling, walls of text make your prospects’ eyes glaze over.
Click To TweetPowered By CoSchedule

10. 3 Steps to Optimizing a Landing Page


Sometimes it’s nice to have someone remind us of the simple things that we can lose sight of when we’re in the thick of it, like what it actually means to have an “optimized” landing page. Quick Sprout kicks off this infographic by defining “optimized” as the “max number of conversions at minimal cost”.

Great, so how do we get there? Quick Sprout lays out a three-step process for optimizing your landing page, including the infrequently discussed LPO practice of editing to maximize SEO and usability.

Awesome takeaway:

Even the behind-the-scenes elements of your landing page should be optimized for performance. You need:

  • A compelling, keyword-focused title tag
  • An enticing (but concise) meta description
  • A keyword-focused headline
  • Clean HTML tags
  • Compressed images for maximum site performance

Optimize your landing page for things prospects can’t see, like title tags and meta descriptions.
Click To TweetPowered By CoSchedule

11. Using Simple Psychology to Increase Conversions


Understanding how psychology affects conversions is essential to creating high-converting landing pages. This infographic by Pardot explains important psychological principles that you can apply to your campaigns – both before and after the click – in order to increase the chance of conversion.

Remember those basic psychological principles you learned in high school? They can make you a better landing page optimizer. Learn how to leverage:

  • Our aversion to loss
  • Our desire to fit in with peers
  • Our inclination to honor pre-existing social bonds
  • Our predisposition to trust figures of authority

Awesome takeaway:

The human brain has a tendency to compare different options, scenarios and outcomes in an attempt to make the right decision. You can leverage this tendency by using the psychological technique of anchoring. A good example of this is listing your original price alongside a discounted price so prospects have a tangible idea of what they’ll save.

Anchoring is a #LPO technique that leverages the human brain’s tendency to compare options.
Click To TweetPowered By CoSchedule

Stop Reading and Start Optimizing

There you have it. The best bite-sized SlideShares and infographics I vetted from across the web to help guide your landing page optimization.

One word of warning before you get to work: Don’t fall down the LPO resource rabbit hole, consuming information but never taking action. Pick one or two of your favorite resources from above, print them out and use them to inspire an A/B test this week.

Now get to work!

P.S.: Know of any great landing page optimization infographics or SlideShares that I didn’t include? Post them in the comments!

– Chloe Mason Gray


Original article:

11 Lovely Landing Page Optimization Infographics and SlideShares (with Takeaways)


Troubleshoot User Experience (UX) for Better Conversions

User experience (UX) – it’s all about how easy it is fo
r people to use your website to find what they want. Or, as Jakob Neilsen and Don Norman put it, the term…

“encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

Get it wrong and people will simply move on to somewhere that gets it right, so fixing UX has a direct impact on web conversions.

UX covers a lot of different parts of web interaction (not just usability, but a lot of emotional and psychological factors about how people use your site).

There’s been a lot of research to help you find where UX goes wrong so you can fix it. In fact, if you believe Smart Insights, you only need to test with five users to identify most of the problems on your site. Here are some of the areas you should look at.

Comb web design

Navigation – Can Users Find Information?

Let’s start right at the top (or maybe the side) of the page, with navigation.

An article by Shari Thurow on Marketing Land makes some important points about website navigation:

  • it should help users complete tasks
  • it should support the way information is labeled and categorized on the site (information architecture)
  • it should stand out from other page elements
  • it should be scannable
  • it should make sense to users

Other studies back this up. Exisweb published the results of replacing the hamburger (three stacked lines) menu icon with the word “menu” in a mobile interface. He found that 20% more people clicked the word.

Research from Zeebox found that a camouflaged flyout menu on the side of its mobile app dramatically reduced engagement compared with the top menu in words. While people are still suggesting that minimizing menus can boost the conversion rate, these tests don’t agree.

A test of several leading ecommerce sites published on Smashing Magazine threw up a number of other navigation usability areas to target. Two that stood out were making parent categories clickable and including products in more than one category.

Jakob Nielsen also talks about optimizing search because 36% of people never get the results they want the first time they search a site, and if they search again, they only succeed in 28% of cases.

The lesson: test navigation and search to see how easy it is for users to find what they want.

The Eyes Have IT – Reading Patterns

This study by Jakob Nielsen is a bit long in the tooth, but it still seems to hold true. A study of more than 200 users showed that people read web pages in an F-shaped pattern, looking at what’s at the top before moving to another horizontal area and then scanning down the left of the content.

However, as an article by Ritika Puri shows, it’s not all about the F. It may depend on whether users are browsing or searching. When searching, they may move faster to accomplish their goal.

Another, more recent eye-tracking study by Missouri S&T shows that users may scan the page for a short while—really short, just 2.6 seconds—before moving on to somewhere else. The ease of finding information, as well as color choice were said to influence behavior.

The lesson: users don’t stick around long. Use heatmap analytics to find the most read areas and put your most important content there.

Do Your Headlines Work?

One of the areas where users’ eyes stop is on the headline, and there, there’s only one statistic that matters. It’s from Copyblogger, and it’s this: 80% of people read headline copy but only 20% read the rest.

Getting the headline right is an essential part of the user experience. As Unbounce shows, this is about making sure those headlines outline benefits for users and show their relevance. Get some help from our article on headlines for maximum conversion.

There’s more research recapped on Conversion XL that show the importance of including numbers in headlines, getting the length right and clarity. Face it, most people don’t read all the way to the end, as an article on Slate illustrates.

The lesson: Appealing headlines increase the chances that readers will read all your content and help your site convert.

Troubleshooting Typography

Troubleshooting Typography

Image: Pixabay

One thing I’ve noticed as people move to more mobile-friendly designs is the type size on web pages is getting bigger. That’s a very good thing, as research published by Smashing Magazine shows.

Web pages that use the same font size as the printed page are hard to read because of the distance you are away from your screen. Add to that the waning amount of light getting to the retina as we age and you realize that small fonts equals small conversions.

People can’t do what you want if they can’t even read the text, the button or the navigation label. In contrast, people can connect more with larger fonts and we know the importance of emotion in conversions.

The lesson: bigger is better—up to a point—if you want people to read your content.

Is Your Content Relevant? (Especially Ad Content)

People don’t like ads, especially when they are not relevant. We already know the importance of relevant content (you didn’t think the Google was just blowing smoke, did you?)

The 2013 Online Personal Experience Study shows that people love relevant content so much they would give up some of their favorite things to get it. Some 74% of consumers get frustrated when ads are irrelevant. At the same time, many don’t want to provide information to help with personalization unless businesses are clear how they will use it.

The lesson: show how your content meets users’ needs and UX will improve.

Ecommerce Sites – Where to Focus for Better Conversions

NN Group recently updated its research into ecommerce user experience. It found that more sites were using large product images to provide needed information in answer to users’ questions, were showing product feedback via reviews and were making it easier to complete purchases when using discounts and coupons. However, difficulty in seeing whether products were in the cart, tiny product descriptions and cluttered customer service areas were issues that still needed to be addressed.

Research from Experience Solutions conducted with shows the importance of helping people find the information they are looking for. In the trial, the site provided information about top products, added product videos, included ratings and reviews, answered questions and smoothed the checkout process to improve conversions.

And a case study by Visual Website Optimizer proves that using a product filter to help customers refine their choices increased revenue for one retailer by 76%.

The lesson: ecommerce optimization matters if you want to reduce abandonment.

Conversion Killers for Mobile User Experience

Did you know that 80% of people have trouble with mobile transactions and 63% of them would be less likely to do business with a company after experiencing a problem? (Source: Tealeaf)

Conversion Killers for Mobile User Experience

Image: Pixabay

Google has been pretty clear about the impact of mobile UX on SEO, but usability is also a key concern. Recent Google research on site design highlights the following conversion killers:

  • unoptimized mobile sites
  • the need to zoom to find information
  • tiny, low-res images
  • unoptimized CTAs, especially for screen rotation
  • the need to switch browser windows

Avoid these errors and your conversions will improve. Instead, follow Adobe’s advice and take a user-centric approach to design for better conversions.

The lesson: think mobile first for better UX.

How to Get More from the CTA

The CTA is important to marketers and it’s also a key part of the user experience. For example, Marketing Experiments showed how changing the wording on a CTA button increased conversion by 66.6%. Users want to know how they can accomplish their goals on your site. As UserTesting found, adding calls to action to the footer of their site boosted conversions by 50%.

The lesson: tell users what you want them to accomplish in language they can understand and it’s more likely they will do it.

The eight areas outlined above are some of the most common UX failures. For more advice on user experience and testing, check out our article on Understanding the User Experience and Jakob Neilsen’s (yes, him again!) piece on UX research.

Read other Crazy Egg articles by Sharon Hurley Hall.

The post Troubleshoot User Experience (UX) for Better Conversions appeared first on The Daily Egg.

Original post: 

Troubleshoot User Experience (UX) for Better Conversions


Pricing Tips: How to Compete on Price (Without Going Bust!)

It used to be that Web-only retailers could get away with checking their competitors’ prices, at most, once a week. Now, with e-tail behemoths like using dynamic prices to shift pricing on a dime (particularly on in-demand products), other retailers have to scramble to catch up.

Is this something you can or should catch up with? Maybe. Maybe not.

Let’s look at some pricing tips that can help you compete on price… without losing profitability. We’ll start with a review of Amazon’s strategy, then review smart tactics you can employ and how it all connects with conversion optimization.

What Exactly Is Dynamic Pricing?

Just as its name implies, dynamic pricing involves changing pricing as major competitors update their own prices, so you’ll likely always have the lowest price. In a world where comparison shopping is the norm rather than the exception, being able to stay ahead of the numbers isn’t just smart business sense, it’s survival of the fittest.


A chart of changing prices of large retailers on a month-to-month basis. Source: 360pi

How Often do Dynamic Prices Switch?

According to Internet Retailer:

In a study during the 2013 holiday season of items in the electronics, toys and hardware categories, price-monitoring technology vendor Ugam recorded 9,715 online price changes on between Nov. 24 and Dec. 14, far more than the number of price changes made by such major competitors as Best Buy Co. Inc., Target Corp., Wal-Mart Stores Inc. and Toys ‘R’ Us Inc.

“No one can keep up with Amazon,” says Jenn Markey, 360pi’s vice president of marketing.

She says Amazon might change a product’s price up to 10 times a day—more often on price-sensitive products, such as power tools, and less often for apparel. She says the most active retailers change prices daily on 15% to 20% of their product assortments.

As many as 20% of all online product prices change at least daily, with some of the hottest items changing price every few minutes, says Michael Paulson, vice president of product and business at, an online price-tracking firm recently acquired by eBay Inc.

Is all hope lost?

Let’s face it, you’re going to have a pretty rough go of it if you’re going head to head with Amazon. But if you’re not, there are some ways to differentiate yourself without getting into a price war and trying to subsist on meager margins.

Be Ultra-Selective on the Products You Choose to Throw into the Competition

You don’t have to throw everything at the dynamic pricing wall and hope some of it sticks. When you stick to only the most in-demand, seasonal or other hot items, you can leave the margins for your other products alone.

splurge-saveGiving customers multiple options in their price range lets them splurge or save

The “must have” items will sell themselves, and even if you have to take a slight hit on profits, promoting accessories and other items to help the customer get the “full experience” or the “hottest look” may make up for the difference.

Reward Loyalty with Lower Prices

Selling online is all about negotiation—you give a little, in order to get a little. Customers know this, and will most likely upgrade their order or otherwise buy from you if you give them a compelling reason. For example, if you have a loyalty program in place, why not reward your best customers with discounts that no one else gets?

Offer Exclusives for Die-Hard Fans

Similar to the loyalty program, it has become a trend in recent years for major retail brands to offer new gaming console bundles specifically tied to a particular franchise. If the customer really wants that console, they’ll need to buy the store’s exclusive bundle to get it.


Of course, the lure being that they’ll either be the first, be exclusive or be one of the few to own that particular thing. With consoles being one of the most in-demand items of the holiday season, retailers can pad their pockets with the bundle bounty.

Price is Not the Only Factor

Sure, some customers will be looking for the lowest price, but when combined with a larger selection, customers are often willing to pay a bit more for the value of having more to choose from. That’s exactly what happened with retailer eBags when they launched a three-piece luggage set in 2001 called the Carnival Hardside Spinner.

rocklandOne of the top selling luggage sets on eBags since 2001

At $180, prices were pretty stagnant for the product, until eBags began a strong marketing campaign for it, as well as enlisting dynamic pricing. Knowing that customers might very well be using image-based shopping like Google, TheFind or other visual comparison-based engines, they decided to lower the price but up the selection by adding three new colors.

According to Peter Cobb, the co-founder of eBags, “With this set [and many other items] we were attempting to be ‘in range’ with a price that would deliver the right balance of sales and margins…We were not always trying to be the lowest price on the item.” But, he noted, eBags had to be price-competitive because luggage is “a highly price-competitive and price-elastic category.”

The combination of price adjustments and an added selection paid off, together with the heavier marketing campaign. eBags’ sales of this particular luggage set quadrupled, and it remains one of the top sellers on the site.

What’s more, customers searching for that particular item number on comparison search engines will often bring up eBags’ product page first in the search engines, bringing in even more high-converting traffic.

Let’s Make the Connection to Conversion Optimization

Pricing is one important element of conversion optimization. Price too low, and you can change the value perception of your product. Price too high, and you can lose sales to price-conscious consumers.

But sometimes, price alone isn’t the issue. As you can see in the tips above, how you communicate price is an important part of your strategy. And incenting action is always a good idea. So from a CRO standpoint, here are a few things to consider:

1. Images always help conversions. Consider adding more images, including close-ups of the details of your product.

2. Employ some type of reward system. Something like “no shipping and handling if you purchase $100 or more” or “buy 10 times and you get a free gift worth $xx.” Add a touch of urgency, and you could really impact conversions.

3. Focus on the upsell. Before final checkout, make one more offer: “Other buyers bought this as well.”

NOTE: With the holidays coming up, now is a good time to review your holiday ecommerce strategy.

The Bottom Line on Pricing

Of course, you can be walking a very narrow tightrope when competing solely on price. Your competitors may have more pricing leverage, faster shipping or other tricks to tantalize their consumers into buying from them. That’s why shifting your pricing into dynamic territory isn’t the only strategy you should be using.

Look for ways to create more value or more simplicity. If your competition is offering a “comprehensive solution,” you can position yourself as the “easy as 1-2-3” brand, or vice versa.

Every customer has a need that’s just waiting to be filled, and pricing is just a small part of the equation. By delving deeper into what they truly want, you’ll show that your business is ready and willing to work with them to not only satisfy that need, but make them look, feel or do better in the process.

What are your thoughts on competing on price? Should it always be about the numbers? Share your thoughts with us below in the comments!

Read other Crazy Egg articles by Sherice Jacob.

The post Pricing Tips: How to Compete on Price (Without Going Bust!) appeared first on The Daily Egg.

Continue reading here: 

Pricing Tips: How to Compete on Price (Without Going Bust!)


How Successful Marketers Use Pinterest to Drive Conversions (And How You Can Too)

Driving conversions with Pinterest? Piece of cake. Image by Roxanne Ready via Flickr.

Here’s a pretty crazy stat: Pinterest users pin more than 3,400 pins a minute.

That’s good news for marketers using it in their campaigns – the more time people spend interacting with pins, the more exposure they have to your brand and the more likely they are to convert.

And I’ve got the numbers to prove it:

  • Shopify research that shows that Pinterest users are 10% more likely to buy than those referred from other social sites.
  • Pinterest drives 300% more revenue per click than Twitter and 27% more than Facebook.

With all this opportunity to convert leads, people are finding original and effective ways to use Pinterest to achieve their KPIs.

Here’s how successful marketers use Pinterest to drive conversions – and how you can steal their strategies for your own marketing campaigns.

1. Delight followers and promote campaigns with contests

When C. Wonder, a luxury retail store for women, wanted to promote a new product line, they created a Mother’s Day contest to create awareness and drive conversions.

The terms of the contest were simple: participants were asked to pin their favorite C. Wonder monogrammed products to their boards along with their email address.

Luxury good retailer C. Wonder ran a Mother’s Day contest that asked participants to pin their favorite products.

The contest gained momentum because it leveraged the power of user-generated content and social proof: participants’ submissions were shared with their followers and helped spread the word.

This snowballing effect brought C. Wonder impressive, measurable results from their Pinterest contest: In addition to a 23% increase in repins, pinning activity doubled and they saw a 44% increase in revenue per click.

C. Wonder isn’t the only retailer to get a conversion lift from a Pinterest contest. Contests like this have helped bring cosmetic company Beauty Bridge more traffic, more engagement and more conversions; they now describe Pinterest as their “number one revenue-generating social channel.”

Apply this to your own marketing campaigns

If you’re ready to launch your own Pinterest contest to drive conversions, DIYThemes has some great tips for success, including:

  • Set campaign goals for your contest, whether it’s getting more followers, leads, brand awareness or conversions. Focus on one primary goal to avoid making the terms of your contest too complicated.
  • Decide on the terms and rules of your contest and ensure that they’re aligned with your campaign goals.
  • Provide an awesome incentive by putting an irresistible, high-value prize up for grabs.
  • Use multiple channels to promote your Pinterest contest. Whether on other social media networks, through paid advertising or through affiliates, the more momentum you can get, the better.
  • Make it as easy as possible to participate by establishing crystal-clear rules and having simple entry guidelines.
  • Measure your results with stats, analytics and spreadsheets. Gauge how effective your contest was at achieving your marketing goals, then optimize, rinse and repeat.

Pinterest contests create buzz – and can help make it your #1 revenue-generating social channel.
Click To TweetPowered By CoSchedule

2. Leverage user-generated content for powerful social proof

Like Beauty Bridge and C. Wonder, more and more companies are leveraging user-generated content (UGC) in their social media campaigns. UCG allows customers to share what they love about your brand, and is a great way to provide social proof, which is widely known to influence conversions.

Urban Outfitters has used this trend to become one of the fastest growing retail brands on Pinterest.

Bloggers Rock UO on Pinterest

One of their Pinterest boards gathers photos of people wearing their brand from around the web, while they encourage other users to post pictures of themselves wearing UO clothes.

Then they showcase the user-submitted pictures on their site with a call to action to “shop it,” allowing people to purchase the items with only a few clicks.

The stats they report show that 20% of users click that “shop it” button.

Apply this to your own marketing campaigns

If you want to spread the word about your next marketing campaign, user-generated content can help you acquire new leads and create buzz. This article by Jason Boies has some great suggestions to get you started:

  • Encourage fans to upload photos of your product or service.
  • Ask for video testimonials and reward the best.
  • Give top pinners access to your board.

Whatever you do, make it fun. Ask yourself, “Would I be willing to share this on my personal account?”

User-generated content helps with credibility, social proof, referrals – and more conversions.
Click To TweetPowered By CoSchedule

3. Collaborate with influencers in your space to help generate buzz

Bourbon & Boots worked with Hello Society to identify influencers to take part in a sponsored pinning campaign. The end goal was to collect leads for nurturing – any click on an influencer’s pin took the user to the Bourbon & Boots site with a pop-up email capture form.

The influencers they selected were well known by their prospects and had followings between 200,000 and 10 million. All they were asked to do was to pin on the behalf of Bourbon & Boots to lend their credibility and generate a bit of buzz.

bourbon boots

The campaign ran twice for three days and brought the company an 1000% increase in site traffic, 30,000 captured email addresses, and a 1300% increase in Pinterest-led revenue.

According to another Bourbon & Boots case study, using Pinterest gave the company better ROI than both Facebook ads and paid search. The study says that shoppers referred from Pinterest tend to spend more and buy more often, making those leads 20% more valuable than those coming from other channels.

Apply this to your own marketing campaigns

Want to leverage influencer social proof in your next marketing campaign? It’s as simple as this:

  • Let influencers and strategic partners add to your boards on your Pinterest so they can create momentum and buzz – and bring you social proof.
  • Link influencer pins to dedicated landing pages to capture leads for nurturing.

4. Surprise referral traffic from Pinterest with a discount

Can you guess what Gardener’s Supply Company sells? (Hint: it’s not UFOs.)

The company had been using Pinterest for a while and although they were getting lots of traffic, they just weren’t getting the conversions they expected. So they did something different, creating a campaign that targeted visitors sent to their homepage from Pinterest.

They added a popup that collected emails and offered free shipping on orders of $75 or more – a nice element of surprise to delight visitors.


A simple change to their site, but implementing it brought Gardener’s Supply a 3x increase in purchases from Pinterest referral traffic.

Apply this to your own marketing campaigns

Though Gardener’s Supply targeted traffic to their homepage, the same tactic could work awesomely on the landing page for your next campaign:

  • Create targeted welcome messages for referrals from Pinterest to increase relevancy. Notice Gardner’s Supply Company’s headline, “Welcome, Pinterest visitor”?
  • Include an exclusive Pinterest user discount coupon to give added incentive to purchase.

5. Create desire by providing an exclusive offer for Pinterest users

Neiman Marcus took its Pinterest strategy one step further by leveraging the power of exclusivity and scarcity.

When launching the Rebecca Minkoff Elle handbag in 2013, the retailer made a limited-time offer to its 65,000 Pinterest followers; for a two-week period, they were given exclusive access to pre-sale page for the red handbag. 

The experiment resulted in tons of organic referrals, the addition of 3,000 followers and a 35% increase in repins.


Though Neiman Marcus hasn’t published the specific number of bags they sold through this campaign, they created a lot of buzz and desire for their new product – which is sure to have translated to sales.

Apply this to your own marketing campaigns

Exclusivity goes a long way in creating desire for your offers. For your next marketing campaign, consider an exclusive pre-launch for Pinterest followers.

Scarcity is sexy. For more conversions on Pinterest, provide an exclusive, limited-time offer.
Click To TweetPowered By CoSchedule

Action items for your next marketing campaign

Whoever said that Pinterest is just for browsing and wedding planning?

If you want to leverage the power of Pinterest in your next marketing campaign, make sure you’re doing what matters (and what will get you more conversions):

  • Delight followers and promote campaigns with contests
  • Leverage user-generated content for powerful social proof
  • Collaborate with influencers in your space to help generate buzz
  • Surprise referral traffic from Pintrest with a discount
  • Create desire by providing an exclusive offer for Pinterest users

Bonus tip:
If you want to measure the success of your social media marketing efforts, create a dedicated landing page for Pinterest referral traffic. That way, you can keep tabs on conversions and optimize for what’s working (and let go of what’s not).

Have you had any conversion success with any of these Pinterest strategies?

– Sharon Hurley Hall

See original article here: 

How Successful Marketers Use Pinterest to Drive Conversions (And How You Can Too)


Pro Tips on Using Personalization for Conversions

Getting customers to your website is hard enough these days with constant search algorithm changes. But once you get them there, you’ve got another challenge entirely. Your task now is to keep them on your site, convert them to customers, and do all you can to ensure they return.

Savvy online business owners are turning more and more towards a technique called personalization to increase conversions. According to a recent study by Adobe and Econsultancy, 52% of online marketers agree that the ability to personalize content is fundamental to their online or blogging strategy.

We sat down with conversion optimization expert Keith Hagan, Co-Founder and Vice President of Conversion at Denver-based ConversionIQ, to uncover what you need to know about the latest in personalization strategies.

Let’s have an in-depth look at what exactly personalization is, ways to personalize, and how personalization might be able to help your business better serve your customers and your bottom line.

What is Personalization?

“Personalization is presenting content on your website in a way that’s tailored specifically to the site visitor,” says Hagan. “It’s been done offline for years by savvy salespeople, but now a website needs to be that same good salesperson. A good website needs to see the customer when they walk through the door and best determine how to service them.”

Hagan advises that businesses start to view their audience in terms of segments instead of one giant customer base. This way, businesses can begin to create personalization strategies that will best serve each of their audience segments, as no two behave exactly alike or have the exact same needs or buying cycle.

How Does Personalization Solve Online Business Challenges?

“The biggest issue facing online businesses these days is customer confidence,” says Hagan. “From data breaches to shipping, consumers have a lot to be worried about. Personalization can instantly boost customer confidence by letting customers know they’re in the right place with a business interested in their needs.”

Personalization also goes miles towards helping businesses address the differences between their audiences. Each business, shares Hagan, has three basic types of customers:

  • The first-time buyer: generally spontaneous in their buying practices, no loyalty to the brand, short buying cycle
  • The regular: a seasoned online shopper with a low level of loyalty but some brand familiarity, longer buying cycle than the first-time buyer
  • The addict: hungry for information, a longer buying-cycle customer, they exhibit a high level of brand loyalty due to rewards systems, membership in a co-op (see REI, Dubli), or trust in a brand’s experts (like

Once a company identifies and recognizes the differences between their customer segments, personalization can be used to offer buying incentives at the most critical points of a specific audience’s buying cycle.

“There are a lot of ways to give up margin,” says Hagan. “If you’re going to do it, it has to be targeted and it has to work. You don’t want to offer discounts to people who are already going to buy — it’s wasted margin. Once you figure out who responds to what and when, you can strategically target to increase sales and margin.”

So, how can your business leverage personalization once you know your audience and how they behave? Let’s dive into the most popular types of personalization and see many of those in action.

1. Location

When you visit the website for nearly any retailer with both a brick and mortar location and an e-commerce component, odds are you’ll see at least some basic personalization. Home Depot and Lowes both use this by helping you choose your local store.

home depot location

Farm and Fleet even guides buyers to their local store and advises of stock levels in said store, letting the customer know whether to order online and save the trip or run and pick it up:

farm and fleet

(notice the “sold out in Montgomery, IL” memo below the shipping info)

Even further, Canadian Tire allows users to personalize by location and language preference (English or French).

canadiantire personalization

2. Keywords

Do you ever click through to a website following a search and get frustrated by having to dig around to find what you were searching for? Websites using keyword personalization take this frustration away. If you head over to Google, do a Web search for anti-virus software, and happen to click on the search result for Avast, here’s what happens:


Not only does it plug in the keyword I searched, but it also knows that I was searching on a Mac. This boosts trust levels and lets me know that if I’m looking for Mac anti-virus software, I’m in the right place.

3. Customer History

First-time visitors to a site present a unique acquisition opportunity. As Hagan mentioned above, you don’t want to give up margin when customers are already familiar with your brand and ready to buy.

Rather, by offering a purchase incentive at the critical point of this spontaneous buyer’s cycle, a brand can increase the opportunity to convert them into customers for the long term. Wayfair does just this when you arrive on their home page for the first time:

Wayfair first time

Under Armour also offer first time site visitors a free shipping incentive, and all thanks to cookies:

under armour first time visitor

4. Referral Source

Are you ever startled that a website seems to know how you got there? Referral sources can increase trust levels as well as providing a better customer service experience. Let’s explain.

When you go to Wayfair and directly search for a lawn chair, you might find one like this:

wayfair direct

Here, Wayfair assumes that the customer is more loyal as they’ve come to the site directly. They’re less concerned about that customer bouncing, hence, a minimal on-screen experience showing the chair.

However, here’s what you’d see if you searched for lawn chairs on Google Shopping and came into Wayfair from that portal:

wayfair hot deal more products

Not only has the product been labeled with “hot deal,” but the bottom of the screen is filled with more similar products. The company is saying hey, that’s not the only lawn chair we have. Please stay and keep shopping.

Other large ecommerce companies with thousands of category pages, like Top Ten Reviews, are in the process of implementing referral sources to give a better, optimized experience for the user.

Tips for Implementing a Successful Personalization Strategy

If you’re fired up about some of the basic opportunities for personalization, fantastic. Here are Hagan’s recommendations for creating a successful conversion optimization strategy through personalization:

  • Have a stable site: When you begin personalization, website redesign must come to an end.
  • Conduct research and analysis: Learn about your audience and their buying cycles.
  • Test, test, test: Successful personalization isn’t a once-and-done effort. It’s achieved through testing and slight modifications along the way.
  • Don’t hire marketers for personalization: You need analysts. Data geeks. The data about your audience and their behavior dictates what personalization steps will be most beneficial.

And for additional reading on the subject of personalization, including more personalization techniques and data, here are a few recommended reads for the savvy business owner:

Best in Class eCommerce Sites that Convert (complete with downloadable spreadsheet with data points) by ConversionIQ

3 Ways to Boost Your Conversion Rate with Personalization by SpringMetrics

What other personalization tips do you have? Did I miss some?

Read other Crazy Egg posts by Jeremy Page.

The post Pro Tips on Using Personalization for Conversions appeared first on The Daily Egg.

Visit link: 

Pro Tips on Using Personalization for Conversions


Color your way to Conversions!

Red means passion, black is equal to luxury and yellow gives a feeling of freshness. Use orange for your CTAs to increase conversions and this case study proved that red is a better button color than green… BLAH!

There are more than 16 million colors and any great blog-post that you come across on the internet will tell you the “feelings” conveyed by only a handful of colors. If you sell to people from different ethnicity and cultures, choosing colors for your website can become even more difficult as one color that relates to wealth and prosperity in a country may relate to mourning in another. How do you go about it then?

In this post I will help you choose colors for your website’s CTAs, background and other important entities that you want people to focus on. A believer of “one size doesn’t fit all” and “data (not opinions and experience) gets most respect“, I will not be able to spill out some magic potion and tell you the exact colors you should use. But I promise to take you through 3 actionable tips that you could go back and test right away to increase your website’s conversions.

1) Color the Primary Goal of your Website to Make it Stand Out

Imagine a shopping list of 20 items, all items written in blue ink except for one which is in red. If asked to scan this list for 10 seconds, which item do you think you are most likely to recall later? Multiple experiments have confirmed that outliers (or the item in red in the example) is what people remember most often. This is because of a phenomenon known as the Von Restroff effect (also known as isolation effect) which states that an item that stands out is more likely to be remembered than others.

Applying this to your websites, if you want your calls to action to get immediate attention, make them stand out. Use a color that has high contrast compared to your background and that hasn’t been used for any other entity on the page. Look at how Facebook and LinkedIn do it on their homepage:

Facebook homepage
LinkedIn homepage

Choosing a contrasting color for your primary CTA is not very difficult. You just have to look for a color diagonally opposite to that of your background color or most-used color on your page from the color wheel.


Image Credit: Wikipedia

Let’s for a moment go back to the red button v/s green button case study. Have a closer look at the screenshot below. You will find that the color scheme of the original page has some emphasis towards green. The Performable logo is green, the screenshot used on the page has some elements in green and one of the features also has an icon in green. A quick scan doesn’t really make the CTA stand out from the rest of the elements. I wouldn’t be surprised if testing the original page against a variation with the CTA in yellow or orange would produce same or better results.


The important takeaway from this case study is to create a visual contrast for your goal. End of the day, it’s not the button color that is going to sell your stuff but how prominently you display it for people to take a decision before abandoning your website for the competitors’.

2) Choose Colors that are “All”-User Friendly

In United States alone, about 7% of males (roughly 10.5 million men) and 0.4% of females have some form of color blindness. In Australia, these percentages are 8 for men and 0.4 for women. The most common problem being difficulty in telling red from green.

Needless to say, when deciding colors for your website and the areas where you want people to focus on, it becomes imperative to keep in mind people who have some form of color blindness. And if you have a SaaS product, that shows some results in charts and graphs, it becomes even more important to choose the right colors so that they are easily distinguishable for everyone. See below, how a contrast between foreground and background appears to people with certain forms of color blindness. You will notice that while eyes with normal vision would easily be able to read the text, people with Protanopia and Deuteranopia (most common forms of color blindness) will just not be able to read what’s written.

Normal vision:


How the above appears to people with Protanopia:


And to people with Deuteranopia:


Image Credit:

Common solutions to ensure a great experience for everyone:

  • Choose colors many steps away from each other on the color wheel
  • Use tints (mixture of color with white) for background and shades (mixture of color with black) for foreground (or vice versa). Or make one element even more dark and the other even more light to create better contrast.

3) Train Visitors with your Color Key

Consider how bar graphs work. To look at data of one particular type, you just follow its color or pattern. Once you understand what a particular color or pattern bar stands for, you are able to compare easily focusing only on that particular color or pattern.

Similarly, if you use one color consistently on your website for a particular CTA (say signup), you will subconsciously train your users with the meaning of that color on the website. As an example, let’s suppose someone is evaluating a SaaS product on your website. And you have a shiny orange button for free trial on every page. When done evaluating their eyes will look for the orange thing, on whichever page they are, to sign up.

This way, you can even tell them which colors correspond to a heading, which means links and which call for a purchase.

See how CampaignMonitor does it beautifully. CTA buttons on all of their pages, which ask people to sign up for an account, are in green. And for no other CTA has the same color been used. This createa a consistent visual memory for visitors.


Let’s Talk

How has your experience with website colors been? Tried any A/B tests that worked well? Or may be which didn’t? Would love to hear all of it in the comments section below!

The post Color your way to Conversions! appeared first on VWO Blog.

This article: 

Color your way to Conversions!


Test Your Call to Action to Boost Conversions by 13%

I came across an article recently called, “71 Things to A/B Test.”

While this article is an amazing resource—stuffed with great ideas for what to test—it’s a little overwhelming…

71 things?! Eck!

Where do you start?

Especially if you’re a small business, operating without a full-time conversion optimization team, or an independent blogger?

Where do you find the time and energy to set up, analyze, and implement the results of so many tests?

call to action testing can be overwhelming

The good news is, you don’ t have to do all 71 things today—or even this year—to greatly improve your conversion rates and put more profit in your pocket.

In fact, you can do just one thing this week to see a big difference.

Hubspot did it by testing their call to action. But, before I explain what they did—and how you can do it too—let’s make sure we’re all on the same page…

What is a Call to Action?

Simply put, a call to action is a phrase that asks or “calls” the audience/reader to take action right now.

I did a few searches and also found this longer definition:

call to action definition

Did you notice that the definition above says, “A commercial without a call-to-action is considered incomplete and ineffective”?

That’s just one reason I recommend implementing a call to action now… if you haven’t already.

Let’s look at a few examples of calls to action:

call to action example

This call-to-action example is calling the viewer to enter their email address and click, “continue.” This is commonly called, “Opting-in” or lead generation.

Here’s another call-to-action example from AAA Motor Club, where they aim to generate leads for a “free planning session”:


Finally, here’s a call-to-action example as a pop-up:

call to action examples

Want more? See 21 Call to Action Examples here.

Now that we all know what a call to action looks like, let’s move on.

Hubspot’s Call to Action Test

As mentioned above, Hubspot tested their call to action and saw a 13% increase in conversions. Here’s their test:

call to action example

“HubSpot tested the shape and style of our demo CTA to see which performed better. The CTA shaped like a button (on the right) rather than the CTA that included a sprocket image (left) performed significantly better, giving us a 13% increase in conversions.”

The Effect of 13% on Your Business

To better understand the effect of a 13% increase in conversions, let’s turn to our friends at Get their ROI Calculator here—it’s free.

Here’s what it looks like:


I encourage you to fill this out for your own business so you can see exactly what impact a 13% increase in conversion rate will have on your business.

Here is the same worksheet filled in with numbers from an example company:


After you input your numbers, the worksheet advises us to go to Tab #2 to see our results. On Tab #2, we’re asked to enter our “Potential lift in customer conversion rate.” For this example, I used “13%”:


Here are the results:


See the potential of conversion optimization?

In this sample business, a 13% increase in conversion rate would add 10 sales transactions per month or $12,355.20 to their first year’s annual revenue! (Plus, the cost per sale is reduced!)

So, how can you boost your conversions by as much as 13%?

4 Steps to Running an A/B Test on Your Call to Action

After seeing the results Hubspot got, and then seeing how the numbers could work in your own business, you’re probably eager to start testing.

Here are the 4 steps to running your own “call to action A/B test.”

1. Research and analyze the data.

Before you guess what might work in a test, gather some data.

If you’re currently using a call to action, what is the conversion rate? Have you tested it in the past? Why did you choose it? Do you have any feedback or opinions on your current call to action?

If you don’t have a current call to action, why not use this opportunity to create two versions to compete for your first call to action?

To gather research without a current call to action, look at your target market profile, any analytics you do have, and even heatmaps. You could also check out industry forums, your support tickets, or interview customers to “get inside their head.”

The point of step one is to know your customer well enough that you can make “an educated guess” about what call to action may or may not work well…

2. Use your data to make a prediction.

This step could also be called, “Brainstorm.”

Basically, look at your data, think about your customer, and make a prediction about what elements might be better than what you currently have…

If you already have a call to action, your brainstorming might go something like:

You: “Our green button doesn’t seem to be working …”
Co-Owner: “I know Company ABC tested green buttons and saw a huge increase in conversions… why isn’t it working for us?”
You: Maybe because our dominant company color is green…
Co-Owner: Yeah, the button just doesn’t stand out…
You: Let’s try orange instead!”

Or, “Our customers are very concerned about their security online… maybe we should test adding a security seal to our form?”

If you don’t have a current call to action, you’ll need to create two versions. Just remember to stick to testing one element at a time. As Hubspot points out:

“You want your A/B test to be conclusive—you’re investing time in it, so you want a clear and actionable answer! The problem with testing multiple variables at once is you aren’t able to accurately determine which of the variables made the difference. So while you can say one page performed better than the other, if there are three or four variables on each, you can’t be certain as to why or if one of those variables is actually a detriment to the page, nor can you replicate the good elements on other pages. Our advice? Do a series of basic one-variable tests to iterate your way to a page you know is more effective.”

Beyond the few examples above, there are thousands of things you could test in your call to action…

  • The actual words. Just one idea: “click here” against “yes!”
  • The color. A showdown between your company color and a contrasting color could be interesting
  • The layout or location of the call to action. For instance, top right vs. top left
  • The style: “flat” graphics against “Web 2.0”
  • Even the shape of the call to action can be tested: round, square, rounded rectangle
  • The options are endless

But, we can’t test everything. So, after you spend a few minutes brainstorming, predict which SINGLE change you think has the greatest chance of increasing your conversion rate.


3. Construct your experiment.

This step will vary depending on the tools you use and the test you’re running.

At a minimum, you’ll need your A/B testing tool of choice (to run the test and read the results) and two variations of the element you’re testing.

Review this article to make sure you have the basics in place for your test.

4. Run your experiment.

Next, you’ll want to let your experiment run.

Remember, to get accurate results, you must wait until your test is complete to determine a winner. I recommend using a sample size calculator just to be sure your test results are as accurate as possible.

5. Analyze.

After your test is complete, it’s time to review the data…

Like last time, you’ll use the new data to make a new prediction to test. Hopefully your last test gave you something to work with and your next prediction is better.

If not, no worries. Conversion optimization is a never-ending game. Some would say that’s part of the fun.

Over time—as winners of your tests emerge—you’ll better understand your target customer and be able to make more refined predictions.

So what about you? Have you been testing your call to action? Any results you’d like to share?

Let’s talk about it in the comments below.

Read more Crazy Egg posts by Christina Gillick.

The post Test Your Call to Action to Boost Conversions by 13% appeared first on The Daily Egg.

See the article here:  

Test Your Call to Action to Boost Conversions by 13%


4 Common PPC Mistakes That Are Sending Crappy Leads to Your Landing Page

Day 113/365- Late Night Snack
If your landing page and PPC campaign setup don’t go together like peanut butter and jelly, your marketing dollars are going to waste. Image by Sean Kelly via Flickr.

Pairing your PPC campaigns with a landing page is one of the best ways to secure a high conversion rate, but only if they’re working together toward the same goal.

It all boils down to this: If you’re sending poor quality traffic to your landing page, then your conversion rates will suffer. Just as you can’t take back the fact that you just mistook your new girlfriend’s mom for her grandma, it’s pretty critical to get it right on the first impression. (Yeah, that’s a PPC nerd joke.)

Here are four common PPC mistakes that prevent you from running successful campaigns – and how you might go about solving them.

Mistake #1: You’re not ditching poor-performing keywords

Especially on larger accounts where you have less visibility, it’s easy to fall into the habit of adding new keywords to test but neglecting to clean out poor-performing keywords periodically.

Most often, this results in a lose-lose situation:

  • It creates a poor experience for prospects who click on your ads and arrive at a destination that isn’t quite what they were looking for.
  • For you, this ad to landing page mismatch leads to lower conversion rates, higher cost per click and lower Quality Scores across the account.

To avoid this, you have to stop and set some hard rules for yourself around what experience your keywords should be providing and how they connect with the landing pages in terms of the offer, call to action and intent.

Keywords, like Tinder profiles, need to be reviewed and segmented into buckets that you’ll either reject, wink at or contact – and you must do it regularly.

Solution: Only keep keywords that pull their weight

Do yourself a favor and don’t let freeloading keywords take over your budget. Run a simple keyword report at the ad group or campaign level and set rules for yourself around CTR and CPA. The rules you set for yourself will be unique to your account and keyword list, but should all serve the same purpose of achieving your revenue or lead generation goals.

Here are some guidelines to start evaluating your keywords:

  • Click-through rate (CTR) is huge indicator of relevance and if it’s low, you’re most likely also shouldering a low Quality Score (QS), which means you’re paying a higher cost per click (CPC) than you need to.
  • You should have an ideal cost per acquisition (CPA) in mind. How much is too much for that conversion? If you don’t know, you need to do some homework around the cost of doing business in general.
  • If you have a keyword with a CTR of less than 1% and a CPA that’s twice the cost of the product that the keyword matches to, that’s an “expensive” keyword.

Downloading your keywords by ad group or campaign and then filtering by basic rules such as these can help “bubble” up any problem keywords quickly and allow you to either pause or delete them.

Don’t let freeloading #AdWords keywords take over your #PPC budget. Kill what’s not converting.
Click To TweetPowered By CoSchedule

Mistake #2: You’re not being strategic about spending your daily budget

Is traffic to your landing page getting cut off in the middle of the day? AdWords budget running out before you even get to 10am?

That’s a PPC issue around volume and cost.

You could have the most wonderful landing page in the universe, but if your first date budget is for McDonald’s, don’t expect a Nobu restaurant-like response. You have to pay to play.

If you don’t have the bucks to go all out, then get creative like a picnic in the park.

Solution: Use ad scheduling to drive traffic when people are ready to convert

To be more responsible with your daily budget, use ad scheduling to make your ads available during peak times:


By adjusting your bids to be less or even turned off completely during certain times of the day based on performance or peak traffic times, you can stretch a budget much further.

A real world example of using ad scheduling for better ROI

I used to have a wedding invitation client, and I found that her prospects would browse during their lunch hours but never purchase. Because the process required lots of thought (and the opinion of their significant other), people rarely had enough time to purchase during their lunch hour – they’d go home at night and complete the conversion.

Realizing that, I turned the budget up during lunchtime on the east and west coasts (when people liked to browse) then turned it down for the afternoon. I’d turn it back up again after dinnertime (when many people were likely to complete the conversion) and then back down again at bedtime.

In short, the key to saving money was turning down the budget between lunch and dinner ­– since no one was converting.

If you’d like to perform your own stalker-like level of hour-by-hour and day of the week bidding, I highly recommend checking out this Econsultancy case study, where they saw a 69% lift in CPA after implementing ad scheduling. If you’re looking for a solid how to guide, hit up this Wordstream 5 Step Tutorial and you’re off to the races.

Have a tight #PPC budget? Ad scheduling helps target prospects when they’re likely to convert.
Click To TweetPowered By CoSchedule

Additional ways to extend your daily budget:

Or…. get more money. ;)

Mistake #3: Your ad doesn’t match your landing page

When I met my husband on, his profile picture showed a clean-shaven young man who didn’t look a day over 25. Then we met in person, and a bearded guy that looked closer to his actual age showed up, much to my surprise and honestly, the feeling of a message mismatch.

Target, Amazon and eBay used to be notorious for creating message mismatch because they would use dynamic keyword insertion in their ads and bid on every keyword in the universe, attempting to drive traffic to search results pages for items they may or may not have.

Two real-world examples of how exploiting DKI can lead to serious message mismatch. I used to spend far too much time trying to get ads like this to appear.

No one likes a less-than-accurate ad and landing page combination and if your CTR is on the higher, healthier side – say north of 5% – but your conversion rate is less than 5%, there is something disconnected between the two.

If your ads get clicked but your landing pages don’t convert, something’s disconnected between them.
Click To TweetPowered By CoSchedule

Solution: Delight your prospects with perfect message match

It’s really quite simple. Your ad text needs to reflect the ad copy on your landing page.

Check out this successful message match example from Oli Gardner:

He searched for “packaging design” and saw the following ad:

custom-packaging-design-ad copy
The ad copy contains a specific call to action and links to an article on Wired for social proof.

Clicking through takes you to a landing page headlined with with the same keyword from the ad: “custom packaging design.” As an added bonus, both ad and landing page appeal to a sense of urgency by using terminology like “today” and “in just hours.”

The landing page you’re brought to from the ad pictured above is headlined with the exact same keyword from the ad. Perfect message match. Image source.

Pretty sweet.

Perfect message match like that earn us points in PPC towards a lower CPC, higher conversion rate and better Quality Scores. Best of all, it creates a great experience for your visitors and reassures them that they’ve made a “good click.”

Perfect message match between #PPC ad and landing page brings you better ROI and happy prospects.
Click To TweetPowered By CoSchedule

P.S.: If your ad and landing page *do* have proper message match but your conversions rates are still low, then it’s safe to assume that your landing page is scaring away all the nice people who came from your ad. Time to look into some good ol’ landing page optimization.

Mistake #4: Your ads send the wrong message

I love creating personas. I like researching, writing and being imaginative with them, but if you haven’t stopped to smell those roses, you’re going to have a bad time.

PPC keyword lists should be bucketed not just by a type or theme but also thought of in context of the buying cycle (awareness, information gathering or ready to buy). In other words, when selecting keywords, you need to be mindful of user intent.

At the end of the day, you want to make sure that you’ve answered the question that someone searched for.

If you’re not paying attention to user intent and start buying terms accordingly, you’ll see a low CTR because of the mismatch in what appeals to them versus what you’re proposing to them.

And then no one will get to see your beautiful landing page.

Solution: Know your persona and send a message that will resonate

I had a client that sold ready-to-eat dinners made by chefs on a reality TV cooking show. These were not drive-through type meals, but more complex (meals like chicken saltimbocca). My client had been bidding on keywords related to fast food, chain restaurants and frozen foods.

This was problematic for two reasons:

  1. They were going after keywords in the wrong stage of the buying cycle: folks who are looking for a drive through or delivery so they could eat immediately.
  2. They were targeting ads at people looking to pay very little. Because my client was selling fresh, high-quality meals meant to feed a family of four, the average price point of their product was in the $30+ range. Not exactly relevant to someone looking for a $5 pizza meal.

When we sat down to talk about their buyer persona, we found that their demographic was primarily women over 30 who work, have children, a dual income and are looking to feed themselves and their families in a healthier, planned ahead way.

These were not “right now” buyers; these were planners who are willing to spend a little extra, and were likely in the consideration/awareness phase of the buying cycle.

Once we cut all the “right now” keywords and added keywords, ad text and landing page copy to speak directly to these ladies, we started seeing good results. Overall traffic volume went down (there is a lot of search volume around the keyword “Pizza Hut”) but the quality of the traffic went up significantly.

Overall traffic volume drops (blue), but conversions (orange) stay steady, eventually rising with increased budget to the right keywords.

Do your #PPC keywords address buyer intent? Here’s why they should.
Click To TweetPowered By CoSchedule

Quick! Perform a persona check on your PPC campaigns:

  • Are your ads and landing page talking to awareness, consideration or purchase? Is that matching up with appropriate keywords? For example, “can you buy a wife” is a keyword people search for when they’re in the awareness phase, while “where to buy a wife” is for prospects in the purchase phase.
  • Do a Google search for your keywords – do the ads and articles that appear match up with your goals of your PPC campaign?
  • Ask someone. If you know someone in your desired persona range, show them the ad or landing page and see if it appeals to them.

Is it your landing page or is it your PPC?

When it comes to PPC, there are rarely any one-size-fits-all solutions, but my hope is that these examples will provide you with a checklist so you can assess the current state of your campaigns.

Checking for these mistakes should help you determine whether your PPC is sending poor quality traffic to your landing pages… or whether you should hit the landing page optimization books.

Are there any other common PPC blunders that you’ve seen? Let’s nerd out in the comments.

– Elizabeth Marsten

Day 113/365- Late Night Snack

Originally from: 

4 Common PPC Mistakes That Are Sending Crappy Leads to Your Landing Page