Thumbnail

7 Pro Tips to Make Your Landing Page Profitable

http://feedproxy.google.com/~r/crazyegg/~5/9hGH8m_LzZM/cep093_7_tips_landing_page.mp3

Running paid traffic to a landing page can be hard. You need to know how to keep your bounce rates low and subscriber numbers high, in order to keep things profitable.

If you’re someone who has trouble making landing pages work with the use of paid traffic, don’t worry. I’ll show you what changes need to be made so that your landing page performs the way it should.


7 Tips to Make Your Landing Page Profitable
Click To Tweet


We’re going to cover a few of the big wins that you need to focus on. These elements are critical if you want to improve your numbers:

  • Ad Targeting
  • Headline
  • Images
  • Giveaway
  • Landing Page Copy
  • Subscriber Box
  • Split Testing

Ad Targeting

Facebook Targeting

What you would might see when setting your Facebook targeting options. My default is country is the UK

Before we do anything to a landing page, we must first take a look at where your traffic is coming from. Though it is rare, it may just be the case that your landing page is fine, but your ad targeting is not.

If there is a mismatch between who you’re advertising to and who your landing page speaks to, it can look as though your landing page is performing badly. What might actually be happening is that you’re targeting the wrong people in your advertising campaigns.

When the landing page and ad targeting don’t align, you’re going to attract the wrong kind of people. They’ll take one look at your landing page, realize it’s not relevant for them and then click the back button.

When setting up an advertising campaign, go through everything with a fine tooth comb. Ensure that there is a sufficient level of coherency between who you’re advertising to and who your landing page speaks to. In doing so you’ll avoid the rabbit hole of forever changing your landing page only to get consistently poor results.

Headline

You need to make sure that your landing page headline is the best that it can be. The headline is the thing that most people often look at first. It tends to determine what action people might take next.

If you use paid traffic, you need to make sure that your headline matches the information that was found in the ad that you placed.

Ensure that the benefit promise does not change and that you use the same kind of language. For instance, don’t advertise, ‘lose a six kilos in six days,’ and then have a headline that says, ‘learn this new gym technique.’

In my experience, I have found that as long as you keep some consistency between the ad and the headline, you can avoid some of the problems related to your ad targeting. You can use your ad to prequalify people, avoiding clicks that don’t come from your ideal customer. The consistent headline will then reaffirm to the person who clicked that they’re in the right place.

If you’re having some trouble creating a great headline, read this article.

From what I’ve found, headlines don’t need to be complicated. Be specific and include a benefit. If you see a headline you like, emulate it. Keep a swipe file in an Evernote account and borrow from the best.

Giveaway

Most of the people who operate a landing page have something that they’re giving away in order to build their email list. If you find that your landing page is not performing well, it could just be that your giveaway sucks.

This might be a hard thing to hear, as you might have worked forever on that 50-page ebook. I’ve been in this position before and it can sometimes be tiresome to know that you’ve got to work on something else to give away.

I have found that when this problem happens, it generally occurs because I don’t know my target market well enough.

You need to know what your target market has a burning desire for. If I was marketing to freelancers and had a giveaway called, ‘how to make your website look awesome,’ it probably wouldn’t get that many downloads. However, if I had a giveaway called ‘how to consistently generate clients and avoid quiet months,’ that would have a much better response.

Admittedly, those names suck, but I hope you understand the point I’m trying to make. Freelancers worry about winning their next client. Once their existing contract ends, they might have to put up with a month or two without income. This is a much more pressing problem than having a website that doesn’t look awesome.

Your giveaway does not need to be complicated and should just aim to solve one pressing problem. Search the relevant forums and speak one-on-one with your potential clients. Find out what is going on in their heads and how you can help them.

This concept applies to ebooks, webinars, audio recordings and everything else that might exist as a giveaway.

Images

Basecamp landing page

Check out this fella from Basecamp, pointing to the form. The pointed finger automatically draws your attention.

There’s some debate as to what’s more important, the headline or the image. For me the use of an image generally depends on what your landing page looks like.

Some formats allow for a big image and some do not. The more space an image takes, the more attention it draws, and hence, the more importance it gains.

The image tends to vary depending on what you’re promoting. If there’s a live webinar taking place, you might have a picture of yourself. You might boost the credibility in the photo by having a picture of yourself when you were speaking at an event.

If the image is promoting an ebook, you could just have the cover of the ebook present. This will emphasize that you can help share some insight on a burning problem that they have.

You could just be running a very simple landing page, with a big background image. If the background image includes a person, try to select an image that has the person looking at the optin box. (This tends to direct visitors’ eyes to the box.)

Remember your goal is to get people to sign up. You don’t want to have an image that is so dazzling that it distracts them from their original intention. Keep your image simple and ensure that it’s relevant and serves a purpose. The image should contribute to the overall goal of making a visitor take an action—in this case signing up.

Though not always the case, you might also want to make the ad image match the landing page image. This coherency may lead to a higher number of signups.

Landing Page Copy

Selection_016

Taken from a Hubspot landing page. See how the copy promotes the benefits.

If you don’t have much of an image on your landing page, the copy should save the day.

The text on your landing page needs to be relevant to who you’re advertising to and what you’re giving away.

You don’t want to have a big bunch of text that is hard to read and irrelevant. What you need to do is ensure that everything is to-the-point and easy to read quickly.

Most landing pages use a small paragraph and then some bullet points. The paragraph can be used to qualify people further. Though this will not always do anything to reduce your ad spend, it will help you reach people who are more suited to your business.

The bullet points need to be benefits-rich and scannable.

Bullet points are almost like mini headlines. The golden rule when creating bullet points and headlines is to convey benefits, not features.

Don’t tell them what it is—tell them what it can do.

A hypothetical example: ‘Learn about this fat burning machine that automatically contracts muscle fibres.’ A benefit headline/bullet point would be, ‘Finally a way to burn fat without leaving the couch.’ A curious statement, but hopefully you get the point!

It is also a good idea to make sure the copy stands out from the background. Make sure your text color contrasts the background. If it’s hard to read, the overall quality of your landing page goes down along with its readability. Though aesthetic doesn’t always matter, readability is important. If they can’t read it they won’t know why they should opt in.

And remember, at the end of your copy include a call to action. You need to keep in mind that you have to direct people and let them know what to do next. Tell them to enter their email address and get the giveaway.

Subscriber Box

Aweber Sign-Up

This is a button that can be found on an Aweber landing page. Notice how it is tailored to their specific offer. It also changes color when hovered over.

You’ve seen the stories and I’ve seen them too. They tend to go a little like this: local man changes sign-up button color and gets 500% opt in increase.

Whilst that’s not impossible, it’s not something you should be devoting your entire energy towards when improving your subscriber box. There are a few other things that you can do in order to get great results that lend themselves to a better sign-up rate.

Firstly, think about including a note that tells visitors their email addresses won’t be shared or abused. It doesn’t have to be a long message and can simply say something like, ‘We never spam.’

Next, you could experiment with the number of details you’re requesting. Some people have found that when they just ask for an email address, sign-up rates dramatically rise. This depends on your business and what you’re looking to do. Even as small a change as asking only for their first name and email can raise subscriber numbers.

After that you might want to experiment with what the actual sign up button says. Different calls to action can give you varying response rates. Try a few and see which one works. Of course, at this point, you could also experiment with the colors of your button. Just remember, this is often a lower priority than the points we reviewed above.

Split Testing

You need to make sure you’re split testing your landing page. Failure to do so could mean you’re leaving tons of money on the table.

Many times, we think we know what works best on a landing page. As marketers, however, we have to get into the habit of testing our assumptions. A small tweak to your headline can potentially yield some massive results. You’ll never know if you don’t split test. If you can afford it- try things that you think are absurd and let the numbers do the talking.

For me the best tool when it comes to split testing a landing page is Visual Website Optimizer. You don’t need to be a tech whiz kid to get good results, and making changes with their help is really easy. (By the way, I am in no way affiliated with them. I’ve just used their products and like them.)

When split testing, change only one thing at a time. This will let you know what is actually contributing to a change in the numbers. You can then make an accurate comparison to the old original version.

It’s okay to test some crazy changes. You might just stumble upon something that actually works well. The more a/b testing you do, the more you’ll know what works best.

When you’re split testing, remember to give everything a little bit of time. Don’t assume a landing page change doesn’t work after a few visits. Let it run for a day or two (or a month or two) and then see what the numbers say. You need to reach statistical relevance before you can evaluate the results of your test.

Try working on the headline first. Then make some changes to the bullet points or the image. As mentioned before, the headline is a major component of your landing page. Split testing it will help you focus on big wins when improving your numbers.

Other ideas to experiment with

Scarcity

Before we say anything about scarcity, I want to emphasize one point: You should be ethical. Don’t say something that is not true and don’t pretend you’re going to run out of digital ebooks.

However, if scarcity is something that applies to what you’re doing, whether it be webinar seats or product giveaways, consider it. It often works well for businesses that deal with tangible goods, or those who are looking to build anticipation for a release of some sort.

Figure out a way that you might be able to work it into your funnel. But remember—don’t lie.

Social Proof

Wordstream Landing Page

This Wordstream landing page includes a lot of the elements mentioned. There are also some company logos. These count as social proof too. The video tends to make up for the lack of copy.

Social proof comes in many forms and can boost the credibility of your page massively. If you have the means to do so, the option of including testimonials can help. We don’t want to overcomplicate things, so keep it brief. If you have a testimonial that speaks directly to the people you’re trying to reach, consider using it.

Watch Someone Use Your Website

This tends to work better when testing websites as a whole, though it can still work well with a landing page.

Find someone nearby and ask them to take an action on your landing page. Watch them and see how they interact with your page. Where do they click, even though there is no clickable element? What do they spend the most time doing? What is their opinion?

Crazy Egg heatmaps can help you do some of this. The collated data can provide valuable insight on the actions that people are taking on your website.

With landing pages, you only want someone to do one specific thing. Watching someone (or gathering data on people using your landing page) will let you know if they know what that one specific thing is.

Different Forms of Media

If your landing page only includes an image, try swapping it out with a video. A video will need to be created so that it conveys the right message. Those who use a video on their landing page sometimes set the video to autoplay. Experiment with different video styles and see if it helps.

Long Copy

Though it was mentioned before that bullet points can be helpful, you might want to include some longer copy too.

This would most likely be placed on the bottom of the landing page, and would allow for people to learn more about what you’re offering. If you’re using long copy make sure you’re regularly placing signup buttons throughout the page.

Taking Things to the Next Level

Improving your landing page can give you a chance to take things to the next level. Once you know where to focus your attention, making the changes should be a walk in the park.

The job of improving a landing page is never done. You’ll always want to do some split testing to see if you can drive your numbers even higher. You can experiment with different headlines, images and bullet points. You can even make a radical change to the overall layout. As long as you’re constantly trying new things you should be good.

You don’t always have to be original when making these changes. If you see an idea you like, you can emulate it. Keep your own swipe file and synthesize various landing pages to produce one that is going to be a top performer.

Put some of the tips mentioned into action and see how they work out for you. If you’ve got any questions or suggestions, leave a comment below. Good Luck!

Read Other Crazy Egg Posts by Rakesh Kumar

View original article:

7 Pro Tips to Make Your Landing Page Profitable

Thumbnail

Creating A Complete Web App In Foundation For Apps

Foundation for Apps is a new single-page app1 framework from Zurb that is closely related to Foundation 5 (also known as Foundation for Sites, a widely used front-end framework). It’s built around AngularJS and a flexbox grid framework. It’s intended to make creating a web app very quick and simple, enabling us to quickly start writing the code that’s unique to our application, rather than boilerplate.

Because Foundation for Apps was only released at the end of 2014, it hasn’t yet seen widespread usage, so there are few good sources of information on using the framework. This article is meant to be a comprehensive guide to building a functional web app with Foundation for Apps from start to finish. The techniques detailed here are fundamental to building practically any kind of app for any client, and this tutorial also serves as a strong introduction to the wider world of AngularJS and single-page apps.

In light of the new film being released later this year, we’ll be building a Star Wars knowledge base. It will be a responsive web application, using a RESTful2 API, caching and many of the features that Foundation for Apps3 and AngularJS offer.

Prefer to skip to the good stuff?

Getting Started

Take a quick squiz through the official documentation7, which explains the styling aspects well but doesn’t go into detail about application functionality. Also, keep AngularJS’ excellent documentation8 handy, bearing in mind that Foundation for Apps includes some services that aren’t standard and that some AngularJS functions might not work out of the box. Keep in mind also that, natively, AngularJS and Foundation for Apps aren’t particularly well suited to apps that need significant SEO, since most content is loaded via AJAX.

