What is A/B Testing?

Category Archives: Optimization

What is A/B Testing?

A/B testing, also known as split testing, is a way to compare variations of the size, color and arrangement of your web pages’ elements in order to let you know which version provides optimum conversion. Split testing can let you know which changes increase conversion rates, unique visits, lead captures, signups and other calls-to-action.

A/B testing can reveal the truth about your design assumptions and alert you to interpretations you didn’t anticipate.

Where do you start?

When you perform A/B tests on your site you will want to keep your goals clear and in order. Ask yourself, “What do I want my visitors to do when they visit my site?”  Once you’ve answered that question, consider all of the basic page elements you have at your disposal that will facilitate that goal: your logo, action buttons, heading text, input forms, informational text, photography, and navigation items.  Create a design that arranges these elements according to what you think will best encourage fulfillment of your goals. Put your best foot forward and start your tests.  If you use a platform like Google Analytics Content Experiments to perform your A/B tests and have steady traffic to your site, the results should start to favor A or B within a couple of days.

What do I look for with my test?

A/B testing is not simply about identifying which page performs best.  It is about identifying why a particular page performs the way it does. The former tells you what’s popular. The latter tells you what your visitor wants and needs.  That’s the most important part.  Otherwise, you’re still guessing why your visitors took one path over another.

It is important to remember that when you test multiple changes simultaneously it can be difficult to determine why exactly a particular version was successful or unsuccessful. For instance, if you make a version where you move the logo and change the text in the same variation, then you have no way of knowing if the key factor was the position of the logo or the new text. The most valuable tests are ones that give you information on what your users prefer not just which version wins. One of the great things about optimizing your web site is that you can’t lose if you do your tests methodically. Each new test will give you the answer you need and eventually you will end up with a version that is better than the one before.

What else can I do?

Consider using a heat map tool like CrazyEgg to enhance your understanding of which parts of your site visitors expect to be clickable. Traditional analytics software like Google Analytics can tell you which pages are getting attention relative to other pages on the site; but they can’t tell you how far down your visitors scroll, which images and headlines they expect to be clickable or whether they ever saw your call-to-action button.

Optimizely is a popular tool used for A/B testing. It is a code generator that allows you to create variations of your website by inserting a snippet of code into the head of your pages to be tested. The code is generated through an online editor that lets you resize, move, hide, edit your HTML and more.  Unbounce is another A/B testing tool, but, unlike Optimizely, Unbounce includes landing page templates, lead capture forms, email lead notifications, Facebook “like” conversion tracking and even mobile landing page templates.


A/B testing can be a very useful process to help you optimize elements on your site that will lead to higher conversion.  Sometimes a particular design choice versus its outcome is not intuitive. You don’t always have to take the recommendation of an A/B test if you feel it may compromise your brand or messaging.  Use A/B tests to help you validate design assumptions and produce the best business result for your web site.

Going Mobile-Friendly

In 2011, mobile access to the web doubled to over 8%. In many of these cases, the site visited from a mobile device is the exact same site displayed on a laptop or desktop computer. Just because it can be seen, however, doesn’t mean it can be used. Most full sites viewed on a mobile device require you to pinch, flick, double-tap, or drag in order to access their content. You need both hands for these gestures: one to hold the device and the other to perform the action. A mobile-friendly site, however, eliminates this barrier and makes accessing essential information as simple as a single touch with one hand.

By displaying only essential information such as hours of operation; directions and location; contact information; service offerings; deals and promotions; and basic “about” information, mobile-friendly versions make it easy to identify critical information without the need to navigate a full site. Trimming down information from a full site for a mobile device and making it “touchable” rather than “pinchable” is one of the most significant advantages of a mobile-friendly site.

