Michael Whitaker's web analytics blog

Mainly about web analytics, testing, tweaking and optimizing for e-commerce sites.

My Photo

About

I run Monitus Tools and use this blog to share ideas about web analytics for online retailers. You can also follow me on Twitter.

Subscribe



Add to Google
Subscribe in Bloglines

Links

  • Visual Revenue by Dennis Mortensen
  • Official Yahoo! Store Blog
  • Occam’s Razor by Avinash Kaushik
  • Unofficial Google Analytics Blog
  • Google Analytics Blog
  • Rob Snell's yahoo store book & blog

Checkout Manager tip: Magic Replace

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.

Shippinglabel
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

<script type="text/javascript">
/* "monitus_magic_replace" function by Jean Le Clerc. Copyright 2006 Monitus LLC. This work is licensed under the Creative Commons Attribution 2.5 License. To view a copy of this license, visit http://creativecommons.org/licenses/by/2.5/ or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA. */

function monitus_magic_replace(pReplaceValue, pOriginalValue) {
if(!pOriginalValue) pOriginalValue = 'shipping';
var vCartDiv = null;
if(document.getElementById) vCartDiv = document.getElementById
('ys_cart');
else {if(document.all) vCartDiv = document.all['ys_cart'];
else if((navigator.appName.indexOf('Netscape') != -1) && (parseInt
(navigator.appVersion) == 4)) {vCartDiv = document.layers['ys_cart']; }}
if(vCartDiv) {var vTable = vCartDiv.getElementsByTagName("table")[0];
if(vTable) {vSection = vTable.getElementsByTagName("tbody")[0];
vRows = vSection.getElementsByTagName("tr");
if(vRows) {var vRE = (typeof pOriginalValue == 'string') ? new RegExp
(pOriginalValue, 'i') : pOriginalValue;
for(var vLoop = 0; vLoop < vRows.length; vLoop++) {var vCols = vRows
[vLoop].getElementsByTagName("td");
if(vCols && (vCols.length >= 2)) {if(vCols[0].firstChild && vCols[0].firstChild.nodeValue && vRE.test(vCols
[0].firstChild.nodeValue)) vCols[0].firstChild.nodeValue = vCols
[0].firstChild.nodeValue.replace(vRE, pReplaceValue);}}}}}
}

// Customizable call
monitus_magic_replace("Shipping and Handling");
  </script>

Locate the line just before the closing </script> 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!

September 05, 2006 in Usability | Permalink | Comments (3) | TrackBack (0)

Your own favicon for your Yahoo! Store

FaviconDoes 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:

<link rel="shortcut icon"  href="http://site.yourdomain.com/images/favicon.ico" type="image/x-icon" />

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

March 22, 2006 in Usability | Permalink | Comments (3) | TrackBack (0)

Fonts for web text

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.

February 24, 2006 in Usability | Permalink | TrackBack (0)

Yahoo! Merchant Solutions System Status

Myyahoo_2 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.

February 03, 2006 in Usability | Permalink | TrackBack (0)

E-commerce usability

“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 1024x768 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.

April 26, 2005 in Usability | Permalink | TrackBack (0)

Categories

  • Marketing
  • Monitus Tools
  • RTML
  • Usability
  • Web Analytics
  • Yahoo Store

Recent Posts

  • New blog address
  • Yahoo! Store webinar today
  • About site reviews
  • Cross sell works
  • Event Tracking value
  • How to arrange items on your section pages using analytics data
  • Segment by page type
  • Surprising checkout error analysis
  • Demographic data in Analytics
  • SEO ranking and Event Tracking

Archives

  • November 2009
  • October 2009
  • September 2009
  • July 2009
  • May 2009
  • February 2009
  • October 2008
  • September 2008
  • May 2008
  • April 2008

Search this blog




Powered by TypePad