Our app will get its data from the handy Star Wars API found at SWAPI9. Take a look through SWAPI’s documentation3310 to get a feel for the data served and its structure. Our application will be based on that structure for simplicity.

First, let’s install Foundation for Apps and create our project. Make sure that Ruby11 (already on OS X by default) and Node.js12 are installed, and then follow the four-step process detailed in the documentation13. It’s pretty straightforward, even if you haven’t used the command line before. Once you’ve finished the process, your browser should display the default home page of your application at http://localhost:8080/#!/.

Foundation for Apps’ default home page14
Foundation for Apps’ default home page (View large version15)

Let’s get acquainted with the project’s files and folders.

The only file in our app’s base directory that we need to pay attention to is gulpfile.js, which gives instructions to the Gulp process16 that we’ve already used to start the server for our app. Gulp is a build system17, and it’s very similar to Grunt18. Later on, if we want to add some AngularJS modules or plugins, we’ll need to update this Gulp file with references to the JavaScript or CSS files for those modules or plugins.

The client folder is where we’ll find all of the other files we’re concerned with:

  • clients/assets/js/app.js is where our controller, directives and custom filters will be for this application;
  • All of our app’s SCSS can be found in clients/assets/scss, naturally;
  • clients/index.html is the base template for our application;
  • clients/templates/ is where we’ll find the template for all of our pages, most of which haven’t been created yet.

Build The Template And Home Screen

Let’s start building! First, modify the index.html page, which doesn’t start out very well optimized for a real application. We’ll add an off-canvas menu for small screens, a button to toggle its opening, and a nice fade effect using classes from Foundation for Apps’ “Motion UI.” You can copy the code from the index.html file in our repository19.

We’ll add some SCSS variables to our _settings.scss file to set our colors, fonts and breakpoints:

$primary-color: #000;
$secondary-color: #ffe306;
$body-background: $secondary-color;
$breakpoints: (
  small: rem-calc(600),
  medium: rem-calc(900),
  large: rem-calc(1200),
  xlarge: rem-calc(1440),
  xxlarge: rem-calc(1920),
);
$h1-font-size: rem-calc(80);
$body-font-family: "brandon-grotesque", Helvetica, Arial, sans-serif;
$header-font-family: "flood-std", Helvetica, sans-serif;

Now we’ll trick out app.scss to add a bit of pizzazz. You can use the file in the repository20 as an example.

Let’s quickly overwrite the default home.html file in clients/templates/ with a simple menu of links to all of the pages we’ll build:

---
name: home
url: /
---
<div class="grid-content">
  <h1>Star Wars Compendium</h1>
  <p class="lead">Foundation for Apps using Star Wars API</p>
  <hr>
  <ul class="home-list">
    <li><a ui-sref="films">Films</a></li>
    <li><a ui-sref="species">Species</a></li>
    <li><a ui-sref="planets">Planets</a></li>
    <li><a ui-sref="people">People</a></li>
    <li><a ui-sref="starships">Starships</a></li>
    <li><a ui-sref="vehicles">Vehicles</a></li>
  </ul>
</div>

Our template is now looking pretty unique to us now — no cookie-cutter Foundation at this point:

Home page of application21
Our template in action — it’s got a bit of flavor. (View large version22)

Creating A List Of Films

Now we’re cooking with gas. In our templates folder, create a template file for our first subpage: films.html. Paste this snippet at the top:

---
name: films
url: /films/:id?p=
controller: FilmsCtrl
---

This tells our app three things:

  1. In links to this page, we’ll refer to the page as films
  2. The URL will have two possible parameters: id (the ID of the film, according to our data) and p (the page number in the listing of all films).
  3. We’ll be using our own custom AngularJS controller, called FilmsCtrl, instead of the default blank one that Foundation for Apps creates automatically.

Because we’re using our own controller, let’s go ahead and create one in app.js. Look through the controller below, which we’ll be using for both our list of films and our single-film pages. You can see that this controller keeps track of URL parameters, figures out what page of results we’re on, gets the necessary data (either a list of films or details of an individual film, depending on the URL’s parameters) from our external API, and returns it to our view using the $scope variable. Add it to app.js after the angular.module declaration closes:

controller('FilmsCtrl',
  ["$scope", "$state", "$http",function($scope, $state, $http)
  // Grab URL parameters - this is unique to FFA, not standard for
  // AngularJS. Ensure $state is included in your dependencies list
  // in the controller definition above.
  $scope.id = ($state.params.id )
        .success(function(data) 
          // If the request succeeds, assign our data to the 'film'
          // variable, passed to our page through $scope
          $scope['film'] = data;
        )

    } else 
      // There is no ID, so we'll show a list of all films.
      // We're on page 1, so the next page is 2.
      $http.get("http://swapi.co/api/"+'films'+"/",  cache: true )
        .success(function(data) 
          $scope['films'] = data;
          if (data['next']) $scope.nextPage = 2;
        );
    }
  } else 
    // Once again, there is no ID, so we'll show a list of all films.
    // If there's a next page, let's add it. Otherwise just add the
    // previous page button.
    $http.get("http://swapi.co/api/"+'films'+"/?page="+$scope.page,
       cache: true ).success(function(data) 
        $scope['films'] = data;
        if (data['next']) $scope.nextPage = 1*$scope.page + 1;
      );
      $scope.prevPage = 1*$scope.page - 1;
  }
  return $scope;

}])  // Ensure you don't end in a semicolon, because more
     // actions are to follow.

After saving app.js, you may need to restart your server using the terminal (Control + C to cancel the operation and then foundation-apps watch again) to ensure that your app includes the new template file you’ve created along with the new controller.

And just like that, we have a fully functional controller that gets data from an external RESTful API source, caches the result in the browser’s session and returns the data to our view!

Open up films.html again, and let’s start building the view of the data that we can now access. Begin by adding the base view, which will show a list of films. We can access all properties that we’ve added to our $scope variable, without prefixing them with $scope, such as (in this case) films, prevPage and nextPage. Add the following below the template’s existing content:

<div class="grid-content films" ng-show="films">
  <a class="button pagination"
    ng-show="prevPage"
    ui-sref="films( p: prevPage )">
    Back to Page prevPage}
  </a>

  <div class="grid-content shrink">
    <ul class="menu-bar vertical">
      <li ng-repeat="film in films.results">
        film.title}
      </li>
    </ul>
  </div>

  <a class="button pagination"
    ng-show="nextPage"
    ui-sref="films( p: nextPage )">
    To Page nextPage}
  </a>
</div>

Bodacious! We’ve got a list of film names as well as pagination if there are multiple pages of data. But that’s not especially useful yet — let’s turn the film’s name into a link to that film’s page in our app.

We plan to use the film’s ID as the id parameter in our URL, and we have access to the film’s url attribute, which happens to have the film’s ID as its last parameter before the final slash. But how do we grab only the ID out of the URL that we have access to? AngularJS makes it easy with custom filters23. Let’s wrap our film.title} in a link, add a ui-sref attribute (which sets up an internal link) and use our film.url data with a custom filter applied to it:

<a ui-sref="films( id:( film.url )">
  film.title }
</a>

Well, now our page is broken because our app doesn’t know what the lastdir and capitalize filters are. We need to define those filters in our app.js file, placed just after our controller:

.filter('capitalize', function() 
  // Send the results of this manipulating function
  // back to the view.
  return function (input) 
    // If input exists, replace the first letter of
    // each word with its capital equivalent.
    return (!!input) ? input.replace(/([^W_]+[^s-]*) */g,
      function(txt)return txt.charAt(0).toUpperCase() +
        txt.substr(1)) : '';
  }
})
.filter('lastdir', function () 
  // Send the results of this manipulating function
  // back to the view.
  return function (input) 
    // Simple JavaScript to split and slice like a fine chef.
    return (!!input) ? input.split('/').slice(-2, -1)[0] : '';
  
})

Bingo! We now have a list of films, each of which links to its respective film page.

List of films24
Our linked list of films: Not sure why we bothered with the prequels. (View large version25)

However, that link just takes us to an empty page at the moment, because films.html hasn’t been set up to show a specific film, rather than the whole list. That’s our next step.

Displaying Details Of A Single Film

We’ve already set up all of the data we need for the single-film page in our FilmsCtrl controller in the $scope.film variable (which is the same as $scope['film']). So, let’s reuse films.html and add another section that’s visible only when the singular film variable is set. We’ll set each key-value pair to use <dt> and <dd> within a <dl> because we’re not unsemantic swine26. Remember also that some of film’s fields, such as characters, have multiple values in an array, so we’ll need to use ng-repeat for those to display each value. To link each character to its character page, we’ll use the same method that we used in the listing of films: Using our lastdir filter, we link to each character’s people page by his/her/its ID.

<div class="grid-content film"
  ng-show="film" ng-init="crawl = 'false'">
  <h1>Episode film.episode_id }: 
    film.title}</h1>
  <hr>
  <dl>
    <dt>Opening Crawl</dt>
    <dd ng-class="'crawl':crawl === true" 
      ng-click="crawl === true ? crawl = false : crawl = true">
      film.opening_crawl}</dd>
    <dt>Director</dt>
    <dd>film.director }</dd>
    <dt>Producer</dt>
    <dd>film.producer }</dd>
    <dt>Characters</dt>
    <dd ng-repeat="character in film.characters"
      ui-sref="people( id:(character )">
      character}
    </dd>
  </dl>
</div>

But look, when we view a film’s entry now, the list of characters shows just a URL relating to the character, rather than the character’s name.

Single film view, characters as URLs27
Who are these characters? This will not do. (View large version28)

We need to replace that text with the character’s name, but we don’t have that critical piece of data. Perhaps we could look up that URL using the same method we used to get our film in the first place — then, the data we receive from the call would contain the character’s name. Let’s open up app.js again and add a directive29, which we’ll call getProp.

.directive("getProp", ['$http', '$filter', function($http, $filter) 
  return 
    // All we're going to display is the scope's property variable.
    template: "property}",
    scope: 
      // Rather than hard-coding 'name' as in 'person.name', we may need
      // to access 'title' in some instances, so we use a variable (prop) instead.
      prop: "=",
      // This is the swapi.co URL that we pass to the directive.
      url: "="
    ,
    link: function(scope, element, attrs) 
      // Make our 'capitalize' filter usable here
      var capitalize = $filter('capitalize');
      // Make an http request for the 'url' variable passed to this directive
      $http.get(scope.url,  cache: true ).then(function(result) 
        // Get the 'prop' property of our returned data so we can use it in the template.
        scope.property = capitalize(result.data[scope.prop]);
      , function(err) 
        // If there's an error, just return 'Unknown'.
        scope.property = "Unknown";
      );
    }
  }
}])

getProp returns a single property from the data resulting from our $http.get call, and we can specify which property we want. To use this directive, we need to add it to the area within our ng-repeat, like so:

<span get-prop prop="'name'" url="character">character}</span>

Nice. We now have each character’s name instead of just a wild URL, and each links to its respective page. Now our single film view will be complete once the rest of the data fields are added to the view (see films.html in the repository30 for the rest).

Fixed character names31
This is much better. (View large version32)

Refactoring Our Code For Reuse

Looking through SWAPI’s documentation3310 and our plans for the rest of the application, we clearly see that our controllers for all other pages will be extremely similar to this one, varying only in the category of data we’re getting.

With that in mind, let’s move the code inside our films controller to its own function, called genericController, placed just before the last closing brackets of app.js. We also need to replace every instance of the string 'films' with the variable multiple (five instances) and 'film' with single (one instance), because they represent the multiple and singular forms of the entity of each page. This allows us to create very DRY34, reusable code that’s also easier to read and understand.

Now we can add a call in our FilmsCtrl controller to our new genericController function with our two variables (multiple and single versions of our data), passed as parameters:

.controller('FilmsCtrl', function($scope, $state, $http)
  $scope = genericController($scope, $state, $http, 'films', 'film');
)

Excellent! We have a reusable controller that grabs the data we need for any given page and puts it in a usable format! We can now easily create our other pages’ controllers just after FilmsCtrl in the same way:

.controller('SpeciesCtrl', function($scope, $state, $http)
  $scope = genericController($scope, $state, $http, 'species', 'specie');
)
.controller('PlanetsCtrl', function($scope, $state, $http)
  $scope = genericController($scope, $state, $http, 'planets', 'planet');
)
.controller('PeopleCtrl', function($scope, $state, $http)
  $scope = genericController($scope, $state, $http, 'people', 'person');
)
.controller('StarshipsCtrl', function($scope, $state, $http)
  $scope = genericController($scope, $state, $http, 'starships', 'starship');
)

