Michael Whitaker's web analytics blog » Usability

Using web analytics to optimize checkout forms

Michael Whitaker — Fri, 25 Jun 2010 21:45:47 +0000

Although I tend to be skeptical of best practices – they might be a starting point, but I prefer doing testing to find out what works or not – there are some things that are always better than others. A fast-loading site always beats a slow-loading one, working links are always better than broken links, and reducing errors in general makes obvious sense.

In the same vein I would say that a short checkout form is better than a longer one. Of course you need a certain amount of information to be able to process and fulfill an order, but you should only ask for the information you absolutely need. Reduce friction and remove any obstacles that make it more difficult for your customers to buy from you.

But can we back up this assertion with web analytics?

I am a big fan of tactical web analytics, such as tracking 404 pages, zero results searches and checkout errors.

This report shows the number and type of checkout errors seen by visitors:

The number one error message customers see is the missing phone number.

In a default Yahoo! Store checkout, the phone number is required:

But do you really need the phone number? If there is a problem with the order, can’t you just email the customer? I think the data shows that your customers don’t think you need their phone number either! And if you do require the phone number, you should at least tell your customers why you need it.

If you do not absolutely need to have the phone number, then how about making the phone number field optional?

Fortunately, this is easy to do in the checkout manager in your Yahoo! Store. Just edit the phone field on the shipping page and uncheck the required field:

Because this is just the data from one store I don’t know if making the phone field optional in the checkout qualifies as a best practice , but at least the data gives you a clear picture of the problem. And in this case it would be easy to fix it.

Now on to the other error messages!

Checkout Manager tip: Magic Replace

Michael Whitaker — Tue, 05 Sep 2006 20:09:29 +0000

I have been asked quite a few times by merchants if there is a way to change the "Shipping" label to "Handling"
in the checkout pages. Maybe you offer free shipping, but charge a
handling fee. Or perhaps you want to use a "Shipping and Handling"
label. In those cases, just labeling those charges under the generic
"Shipping" label may not accurately reflect what you want your
customers to know.

Fortunately, the new Checkout Manager has a very structured layout that
allows us to use a little bit of JavaScript magic to rewrite the
"Shipping" label on the fly. Sorry, but if you don’t use Checkout
Manager you can’t use this code.

To implement this in your Yahoo! Store, copy the following code into the Footer section of the Checkout Manager:

Checkout Manager > Global Settings > Checkout Wrapper > Footer

Locate the line just before the closing tag:

monitus_magic_replace("Shipping and Handling");

and
enter the desired text inside the quotes. Click on Save and then
Publish your Order Settings when you are done. Check your published
site to make sure everything looks good. Also, please note that this
code obviously won’t work if visitors have JavaScript turned off in
their browser; they will instead see "Shipping" as before.

Finally, this code
is licensed under a Creative
Commons Attribution 2.5 License. This basically means that you can use this
code for free in any manner you see fit as long as you keep the attribution.

Have fun!

Your own favicon for your Yahoo! Store

Michael Whitaker — Wed, 22 Mar 2006 19:22:35 +0000

Does your domain name look like this in the browser address bar? By default, Yahoo! serves up its own favicon, but you can change this if you want. First, search the web for "create favicon" to learn more about these little images and how to create them. Once you have created the favicon.ico file (notice the unusual file extension), upload it to your web hosting account and make a note of the full URL path to it.

Assuming you use the Store Editor to build your Store, open the Variables page and look for the "Head Tags" field. If you don’t see it, click "Cancel" and then on the little red triangle in the yellow toolbar. You should now see the Head-tags field in the Variables. Add this line in there:

Then, click on Update and publish your Store. You should now have your own favicon, just like on my site!

Fonts for web text

Michael Whitaker — Fri, 24 Feb 2006 15:43:29 +0000

It looks like folks prefer Times New Roman for web text:

Link: Perception of Fonts: Perceived Personality Traits and Uses.

Summary: This study sought to determine if certain personalities and uses are associated with various fonts. Using an online survey, participants rated the personality of 20 fonts using 15 adjective pairs. In addition, participants viewed the same 20 fonts and selected which uses were most appropriate. Results suggested that personality traits are indeed attributed to fonts based on their design family (Serif, Sans-Serif, Modern, Monospace, Script/Funny) and are associated with appropriate uses. Implications of these results to the design of online materials and websites are discussed.

Yahoo! Merchant Solutions System Status

Michael Whitaker — Fri, 03 Feb 2006 16:38:28 +0000

Quick trick to know about the system status of the Yahoo Store platform in real time. Go to the new System Status page and click on the "Add to My Yahoo" icon. This will add the RSS module to your My Yahoo page. If you use My Yahoo like I do on a daily basis you can now see new status messages of the Yahoo Store platform automatically when and if they happen. Of course you can use another RSS reader, but My Yahoo is easy to use.

Click on image for a larger screen shot.

E-commerce usability

Michael Whitaker — Tue, 26 Apr 2005 19:10:25 +0000