Awareness of these differences is important when considering the development of a mobile-friendly version. Jumping in headfirst, however, is not advisable. There are guidelines and considerations for going mobile-friendly. A substantial increase in capabilities is not necessary to create a custom, friendly version if your site traffic is minimal. More specifically, we at Sharp Hue use the metric that if 20% of a site’s traffic (as reported by Google Analytics) is mobile, then it’s probably time to put the design of a mobile-friendly site on the to-do list.

Bikes Blues And BBQ-mobileWordPress is one platform that simplifies the process for displaying a full site on a mobile device. Plugins such as the WordPress Mobile Pack, for example, will automatically rescale a site’s images, split articles into multiple pages, simplify styles and remove non-supported media. Plugins such as this enable these capabilities quickly. However, they are usually not customized or visually appealing. They don’t necessarily use the color palette from your full site and they don’t necessarily display the logo you’ve invested so many resources in creating. Further, plugins like this don’t necessarily make the mobile version of your site easier to use.

In addition to these pre-packaged plugins that can do most of the heavy-lifting, there are also mobile frameworks available, like jQuery mobile, that allow for custom, rapid development without the extensive resources necessary to build a full-fledged mobile application. Frameworks such as this make it easy to maintain a site’s color palette and logo. They also make it very easy to manage content from within the Dashboard if WordPress is used as the site’s platform. Using this technique allows changes to be made to two different sites with only one edit. This sounds elementary, but managing mobile content is a development consideration many people disregard. Developing mobile-friendly sites should always include thoughts about maintaining the mobile version in the long run.

Another consideration in developing a mobile-friendly site is redirection; i.e., how a site’s visitors will navigate to it. Generally speaking, when a URL is typed into a mobile browser’s address bar, a request for information is sent out. A browser can recognize that the request is coming from a mobile device and, in those cases, sends back a specified message. The message can be a command to redirect to another site like an “m.domainname.com” site, for example. The message can also be a serving of different content or even a stylesheet change.

WordCamp Fayetteville 2012-mobilePlugins can take care of this return “message” for you as well. We’ve found that Mobile ESP for WordPress is best suited for our needs. Many times, plugins like this are sufficient to do the job. It all depends on the needs of your mobile version. Sometimes you just need something that isn’t worth a developer/designer’s time to miniaturize a full website. Other times, a smaller, limited version of a site is needed, especially if the site owner wants to maintain their color palette and display their logo. In still other cases, the theme being used isn’t compatible with any of the available mobile plugins. In the case of WordCamp Fayetteville, which is yet another example, the full site is built on a multi-site platform administered by super-admins who work for WordCamp Central. Plugin compatibility isn’t an issue. It’s not even an option. The theme and administrative privileges of WordCamp sites don’t allow for the installation of plugins. It’s in cases like these that it’s time to create a custom, mobile-friendly site from scratch.

White Space Makes Everything Better

White space in web design is not the absence of an element. It is its own element and has its own properties and functions.  It is also a fundamental and necessary consideration that is often overlooked by web designers and developers when creating sites for their client’s customers.

It is well-known that web users scan web pages. They don’t read. This means that, as a designer, the amount of screen real estate you allocate to content must be concise, purposeful, and obvious.  You have to say what you want to say quickly, efficiently and in a manner that anticipates a visitor’s questions well ahead of time.

At first glance, this sounds like a navigation issue. Ensure you have necessary information appropriately arranged and easy to discover, right?  Right.  However, it is white space that drives this initial discovery and allows visitors to find the information they want easily. It does this in at least three distinct ways:


White space improves readability by adding space around blocks of text, between words and even within words. The font type and size you select matters not only stylistically, but also in terms of readability; and some font families are naturally more readable than others.   The goal of using white space for readability is to increase comprehension and subconscious appeal by making the job of reading seem easier to the reader.

Breathing Room

White space provides a feeling of fresh air, comfort, and relaxation. When a site is constructed with only essential elements, visitors are allowed more pause to reflect on the message of the site and more time for deeper comprehension. Sites that have too much information on a single page or crammed together too closely create feelings of suffocation, information overload, and distrust. This distrust can carry into the psychology of the visitor who is seeking your business goods or services.  Visitors may imply that if you’re not organized on your site that you are not organized enough for a business relationship.