Go ahead and create the template HTML files for planets, species, people, starships and vehicles in the same way we created films.html but referencing the fields in SWAPI’s docs35 for each respective category of data.

Voila! All of our pages now show the correct data and interlink with one another!

Completed application36
Our completed application (View large version37)

Final Notes

Our application is complete! Our demo (linked to below) is hosted by Aerobatic38, which exclusively targets front-end web applications. You’ll see in our repository that we’ve added some domain-specific options to take advantage of Aerobatic’s API gateway, which sets up a proxy that caches the API’s data on the server once we request it. Without caching, the application would be both latency-limited and request-limited (SWAPI allows only so many requests per domain, as do most other APIs), and because our data isn’t likely to change often, that server caching makes everything very speedy after the first load. Because we’ve limited our onload requests and images, even the first load will be acceptable on a slow connection, and on each page load, the header menu will stay on the page, making the application feel fast.

In the demo and repository, you can see that we’ve also added another API call on the details pages, which grabs an image URL for each entity from a Google custom search that we set up to trawl Wookieepedia39 and StarWars.com40. So, we’ve now got dynamic, highly relevant images showing up on each detail page.

Take a look at the demo below, or look through the source code for some hidden goodies and more Foundation-specific tricks, or download the repository and build on it locally with your own improvements.

(ml, al)

Footnotes

  1. 1 http://en.wikipedia.org/wiki/Single-page_application
  2. 2 http://stackoverflow.com/questions/671118/what-exactly-is-restful-programming
  3. 3 http://foundation.zurb.com/apps/
  4. 4 http://ffa_sw.aerobaticapp.com/
  5. 5 https://github.com/spsaucier/ffa_sw
  6. 6 https://github.com/spsaucier/ffa_sw/archive/master.zip
  7. 7 http://foundation.zurb.com/apps/docs/#!/
  8. 8 https://docs.angularjs.org/api
  9. 9 http://swapi.co
  10. 10 http://swapi.co/documentation
  11. 11 http://installrails.com/
  12. 12 https://nodejs.org/
  13. 13 http://foundation.zurb.com/apps/docs/#!/installation
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/03/01-default-page-opt.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/03/01-default-page-opt.png
  16. 16 http://gulpjs.com/
  17. 17 http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
  18. 18 http://gruntjs.com/
  19. 19 https://github.com/spsaucier/ffa_sw/blob/master/client/index.html
  20. 20 https://github.com/spsaucier/ffa_sw/blob/master/client/assets/scss/app.scss
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/03/02-template-in-action-opt.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/03/02-template-in-action-opt.png
  23. 23 https://docs.angularjs.org/api/ng/filter/filter
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/03/03-linked-list-opt.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2015/03/03-linked-list-opt.png
  26. 26 http://en.wikipedia.org/wiki/Semantic_HTML
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/03/04-characters-opt.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/03/04-characters-opt.png
  29. 29 https://docs.angularjs.org/guide/directive
  30. 30 https://github.com/spsaucier/ffa_sw/blob/master/client/templates/films.html
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2015/03/05-characters-fixed-opt.png
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/03/05-characters-fixed-opt.png
  33. 33 http://swapi.co/documentation
  34. 34 http://en.wikipedia.org/wiki/Don%27t_repeat_yourself
  35. 35 http://swapi.co/documentation
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2015/03/06-complete-app-opt.png
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2015/03/06-complete-app-opt.png
  38. 38 http://www.aerobatic.com/
  39. 39 http://starwars.wikia.com/
  40. 40 http://www.starwars.com/
  41. 41 http://ffa_sw.aerobaticapp.com/
  42. 42 https://github.com/spsaucier/ffa_sw
  43. 43 https://github.com/spsaucier/ffa_sw/archive/master.zip

The post Creating A Complete Web App In Foundation For Apps appeared first on Smashing Magazine.

Read the article: 

Creating A Complete Web App In Foundation For Apps

Thumbnail

I’m Pretty Sure Your Mobile Marketing Strategy Isn’t Good Enough

optimized-mobile-campaign-650
It’s a mobile mobile. Get it? Image by James Theophane via Flickr.

We’ve all read a metric ton of marketing articles telling us that “A mobile marketing strategy is a must.

If it feels like you’ve been hearing that forever, it’s because people have actually been spewing that advice for nearly a decade. That type of article started cropping up way back in 2008, according to Google Trends:

google-trends-mobile-marketing-strategy

Several years later, you’ve likely (hopefully) got a mobile strategy in place; your landing pages are mobile responsive and your emails scale for many different screen sizes.

You’ve adapted to the new reality because you’ve accepted that this is just the way things are now:

email-stats-phone-bathroom

But with sobering stats like that and #mobilegeddon behind us, simply having a mobile marketing strategy isn’t enough anymore.

As Chris Goward, CEO of conversion optimization agency WiderFunnel, explained in our recent Unwebinar, if you want to be successful, you’ve got to have an optimized mobile marketing strategy – one that you’re constantly refining and improving.

To help with that, Chris shared a three-pronged approach to mobile optimization that will help you stay ahead of the curve (and score more conversions). Read on for a summary of his process – or check out the webinar recording here.

The trinity of mobile optimization

On the webinar, Chris shared a diagram which broke down his approach to mobile CRO:

mobile-optimization-trinity

Every solid mobile optimization strategy, Chris explained, has three essential elements:

  1. Persuasion marketing: tactics that motivate visitors to take action
  2. Experience design: tearing down conversion barriers to create friction-free and delightful experiences
  3. A scientific method: for testing your hypotheses and refining the tactics from elements #1 and #2

Let’s dig a little deeper into each of these elements to get a better idea of how it all fits together into a killer, constantly-improving mobile CRO strategy.

Persuasion marketing

The first ingredient of your optimized mobile marketing strategy should be a healthy dose of persuasion marketing.

If you’re a CRO buff, you’re likely already intimately familiar with a lot of this groundwork. It’s the intuitive (but super essential) stuff that will never change, regardless of which device prospects are using:

  • Making use of clear and concise language
  • Communicating a unique value proposition that resonates with prospects
  • Using social proof, compelling CTAs, and other triggers that motivate prospects to take action

All pretty straightforward so far, but this is when things get a bit deeper.

Experience design

Experience design is all about minding the experience you’re creating for your mobile users. It’s about understanding their state of mind and facilitating interactions that are unique to the mobile experience.

The first step in doing that, Chris explained, is understanding that mobile optimization isn’t just about the device:

After all, as Chris puts it, there is no such thing as a “mobile user.” At the end of the day, your mobile users are the same people as your desktop users.

In a mobile context, it’s the circumstances that differ: users behave differently and react to different stimuli. As a result, a new set of challenges arise in the mobile environment:

mobile-new-challenges

New challenges require new solutions – which, Chris explained, represent hidden opportunities for you.

With so few people actively optimizing their mobile campaigns, there are so many possibilities for testing and improvement (and for staying ahead of the competition):

So how can you determine the best possible experience for mobile?

Scientific method

Here’s where a scientific method comes in – it’s your responsibility to test to find out what the best mobile experience is for users.

Without a doubt, this is easier said than done. So how do you get started?

Do your homework

Like any good CRO strategy, your mobile optimization strategy needs to start with a healthy dose of research:

  • Make sure you understand your customer’s mindset and language
  • Take the time to collect data through heuristic analysis, web analytics, surveys and all that nerdy goodness

Once you’ve laid the groundwork, you need a framework for asking the right questions and identifying ripe optimization opportunities.

Identify a list of opportunities

Chris shared WiderFunnel’s LIFT model, which provides a structured approach to analyzing your mobile landing pages (and the other pieces of your mobile campaigns):

lift-model-chris-goward

In a nutshell, it helps you take a structured approach to evaluating your landing pages for:

  • A strong UVP: Are you clearly describing how you can solve your prospect’s problem and what distinguishes you from the competition?
  • Relevance: Does the landing page deliver what prospects were promised before arriving there? Are you speaking in a language they find relatable?
  • Clarity: Does your copy spell out exactly what prospects will get? Does the page have a logical flow that guides prospects toward the goal?
  • Urgency: Is there any indication that prospects need to act now?
  • Anxiety: Does your prospect have any objections that aren’t being addressed? Are you unintentionally raising red flags?
  • Distraction: Are there elements competing with your conversion goal?

As an example, Chris showed an analysis of a mobile landing page for an iPhone 5 screen protector:

mobile-landing-page-lift-analysis
For this mobile landing page, Chris found that there were many elements inhibiting prospects from converting. Image source.

After you’ve critiqued your page for each of the components of the LIFT model and made a list of the weaknesses, it’s time to start optimizin’.

Turn weaknesses into opportunities for improvement

Now you take the problems you’ve identified and flip them on their head – crafting hypotheses that will allow you to turn all your problem areas into strengths.

lift-turn-weaknesses-into-strengths

You’ll be left with a list of optimization opportunities – and all you have to do is pick one and run your first A/B test.

Psst: if you’re wondering how you can start prioritizing these tests, check out this article by Chris about the PIE method – a straightforward formula for prioritizing your tests based on three criteria: potential, importance and ease.

Always keep learning and optimizing

With every test you run, be sure to debrief and reflect on what you’ve learned about your users.

As much as your end goal is to lift conversions, it’s also to gain insight that you can learn from and apply to all your marketing efforts.

And as Chris suggested, look for opportunities for borrowing insight across tests – and even across channels:

desktop-tests-insight-to-mobile-tests

Because your mobile users and desktop users are the same people, your testing efforts across channels don’t exist in a silo. You can learn insights from your mobile tests that you can then apply to your landing page and campaign optimization on any channel.

No optimization effort is ever complete, but testing consistently and borrowing insights across channels will bring you closer to the unattainable goal of a perfect conversion rate.


Visit site – 

I’m Pretty Sure Your Mobile Marketing Strategy Isn’t Good Enough

Thumbnail

I’m Pretty Sure Your Mobile Marketing Strategy Isn’t Good Enough

optimized-mobile-campaign-650
It’s a mobile mobile. Get it? Image by James Theophane via Flickr.

We’ve all read a metric ton of marketing articles telling us that “A mobile marketing strategy is a must.

If it feels like you’ve been hearing that forever, it’s because people have actually been spewing that advice for nearly a decade. That type of article started cropping up way back in 2008, according to Google Trends:

google-trends-mobile-marketing-strategy

Several years later, you’ve likely (hopefully) got a mobile strategy in place; your landing pages are mobile responsive and your emails scale for many different screen sizes.

You’ve adapted to the new reality because you’ve accepted that this is just the way things are now:

email-stats-phone-bathroom

But with sobering stats like that and #mobilegeddon behind us, simply having a mobile marketing strategy isn’t enough anymore.

As Chris Goward, CEO of conversion optimization agency WiderFunnel, explained in our recent Unwebinar, if you want to be successful, you’ve got to have an optimized mobile marketing strategy – one that you’re constantly refining and improving.

To help with that, Chris shared a three-pronged approach to mobile optimization that will help you stay ahead of the curve (and score more conversions). Read on for a summary of his process – or check out the webinar recording here.

The trinity of mobile optimization

On the webinar, Chris shared a diagram which broke down his approach to mobile CRO:

mobile-optimization-trinity

Every solid mobile optimization strategy, Chris explained, has three essential elements:

  1. Persuasion marketing: tactics that motivate visitors to take action
  2. Experience design: tearing down conversion barriers to create friction-free and delightful experiences
  3. A scientific method: for testing your hypotheses and refining the tactics from elements #1 and #2

Let’s dig a little deeper into each of these elements to get a better idea of how it all fits together into a killer, constantly-improving mobile CRO strategy.

Persuasion marketing

The first ingredient of your optimized mobile marketing strategy should be a healthy dose of persuasion marketing.

If you’re a CRO buff, you’re likely already intimately familiar with a lot of this groundwork. It’s the intuitive (but super essential) stuff that will never change, regardless of which device prospects are using:

  • Making use of clear and concise language
  • Communicating a unique value proposition that resonates with prospects
  • Using social proof, compelling CTAs, and other triggers that motivate prospects to take action

All pretty straightforward so far, but this is when things get a bit deeper.

Experience design

Experience design is all about minding the experience you’re creating for your mobile users. It’s about understanding their state of mind and facilitating interactions that are unique to the mobile experience.

