Make sense of your site: tips for webpage design

This is the second post in The Power of Measurement series. These posts are designed to cover ways to make your website as successful as possible, especially in the current economic climate. Here, Website Optimizer whiz Sandra Cheng explores the topic of website design and offers tips to help you get more from your site. -Ed.

In our last post, Avinash Kaushik dove into the world of website analytics and explained the power behind the bounce rate metric. With bounce rate, you are able to identify which webpages are turning away the most visitors. And while it's incredibly useful to identify which pages need fixing, what do you do next?

Back in the good old days, you would go back to the page and redesign it based on what you or other people thought was right for your site. Now, you can actually run a test on your website and let your visitors decide the best version of your page, instead of just going with a gut feeling. Here, I'll discuss website testing — executing different versions of a page to see what sticks — and the various ways you can make the most of your site's design choices.

To begin website testing, start by brainstorming variations of your website. You can decide on small changes, like swapping out a photo, or large changes, like an overhaul of your website's layout or color scheme. Then, by using a free tool like Website Optimizer, you can test your changes by automatically showing different visitors different versions of your site. From there, Website Optimizer will tell you which version your visitors liked the most by tracking which website variation was the most successful in reaching your goal. You can set your goal to be a sale, someone submitting a form or clicking a link, or any number of other interactions with your site. It's like running a simple experiment — without the complicated data analysis.

Testing your site can often reveal surprises. For example, we were surprised by the results of our own test on the Picasa homepage. In version A, we used the word "free," gave it an action-oriented headline, and included a pretty image of the product. In version B, we deleted the photo, used a button instead of a link, and called out the value proposition ("The easy way..."). Which version do you think led more visitors to download Picasa?

Version A

Version B

We predicted that Version A would be the clear winner since it had a photo to captivate visitors and a "free" product call-out. However, the data from the tests showed that the cleaner, simpler Version B was more effective. In fact, the changes in Version B increased downloads by 30%! This example illustrates a powerful point: sometimes you need to rely on data — not your gut — to make decisions that will help your website and your bottom line.

Now, you might be asking yourself, "With so many different aspects of my website to test, how do I know where to begin?" Here are four design tips to pay attention to:

• Tip #1: Pass the 8 second test. At first glance, a visitor should understand the purpose of your website within a few seconds. People are busy and have limited attention spans — you want to keep them from hitting the dreaded back button.
• Tip #2: Tell them what's in it for them. Create clear and tangible benefits (e.g., "Save more! Make extra money! Look better with our product!").
• Tip #3: Use compelling images. Try product images instead of generic stock photos, icons with blocks of text, and buttons instead of links. Keep in mind that a low-quality, irrelevant image can kill your site's credibility.
• Tip #4: Close the sale. Help your visitors take the next step. Make that step clear and easy to reach; don't make them hunt for it. Action words like "buy now" may work better than "add to cart," for instance.
  

Once you've decided which details to test — a call-to-action, color, headline, layout, or video, for example — go to Website Optimizer and set up an experiment. For first-time users, we recommend a/b testing, meaning testing one variation of your page against another. After you launch your experiment, Website Optimizer will do the heavy lifting and show you when the data is "statistically significant." (In case it's been a while since your last Stats 101 course, statistical significance means that an event is unlikely to have happened by chance, and that you have enough data to know that there is a true difference in which page variation your visitors prefer.) The results will start showing in your reports page and for each experiment, the corresponding bar will begin to turn red, yellow or green. When the bars start to turn green, you have a winning page variation that is helping you reach the goals you have set for your website:


Remember, best practices may work best for some, but they are not necessarily what's best for your site and your visitors. In the past, a few opinions and a strong hunch determined an effective website design. Now, armed with metrics, data, and tools galore, you can let your visitors tell you what works best for them and for your site.

Good luck, and get testing!

Posted by Sandra Cheng, Product Manager, Google Website Optimizer