Ecommerce Blog

This post is contributed by Janis Lanka (@janislanka, who manages front-end development for Elastic Path Software.

This post is a continuation of a series of posts related to conversion optimization for the Official Vancouver 2010 Olympic Store. Following checkout process and product details page optimization, in collaboration with Wider Funnel, we looked at the store’s homepage. Following list of hypotheses were made:

• Too many banner spaces create high clutter
• Secondary (left side) navigation doesn’t stand out and is difficult to navigate
• Product photos are too small with no indication on available alternative colors

Control

(Click to enlarge, will open new page)

Variation A

(Click to enlarge, will open new page)

Variation B

(Click to enlarge, will open new page)

As a result, we produced two alternative variations with following changes:

• Reduced banner amount and increased size to improve prominence of each banner
• Increased prominence and clarity of secondary navigation
• Provided color thumbnails to products that have alternative colors
• Increased size of photos and reduced amount of products shown under New Arrivals, Featured Products, and Most Popular tabs

What We Learned

This was a very tough test where even 2053 transactions and 21 days did not provide a statistically significant winner. However, decision had to be made and Variation A was chosen based on following data:

• Variation A converted (GWO) 3.14% better than control variation
• Visits with Variation A resulted in 12.54% less Bounce Rate
• Overall site Conversion Rate was increased by 0.59%
• Average Order Value was increased by 5.16%

As a bonus point in our findings (to put it in perspective), if hypothetically we would be using the winning AOV and Conversion Rate, revenue would be increased by 5.78%.

Finally, a thing we learned which might be already obvious for some: use banner space very strategically. Based on your overall strategy – be that to increase AOV or Conversion Rate – you will need to choose carefully what to advertise and where to send users.

You may also like these similar posts:

• A/B Test Case Study: Location of Size and Color Options Mattered

Original post by Janis Lanka

This post is contributed by Janis Lanka (@janislanka, who manages front-end development for Elastic Path Software.

Continuing our case study in conversion optimization for the Official Vancouver 2010 Olympic Store (see last week’s post if you missed it), today we’ll share the results of our product detail page testing.

We began with potential issues with the current design:

• Color and size selection were provided in drop-down menus which were difficult to notice and understand. For example, what do the colors “Juniper”, “Pacific” or “Fern” really look like?
• The Add to Cart button and price often fell below the fold and were hard to find if a product had a long description.

Considering above, the following tweaks (Variation A) were introduced:

• Most crucial elements such as Add to Cart button, price, and amount selector were moved to the right in their own column and switch places with Shop With Confidence block
• Drop-downs were replaced with visual selectors
• Product review information was moved under the product title
• Alternative image thumbnails were increased in size

During the initial review of Variation B, we gathered feedback suggesting that visual selectors for color need to be closer to the main product photo. The reason being some on our team felt the color selectors were too distant from the product photo. We wanted to test this as an alternative hypothesis. Thus, location of visual selectors was the only difference between Variation A and Variation B.

Control

Variation A

Variation B

What We Learned

During the experiment, all three variations were equally distributed to 100% of all traffic. 18 days and 2567 conversions later, Google Website Optimizer found a high confidence winner. Consensus was that both new variations would perform better than the control one, but variation B was the ultimate winner:

• Variation B converted (GWO) 19.2% better than the control variation
• Variation A converted (GWO) 11.2% better than the control variation
• Visits with Variation B resulted in 54.4% less Bounce Rate than the control variation
• Overall Conversion Rate increased by 21.17% (Variation B) or 13.26% (Variation A)

After reviewing this test, some suggested that Variation A performed worse because most products had rather long “short” description, pushing those selectors fairly close or below the fold. A good follow-up test by splitting description into short and long would answer this.

Finally, it is difficult to say what change exactly contributed the most – the move of Add to Cart button or the change of drop-downs into visual selectors. Unfortunately, we didn’t have the luxury of time to localize these experiments and provide more detailed report on that. However, we can say with confidence that fairly minor UI changes can result in rather high improvement.

You may also like these similar posts:

None Found

Original post by Janis Lanka

Linda’s Note: The following is a guest post by Charles Nicholls of SeeWhy.

The shopping cart abandonment rate is a key metric every ecommerce team should track. When viewed across the ecommerce sector, changes in the abandonment rate give insight into mass changes in behavior which impact every website.

When we examine shopping cart abandonment rates across a large number of U.S. ecommerce sites, viewed in aggregate, the abandonment rate fluctuates wildly, with an expected strong seasonal influence and customer behavioral indications.

Usually it is impossible to correlate your site changes with the changes to conversion. But when viewed in aggregate, it gives you insight into what customers are doing and provides a valuable benchmark when analyzing your ecommerce site’s performance over the same period.

Click to enlarge image (in a new window).

Looking at the data a bit more in depth, the shopping cart abandonment rate averaged 73 percent in the first two weeks of January, some 12 percent higher than the low of 61 percent recorded on December 16. While the abandonment rate usually falls during the Christmas period, these are still huge swings, reflecting the impact of Black Friday/Cyber Monday deals, public holidays, and January sales.

What’s also revealing in this data is that abandonment rates hit a new season high of 87 percent on January 5 and 6!

This is evidence of the link between abandonment rates and bargain seeking behavior, but it could also potentially indicate widespread out-of-stocks for popular lines.

Click to enlarge image (in a new window).

When you compare successful conversion volumes with the abandonment rate, it becomes clear that sales on January 3 reached 98 percent of the peak (on 12/8/09) and have been declining fast ever since. By Thursday, January 14, volumes were down to approximately one third of the peak of December 8.

But notice how the abandonment rate peak on January 5 and 6 came after a sales volume peak.

This suggests that customers were actively shopping for deals after the peak on the 3rd, but not finding what they were looking for, resulting in two days of record abandonment on the 5th and 6th. Despite huge numbers of potential customers researching online, these customers have yet to be converted.

Moreover, since this data is based on items placed in the conversion funnel (typically an item is placed in the shopping cart), it’s unlikely that this pattern is a result of out-of-stocks, indicating that there is untapped demand.

Most retailers expect a very quiet second half of January and accept that holiday promotions have pulled volume forward.

Given this backdrop, what can ecommerce teams do about rapidly falling volumes? The data above suggests that customers came in huge volumes in January, but many didn’t buy, either not finding stock availability or the prices they were looking for. Remarketing in all its guises is now a key tactic to beat the post-holiday blues. Here are five tactics you can use now to convert customers and beat the January blues.

1. Get the basics right. Email the house list with items on promotion which are in stock, and when popular lines that sold out become available again, focus your email campaigns around these items. Be careful not to include items likely to go out of stock quickly if featured prominently in your campaign. Save these items for more targeted campaigns (see 4 below).

2. Remarket to shopping cart abandoners. It should go without saying that triggered one-to-one emails to customers that almost purchased are one of the most profitable types of campaigns that you can run. It’s still astonishing that so few retailers follow up abandoned carts effectively. Retailers who do report that these campaigns are typically 10x more profitable than batch-based customer email campaigns. Ultimately, if widespread optimized follow-up programs were in place already, then we wouldn’t have seen such a sharp drop off in sales since January 3.

3. Extend free shipping. The research above shows that large numbers of customers are out there who almost purchased, but something held them back. We know that there is a very strong correlation between the website conversion rate and promotions. The most popular type of promotion with customers is free shipping. Consider extending free shipping offers through the end of January, potentially in stages, if you have not already done so.

4. Targeted offers. If you have the ability to segment your customers based on browsing behavior, now is the time to do it. Highly targeted, specific promotions—segmented by visitor behavior and product interest—will score well. Focus your best promotions on those who’ve shown great interest in particular products, and if you have limited stock, make it clear that you expect to sell out imminently. Remember that customers don’t want to miss a genuine bargain, and this may be the call to action needed to get the conversion.

5. Social media. While many marketers used Twitter and Facebook to publicize their holiday season offers, most have stopped promoting their offers via social media. For example, promotional Tweets are now at only 11 percent of their post-Christmas peak. Maybe it’s old hat, or you feel that there’s only so many times that you can tweet about your promotions, but there’s always a fresh spin you can put on it with a little creativity. Let’s get those promotion codes and offers out there again.

Web analytics visionary Charles Nicholls is founder and chief strategy officer of SeeWhy and author of “In Search of Insight” which has established a new agenda for the analytics industry. As a veteran of the analytics space, he has worked on strategy and projects for some of the world’s leading ecommerce companies, including Amazon, eBay and many other organizations around the globe. Incorporated in 2003, SeeWhy helps companies improve website conversion rates by bringing back up to 50 percent of visitors that abandon sites prematurely. Check out Charles’ Website Conversion Blog or follow him on Twitter at @seewhyinc.

You may also like these similar posts:

• A Better Way to Measure Conversion Rate
• Cart Abandonment: The Case for Christmas Cookies
• Wishlists May Reduce Cart Abandonment
• Recovering Sales from Abandoned Shopping Carts With Email
• Holiday Season: Are You In the Game or on The Bench?

Original post by Linda Bustos

For certain industries and product categories, product comparison matrices are very helpful for customers to make their decision between a small set of products. For example, most consumer software, telecommunications (mobile, telephone, TV and Internet) and consumer electronics sites offer product comparison. Comparison tools are helpful when the purchases are considered, where the customer is likely looking to make a purchase for one product/service only (vs apparel or food where you’re likely to make frequent purchases of the same or similar things). They are also helpful when the products differ greatly in their features and functions.

But comparison matrices are not always designed optimally. The following is a collection of tips for improving the design and usability of your comparison tools.

Category/Search Pages

1. If you’ve built a comparison feature into your category pages, use it in site search results too. You’ll be amazed how many sites don’t do this. A site search results page is essentially a customized category page.

2. Make the maximum number one can compare at one time very clear, rather than camouflaging it.

Clear:

Camouflaged:

3. Have a clear call-to-action to compare next to each checkbox, and make it look like a link (blue text or underlined black). Many sites force you to scroll all the way to the top of a page to hunt for the “Compare” button. Don’t do this to your customers.

Verizon Wireless makes it very clear you can launch the matrix without scrolling up or down:

Radio Shack does a nice job, using the active words “Compare Now”:

Matrix Usability

4. If you load the matrix in a new page rather than a pop up or lightbox, have a clear link back to the category. Consider “Back to [category] or “Compare more [category].”

5. Make the CLOSE link easy to spot.

6. Link to the product detail page (surprisingly, some do not link through).

7. Allow products to be added directly to cart from the comparison.

8. Large thumbnail images are a plus.

9. Allow easy editing (remove or add device). See example above.

10. Allow customers to highlight the differences between phones or plans, like Best Buy:

Another approach is to Hide Similar Features, like Crutchfield:

11. Allow customer to click-to-expand or use a mouseover to expose product attribute details. Make sure, however, it’s very obvious that there is information that can be expanded. In the example below, it’s not intuitive that you can expand the “Technical Specification” for more information.

12. Allow customer to save or print comparison. This is especially helpful when the purchase decision may be made by another person, for example, comparing mobile phone plans and presenting them to a parent.

Offer a call-to-action to call a customer service representative using “Need Help Deciding?” or a similar phrase:

13. Provide a clear link to return to the category/search results at both the top and bottom of the comparison table.

Product Description Content

14. Whenever possible, include product pricing (this may not be possible for some B2B situations where pricing is negotiable or dependent on volume.)

15. When you carry a number of brands and product lines, make sure units of measurement are consistent across manufacturers (example: 3 days standby vs. 72 hrs). Default to the one that’s most easy to understand (easier to figure out 3 days than to mentally convert 72 hours into 3 days).

16. Avoid jargon whenever possible. If you must use it, define it for your customers, as Verizon Wireless does:

17. Include links to reviews and average customer ratings, like AT&T:

Verizon does a nice job with AJAX hover, showing the breakdown of review attributes:

Some of these recommendations require custom programming that may not be feasible with your current ecommerce platform, but hopefully you can take away at least one idea for improving your comparison matrix.

You may also like these similar posts:

• Optimizing Ecommerce Usability – Product Comparison Matrix
• Canadian Comparison Shopping Roundup
• Merchandising Usability: Better Ways to Display Product Recommendations
• Clearing the Air on Product Pitfalls
• Product Selection and Discovery: What You Can Learn From the Telco Industry

Original post by Linda Bustos

For certain industries and product categories, product comparison matrices are very helpful for customers to make their decision between a small set of products. For example, most consumer software, telecommunications (mobile, telephone, TV and Internet) and consumer electronics sites offer product comparison. Comparison tools are helpful when the purchases are considered, where the customer is likely looking to make a purchase for one product/service only (vs apparel or food where you’re likely to make frequent purchases of the same or similar things). They are also helpful when the products differ greatly in their features and functions.

But comparison matrices are not always designed optimally. The following is a collection of tips for improving the design and usability of your comparison tools.

Category/Search Pages

1. If you’ve built a comparison feature into your category pages, use it in site search results too. You’ll be amazed how many sites don’t do this. A site search results page is essentially a customized category page.

2. Make the maximum number one can compare at one time very clear, rather than camouflaging it.

Clear:

Camouflaged:

3. Have a clear call-to-action to compare next to each checkbox, and make it look like a link (blue text or underlined black). Many sites force you to scroll all the way to the top of a page to hunt for the “Compare” button. Don’t do this to your customers.

Verizon Wireless makes it very clear you can launch the matrix without scrolling up or down:

Radio Shack does a nice job, using the active words “Compare Now”:

Matrix Usability

4. If you load the matrix in a new page rather than a pop up or lightbox, have a clear link back to the category. Consider “Back to [category] or “Compare more [category].”

5. Make the CLOSE link easy to spot.

6. Link to the product detail page (surprisingly, some do not link through).

7. Allow products to be added directly to cart from the comparison.

8. Large thumbnail images are a plus.

9. Allow easy editing (remove or add device). See example above.

10. Allow customers to highlight the differences between phones or plans, like Best Buy:

Another approach is to Hide Similar Features, like Crutchfield:

11. Allow customer to click-to-expand or use a mouseover to expose product attribute details. Make sure, however, it’s very obvious that there is information that can be expanded. In the example below, it’s not intuitive that you can expand the “Technical Specification” for more information.

12. Allow customer to save or print comparison. This is especially helpful when the purchase decision may be made by another person, for example, comparing mobile phone plans and presenting them to a parent.

Offer a call-to-action to call a customer service representative using “Need Help Deciding?” or a similar phrase:

13. Provide a clear link to return to the category/search results at both the top and bottom of the comparison table.

Product Description Content

14. Whenever possible, include product pricing (this may not be possible for some B2B situations where pricing is negotiable or dependent on volume.)

15. When you carry a number of brands and product lines, make sure units of measurement are consistent across manufacturers (example: 3 days standby vs. 72 hrs). Default to the one that’s most easy to understand (easier to figure out 3 days than to mentally convert 72 hours into 3 days).

16. Avoid jargon whenever possible. If you must use it, define it for your customers, as Verizon Wireless does:

17. Include links to reviews and average customer ratings, like AT&T:

Verizon does a nice job with AJAX hover, showing the breakdown of review attributes:

Some of these recommendations require custom programming that may not be feasible with your current ecommerce platform, but hopefully you can take away at least one idea for improving your comparison matrix.

You may also like these similar posts:

• Optimizing Ecommerce Usability – Product Comparison Matrix
• Canadian Comparison Shopping Roundup
• Merchandising Usability: Better Ways to Display Product Recommendations
• Clearing the Air on Product Pitfalls
• Product Selection and Discovery: What You Can Learn From the Telco Industry

Original post by Linda Bustos

This post is contributed by Janis Lanka, who manages front-end development for Elastic Path Software.

A little while back, I wrote on Elastic Path’s Grep Community blog about our decision to change to a two-page checkout process. We piloted this checkout process on the Hockey Canada Store with the main goals being to reduce abandonment and to increase conversion. The results were extremely positive, but we weren’t content to sit on our laurels. So when we started re-working the Official Vancouver 2010 Olympic Store, we challenged ourselves to take it to the next level — and we cut the checkout process down to just single page.

Structurally, the new single-page checkout looks very much like the two-page checkout, with shipping information first, followed by billing and confirmation.

With A/B split testing, 50% of traffic was redirected to the original checkout, while the other 50% was served the new single-page checkout. After only 300 transactions, the winner was clear and we stopped the experiment after 606 transactions. Google Website Optimizer concluded that the single-page checkout outperformed the out-of-the-box checkout by a whopping 21.8%. But what does that 21.8% really mean?

Control: Original, 2-Step Process

(Click to enlarge, will open new page)

Treatment: Single Page Checkout

The option to create an account after checkout is offered after the order is completed:

The Findings

It’s important to keep in mind that GWO only counts goal conversions and does not link to any ecommerce data in Google Analytics. With a few little hacks, we were able to pass on each test group to Advanced Segments on Analytics for both checkout flows and gather valuable ecommerce data:

• Successful completion rate for the entire checkout process increased by 257.26%.
• Overall site conversion rate increased by 0.54%.
• We also observed some unexpected improvements during this experiment, like an increase of 8.54% in the average order value!

While these kinds of numbers are impressive, they should not be used as the sole indicator of how single-page checkout performs. These are the improvements that we observed when changing from the standard four-page checkout to a single-page checkout process on the Vancouver 2010 Olympic Store. Your mileage may vary, depending on your product, target market, et cetera. There’s no silver bullet checkout process that works best for all business models. Doing your own A/B split testing will give you a better idea of what kinds of numbers you can expect.

You may also like these similar posts:

• Checkout Process Split-Testing Tip from Bryan Eisenberg
• PPC Myth Week Pt 1: Organic Search Traffic is More Qualified Than Paid
• Turn Customer Reviews Into Word-Of-Mouth Marketing
• Do Hacker Safe / McAfee Secure Badges Increase Sales?
• Reducing Credit Card Fraud Without Increasing Cart Abandonment

Original post by Linda Bustos

I’m spotting more and more video on ecommerce sites – and many of these are YouTube videos. For example, Ideal Case:

Shoeline.com:

And one of the funniest, Vat19 (yes they sell the 5 lb gummy bear):

Vat19 actually added a video gallery category, you can explore only items with videos.

But have you noticed anything about the above examples?

How about the glaring ad overlay that in some cases links to other retail sites? How about the related videos that distract your customer? Don’t underestimate the power of Youtube to activate CADD (Customer Attention Deficit Disorder)!

Though Youtube is quick and cheap way to include video content on your site, you run the risk of irritating customer with annoying ads, distracting suggested videos and performance issues if Youtube goes down for maintenance. All of this cheapens your brand image and may work against your conversion goals.

Ideal Case and Vat 19 appear to have produced their videos themselves (judging by the video titles and product exclusivity), so my question is why they aren’t using the original, clean videos on their site?

Dylan’s Candy Bar uses another user’s video on its product page for its Time Capsule collection.

In this case, the Youtube video adds whimsical charm to a whimsically charming product that stirs up the feeling of nostalgia. I don’t know how they did it, but somehow Dylan’s Candy Bar managed to embed this Archie comic video without ad overlay and related videos.

Lush leverages its biggest fan, “Allthatglitters21,” on its product pages. Though the video drags on a bit (almost 15 minutes!), you can tell this is an authentic Lush evangelist as she reviews her latest haul.

Though this video originally comes from Allthatglitters21’s Youtube channel, Lush has stripped it of its Youtube skin, making it more clean and professional, avoiding the “cheap” look that a straight embed would. Lush may have reached out to her and obtained the original video file in exchange for free product. Some sites like Blip.tv allow you to download video files directly to your computer.

The takeaway

Youtube carries risks – namely making your site look cheap, annoying or distracting customers. You can mitigate those risks by using your original videos on your site, or asking for the Youtube user’s permission to embed their original video on your site.

You may also like these similar posts:

• Youtube Experimenting With Video Ecommerce
• Adventures in Ecommerce Video: 3 Etailers Share Stories from the Trenches
• Hot Ecommerce Trend: Embedded Video in Email
• Click to Buy Video Providers
• Distilled Clothing Has Innovative Use of Video

Original post by Linda Bustos

Did you catch the ecommerce tip on the Office last night?

Jim Halpert gave the office staff a quick update on business performance, mentioning that customers were using coupon codes online, but they were still having a problem differentiating between the letter ‘O’ and the number ‘0′. (Another tricky one is the number ‘1′ and the lower-case letter ‘l’.)

This is a common problem with coupon codes, especially ones that are a long string of random characters:

Customers will have more success with codes that are more intuitive (GAὔ for 20% off at the Gap, for example), but it’s best to just come up with codes that can’t be confused:

Who knew the writers of the Office were so ecommerce savvy?

You may also like these similar posts:

• How to Grow Your Email List from Your Shopping Cart
• How Much is Your Coupon Code Box Costing You?
• M&Ms and Zazzle Team Up for Valentine Viral
• Convert First Time Visitors With Coupons
• Delivering Successful Ecommerce Projects

Original post by Linda Bustos

I have to admit I’m a big fan of “hover” (or “mouseover”) features in web design. Anything that spares me a click or pop up window wins points with me as a shopper. I’ve spotted several retailers using this effect creatively, beyond the typical image zoom or flyout menu. Here’s a collection of my favorites.

Home Page and Navigation

Home Page Flash

Barnes and Noble augments its home page flash banner with product details and a cart button when you mouse over a product. Often retailers just hyperlink the images, but this saves me from bouncing back and forth. I can decide whether I’m interested pre-click.

Rich Flyout Menus

Flyout menus allow the visitor to expose categories and subcategories without a click, making it easier to locate products quickly and flattening your site architecture (more pages are 1 click away from the home page). They are quite common, but I’ve spotted a few that you might call “rich flyout menus” as they include promotional information or thumbnail images for products. For example:

American Eagle Outfitters shows featured products and sale messaging (above) and Best Kiteboarding shows the a product image that changes as you roll over menu items (below).

Site Search Rich Autocomplete

As mentioned in a previous Get Elastic post, many consumer software sites offer an autocomplete feature that is “rich” with additional images, text and promotional areas. Below is an example from the Apple Store.

Category Pages

Category Previews

There are several ways retailers are using mouseover effects to improve category pages.

One method is a simple image enlargement to detail previews, like Bidz.com and Neiman Marcus:

Other sites use it to show alternative views, product details or both, as Blue Nile:

Land’s End and Brooks Brothers (below) allow you to switch thumbnail colors.

Product Pages

Product Imagery

Many sites employ the mouseover effect to switch colors, product views or zoom…

…but there are more creative things you can do…

Category Exposure on Product Pages

American Eagle Outfitters allows you to navigate the category from a product page without hitting the back button. As shown below, you can “View All Shorts”.

Stock Availability

The Gap shows whether a size or color is available, making it clear over the product image.

Terms and Policies

Need to define features or industry jargon? Check out how Crutchfield does it.

Similarly, Virgin Mobile explains policies without a pop-up.

Add To Cart Error Handling

It’s easy for customers to forget to select a size, color or other option required before adding to the cart. Often retailers will disable the Buy button until properly selected or refresh the page with an error message. Both of these approaches can confuse customers. The best way to handle errors is to show the error message close to the call-to-action, rather than in red letters at the top of the page where it’s less likely to be noticed.

On Anthropologie, if you’ve missed selecting a size or color, you’ll notice right away as you mouse over the Add to Bag button.

Currency Conversion

This site shows you currency conversion values with a hover. You can eyeball them without having to select a currency and wait for a page load.

Cross-sell Preview

Barnes and Noble lets you preview product recommendation prices, details and even lets you add directly to cart.

See more examples like this in Merchandising Usability: A Better Way to Show Product Recommendations.

Checkout

Policies and Instructions

Office Max explains what MaxPerks ID and Tax Exempt ID mean with a mouseover.

roll over to find out what MaxPerks ID and Tax Exempt ID are.

You could also use this to explain policies or provide instructions for finding a CVV code.

This is only scratching the surface. Potentially, anything on-page feature that requires a click or a pop up window could be handled with a mouseover effect for a smoother customer experience and more modern feel to your website.

You may also like these similar posts:

• Merchandising Usability: Better Ways to Display Product Recommendations
• Customer Feedback Inspires Eddie Bauer Redesign
• Navandising: Merchandising in Navigation
• American Eagle Features Products on the Fly
• Trendspotting: Rich Autocomplete in Site Search

Original post by Linda Bustos

1. Show visually where to find item numbers.

2. Provide instructions, but keep them short.

3. Allow customer to add extra input fields, or give instructions on how to add more items than your default form provides.

4. Allow customer to input quantity.

5. Watch your error handling. Make it clear when the item no longer exists and provide a search tool or customer service number.

Eddie Bauer (above) does this well. 1-800-Flowers unfortunately kicks you out of Catalog Quick Order to the home page if you make a mistake or the product no longer exists.

6. Allow customer to request a catalog.

7. If possible, allow customer to select size/color without having to view product page.

8. Ask for “Source Code” for customer matchback analytics.

9. Use cart button best practices (wording and design).

We know cart buttons that fade into the background won’t convert as high as bright, bold buttons:

And wording is important. “Add to cart” assures the customer that the quick order will fast-track to the cart summary. Generally it is advised not to use button text like “Submit,” which has a negative connotation in people’s minds.

“Submit Request” does not imply you will be taken directly to the cart. Submitting a request usually involves a time lag and a person contacting you by phone or email, which catalog quick order is not.

You may also like these similar posts:

• 4 Tips for Order Tracking Usability
• Merchandising Usability: Better Ways to Display Product Recommendations
• In-Store Pickup Tips for Multichannel Retailers
• Tips for Tracking Offline Orders: PPC & Catalog
• 4 Ways To Send a Customer Back to Last Viewed Product

Original post by Linda Bustos

Something I’ve spotted on a few retailers’ sites lately – the showing of offers and other calls to action in AJAX flyout menus:

Moosejaw Mountaineering

American Eagle Outfitters

GNC

Personally, I think this is a great idea. It allows the site to do a form of targeted selling based on the interest/intent of the customer without complicated tools or rules, and gives you the opportunity to present offers without cluttering up category pages. Like rich autocomplete, the injecting something visual into a text menu may be a trend we see pick up in 2010.

You may also like these similar posts:

• Trendspotting: Rich Autocomplete in Site Search
• American Eagle Features Products on the Fly
• SEO Tips for Special Holidays
• Mobile Commerce Usability: Home Pages and Navigation
• Optimizing for Hunters Part 2: Beyond Search and Navigation

Original post by Linda Bustos

Econsultancy recently announced the winners of its 2009 Innovation Awards. You have to “see” the winner in the ecommerce category – Glassesdirect.co.uk

Glasses Direct wins for its use of augmented reality tool that allows you to “try on” glasses virtually, and I have to say it looks pretty good, check it out: (email and RSS subscribers, if you can’t see the video, click here).

Not only do augmented reality tools help customers make a more confident decision (and improve conversion rates), they also reduce returned merchandise by reducing the risk of ordering something that won’t look good in real life.

Rich Relevance has a similar product for apparel called “Fashionista” which it demonstrated at the Shop.org Summit in Las Vegas. There’s no doubt Fashionista is an amazing technology and many of the younger female set will find this fun. But superimposing a 2-Dimensional outfit is not the same as trying on a garment — I don’t think augmented reality for apparel will have the same impact on conversion and return rates.

Augmented reality tools are one more stop in the never-ending quest to make online shopping more like offline, and offline shopping more like online.

You may also like these similar posts:

• Optimizing Ecommerce Usability – Product Comparison Matrix
• Wishlists May Reduce Cart Abandonment
• Web 2.0 and Ecommerce Marketing – Shop.org Session Highlights
• Reducing Size and Color Uncertainty in Product Photos
• Will Wall of Frame Make Social Commerce Hall of Fame?

Original post by Linda Bustos

The following is a guest post by Cynthia Kounaris of FitForCommerce.

You want images of your products on your website? Of course you do. And with digital photography, that should be cheap and simple. Right? Wrong. Product imagery is far from black and white.

There’s a lot to consider before you shoot images for your online store. Do your homework. Learn what the best practices are and ensure that you are following them.

• Label any “call outs” on the image and target them to image details, accordingly.
• Determine the best type of photography for your customer; consider lifestyle, mannequin, model, layout.
• Use real images – not stock photography.
• Have high-resolution, high-quality images that show the details the customer wants to see.
• Ensure that the images displayed accurately depict the product being purchased; describe any differences.

Looking at the Best Practices above (from FitBase), you can immediately see a few things:

• Using images correctly involves your overall site design. You’ll need to understand where to place them, what imaging technology is needed, what browsers work with your imaging technology, download speed, what server capacity is required, etc.
• You need to understand your demographic and your marketing strategy. What images will appeal to your customer? What overall user experience are you looking for?
• It will be expensive (photographer, models, sets, lighting). It is a lot more than sending someone out with a digital camera to do it right.
• You need to pay attention to detail, and that takes time and planning.
• Product images need to accurately reflect your inventory, so your backend must be tightly-coupled with your front end. If you no longer carry that color, don’t show it.

Below are two good examples from two very different types of retailers. Both are high-quality images with a lot of detail and with options to enlarge and/or to view different angles. You can add 360-degree views, zoom, “swatching” and show scale. Of course, all this rich imaging costs you in time and money. The good news is that, if you do it right, you can significantly increase conversions.

Additionally, there is detailed product information available in these examples to give customers further clarity about their purchases. Images and copy need to work hand-in-hand to best display the product and best convey critical information to the customer. The goal is for the customer to feel confident in the purchase and not need to go into the store to physically inspect the product.

The take-away is that this is not a one-day, one-person task. This impacts and is impacted by many different areas of your online business so involve the key people from those different departments. Be sure to select the photographer and the tools that can provide what you need for your website. The copy must be clear and useful and relate to the image. You need to consider your budget, your creative design, your marketing (budget, demographics, strategy) and your inventory.

A picture can be worth a thousand words (and a thousand sales!) so focus on the time, effort, tools and planning needed to do it right.

You may also like these similar posts:

• How Top Retailers Show Product Images
• Product Photography: How To Achieve The Ghost Mannequin Effect
• $95 Landing Page Handbook FREE For Get Elastic Readers
• A Cheeky Way to Put Product Description In Context
• Martin + Osa Launches Shop-By-Outfit + Video

Original post by Linda Bustos

A couple years ago I signed up for accounts at 87 of the top online retailer sites. I figured it was high time we revisited this topic, since most ecommerce sites use account registration and every sign up process I’ve seen has at least one area it can improve on.

Registration Form Usability Tips

1. Always state benefits of signing up in bullet form

Only 14% of retailers in my study were taking advantage of this.

Williams Sonoma is a good example of doing it right:

Here are some suggested benefits:

* Faster check out
* Save multiple shipping locations
* Save multiple billing options
* Exclusive offers
* Order tracking
* View order history
* Faster customer service (reps can pull up customer info quickly)
* Save items to wishlist
* Save items in cart
* Check reward point balances
* Incentives for referring friends
* Birthday and holiday reminders
* Access across partner stores (e.g. GAP, Banana Republic, Old Navy, Piper Lime, Athleta)

2. Link to your privacy policy

Make your privacy policy link clear near the Create Account call-to-action. None of the tested sites leveraged this point-of-action assurance – but I did spot Gap using it:

3. Use asterisks

Using asterisks (*) beside fields that are required is a web convention. Customers usually don’t want to give away more information or fill in more fields than they need to, so this is a nice visual cue to assure them certain fields are optional.

Place your asterisk near the label, not at the far right side of the input field – much easier to scan.

Not this:

But this:

4. Explain password rules

When asking customers to provide an email and password, clearly state the “rules” of the password up front (minimum number of characters, required numeric value etc).

2 years ago, Neiman Marcus didn’t show password rules, but they’ve since fixed this:

In my study, 100% of retailers asked for passwords, but only 89% used a “repeat password” field. It’s a good idea to have one, since it’s easy to make a typing error when you can’t see the characters of your password as you type.

5. Avoid security questions. Instead send a confirmation email with login details.

Nobody remembers those things and according to user testing studies by Jakob Nielsen, customers really, really detest them. 20% of retailers in the study asked these questions. Be one of the 80% who don’t.

6. Allow customer to copy billing address to shipping address

Just like in the checkout, this can save the customer time.

7. Don’t pre-check email opt-ins and don’t send promotions without gaining permission

Welcome emails are fine, and encouraged. Send your welcome email within 24 hours, if possible. The longer you wait, the less relevant your welcome message.

8. Allow customers to tell you their preferences

Using profile data for targeted selling purposes can be very effective. Improving the relevance of your merchandising, email campaigns and promotions can increase customer satisfaction, loyalty and conversion rates.

Disney Shopping is still one of my favorite examples of this:

Want to see the breakdown of my 2007 registration study? Check out this post, and companion post on welcome emails.

You may also like these similar posts:

• Required Registration: Top Etailers’ Favorite Usability Mistake
• Registration Usability – 87 Registration Forms Tested
• Welcome Email Usability Tips for Online Retailers
• Mobile Commerce Usability: Forms and Checkout
• Checkout Inspiration From Top Converting Sites

Original post by Linda Bustos

Tabbed boxes are one of the best ways to fit more content on a page without increasing page length or cluttering the page and they have become more and more popular on ecommerce sites in the past few years – especially on product pages.

But one concern I always have when reviewing websites that use tabbed boxes is – do they really get noticed by customers? Or are they too subtle?

I recently worked with an online retailer that had very poor attachment rates for cross-sells and upsells. The culprit? Product recommendations were hidden behind a tab that nobody clicked.

Here are some examples of tabbed boxes on e-stores:

Home page / navigation

Category page

Product information

Subtle text link tabs can also be overlooked easily:

Sometimes “tabs” don’t even look like tabs (Eddie Bauer uses orange boxes):

These examples are shown in isolation – so it’s easy to notice the tabs. But when you place these elements on a web page that competes with other design elements, the tabs can “hide.”

Did you notice…?

Did you notice the “video” tab as your eye scanned this page?

Checkout / sign in

How many returning customers suffering from “banner blindness” start the sign up process all over again because the returning customer option is “hiding”?

If your site uses tabbed boxes – make sure you know that the benefits of the box outweighs the risks that content and calls to action may be missed. Make sure you’re testing them against expanded versions of your content, tracking clicks on tabs or conducting user tests where you observe customer interactions.

You may also like these similar posts:

• Should You Use Large Images on Category Pages?
• Search Within A Search – Good Idea?
• Amazon Tabs’ Extinction Means Better Customer Experience
• You Gotta Know When To Fold Em
• Optimizing Your E-Store for Last Minute Shoppers

Original post by Linda Bustos