The first step in doing that, Chris explained, is understanding that mobile optimization isn’t just about the device:

After all, as Chris puts it, there is no such thing as a “mobile user.” At the end of the day, your mobile users are the same people as your desktop users.

In a mobile context, it’s the circumstances that differ: users behave differently and react to different stimuli. As a result, a new set of challenges arise in the mobile environment:

mobile-new-challenges

New challenges require new solutions – which, Chris explained, represent hidden opportunities for you.

With so few people actively optimizing their mobile campaigns, there are so many possibilities for testing and improvement (and for staying ahead of the competition):

So how can you determine the best possible experience for mobile?

Scientific method

Here’s where a scientific method comes in – it’s your responsibility to test to find out what the best mobile experience is for users.

Without a doubt, this is easier said than done. So how do you get started?

Do your homework

Like any good CRO strategy, your mobile optimization strategy needs to start with a healthy dose of research:

  • Make sure you understand your customer’s mindset and language
  • Take the time to collect data through heuristic analysis, web analytics, surveys and all that nerdy goodness

Once you’ve laid the groundwork, you need a framework for asking the right questions and identifying ripe optimization opportunities.

Identify a list of opportunities

Chris shared WiderFunnel’s LIFT model, which provides a structured approach to analyzing your mobile landing pages (and the other pieces of your mobile campaigns):

lift-model-chris-goward

In a nutshell, it helps you take a structured approach to evaluating your landing pages for:

  • A strong UVP: Are you clearly describing how you can solve your prospect’s problem and what distinguishes you from the competition?
  • Relevance: Does the landing page deliver what prospects were promised before arriving there? Are you speaking in a language they find relatable?
  • Clarity: Does your copy spell out exactly what prospects will get? Does the page have a logical flow that guides prospects toward the goal?
  • Urgency: Is there any indication that prospects need to act now?
  • Anxiety: Does your prospect have any objections that aren’t being addressed? Are you unintentionally raising red flags?
  • Distraction: Are there elements competing with your conversion goal?

As an example, Chris showed an analysis of a mobile landing page for an iPhone 5 screen protector:

mobile-landing-page-lift-analysis
For this mobile landing page, Chris found that there were many elements inhibiting prospects from converting. Image source.

After you’ve critiqued your page for each of the components of the LIFT model and made a list of the weaknesses, it’s time to start optimizin’.

Turn weaknesses into opportunities for improvement

Now you take the problems you’ve identified and flip them on their head – crafting hypotheses that will allow you to turn all your problem areas into strengths.

lift-turn-weaknesses-into-strengths

You’ll be left with a list of optimization opportunities – and all you have to do is pick one and run your first A/B test.

Psst: if you’re wondering how you can start prioritizing these tests, check out this article by Chris about the PIE method – a straightforward formula for prioritizing your tests based on three criteria: potential, importance and ease.

Always keep learning and optimizing

With every test you run, be sure to debrief and reflect on what you’ve learned about your users.

As much as your end goal is to lift conversions, it’s also to gain insight that you can learn from and apply to all your marketing efforts.

And as Chris suggested, look for opportunities for borrowing insight across tests – and even across channels:

desktop-tests-insight-to-mobile-tests

Because your mobile users and desktop users are the same people, your testing efforts across channels don’t exist in a silo. You can learn insights from your mobile tests that you can then apply to your landing page and campaign optimization on any channel.

No optimization effort is ever complete, but testing consistently and borrowing insights across channels will bring you closer to the unattainable goal of a perfect conversion rate.


Visit site – 

I’m Pretty Sure Your Mobile Marketing Strategy Isn’t Good Enough

Thumbnail

Ethical Urgency: The Conversion Optimizer’s Secret Weapon

Read that tweet one more time. The desire we want to instill in customers and the value we want to assign our products: it all comes down to urgency.

But that’s nothing new. Urgency is one of the core conversion principles relied on by marketers for more than a century. Claude Hopkins was testing it in A/B tests since the 1800s. And it still works.

Bottom line, if you’re not leveraging urgency effectively, you should start now. It’s low-hanging fruit for lifting your conversion rates.

What is urgency?

There are several definitions of urgency. Let’s look at two:

definition of urgency

According to these definitions, urgency can be created in several ways. In particular:

  1. Urgency starts with importance.

Something can’t be urgent if it’s not important.

  1. Urgency deals with time.

Every play for urgency has a time limit. Act before that limit, and you get the goods. Procrastinate, and you lose. This is important because people tend to put off difficult decisions — and that, in itself, is a decision.

  1. Urgency deals with quantities.

Urgency results when people must act now (the time element) or lose something valuable. Your sales copy should raise the value of your product/service, then create a need to act now.

People are incredibly motivated by loss avoidance. By all means, use it.

How to put it to work

Here’s the good news. Urgency is a variable that your copywriters and designers can control to a high degree. Your sales copy, calls to action (CTAs), and images can all be used to create a sense of urgency. You simply need to decide on the tactics that fit your particular promotion.

To help, we’re going to review some of the top urgency plays available today, all of them capable of raising desire and driving action.


Ethical Urgency: The Conversion Optimizer’s Secret Weapon
Click To Tweet


But first, let’s review the rules.

Rule 1: Use Genuine Urgency

Urgency can be either genuine or implied.

An offer that expires in 24 hours or so is genuine urgency. If you consumer does not take care of it NOW, they won’t be able to.

Implied urgency is where you use words such as now or today to hint to readers that they ought to take action sooner than later. There’s no genuine urgency, but the language used implies that there is.

Of these two types of urgency, real urgency is more effective than implied urgency since it is attached to something tangible — namely, a time deadline or limited quantity. To get your best results, only use implied urgency if you’ve no other option.

Rule 2: Handle with Care

Consumers can spot promotional urgency (read, fake urgency) from a mile way. How many stores have you noticed that have closing down sales, yet never actually close down? After a while, it becomes a joke, doesn’t it?

Continually using implied urgency without ever delivering is one surefire way to lose credibility. People will grow tired if you promising “50% off for 24 hours” every couple of days.

Why should they act now if the same conditions will arise in a day or two? Trust your value proposition to generate sales rather than habitually using urgency gimmicks.


Continually using implied urgency without ever delivering is one sure-fire way to lose credibility
Click To Tweet


You need to approach urgency in a subtle manner. Consumers are too savvy to fall for obvious sales tricks.

Fortunately, you only need a dash of urgency for it be effective, and if you do it right, it will strengthen your brand and add value to the items you sell.

Here Are the Urgency Plays that Work Today

Remind customers of the pain of NOT buying (loss aversion)

As reported by the New York Times, people often buy products or service because they have a problem that’s causing them pain, and they want a solution that will bring about a desired result.

For nearly all people, pain is a greater motivator than pleasure. (Impending loss seems more devastating than the possibility of pleasure or benefits.)

Some tactics you could implement:

  1. Remind people of the discomfort of continuing to live with their pain or problem, and that it can be solved if they only take action.
  2. Remind them how embarrassing it is to have that pain or problem, and that it can be solved.
  3. Remind them about the future insecurity and consequences of not dealing with this pain or problem right now.
  4. Expose the un-confrontable issue most people have about this pain or problem.

You can remind them about these areas anywhere throughout your copy.

A good place to start is in your headline to instantly grab their attention and suck them into reading the next line… and then the next line… and then the next line… until they get to the ‘Add To Cart’ button and buy!

Example 1: Carphone Warehouse’s Site below makes an effective use of loss aversion to create a sense of urgency to entice users to make a purchase.

image004 

Example 2: Queen of Free makes effective use of loss aversion (image courtesy VWO)

image006

Example 3: DC Finder implemented a loss aversion tactic to increase urgency and increased conversions by 68% over the former benefit-based copywriting.

image008

Example 4: Terminix’s use of loss aversion is effective.

image010

Raise customers’ fear of price increase

Since price is a major conversion influencer for most products, tactics that offer a reduced price for fast action can significantly increase conversion.

Nobody wants to feel like they were ripped off because they could’ve got the item cheaper, so this plays on a strong psychological chord.

Example: Fast growing Australian retailer Kogan, has created a price-bump model called LivePrice, where the price slowly creeps up every second.

image012

How LivePrice works: kogan.com.au/liveprice/

Use action words in CTA buttons

You can create a sense of urgency by using action words in your CTA like “Now,” “Today,” “Immediately,” “Instantly,” etc.

Leading marketers know how to gain followers and influence people through words. So do the best converting websites. According to Neil Patel, there are 12 time-related words that are known to increase conversions through urgency.

They are:

  • Now
  • Fast
  • Quick
  • Hurry
  • Rapidly
  • Close
  • Approaching
  • Never
  • Seconds
  • Again
  • Over
  • Instant

Example 1: Organizing for America (image courtesy Smashing Magazine)

image014

Example 2: hostgator.com

image016

 

Example 3: partypoker.com

image018

 

Example 4: rescuetime.com

image020

Example 5: Demonstrates this idea of adding urgency to a call for action.

image022

In this example, the “Buy Now” call-to-action button has “Intro Price” stamped over it, subtly suggesting that the longer the user waits to take action, the higher the risk of having to pay more later.

A few more tips for your CTA

Put your CTA at the top of the page

Move your call to action above the fold. If visitors can’t see your CTA, they won’t be able to take the conversion goal you wish them to take.

Repeat your CTA several times

If your page is long, repeat your CTA multiple times throughout your copy. Visitors should be able to take action at whatever point they make up their mind.

There’s actually a psychological reason for doing this: Studies have shown that the more often we’re exposed to a stimulus, the more appealing we find it.

By repeating your CTA, you allow decisive people to easily take action right away, and less decisive people to be exposed to the stimulus of your CTA multiple times. It’s a win-win.

Create scarcity

Pressure makes people act. If they think an item will soon become unavailable, they are more likely to buy it. This ‘limited availability’ tactic is driven by either deadlines or supplies, and works well either way.

People simply do not like loss, and are more likely to act excessively, even if they know they haven’t given the matter as much thought as they should. It’s better for them to do that than risk missing out altogether.

You can put limits on anything. As a business decision-maker, you have every right to do so.

If you are a consultant, this is easy. You only have so many hours in the day, so many slots for meetings, and so much energy to expend.

image024

Similarly, if you sell physical products, you can easily run out.

image028

Example: Notice the small print, “Only 500 available”

image026

For digital products, you may need to create scarcity. To do that, you can make the item “rare” or difficult to achieve.

Position it as a rare opportunity

When something is rare, its value exponentially increases. You can leverage this by limiting access.

A coach, for example, may ask prospects to fill out a long form before being considered as a client. A consultant may ask prospects to read his book or manifesto. By restricting access to their services, they make their services seem more elite.

Or what about the webinar you attended because the expert said he would only present it once, and there would be no recording. You might have blown off the webinar if it wasn’t a one-time opportunity,

Example: With events, this is relatively easy, as you can see in this Anthony Robbins ‘Date With Destiny’ seminar, “Held only twice anywhere in the world this year!”

image030

Free shipping

An E-tailing Group study revealed that unconditional free shipping is the #1 criteria for making a purchase (73% listed it as ‘critical’). In another study 93% of respondents indicated that free shipping on orders would encourage them to purchase more products.

This quote from Wharton professor David Bell sums up just how enticing free shipping is:

“For whatever reason, a free shipping offer that saves a customer $6.99 is more appealing to many than a discount that cuts the purchase price by $10.”

Ironically, you could get higher conversions — even if you made the product more expensive — simply by offering free shipping.

Example: Free postage is offered just above the “Shop Now” button. Once customers have made the purchase decision, they typically want it in their hands ASAP.

image032

Next day shipping

Offering ‘Same Day’ or ‘Next Day’ shipping will help you capitalize on this psychological trigger and thus increase conversions. Of course for digital products, you can emphasize how customer will gain immediate access to the product.

Example:

image034

Explain the product won’t be FREE/CHEAP forever

By revealing the product will cost $XX-XXX in the not too distant future, it instantly adds tangible value but will motivate people to sign up or buy now to avoid paying more later.

Introductory offers

When you launch a new offer, new product, or a revised edition of an existing product, having some sort of discounted introductory offer for the first couple of days/weeks or for first-time users of the online e-commerce store can generate a spike in sales.

Example:

image036

Use Promotions

When conversion rates have dropped due to slow-downs in the market, consider running a short promotion. Just be careful not to do this too often. If people believe you will reduce your prices soon, they won’t buy at your regular rates.

Example:

image038

Use holiday promotions

Sometimes, all you need is a reason for the promotion. Holidays and major events definitely qualify. Since holiday seasons are short term, these promotions have built-in urgency.

