Hey—we've moved. Visit
The Keyword
for all the latest news and stories from Google
Official Blog
Insights from Googlers into our products, technology, and the Google culture
Make sense of your site: tips for webpage design
March 16, 2009
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
Labels
accessibility
41
acquisition
26
ads
131
Africa
19
Android
58
apps
419
April 1
4
Asia
39
books + book search
48
commerce
12
computing history
7
crisis response
33
culture
12
developers
120
diversity
35
doodles
68
education and research
144
entrepreneurs at Google
14
Europe
46
faster web
16
free expression
61
google.org
73
googleplus
50
googlers and culture
202
green
102
Latin America
18
maps and earth
194
mobile
124
online safety
19
open source
19
photos
39
policy and issues
139
politics
71
privacy
66
recruiting and hiring
32
scholarships
31
search
505
search quality
24
search trends
118
security
36
small business
31
user experience and usability
41
youtube and video
140
Archive
2016
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2007
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2006
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2005
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2004
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Feed
Google
on
Follow @google
Follow
Give us feedback in our
Product Forums
.
Follow
