Call to Action Buttons & Geolocation in HTML5

Jun 7, 2010
Episode 27
This week, Nick shows you how to make your site more effective with call to action buttons, and Jim goes over the basics of the geolocation API in HTML5.
Spotlight

Thanks to those who make Doctype possible!

Call to Action Buttons

If your website is trying to sell a product or service, chances are your site has a few call to action buttons. Optimizing these buttons can have a dramatic impact on the success of your site.

Basics

There’s two major mistakes that people make with call to action buttons.

The first mistake is, people often neglect to have a call to action button at all. You’ll arrive at their marketing site and there won’t be anything to click on to move the user forward. Giving the user something to do next is an essential part of marketing a product or service successfully.

For example, if you’re selling a piece of entertainment like a movie or a video game, there should be a logical progression of steps. Chances are there will be a large video on the page of a movie trailer or a video game trailer. If people watch that and are excited about what they’ve seen, they might want to buy movie tickets or pre-order the game. There should be a prominent button close to the video, that allows them to do just that.

The other mistake people make, is that they have too many call to action buttons. It’s OK for a page to have multiple goals, such as getting users to sign up for a newsletter, follow you on Twitter, etc. However, if all these buttons look the same as the primary action, like buying a product, it can be very confusing to the user and it will dilute the success of your primary goal.

Contrast

In last week’s episode, we talked about contrast. This is especially applicable to call to action buttons.

Typically when people say contrast, they’re talking about a difference in brightness and darkness. However, there are other types of contrast too. You can contrast two elements using different sizes, shapes, colors, and textures. These are all great ways to make your call to action buttons stand out.

For example, on the homepage of Amazon.com, there’s quite a bit of clutter, because they’re trying to cater to a lot of different customer needs all at once. However, they also want to sell their e-reader device, the Kindle.

In order to contrast the Kindle with the clutter around it, they’ve done two things.

First, they’ve added a lot of whitespace, or negative space, around the device. This creates an oasis of calm amidst a very chaotic page. Secondly, they’ve made the Kindle enormous in comparison to everything else on the page. This contrast of negative space, and contrast of size, is enough to create a focal point on the page and draw a potential buyer’s attention.

Copy

Once of the most important things to keep in mind when creating a call to action button, is to engage the user with copy. Call to action buttons should revolve around an action.

Usually a call to action button says something like “Sign Up” or “Add to Cart” or “Learn More.” The thing that all of these buttons have in common, is that they’re all actions. In other words, the copy on your button should always start with a verb. For example, if a button said something like “More about this Product” it’s not really asking the user to do anything.

Using the right words on your call to action button can have a dramatic impact. To figure out what the best words are to use, you should run A/B tests. One way to test one design over another is to use the Google Website Optimizer tool, which allows you to autorotate designs and track which ones perform the best. 37Signals used this to great effect on their sign up page for Highrise, where they tested several different pieces of copy and ended up improving conversions by 30%.

Resources

Geolocation

One of HTML5’s new features is the Geolocation API, which allows you to request information about the user’s location to create more customized and localized experiences.

Getting the user’s location

In last week’s episode, we learned how to get a google map onto our webpage. Wouldn’t it be nice if we could find our user’s location so we can customize the map?

HTML5 introduces the Geolocation API that allows you to get information about the user’s location, with their permission, of course.

Let’s take a look at how to get our code running on the page. First, we need to account that geolocation is not available in all browsers, right now there is support in Chrome, Firefox, and Mobile Safari, and Android.

To test if geolocation is available, we can do

if( navigator.geolocation ){
  // Geolocation is available

}

If you are using Modernizr to detect features, you can check Modernizr.geolocation

if( Modernizr.geolocation){
  // Geolocation is available

}

Next we call

navigator.geolocation.getCurrentPosition(hasPosition)

We pass it a callback function that will be executed when the user allows us to see the location, and the location has been calculated.

Let’s write our hasPosition callback

function hasPosition(position){
  console.log(position)
  // Gauranteed information
  position.coords.latitude
  position.coords.longitude
  position.coords.accuracy
  position.timestamp

  // Optional information
  position.coords.altitude
  position.coords.altitudeAccuracy
  position.coords.heading
  position.coords.speed
}

Errors

Now the user may decline to give us their information, or some other may have occured, in which cas we should handle these situations gracefully.


When we call navigator.geolocation.getCurrentPosition we should pass another funcrtion for handling errors

navigator.geolocation.getCurrentPosition(hasPosition, handleError)

function handleError(err){
  if (err.code == 1){
    // User rejected location request
  }.
  // err.code == 2:  Position is unavailable
  // err.code == 3:  Timeout
  // err.code == 0:  Unknown Error

}

If the error code is 1, that means the user declined to give you their information. Since geolocation information is a very private piece of information, you should respect their decision and provide them with some other means of completing your task.

Google Maps Integration

Now, what you do with the geolocation data will vary from application to application, but quite often, it involves locating the user on a map. Let’s look at how to place a pin on the user’s location using google maps.

So if we already have our maps set up from our episode on google maps, we can create this geolocation callback:

  function hasPosition(position){
    var point = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
    var marker = new google.maps.Marker({
        position: point,
        map: map,
        title: "You are here"
    });
  }

And those are the basics of the geoLocation API, with it you can create awesome user experiences showing the user places and people around them, and much more…

Resources