If you haven’t been running holiday promotions, give it some thought. 55% of consumers say they expect retailers to use purchasing and behavioral data to offer relevant promotions, according to IBM’s Online Retail Holiday Readiness Report.

Example:

image040

Use topical promotions

But you don’t have to wait for holidays. You can also strengthen your brand image by supporting relevant events (e.g., earth day).

What kind of topical events could work? Sporting events, special days/months, or birthday/anniversaries all make great reasons for a special promotion.

Example: Image Courtesy of PRLog

image042

Show how much time left until offer expires

Use a ticking count script to show visitors exactly how much time there is left to take advantage of an offer.

Example:

image044

If a user stands idle for 10 minutes on a page, there’s a high chance you’re losing them as a client. A way to bring them back is to create a pop-up offering a discount code (it can be minimal, such as 5% or $5 off)

Use promotional codes for unlogged idle users.

Automate follow-up

When you’re about to leave a website, an exit pop-up will appear asking if you’re sure you really want to leave – and will usually give you a special offer if you decide to stay. To see it in action, check out hojomotor.com

Whilst this tactic does increase conversions, I don’t recommend it because it can damage your brand image by looking desperate in trying to close people on their first visit. After all, most people need to see the offer 7 times before they will buy.

A better strategy is to collect prospect contact details, and use an automated follow-up sequence. This will allow you to get more sales at full price, before resorting to price discounting late in the follow-up sequence. AdWords remarketing is another good strategy to remind prospects about your offer.

If anything, use an exit pop-up simply to collect visitors contact details — and let your follow up sequence take care of the selling.

Use testimonials to create social pressure

A study published in the Washington Post revealed that social proof is one of the most powerful ways to create urgency.

In the study, researchers examined the way in which signs could be used to persuade customers to use less energy in the summer months by relying on fans as opposed to air conditioning.

These are the four signs that were tested:

  • Sign #1: You can save $54 a month on your utilities bill
  • Sign #2: You can prevent the release of 262 pounds of greenhouse gasses each month
  • Sign #3: Be socially responsible — save energy
  • Sign #4: 77% of your neighbors are already using fans as a means of saving energy

The sign that performed best was number four, which was the one that relied on social proof to persuade.

In this instance, positive social proof was more effective than

  • saving money (sign one)
  • saving the environment (sign 2)
  • making responsible choices (sign three)

All three of these are positive behaviours, but none of them could match the power of peer influence.

This is hardly a revelation, and it ties in closely with this study concerning related pricing research on savings, and in particular a Wharton study that reveals that customers today often feel time is a much more precious commodity than money.

The bottom line is that positive social proof should be placed upon your most crucial landing and sales pages. Use social proof at the point at which your customers are close to completing a purchase.

Example: Image Courtesy of KissMetrics

image046

Add micro-donations on checkout

To entice users to make purchase decision is to give more meaning to their action.

For example, you could donate $2 to a charity for each purchase. (Imagine adding a time limit to that offer. That could significantly impact people’s sense of urgency.)

Example:

image048

image050

This could also work for product or membership trials.  For example, you could donate $5 for each trial signup within a certain period.

image052

Allow them to see their competition

Think Black Friday mayhem or an Ebay bidding war.

Once people realize that they are competing with other people for limited quantities of [something], their desire to win escalates. That translates into extreme urgency.

As an example, if you are looking to make a booking via Booking.com, you’ll see red text telling you exactly how many people are checking out the same room, in real time.

You can learn more about this here.

image054

Hotels.com even gives you information about how many people are viewing properties in a particular city. A modal box pops opens and shows you your virtual competition/companions.

image056

Urgency Drives Action

Urgency has almost a primal quality. It inspires an unreserved desire to act. As long as you act ethically, it’s foolish to ignore it when creating your promotions.

The key is to understand why people need your offer. How will it benefit them? What do they lose if they don’t act now?

Once you understand what’s at stake, you can select the best urgency tactic(s) for your promotion.

So what are you waiting for? Go back to that low-performing promotion and look for the urgency opportunity that awaits.

Do you leverage urgency in your promotions? What works best for you?

Read other Crazy Egg articles by David Rosenfeld.

More: 

Ethical Urgency: The Conversion Optimizer’s Secret Weapon

“It’s Alive!”: Apps That Feed Back Accessibly

It’s one thing to create a web application and quite another to create an accessible web application. That’s why Heydon Pickering1, both author and editor at Smashing Magazine, wrote an eBook Apps For All: Coding Accessible Web Applications2, outlining the roadmap for the accessible applications we should all be making.

The following is an extract from the chapter “It’s Alive” from Heydon’s book, which explores how to use ARIA live regions. Javascript applications are driven by events and the user should be informed of what important events are happening in the interface. Live regions help us provide accessible messaging systems, keeping users informed of events in a way that is compatible with assistive technologies.

Getting The Message

Picture the scene: it’s a day like any other and you’re at your desk, enclosed in a semicircular bank of monitors that make up your extended desktop, intently cranking out enterprise-level CSS for MegaDigiSpaceHub Ltd. You are one of many talented front-end developers who share this floor in your plush London office.

You don’t know it, but a fire has broken out on the floor below you due to a “mobile strategist” spontaneously combusting. Since no expense was spared on furnishing the office with adorable postmodern ornaments, no budget remained for installing a fire alarm system. It is up to the floor manager in question to travel throughout the office, warning individual departments in person.

He does this by walking silently into each room, holding a business card aloft with the word “fire” written on it in 12pt Arial for a total of three seconds, then leaving. You and the other developers — ensconced behind your monitors — have no idea he even visited the room.

Three monitors for coding
Three monitors for coding

What I cover in my eBook is, for the most part, about making using your websites and applications accessible. That is, we’re concerned with everyone being able to do things with them easily. However, it is important to acknowledge that when something is done (or simply happens), something else will probably happen as a result: there are actions and reactions.

“When one body exerts a force on a second body, the second body simultaneously exerts a force equal in magnitude and opposite in direction to that of the first body.”

– Newton’s third law of motion (Newton’s laws of motion, Wikipedia3)

Providing feedback to users, to confirm the course they’ve taken, address the result of a calculation they’ve made or to insert helpful commentary of all sorts, is an important part of application design. The problem which needs to be addressed is that interrupting a user visually, by making a message appear on screen, is a silent occurrence. It is also one which — in the case of dialogs — often involves the activation of an element that originates from a completely remote part of the document, many DOM nodes away from the user’s location of focus.

To address these issues and to ensure users (unlike the poor developers in the introductory story) get the message, ARIA provides live regions4. As their name suggests, live regions are elements whose contents may change in the course of the application’s use. They are living things, so don’t always stand still. By adorning them with the appropriate ARIA attributes, these regions will interrupt the user to announce their changes as they happen.

In the following example, we will look at how to alert users to changes which they didn’t ask for, but — like the building being on fire — really ought to know about anyway.

Alert!

Perhaps the only thing worse than a fire that could happen to the office of a web development company would be losing connectivity to the web. Certainly, if I was working using an online application, I’d like to know the application will no longer behave in the way I expect and perhaps store my data properly. This is why Google Mail inserts a warning whenever you go offline. As noted in Marco Zehe’s 2008 blog post5, Google was an early adopter of ARIA live regions.

Yellow box reads unable to reach G mail please check your internet connection
Yellow box reads unable to reach G mail please check your internet connection.

We are going to create a script which tests whether the user is online or off and uses ARIA to warn screen reader users of the change in this status so they know whether it’s worth staying at their desk or giving up and going for a beer.

The Setup

For live regions, ARIA provides a number of values for both the role and aria-live attributes. This can be confusing because there is some crossover between the two and some screen readers only support either the role or aria-live alternatives. It’s OK, there are ways around this.

At the most basic level, there are two common types of message:

  1. “This is pretty important but I’m going to wait and tell you when you’re done doing whatever it is you’re doing.”
  2. “Drop everything! You need to know this now or we’re all in big trouble. AAAAAAAAAAGHH!”

Mapped to the respective role and aria-live attributes, these common types are written as follows:

  1. “This is pretty important but I’m going to wait and tell you when you’re done doing whatever it is you’re doing.” (aria-live="polite" or role="status")
  2. “Drop everything! You need to know this now or we’re all in big trouble. AAAAAAAAAAGHH.” (aria-live="assertive" or role="alert")

When marking up our own live region, we’re going to maximize compatibility by putting both of the equivalent attributes and values in place. This is because, unfortunately, some user agents do not support one or other of the equivalent attributes. More detailed information on maximizing compatibility6 of live regions is available from Mozilla.

Since losing internet connectivity is a major disaster, we’re going to use the more aggressive form.

<div id="message" role="alert" aria-live="assertive" class="online">
    <p>You are online.</p>
</div>

The code above doesn’t alert in any way by itself — the contents of the live region would have to dynamically change for that to take place. The script below will run a check to see if it can load test_resource.html every three seconds. If it fails to load it, or it has failed to load it but has subsequently succeeded, it will update the live region’s class value and change the wording of the paragraph. If you go offline unexpectedly, it will display <p>There’s no internets. Time to go to the pub!</p>.

The change will cause the contents of that #message live region to be announced, abruptly interrupting whatever else is currently being read on the page.

// Function to run when going offline

var offline = function() 
  if (!$('#message').hasClass('offline')) 
    $('#message') // the element with [role="alert"] and
[aria-live="assertive"]
.attr('class', 'offline') .text('There's no internets. Go to the pub!'); } // Function to run when back online var online = function() if (!$('#message').hasClass('online')) $('#message') // the element with [role="alert"] and
[aria-live="assertive"]
.attr('class', 'online') .text('You are online.'); } // Test by trying to poll a file function testConnection(url) var xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() online(); xmlhttp.onerror = function() offline(); xmlhttp.open("GET",url,true); xmlhttp.send(); } // Loop the test every three seconds for "test_resource.html" function start() rand = Math.floor(Math.random()*90000) + 10000; testConnection('test_resource.html?fresh=' + rand); setTimeout(start, 3000); // Start the first test start();
Alert reads alert there’s no internets. Go to the pub.
Alert reads “Alert: there’s no internets. Go to the pub!”

There are more comprehensive ways to test to see if your application is online or not, including a dedicated script called offline.js7, but this little one is included for context. Note that some screen readers will prefix the announcement with “Alert!”, so you probably don’t want to include “Alert!” in the actual text as well, unless it’s really, really important information.

There is a demo of this example8 available.

test.css

We would like to maximize compatibility of live regions across browsers and assistive technologies. We can add a rule in our test.css to make sure equivalent attributes are all present like so:

[role="status"]:not([aria-live="polite"]), 
[role="alert"]:not([aria-live="assertive"]) 
	content: 'Warning: For better support, you should include
a politeness setting for your live region role using the
aria-live attribute'; [aria-live="polite"]:not([role="status"]), [aria-live="assertive"]:not([role="alert"]) content: 'Warning: For better support, you should
include a corresponding role for your aria-live
politeness setting';

I Want The Whole Story

“Taken out of context, I must seem so strange.”

– Fire Door by Ani DiFranco

By default, when the contents of a live region alter, only the nodes (HTML elements, to you and me) which have actually changed are announced. This is helpful behavior in most situations because you don’t want a huge amount of content reread to you just because a tiny part of it is different. In fact, if it’s all read out at once, how would you tell which part had changed? It would be like the memory tray game where you have to memorize the contents of a tray to recall which things were removed.

Tray full of bits of HTML
Tray full of bits of HTML

In some cases, however, a bit of context is desirable for clarification. This is where the aria-atomic attribute comes in. With no
aria-atomic set, or with an aria-atomic value of false, only the elements which have actually changed will be notified to the user. When aria-atomic is set to true, all of the contents of the element with aria-atomic set on it will be read.

The term atomic is a little confusing. To be true means to treat the contents of this element as one, indivisible thing (an atom), not to smash the element into little pieces (atoms). Whether or not you think atomic is a good piece of terminology, the expected behavior is what counts and it is the first of the two behaviors which is defined.

One atom compared to lots of atoms
One atom compared to lots of atoms

Gez Lemon offers a great example of aria-atomic9. In his example, we imagine an embedded music player which tells users what the currently playing track is, whenever it changes.

<div aria-live="polite" role="status" aria-atomic="true">
  <h3>Currently playing:</h3>
  <p>Jake Bugg — Lightning Bolt</p>
</div>

Even though only the name of the artist and song within the paragraph will change, because aria-atomic is set to true the whole region will be read out each time: “Currently playing: Jake Bugg — Lightning Bolt”. The “Currently playing” prefix is important for context.