Qrme.co.kuAn example of overload is http://www.qrme.co.uk/. When you first land on this site, you see ten pages in the top nav, one of which has twenty child pages.  There are also ads, randomly placed images, a login feature, a visitor counter widget, a slider linking to an online store, and more. Although the background is a very light shade of gray, and although there is, technically, lots of white space on the site, there is very little space between the elements. Fonts have been reduced to fit more content on the page and graphics with varying widths dominate the middle of the page.

Attention & Focus

With fewer elements on a page, there are fewer opportunities for distraction; fewer competing messages; and fewer options for action.  With a skillful use of white space, your visitors can concentrate on one thing at a time and take their time absorbing the carefully selected information you decided to include on your page.  The challenge with fewer elements is that every decision you make becomes a strategic one.  Allocating screen real estate for white space forces you to economize the remainder of your available space. It forces you to be thorough, quick and effective with your message.  It forces solid copywriting.

We’re Only Human After All

A sponge can only hold a limited amount of liquid before it starts to leak. Likewise, there is a limit to the amount of information a human brain can process in a given time period before it reaches a saturation point; before it simply can’t learn anything new.  If you’ve ever gotten burned out at a conference or reached that point when you’re “done”, then you know the feeling.  An effective use of white space understands the limit of this capacity and reduces your visitor’s cognitive load by dividing page elements into easily digestible chunks.

In other words, it’s easier to remember stuff if there is less stuff to remember.  “But what about…?  We’ve got to have that somewhere!”  Do you? Do you really?  If you ride that necessity out to its inevitable conclusion, you’ll see that a site is never complete.  There is always something more that could be said; and that’s okay. That’s what contact forms are for. Just be sure to answer those emails in a timely fashion.

In Conclusion …

White space, when used thoughtfully and with patient deliberation, creates a sense of natural balance and a sense of emotion. Visitors who are engaged on more than only pragmatic levels use a site more often; stay around a little longer; read more than scan; remember your message and have a better chance of clicking your action button.

Heat Maps Increase Website Usability Analysis

How far down do your website visitors scroll? Which images and headlines do they expect to be clickable?  Where is the best place to insert a photo or button?

Heat maps are visual representations of the relative popularity of your website’s elements; and they can answer these and other non-intuitive questions.  As a small business owner or non-profit organization, you need to know where your website visitors are getting frustrated. You need to see the elements that are causing your visitors to hit the back button and you need to know where your visitors are clicking.

Web analytics software like Google Analytics can tell you how your visitors found your site; which pages of your site are most popular; how long your visitors spent on your site; where your visitors are geographically located in the world and more.

Although most web analytics software can give you the “numbers”, they cannot tell you which parts of your site visitors expect to be clickable. They cannot tell you exactly how far down a page your visitors scroll. Without this information, you don’t know whether your visitors ever saw your call to action; whether they value one image over another; or whether a specific field in a form is the culprit for that page’s peculiar bounce rate.

Heat map tracking software, like CrazyEgg.com, enhances your existing analytics by filling in these gaps and providing precisely this kind of information.

Let’s review a snapshot of the homepage for My Diamond Obsession as an example.  The most frequently clicked elements of the page are colored in yellow and the least clicked elements are colored in blue.

There are several areas of this page that are completely untouched. Two “Buzz” posts, two “Most Obsessed” products, and one of the products in the featured slider don’t have a single click.  Instead, the hottest spots are the arrows showing additional product, other product, and the RSS button.  This suggests visitors want to know about future additions, but don’t necessarily like what they see on the homepage in this instance of time.  This should be a clue to add different content to the homepage.

Heatmap Selling to the Masses, Monday, February 27, 2012Let’s take a look at another example: Selling to the Masses.