“Usability is a prerequisite for e-commerce success. It doesn’t matter how cheap the products are if people can’t find them or if they get stuck on a step in the checkout process.”
— Norman Nielsen.
The performance of your Yahoo Store can be measured in terms of a very simple equation:
Site Visitors x Conversion Rate = Sales
Increasing the number of visitors to your Yahoo Store is mainly a function of your marketing budget and good search engine ranking. Increasing the second number depends on making your Yahoo Store more usable. Ideally, you would want to increase both numbers on the left side of the equation, but you are more likely to get a better bang for your buck by increasing your usability budget instead of your marketing budget.
There are several good resources available online and in print that you can use to learn more about usability. I have drawn on those resources and my own experience to put together some practical tips that you might want to consider implementing in order to improve the usability of your Yahoo Store.
Out-of-the-box usability
Yahoo Store provides you with a number of built-in templates that allow you to put together a working e-commerce site in a short period of time. Those templates work very well and give you the flexibility to design your site in several different ways. However, those templates have been coded several years ago and have not changed much since. In addition to that, the original template designer has made some usability decisions for you, some of which are less than perfect. Fortunately many shortcomings can be overcome, although most solutions require knowledge of RTML and the template editor.
The web as a medium of choice
The web gives people access to a phenomenal amount of information. Search engines are among the most popular destinations on the web because they help people find relevant information. Whether people come to your site directly or from a search engine or the Yahoo Shopping portal, it is your task to ensure that they can find the information they are looking for easily and efficiently. If people cannot find your products or your site is too difficult to use, there are always a number of other sites ready to provide the necessary information.
Site search on every page
This would be my number one recommendation. People are used to using search engines and you should provide a prominent site search box on your Yahoo Store, preferably in the top part of the screen. Usability tests show that it’s best to label the search box “Search”.
Test out the search functionality for common keywords and make sure that your products are listed in the results page. If not, update the text in the caption and name fields of your items so that the keywords are included.
A note about the quality of the Yahoo Store site search itself: I find it unfortunate that only item pages are included in the index and not the info page. The info page is supposed to contain important information such as shipping, returns, refunds, or payment types. This information should also be accessible via the site search. As a workaround you should therefore make sure that the link to the info page can be easily seen on your site, and is possibly linked to from within your text in the caption field or maybe the Final-text variable.
Multiple ways to the same product
Providing a site search box on every page provides people with one more tool to find information. You should also provide people with different paths to the same product.
A toy for example can be categorized in terms of price, age group, brand, etc. Consider therefore adding sections that are more task-oriented, such as “Shop by brand” or “Shop by age”.
Breadcrumbs
Remember that people don’t necessarily arrive at your homepage first and land instead somewhere inside your site. Breadcrumb trails give people an understanding of the structure of your site, and where they are located within that hierarchy. This is particularly useful if you have sections that are several levels deep.
Tag line under logo
Unless you have a big budget that allows you to establish your brand, I would recommend a short tag line under your logo that describes the nature of your business. State the obvious benefits of using your site and not some meaningless buzzwords. For example, it is better to say “Making your Yahoo Store better” than “Solutions for a web-enabled world”.
Write text that is easy to scan
It is a well-known fact that people scan rather than read on the web. Present information in short paragraphs with appropriately highlighted words in:

Bullet point format.
You should hyperlink to more in-depth information should people care for that extra information.

Comparison tables
Many people use the web for comparison shopping. In fact, one of the reasons of shopping cart abandonment is that people use the shopping cart page to compare different products. As an aside, check out the latest offering from Google – called “Froogle” – that acts as a mega comparison shopping engine (froogle.google.com).
If possible, provide people with tools that help them make side-by-side comparisons between different products on your site. This could be a nicely-laid out table that lists features for several products side-by-side. Make sure to highlight differences rather than common features.
Good quality images
The web is primarily a visual medium so please take care to use high-quality product shots. The enlarged product image should also be larger than the product thumbnail image.
Relative page width
As you know the built-in templates only allow you to specify a fixed page width. I personally really like relative page width designs because they look good for different screen resolutions. Many people have monitors now with screen resolutions that are at least 1024×768 pixels, so a fixed width of 800 pixels leaves a lot of white space and vertical scrolling.
Fast page loads
Remember to keep page sizes low. Most people still use dial-up connections and sites that take forever to load turn off people.
Fresh content
This is one of my pet peeves: “Copyright 2000. XYZ Corp”. Reading something like this not only demonstrates a deplorable lack of attention to detail, but also that the site has not been updated for ages. Running an e-commerce operation or indeed any website is a continuous work in progress, and providing fresh content is an absolute necessity. Provide information and promotions that are current and relevant. And don’t forget to update those copyright notices on January 1, 2003!
Finally…
Do test your design. Ask your friends and colleagues – preferably those that have not been involved in the site design process – to critique your Yahoo Store. Ask them to perform a certain number of tasks, such as finding a particular product or piece of information. Ask lots of questions:

How easy was it to find the information or product?
How did they find the product?
What was confusing?
Etc

You will get a lot of valuable feedback and possibly discover new usability issues.
Resources
This list of usability suggestions is by no means exhaustive. For additional information, I recommend the following:
www.useit.com. Maintained by Jakob Nielsen. Lots of usability articles and books. You can sign up to receive a free newsletter.
Homepage Usability: 50 Websites deconstructed. Book by Jacob Nielsen
www.creativegood.com. Free newsletter written by Mark Hurst on usability and other topics.
www.goodexperience.com/gel. The Good Experience Conference 2003. Many noted speakers at a very affordable cost.
www-3.ibm.com/ibm/easy. Many tips on design from IBM.