Note that the politeness setting of the live region is polite not
assertive as in the previous example. If the user is busy reading something else or typing, the notification will wait until they have stopped. It isn’t important enough to interrupt the user, not least because it’s their playlist: they might recognize all the songs anyway.

Box showing a graphic equalizer which reads currently playing, Jake bug lightning bolt
Box showing a graphic equalizer which reads currently playing, Jake bug lightning bolt

The aria-atomic attribute doesn’t have to be used on the same element that defines the live region, as in Lemon’s example. In fact, you could use aria-atomic on separate child elements within the same region. According to the specification:

“When the content of a live region changes, user agents SHOULD examine the changed element and traverse the ancestors to find the first element with aria-atomic set, and apply the appropriate behavior.”

Supported States and Properties10

This means we could also include another block within our live region to tell users which track is coming up next.

<div aria-live="polite" role="status">

   <div aria-atomic="true">
     <h3>Currently playing:</h3>
     <p>Jake Bugg — Lightning Bolt</p>
   </div>

   <div aria-atomic="true">
     <h3>Next in queue:</h3>
     <p>Napalm Death — You Suffer</p>
   </div>

</div>

Now, when Jake Bugg’s Lightning Bolt is nearing an end, we update the <p> within the next in queue block to warn users that Napalm Death are ready to take the mic: “Next in queue: Napalm Death — You Suffer”. As Napalm Death begin to play, the currently playing block also updates with their credentials and at the next available juncture the user is reminded that the noise they are being subjected to is indeed Napalm Death.

aria-busy

I was a bit mischievous using Napalm Death’s You Suffer as an example track because, at 1.316 seconds long, the world’s shortest recorded song would have ended before the live region could finish telling you it had started! If every track was that short, the application would go haywire.

In cases where lots of complex changes to a live region must take place before the result would be understandable to the user, you can include the aria-busy attribute11. You simply set this to true while the region is busy updating and back to false when it’s done. It’s effectively the equivalent of a loading spinner used when loading assets in JavaScript applications.

Typical loading spinner labelled ARIA atomic true
Typical loading spinner labelled ARIA atomic true

Usually you set aria-busy="true" before the first element (or addition) in the live region is loaded or altered, and false when the last expected element has been dealt with. In the case of our music player example, we’d probably want to set a timeout of ten seconds or so, making sure only music tracks longer than the announcement of those tracks get announced.

$('#music-info').attr('aria-busy', 'true');

// Update the song artist & title here, then...

setTimeout(function() 
   $('#music-info').attr('aria-busy', 'false');
, 10000);

Buy The eBook

That concludes your extract from “It’s Alive!”, a chapter which goes on to explore the intricacies of designing accessible web-based dialogs. But that’s not all. There’s plenty more about creating accessible experiences in the book, from basic button control design to ARIA tab interfaces and beyond. Reviews for the eBook and purchasing options are available here12. The inimitable Bruce Lawson has written a lovely post13 about it, too.

Footnotes

  1. 1 https://twitter.com/heydonworks
  2. 2 https://shop.smashingmagazine.com/apps-for-all-coding-accessible-web-applications.html
  3. 3 http://en.wikipedia.org/wiki/Newton%27s_laws_of_motion
  4. 4 https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions
  5. 5 http://www.marcozehe.de/2008/08/04/aria-in-gmail-1-alerts/
  6. 6 https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions
  7. 7 http://github.hubspot.com/offline/docs/welcome/
  8. 8 http://heydonworks.com/practical_aria_examples/#offline-alert
  9. 9 http://juicystudio.com/article/wai-aria_live-regions_updated.php
  10. 10 http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic
  11. 11 http://www.w3.org/TR/wai-aria/states_and_properties#aria-busy
  12. 12 https://shop.smashingmagazine.com/apps-for-all-coding-accessible-web-applications.html
  13. 13 http://www.brucelawson.co.uk/2014/apps-for-all-coding-accessible-web-applications-book-review/

The post “It’s Alive!”: Apps That Feed Back Accessibly appeared first on Smashing Magazine.

Originally posted here: 

“It’s Alive!”: Apps That Feed Back Accessibly

Thumbnail

12 Must-Read Tips on Web Usability

Making your site work for users is the key to achieving your conversion goals.

That means looking after the principles of web usability: availability and accessibility, clarity, learnability, credibility and relevancy. Here are 12 tips from recent articles on web usability to help you nail this important conversion tactic.


Read 12 Must-Read Tips on Web Usability, by @SHurleyHall
Click To Tweet


Web usability tips

Image: Pixabay

1. Tweak Everything

In How Website Usability Affects Conversion – 7 Real-Life Examples Sezgin Hergül of TechWyse shares seven case studies highlighting the impact of user personas, navigation structure, goal completion and more on usability and conversions.

Key takeaway: Test continuously while implementing CRO tweaks to keep your site useful for users while gaining maximum conversions

2. Identify Your Audience, Improve Design

Kim Krause Berg highlights How to Increase Web Site Conversions with Persuasive Design. This presentation makes the link between the items that users are looking for (credible information, accessibility and so on) and designing your site to avoid confusion. It shows the importance of identifying your audience, giving examples of how less usable sites can decrease conversions.

Key takeaway: SEO and usability work together to create persuasive design that works for users AND conversion goals.

3. Keep it Simple

Usability: Do you want the data or the conversion?, asks John Hewitt, explaining that many companies ask for a lot of information, because they want the data, but that can make the site less user-friendly and turn people off. He gives the example of people who visit a restaurant site and just want a coupon, rather than having to fill in multiple information fields.

Key takeaway: Sometimes less is more; decide which information is really important and just ask for that.

4. Know Your Devices

mobile ux

Image: Pixabay

In Smartphones vs. Tablets: Forrester Reveals the Differences, Sarah Etter of Monetate points out the difference between the two types of devices. She points out that tablets convert at more than twice the rate of smartphones, and there are differences in where and when people use each kind of device. User experience optimization that doesn’t take account of platform differences won’t just annoy readers, but will reduce conversions.

Key takeaway: “Companies should work to deliver device-specific experiences to visitors in order to maximize the likelihood that they will purchase.”

5. Think Long Term

In Conversion Optimization vs User Experience Optimization, Google’s Cemal Buyukgokcesu explains the danger of doing short term conversion optimization rather than looking after user experience (UX). A UX-focused approach makes your site more sustainable over the long term. Users look for efficient and effortless experiences, otherwise they go elsewhere, he says.

Key takeaway: Users are powerful, so optimize user experience first.

6. Test to Fix Mobile UX

In Why Doesn’t Mobile Convert?, User Testing presents theories about poor mobile conversions and shows how these match up against the results of its testing. Findings include the fact that mobile user experience can be poor and that some conversions just aren’t tracked, even if they happen. The article gives 10 tips on how to improve mobile user experience and conversions.

Key takeaway: Don’t rely on assumptions; use testing to optimize mobile UX and improve conversions.

7. Find Usability Errors to Improve SEO

In How Site Usability Affects SEO, Mercedes Rodriguez of Simpleview talks about what the people who use your site expect when they visit it.  She says people have hardcoded beliefs about website behavior and if your site doesn’t deliver, you may pay the price in terms of high bounce rate and poor reputation. She suggests you pay attention to analytics and use heat mapping (CrazyEgg agrees) to identify potential usability trouble spots.

Key takeaway: Create your site for users and use SEO to make it more visible; targeting SEO alone won’t be enough.

8. Make Your Site Accessible

Related to that, Vanessa Petersen discusses 3 Ways to Improve Usability for Better SEO on Web Usability Talk. She highlights the fact that making sites accessible can increase audience reach and prominence in search results. That’s why looking after content and site architecture (key usability issues) as well as building trust via links and social signals (key SEO metrics) can help your web presence overall.

Key takeaway: Use the usability best practices in this article to improve SEO and increase conversions as a result.

9. Ask the Right Questions

Web usability questions

Image: Pixabay

Claudia of Pixel77 outlines 10 Easy Steps to Test the Usability of Your Website. The article shows the importance of web usability testing  and says asking the right questions, knowing the audience, basing your tests on actual user behavior, customizing tasks, using user interviews and other techniques can help you get an overview of your site’s usability.

Key takeaway: Get testing right and you will create a web experience that users enjoy and want to return to or share with others.

10. Write it Right

On Business2Community, Chris Glithero asks What’s the Link Between Exceptional Copywriting and Good Usability? He says copywriting can help improve usability by creating descriptive titles and sub-headers, breaking up paragraphs, making content scannable and more.

Key takeaway: Interesting, accurate and clear writing improve site usability and accessibility.

11. Test on a Budget

Do Your Own Usability Testing — in 5 Smart (Cheap!) Steps advises Chris Nodder  on Lynda.com. Chris shows how to find real users of your site , give them a task that really tests usability, figure out what you need to fix and track the results.

Key takeaway: Usability testing improves customer satisfaction so it pays to invest in it.

12. Use Responsive Design

Check out How Hanson Dodge Creative Proved Their Design Is Successful With UsabilityTools. This case study tracks the change from a website with serious usability problems to one with a responsive design. The new design also incorporated menu changes. User testing focused on usage scenarios and assigned tasks, looking at ease of completion and time to complete. The test results proved that the concept worked and informed some final design tweaks.

Key takeaway: User testing resulted in helping the client’s customers to find specialized products via improved navigation and menu labeling.

These tips provide a good starting point for measuring the impact of usability on conversions. Here are a few usability testing tools you can use. And don’t forget, assume nothing, as this tongue-in-cheek post from Peep Laja of ConversionXL suggests.

What are you doing to test and improve web usability for better conversions?

Read other Crazy Egg articles by Sharon Hurley Hall.

The post 12 Must-Read Tips on Web Usability appeared first on The Daily Egg.

Link:

12 Must-Read Tips on Web Usability

Thumbnail

Why No One is Reading Your Emails on Mobile

keanu-email-featured
Optimize your emails and help Keanu turn that frown upside down!

Did you know that almost 66% of all emails are now opened on a mobile device? A statistic all marketers should be aware of, no doubt, but what should really grab your attention is that 75% of people who receive email that isn’t optimized for mobile will just delete it.

If you’re a marketer who is sending emails that haven’t been optimized for mobile, you’re missing out on so much of the action that you might as well choose another profession.

The good news is that there are solutions to your mobile woes, none of which require you to be a rocket surgeon. Just a little bit of data mixed with a little bit of design with a dash of common sense thrown in for good measure.

Here are four reasons your emails might not be getting opened and read on mobile – and what you can do to correct it.

1. You’re not teasing the content of the email

The crucial first step of any marketing email is getting people to open it. In most mobile email apps you have three lines to convince your audience to open and read that email: the subject line, the first line and the from line.

image-subject-line-image

Our friend Aaron Orendorff has written a handy guide that breaks down the importance of these three fields and how to get the most out of them. Here’s what he says, in a nutshell.

Subject lines

An ellipsis can’t tell anyone what you really mean, so before your subject lines start trailing off into a mess of meaningless dots, remember that you have just 20-30 characters to reach your mobile readers.

That actually works out quite well, as 28-39 character subject lines get the highest click rates.

With so few words at your disposal, you may wonder which ones will do the best job of reaching your future readers. Aaron breaks that down as well, with a little help from the good folks over at Retention Science:

  • Personal words like “you” and “I” work well, as do slang terms and colloquialisms. Even emoticons are starting to help open rates here at Unbounce, however slightly. The point is that your email should sound like it’s coming from a human.
  • Emotional words that give your audience some sort of attachment to your value proposition are super good.
  • In one study, using pop culture references saw an open rate of 26% over ones with traditional subject lines, which were opened only 16% of the time.

But don’t get carried away. You still have to make sure that you’re matching your subject line with the copy on your landing page. “You can learn to dance like Beyonce!” might fit the criteria above, but if you’re selling car parts, you probably won’t get too far.

Mobile email message match
Make it your own. Image credit: vi.wikipedia.org

First lines

The best kind of marketing is sincere and personal. According to Aaron:

The first line of your automated emails should read as much like the first line of a real email as possible.

Unbounce co-founder Oli Gardner often does this in his emails to prospects. A couple of examples of first lines from Oli:

CRO Day was one of the proudest moments of my professional career.

Hard to believe, but Page Fights is one year old!

They read much like an email that you’d get from a friend, which prospects are more likely to open.

From lines

Automated emails should come from a real person and not look like they’re coming from an automated system.