In this graphic you can see that one of the “hottest” areas is the play button for the video.  This is as it should be.  The site owners invested a substantial amount of resources to produce the video and should be one of, if not the most, frequently clicked elements.  You can see that “The Mentors” and “The Classroom” links in the main navigation are popular as well. Careful review of this map shows a series of blue spots along the right vertical. What are these? What does this pattern indicate? One possibility is that these are attempts to exit the modal or “pop-up” that appears when the video is played. This is something to consider in an evaluation of this site’s usability. While heat map software provides rich, visual insight, it is important to examine the anomalies of the software’s resulting graphic.

A more significant point of interest, however, is that the “Browse Mentors” link all the way down at the bottom of the page in the footer is highly popular compared with other links on the page. Notice that the central area showing photographs of featured mentors shows very little activity. Some of the photographs are completely untouched. This site’s visitors are more interested in browsing mentors than they are in looking at the details of the featured mentors. This should trigger a repositioning of the browse link to a higher, more prominent area of the homepage.

Heat maps alone do not provide all of the data that other analytical software does. Heat map software can, however, increase conversion and add value to your web analytics by:

  • answering design questions you may not have thought to be relevant
  • revealing poorly performing areas like specific fields in a form
  • identifying usability issues that might have been missed
  • suggesting refinements to your site’s information architecture
  • highlighting areas commonly mistaken for links or other clickable elements

This kind of information allows you to keep the things your visitors like and change the things they don’t. It reveals an entirely different view of your website’s usability and helps you keep your most desirable content intuitively accessible for your visitors. Another advantage of heat maps is that they are visual and, as such, they are well suited for presenting raw data to non-technical audiences. They also help cement the position and organization of the elements of your site that work; and they can help you ensure that that the content on your page is relevant, easy to use and valuable.

#9: Engage your visitors

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…Social media is a great way to keep your customers in the loop and also to let them help you promote your products and services. Consider setting up a Facebook page for your company. Create a Twitter account that keeps your customers informed about interesting things you are doing. Use Linked In, Spoke, or the relevant community within your industry to network and build relationships.Word of mouth has long been one of the best means of marketing around. Now, it’s just as likely to be a text, a tweet, or an email as a spoken word. It’s still a great way to establish trust and strengthen connections. Social media is a two-way street. You can learn from your customers and your colleagues, and even from your competitors. Give your visitors as many ways as possible to give you feedback about your web site, company, products, and services. You’ll get valuable insights, and your visitors will feel more engaged with your company.The most important thing to remember in using social media is authenticity. Social media marketing isn’t the same as advertising. It’s a community, or a set of communities. Your business benefits from being part of the online community just as it does from being part of the community where you live. Contact Sharp Hue and we’ll help you get set up with Twitter, Facebook, and more. Check back soon for tip #10: Keep your site fresh

#7: Understand your traffic

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…With web sites, the numbers tell the story. Once you have your web site launched, you’ll have questions. Are people interested in your products? How long do they stay? On what pages do they exit your site? All of these questions can be answered by installing Google Analytics into your web site. Google Analytics is a free service that gives you information on who is visiting your web site, how they arrived, what they do during their visit, and when they leave. This data allows you to make informed business decisions, on and off your web site.Knowing which sources send you the most traffic lets you target your marketing efforts in the direction that gives you the best return on your investment. Knowing where in the world your visitors are lets you tweak your message to encourage local traffic, if that’s what you need, or to accommodate your global clientele.But you can only take advantage of this information if you collect it, follow it, and understand how to use it. If your skill set doesn’t include working with quantitative data, get professional help with this step. Don’t lose out on the opportunity.

Contact Sharp Hue and we’ll help you install Google Analytics into your web site — it’s easier than you think. Check back soon for tip #8: Maintain a blog

#6: Create a Call to Action

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…