Again, Aaron sums it up perfectly:

Avoid from lines like support@yoursite.com, customerservice@yoursite.com, sale@yoursite.com, or, worst of all, the dreaded word auto.

Instead of sending the email from your company as a whole, send it from a specific person with a face and a name.

This article from Crazy Egg reveals some numbers behind personalized From lines. According to one study, personalized emails had a 29% higher open rate and 41% unique click-through rate.


Personalized emails can receive 29% higher open rates and 41% unique CTR!
Click To Tweet


As a marketer who is trying to get email content opened, read and acted on, adding a personal touch is a simple way of getting your audience to open your emails and click through to the next stage.

2. Your font size is creating friction

You work hard on the content of your emails, and so you want to make sure people are actually able to read them.

I subscribed to The Economist the other day. Their content is great, their delivery through their apps is spot on, but this email that I got after I signed up was a prime example of what not to do.

mobile-email-fail

What is that, an email for ants? Here’s a better job from our friends at Inbound.org.

inbound-email

Well, that’s much easier to read! The text is much larger and doesn’t require a microscope or any pinching or zooming.

So, how do you make sure that your text is readable on any given device?

While the iPhone automatically resizes tiny text, other devices won’t – so you want your font to be legible by default.

This comprehensive article on the Salesforce Canada blog recommends a minimum font size of 14 pixels for text in the body of the email, with minimum 22 pixels for headers.

But you’ve really got to test yourself to find that sweet spot for your audience.


If no one can read the tiny font in your mobile emails, you’re better off not sending them.
Click To Tweet


3. The design of your emails is getting in the way

Good email design is all about enabling readers to actually see your content.

As my colleague Brad puts it: “Get out of my way so I can read the damn email.”

This isn’t a statistical analysis, but it does speak to the heart of what we’re trying to get at: the best designs are the ones where the people reading the mobile emails are not aware of the design.

If you include images in your emails to mobile readers, there’s a good chance they won’t even be seen. As Rose Barrett at Storyports points out, 43% of Gmail users read email without turning the image display on. Some mobile email clients, like the Blackberry and Windows phone clients, block images by default.

Mobile-Email-Client-Image-Blocks
Image credit: Storyports.com

The way around this, according to Barrett, is to use HTML emails instead of text emails with images added. You’ll still get to send highly stylized and informative text to your readers, and because CTA buttons are separate from the images, they’ll still appear in your email.

And if you do decide to use images, don’t forget to keep the design consistent between your email and your landing page. Good design match never hurts conversions.

The key is to keep it simple. And don’t forget to test. What works for one audience may not work for yours, so make sure you’re testing all the things!

4. Your call to action isn’t very touching

By now you get that there is limited space on a mobile device, and the real estate that you do have is valuable. The point of your email is to get people to click a link that takes them to your awesome landing page.

Give your email readers the ability to click that link by making your call to action button big enough for them to see, and big enough for them to actually be able to tap it with their thumbs.

You want to avoid text links as CTAs in your mobile emails. Remember, your mobile audience is all thumbs (badoom pssh), and you can reduce friction by making your CTA big and beautiful.

Below is another email from Oli that shows this in action. The CTA button is large enough to see and large enough to actually tap.

Mobile email cta

Make your CTA buttons in mobile emails big enough so readers will want to tap that.
Click To Tweet


Chris Hexton at Optimizely does a great job of breaking down the art of the email CTA. The goal here is not so different from that of your landing page: make your CTA stand out.

Chris is fond of using the CRAFT method of CTA design. That means making your CTAs:

  • Colorful: Make them stand out from the rest of the text
  • Relevant: Keep CTAs in line with the message in the email
  • Actionable: Keep it clear, direct and understandable
  • Forceful: Tell your readers what to do
  • Targeted: Speak to what your readers’ needs and aspirations

By doing so, you give your readers a reason to take action and convert.

Mobile is not going anywhere

Take the time to get to know them by going through your email analytics to see how many are interacting with your emails via mobile. Dig in deep and see what you can learn about them. Offer them great experiences whether they’re on mobile or desktop by making sure that both your emails and your landing pages are mobile responsive.

Not adjusting to the needs of your mobile customer means that you’re leaving money on the table. And we’d hate to see you do that.

As always, we’d love to hear from you. Are you seeing a lift in your conversions by making use of any of these tactics? Let us know in the comments below!


View the original here – 

Why No One is Reading Your Emails on Mobile

Stock Photo or Real Image? A/B Testing Finds Out Which is Better

Stock Image or Real Image – what should you use? The debate has been raging for a while now. That’s unfortunate, because there is no one answer that will work for all businesses alike. Why speculate at all, when we can throw the contenders into an A/B test and sit back while statistics find us a winner? Think of it as WWE, except A/B tests are real, and they get you better business. Let’s get right to it then, shall we?

Background

160 Driving Academy is an Illinois based firm that offers truck-driving classes and even guarantees a job upon graduation. Visitors to the site primarily use the contact form on the homepage, or the prominently displayed phone number, to contact the academy. Looking to improve the conversion rate on the truck-driving classes page,  the academy reached out to SpectrumInc, a lead-generation software and internet marketing company. The rest (as they have not yet begun to say, but soon will) is a future of great conversions!

The Hypothesis

The academy had been using a stock image of a man driving a truck on its homepage. When SpectrumInc came on board, they decided to test the page with the photograph of a real student instead. The hypothesis was that the image of an actual student would outperform the stock image the academy had been using. On being asked about the background of this test, Brian McKenzie from SpectrumInc explains,

… in this case we had a branded photo of an actual 160 Driving Academy student standing in front of a truck available, but we originally opted not to use it for the page out of concern that the student’s ‘University of Florida’ sweatshirt would send the wrong message to consumers trying to obtain an Illinois, Missouri, or Iowa license. (These states are about 2,000 kilometers from the University of Florida).

Better sense prevailed, and they decided to test it anyway.

What Goals Were Tracked?

The primary conversion goal: Number of visits to the ‘Thank You’ page. These are the pages that visitors are taken to after they fill out a conversion form, like the ‘contact us’ form on the main page.

The secondary conversion goal: Number of visits to the ‘Registration’ page. The academy carries a CTA button on its page that says “Register for Classes”. A conversion would be recorded every time a visitor clicked on the button and visited the “Registration” page.

The Test: Stock Image or Real Image

Comparison Image

The Result

An incredible 161% lift in conversions, at 98% confidence level. Or, the possibility for such a massive change in conversions occurring simply due to random chance (and not because the variation actually is better at converting visitors) is just 2%.

Secondary Goal: Registrations, too, saw a 38.4% spike on the variation compared to the control, at 98% confidence level.

Why did the Variation win?

As with any retrospective analysis, the key lies in exploring the data and connecting it to the knowledge that is already out there. First, let’s understand why images are such a big deal, and what part they play in user experience.

Short (and borrowed) answer: An image is worth a thousand words.

What does it say?

Concepts learned in the form of images are more easily and frequently recalled than other ideas learned through text. In fact, Wikipedia explains that this effect is much more pronounced in older people than the younger ones. So if your business targets the age group of 25+, images are a great way to pass on brand-related information for better recall.

Billion Dollar Graphics explain, and I quote, “human brain deciphers image elements simultaneously, while language is decoded in a linear, sequential manner taking more time to process.” This is further illustrated in the following image.

Illustration - Graphic vs Text

Do you see how much easier it is to understand that the reference is to a square from the image than from its textual description? In fact, if you are in the mood for some serious reading, I strongly recommend this incredibly insightful post on the power of visual communication.

This frequently quoted eye tracking study from NN also confirms that we spend more time dwelling on images on a webpage rather than on the text itself. When they tested an “About Us” page that contained thumbnail portraits of each of the members of the team, this is what was found:

Here, the user spent 10% more time viewing the portrait photos than reading the biographies, even though the bios consumed 316% more space. It’s obvious from the gaze plot that the user was in a hurry and just wanted to get a quick overview of the FreshBooks team, and looking at photos is indeed faster than reading full paragraphs.

Eye-Tracking Study on Images By NN

Evidently, people focus more on images on a page than on the text itself. And they retain it longer. The case for images cannot be overemphasized.

Now that you and I agree upon the need for using images, let’s dive right into analyzing the case. We start with:

The Control, with the Stock Photograph

Why did it convert so poorly?

  • We Love Ignoring Images That Look Stock

Stock images were a rage back in the late 90s, when taking a good picture was best left to professionals with complex, expensive cameras. Naturally, online businesses that were just starting out had to resort to the relatively inexpensive and definitely good-looking stock photos.

Here’s the issue: we have been exposed to banner advertisements for so long that our eyes have gotten trained to ignore any web element that evokes the feel of an advertisement. The adage “familiarity breeds contempt” holds true and banner blindness has been confirmed to be a real phenomenon in numerous studies. More stock images, anyone?

  • Stock Images Are Not Unique

I popped the stock image from the client’s old homepage into TinEye, a reverse image search engine, and this is what it threw up.

TinEye Reverse Search Result

That’s 30 other instances on the webpage where the same stock photo was found.

Just to hammer home the point, I let Google Image Search do its thing. And here’s what Google found for me.

Reverse Image Search - Google Images

That’s 175 results. So much for uniqueness and product differentiation.

So there are more of that image, how’s that a big deal, you might ask.

Where do you suppose the stock image of a man driving a truck would figure on the web?

Same Stock Photo Used By Competitiors

That’s right, on other business websites that are related to trucks; websites your potential customer might have visited already. Google took just 0.45 seconds to find 175 places on the web where the image appeared. Human users would take longer, but they’ll get there eventually. And when a potential customer sees a familiar image on your site, how would they judge your business and its credibility?

Go on, ask me, how would anyone recollect seeing the same image somewhere in a corner of the web?

Because we are super smart and can identify images seen for as little as 13 milliseconds. To put that in perspective, the time we take to blink once is about 300-400 milliseconds.

Enough of beating the life out of stock images. Actually, using stock images, in and of itself, is not the real problem. There are ways to use good, relevant stock images without running into the problem of duplicates; like having a Rights Managed Licence. Instead, the real problem is:

  • Using Irrelevant Stock Images

Okay, stop being yourself for a moment. Slip into the user’s shoes, and I promise we shall see better.

You are looking to get a truck licence. Google suggests you check out 160drivingacademy.com

So you do what you always do. You click and reach the site.

Now, remember, you form the first impression of a website in 50 milliseconds. And you’d typically leave a website in 10-20 seconds unless, you find a reason to linger on. What you are looking for is relevance, sort of a validation that you are in the right place.

Let’s get back to you. You scan the page. And you see our man in the truck. But, what do you understand?

  • How established is the place?
  • Does the academy look credible?
  • Wait, why is there a severely cropped image of a man sitting inside a truck?
  • Is he the coach?

Oh wait, no! I’ve seen this image before!

The Verdict?

I can’t trust these guys. Where’s the back button!

And, curtains down!

Now, let’s take a look at the variation and try to understand why it converted visitors so well.

The Variation, with the Real Photo

Would you stay in the user’s shoes for a while longer, while I take you on a visit to the variation?

  • It’s All About Relevance

You know the drill. Google tells you. You listen. You are on the academy’s page; but it has the real image now.

“How does the place look?”

“Don’t really know. But that’s a big truck. Branded and all. Place must be established.”

Student's Image Used in Variation

“Is it credible?”

“Can’t be sure, but it looks real! That guy in the picture looks happy, he must be a student. I might even get to learn on one of those trucks in the picture!”

“Alright, no harm anyway, where do I contact them?”

Enough said.

  • We Love Images That Look Real!

This study shows that users focus their attention on images that look genuine with real people and objects. Consequently, we ignore images that seem to only have decorative (read stock-ish) purposes.

Real images evoke trust. On a business site, users are not looking for emotional gratification. They are looking for hints, information about what they’d get if they decide to buy your product/service. A website that uses real images screams at its users,

This is exactly what you will get if you choose us! It’s great, and we know it!

Get the trust, make the sale.

Over the years, we’ve been so indiscriminately exposed to every kind of scam, sham and spam, that we don’t trust easily. Least of all, on the internet. A website that reveals its offerings, plain and clear, tells us there won’t be any nasty surprises. Hence, we trust.

  • Clever Branding and the Hidden Call To Action

What? Where?

Without the variation image, there was exactly one part of the site that called out “160  Driving Academy”. With the variation, there are three such places.

We’ve already seen how our eyes are drawn to images much quicker than it is to text. The variation image draws attention to itself, and in the few seconds that a visitors’ eyes stay on it, the mind picks up two strong branding signals. The brand name itself, and the color associated with it — yellow — generously splashed across the truck in the image. A deceptively simple way to make sure that even users who bounce off the first time remember the brand. I think I wouldn’t be wrong in assuming that a considerable number of the conversions resulted from users who revisited the page.

No, that’s not all.

A call to action. That little big thing.

“Call Today”

Hidden Call to Action in Image

What better place to have it than in the image itself! That too, right next to the contact form. It gives the user direction on what’s to be done if they are interested in taking things ahead, and it creates urgency using the term “Today!”.

So there, little relevant things really matter.

Room for Further Testing

If you check the academy’s current page, you’ll see that the “Florida Gators” print has been edited out of the student’s sweatshirt. If you remember, Brian had pointed out how the reference to ‘Florida’ might confuse prospects who are primarily from Illinois. Removing the “confusing” text from the image should improve conversions even better. Brian also pointed out that the average age of a student at the academy is close to 40, while the student in the image is closer to 25. From this context, Brian shares his vision for further testing,

..trying to narrow down whether pictures of actual customers, pictures of actual employees, or pictures of actual products/equipment/objects convert best. Then you can do more incremental tests, like whether a 40-year-old student would convert better than a 25-year-old or whether the student should be holding up his license or just standing in front of the truck.

Are Your Images Relevant?

What do you think? Is relevance the most vital criterion in selecting an image?

If you feel so, I would like you to head back to your website and reconsider the relevance of the image(s) used. Are they relevant? Would you like some help figuring out if it’s relevant or not?

And if you feel relevance is not the primary consideration, I would love to know your take on it.

Tell us right here, or, if you are a person of few words (couldn’t help it) let us know on Twitter @VWO or, get to me straight @SharanTheSuresh.

Before I leave, here are two more brilliant ‘Stock Image vs Real Image’ case studies from our archive.

45% Increase in Conversions Using Real Image

How about an 89% increase in conversion?

And as always, we’re listening.

The post Stock Photo or Real Image? A/B Testing Finds Out Which is Better appeared first on VWO Blog.

Visit site:

Stock Photo or Real Image? A/B Testing Finds Out Which is Better

Thumbnail

Stock Image or Real Image: A/B Testing Provides an Incredible 161% Increase in Conversions

Stock Image or Real Image – what should you use? The debate has been raging for a while now. That’s unfortunate, because there is no one answer that will work for all businesses alike. Why speculate at all, when we can throw the contenders into an A/B test and sit back while statistics find us a winner? Think of it as WWE, except A/B tests are real, and they get you better business. Let’s get right to it then, shall we?

Background

160 Driving Academy is an Illinois based firm that offers truck-driving classes and even guarantees a job upon graduation. Visitors to the site primarily use the contact form on the homepage, or the prominently displayed phone number, to contact the academy. Looking to improve the conversion rate on the truck-driving classes page,  the academy reached out to SpectrumInc, a lead-generation software and internet marketing company. The rest (as they have not yet begun to say, but soon will) is a future of great conversions!

The Hypothesis

The academy had been using a stock image of a man driving a truck on its homepage. When SpectrumInc came on board, they decided to test the page with the photograph of a real student instead. The hypothesis was that the image of an actual student would outperform the stock image the academy had been using. On being asked about the background of this test, Brian McKenzie from SpectrumInc explains,

… in this case we had a branded photo of an actual 160 Driving Academy student standing in front of a truck available, but we originally opted not to use it for the page out of concern that the student’s ‘University of Florida’ sweatshirt would send the wrong message to consumers trying to obtain an Illinois, Missouri, or Iowa license. (These states are about 2,000 kilometers from the University of Florida).

Better sense prevailed, and they decided to test it anyway.

What Goals Were Tracked?

The primary conversion goal: Number of visits to the ‘Thank You’ page. These are the pages that visitors are taken to after they fill out a conversion form, like the ‘contact us’ form on the main page.

The secondary conversion goal: Number of visits to the ‘Registration’ page. The academy carries a CTA button on its page that says “Register for Classes”. A conversion would be recorded every time a visitor clicked on the button and visited the “Registration” page.

The Test: Stock Image or Real Image

Comparison Image

The Result

An incredible 161% lift in conversions, at 98% confidence level. Or, the possibility for such a massive change in conversions occurring simply due to random chance (and not because the variation actually is better at converting visitors) is just 2%.

Secondary Goal: Registrations, too, saw a 38.4% spike on the variation compared to the control, at 98% confidence level.

Why did the Variation win?

As with any retrospective analysis, the key lies in exploring the data and connecting it to the knowledge that is already out there. First, let’s understand why images are such a big deal, and what part they play in user experience.

Short (and borrowed) answer: An image is worth a thousand words.

What does it say?

Concepts learned in the form of images are more easily and frequently recalled than other ideas learned through text. In fact, Wikipedia explains that this effect is much more pronounced in older people than the younger ones. So if your business targets the age group of 25+, images are a great way to pass on brand-related information for better recall.

Billion Dollar Graphics explain, and I quote, “human brain deciphers image elements simultaneously, while language is decoded in a linear, sequential manner taking more time to process.” This is further illustrated in the following image.

Illustration - Graphic vs Text

Do you see how much easier it is to understand that the reference is to a square from the image than from its textual description? In fact, if you are in the mood for some serious reading, I strongly recommend this incredibly insightful post on the power of visual communication.

This frequently quoted eye tracking study from NN also confirms that we spend more time dwelling on images on a webpage rather than on the text itself. When they tested an “About Us” page that contained thumbnail portraits of each of the members of the team, this is what was found:

Here, the user spent 10% more time viewing the portrait photos than reading the biographies, even though the bios consumed 316% more space. It’s obvious from the gaze plot that the user was in a hurry and just wanted to get a quick overview of the FreshBooks team, and looking at photos is indeed faster than reading full paragraphs.

Eye-Tracking Study on Images By NN

Evidently, people focus more on images on a page than on the text itself. And they retain it longer. The case for images cannot be overemphasized.

Now that you and I agree upon the need for using images, let’s dive right into analyzing the case. We start with:

The Control, with the Stock Photograph

Why did it convert so poorly?

  • We Love Ignoring Images That Look Stock

Stock images were a rage back in the late 90s, when taking a good picture was best left to professionals with complex, expensive cameras. Naturally, online businesses that were just starting out had to resort to the relatively inexpensive and definitely good-looking stock photos.

Here’s the issue: we have been exposed to banner advertisements for so long that our eyes have gotten trained to ignore any web element that evokes the feel of an advertisement. The adage “familiarity breeds contempt” holds true and banner blindness has been confirmed to be a real phenomenon in numerous studies. More stock images, anyone?

  • Stock Images Are Not Unique

I popped the stock image from the client’s old homepage into TinEye, a reverse image search engine, and this is what it threw up.

TinEye Reverse Search Result

That’s 30 other instances on the webpage where the same stock photo was found.

Just to hammer home the point, I let Google Image Search do its thing. And here’s what Google found for me.

Reverse Image Search - Google Images

That’s 175 results. So much for uniqueness and product differentiation.

So there are more of that image, how’s that a big deal, you might ask.

Where do you suppose the stock image of a man driving a truck would figure on the web?

Same Stock Photo Used By Competitiors

That’s right, on other business websites that are related to trucks; websites your potential customer might have visited already. Google took just 0.45 seconds to find 175 places on the web where the image appeared. Human users would take longer, but they’ll get there eventually. And when a potential customer sees a familiar image on your site, how would they judge your business and its credibility?

Go on, ask me, how would anyone recollect seeing the same image somewhere in a corner of the web?

Because we are super smart and can identify images seen for as little as 13 milliseconds. To put that in perspective, the time we take to blink once is about 300-400 milliseconds.

Enough of beating the life out of stock images. Actually, using stock images, in and of itself, is not the real problem. There are ways to use good, relevant stock images without running into the problem of duplicates; like having a Rights Managed Licence. Instead, the real problem is:

  • Using Irrelevant Stock Images

Okay, stop being yourself for a moment. Slip into the user’s shoes, and I promise we shall see better.

You are looking to get a truck licence. Google suggests you check out 160drivingacademy.com

So you do what you always do. You click and reach the site.

Now, remember, you form the first impression of a website in 50 milliseconds. And you’d typically leave a website in 10-20 seconds unless, you find a reason to linger on. What you are looking for is relevance, sort of a validation that you are in the right place.

Let’s get back to you. You scan the page. And you see our man in the truck. But, what do you understand?

  • How established is the place?
  • Does the academy look credible?
  • Wait, why is there a severely cropped image of a man sitting inside a truck?
  • Is he the coach?

Oh wait, no! I’ve seen this image before!

The Verdict?

I can’t trust these guys. Where’s the back button!

And, curtains down!

Now, let’s take a look at the variation and try to understand why it converted visitors so well.

The Variation, with the Real Photo

Would you stay in the user’s shoes for a while longer, while I take you on a visit to the variation?

  • It’s All About Relevance

You know the drill. Google tells you. You listen. You are on the academy’s page; but it has the real image now.

“How does the place look?”

“Don’t really know. But that’s a big truck. Branded and all. Place must be established.”

Student's Image Used in Variation

“Is it credible?”

“Can’t be sure, but it looks real! That guy in the picture looks happy, he must be a student. I might even get to learn on one of those trucks in the picture!”

“Alright, no harm anyway, where do I contact them?”

Enough said.

  • We Love Images That Look Real!

This study shows that users focus their attention on images that look genuine with real people and objects. Consequently, we ignore images that seem to only have decorative (read stock-ish) purposes.

Real images evoke trust. On a business site, users are not looking for emotional gratification. They are looking for hints, information about what they’d get if they decide to buy your product/service. A website that uses real images screams at its users,

This is exactly what you will get if you choose us! It’s great, and we know it!

Get the trust, make the sale.

Over the years, we’ve been so indiscriminately exposed to every kind of scam, sham and spam, that we don’t trust easily. Least of all, on the internet. A website that reveals its offerings, plain and clear, tells us there won’t be any nasty surprises. Hence, we trust.

  • Clever Branding and the Hidden Call To Action

What? Where?

Without the variation image, there was exactly one part of the site that called out “160  Driving Academy”. With the variation, there are three such places.

We’ve already seen how our eyes are drawn to images much quicker than it is to text. The variation image draws attention to itself, and in the few seconds that a visitors’ eyes stay on it, the mind picks up two strong branding signals. The brand name itself, and the color associated with it — yellow — generously splashed across the truck in the image. A deceptively simple way to make sure that even users who bounce off the first time remember the brand. I think I wouldn’t be wrong in assuming that a considerable number of the conversions resulted from users who revisited the page.

No, that’s not all.

A call to action. That little big thing.

“Call Today”

Hidden Call to Action in Image

What better place to have it than in the image itself! That too, right next to the contact form. It gives the user direction on what’s to be done if they are interested in taking things ahead, and it creates urgency using the term “Today!”.

So there, little relevant things really matter.

Room for Further Testing

If you check the academy’s current page, you’ll see that the “Florida Gators” print has been edited out of the student’s sweatshirt. If you remember, Brian had pointed out how the reference to ‘Florida’ might confuse prospects who are primarily from Illinois. Removing the “confusing” text from the image should improve conversions even better. Brian also pointed out that the average age of a student at the academy is close to 40, while the student in the image is closer to 25. From this context, Brian shares his vision for further testing,

..trying to narrow down whether pictures of actual customers, pictures of actual employees, or pictures of actual products/equipment/objects convert best. Then you can do more incremental tests, like whether a 40-year-old student would convert better than a 25-year-old or whether the student should be holding up his license or just standing in front of the truck.

Are Your Images Relevant?

What do you think? Is relevance the most vital criterion in selecting an image?

If you feel so, I would like you to head back to your website and reconsider the relevance of the image(s) used. Are they relevant? Would you like some help figuring out if it’s relevant or not?

And if you feel relevance is not the primary consideration, I would love to know your take on it.

Tell us right here, or, if you are a person of few words (couldn’t help it) let us know on Twitter @VWO or, get to me straight @SharanTheSuresh.

Before I leave, here are two more brilliant ‘Stock Image vs Real Image’ case studies from our archive.

45% Increase in Conversions Using Real Image

How about an 89% increase in conversion?

And as always, we’re listening.

The post Stock Image or Real Image: A/B Testing Provides an Incredible 161% Increase in Conversions appeared first on VWO Blog.

View this article – 

Stock Image or Real Image: A/B Testing Provides an Incredible 161% Increase in Conversions

Just another WordPress site