Even with fast web hosting and a search engine optimized site, your visitors’ experience has to be easy. Since your web site is connected with a business, you’ll have more to offer your customers than just the information and enjoyment they find on your homepage. Make sure you drive them all the way through the sales pipeline by creating text and buttons that make their next step clear.Spend some time thinking about, and perhaps researching, the optimal user journey for your customers. Identify the decision points along the way and plan to give your visitors clear guidelines every time they need guidance. When your customers want to buy, subscribe, or otherwise take their next step with you, make sure it’s easy for them to do so.

Don’t think you’re being too aggressive by providing those clear guideposts. In fact, you’re helping your customers. They’re wondering how they can get the great goods or services you provide, and you’re making it easy for them.“Buy Now”, “Sign up”, “Schedule an appointment.” Phrases like these, linked clearly to the pages that let your customers take those steps, keep your visitors traveling smoothly along the path to a satisfying transaction.Contact Sharp Hue and we’ll give you a free analysis of your web site’s usability. Check back soon for tip #7: Understand your traffic

#5: Use Professional Web Hosting

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…Sharp Hue offers professional web hosting, so you may think we’re biased here, but in fact there are significant advantages to professional web hosting, from the point of view of your visitors. All these aspects of your website will be superior with professional hosting than with a mass market bargain host:

  • Speed
  • Uptime
  • Security
  • Freedom from spam and unwanted advertising

Visitors to your website are more likely to stay and more likely to return if their experience at your site is good.What about your experience? With a high-quality professional web hosting firm, you can expect superior speed, responsiveness, and support as a site owner, reducing both stress and time away from business-critical tasks.What’s more, when you need other, related services, from design work to e-mail marketing services, you already have a provider you know and trust. Again, the time you don’t spend searching and sifting through options is time you can devote to your business.

Contact Sharp Hue and let us migrate your web site to one of our blazing-fast and ultra-reliable hosting plans. Check back soon for tip #6: Create a call to action

#4: Optimize Your Web Site for Search

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…In the early days of the web, there wasn’t much available, and people would flock to almost any new site. Now your site competes with millions of others for traffic.Your web site content should be written with language that will attract both search engines and people. When your customers – or the people who should be your customers, but they don’t know it yet – look for you at their favorite search engine, what words do they type in? Those are your keywords, the words which the search engines need to find at your web site. Those words should have prominence. But your awareness of search engines should never interfere with your human visitors’ positive experience. What’s more, search engines give preference to well-designed, well-written sites. Take the time to create a quality web site for best results. Major search engines favor sites with valid, up-to-date coding and correct English. They favor sites with a high level of usability, or user-friendliness. And they always favor good content.There are no tricks to SEO; it’s just good business. A high-quality, professional web site will perform better than a lesser-quality web site.Contact Sharp Hue and let us help you create a successful and cost-effective Search Engine Optimization strategy. Check back soon for tip #5: Use Professional Web Hosting

#3: Make navigation easy

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…

Don’t frustrate your visitors. Present your navigation in a clear and intuitive manner so information can be found easily. Your visitors should be able to move through your web site naturally, without having to think through all the possibilities and decide among them. “Where should I go next?” and “Which button will take me to the place I need?” are not the thoughts you want your customers to have. You want them to have thoughts like, “Wow! This is just what I need! I’m so glad I found this web site! I’ll contact them right away!”This means that navigation is not the place for exciting new approaches. Navigation buttons should look like navigation buttons. Attractive, special, visually appealing navigation buttons, but navigation buttons all the same. Put them in places where people expect to find them.Try to have no more than 5 to 7 main navigation buttons and then create sub-pages below them with relevant information pages. Organize them in a logical way that will make sense to your visitors’ brains even while they’re not thinking about it.A well-designed highway or airport gets people to their destinations without making them stop and figure things out. Your website should have the same effect.Contact Sharp Hue and let us help you create an intuitive navigation and sitemap for your web site. Check back on Sunday, May 10, 2009 for tip #4: Optimize Your Web Site for Search