Right?

Of course, we all are. Especially e-commerce sites, whose business often is so completely tied to search engine traffic. Although we usually focus on getting our pages ranked higher, it’s also important to make those listings enticing enough that people want to click on them. Traditionally, we’ve only been able to affect changes in the page title and snippet that appears under the link to our website. But a newer technology known as Rich Snippets allows us to potentially include much more information with our page listings in the SERPs.

Rich Snippets Shown in Google SERPs

The results above show two sites (BestBuy and WalMart) with Rich Snippet data in their listings. BestBuy.com includes the average rating, number of reviews, price, and availability. WalMart’s listing shows price and availability, only. Compare that to the next listing down, a site named B&H Photo Video, who has no Rich Snippet data in Google’s listings.

What Are Rich Snippets? The terms applies to one of several forms of markup for small pieces of text called snippets, that provide valuable information about a web property. For e-commerce sites, this means product name, price, manufacturer, UPC, ISBN, review information, and an image. There are several methods for providing rich snippet markup, but Google is recommending that people use the microdata format outlined by schema.org.

How to Set Up Rich Snippets in Miva Merchant

Not too long ago we set up a couple of customers’ sites with Rich Snippets using the schema.org microdata formatting. We did this by logging into Miva Merchant, going to Pages, finding the Product Display page (code “PROD”) and then clicking the Product Display Layout. (See graphic below.) Make sure you’re using the Advanced Mode where you can edit the HTML directly. (If not, scroll to the bottom and click the “Advanced Mode” link.)

When setting up Rich Snippets, it’s important to work them into the existing page structure. You can’t simply group them in a div on the page that you hide using CSS, because Google states that they won’t use information in hidden divs. Instead, put the snippet HTML within your current page HTML.

The Product Itself

To start, we put a (non-hidden!) div around the entire contents of the Product Display Layout box, by putting this as the very first line:

<div itemscope itemtype="http://schema.org/Product">

and at the bottom simply putting in the corresponding closing tag (</div>). This indicates that the HTML within is being used to describe a product.

The Product Name, Description, and Image

Let’s start with three simple pieces of information – the name of the product, its image, and the product description. Originally we simply had wrapped the name inside of an <h1> tag like this:

<h1>&mvt:product:name;</h1>

In order to specify that the text inside this <h1> tag refers to the name of the product we’re describing, we add an “itemprop” attribute to the tag (short for “item property”), like this:

<h1 itemprop="name">&mvt:product:name;</h1>

This tells Google that the text inside this tag is the name of the product. The image works basically the same way; it’s already on the page and just needs the itemprop attribute added to the tag to turn it into the right format for Rich Snippets. So we started with this:

<img src="/path/to/image.jpg" alt="&mvte:product:name;" />

And ended up with:

<img itemprop="image" src="/path/to/image.jpg" alt="&mvte:product:name;" />

Finally, we did the same thing – adding the itemprop attribute – to the description:

<span>&mvt:product:descrip;</span>

Became:

<span itemprop="description">&mvt:product:descrip;</span>

Breadcrumbs

Next we tackled the breadcrumbs for the product – the links at the top of a page that show the product’s position within the site hierarchy (such as Home > Apparel > Women’s > Shirts). This is a little more complex because there are multiple pieces of code being changed. Originally the code looked like this:

<div id="breadcrumbs">
	<mvt:foreach iterator="path" array="breadcrumbs:trails">
		<a href="&mvt:global:basedomain;">Home</a>
		<mvt:foreach iterator="atrail" array="path:trail">
			&raquo; <a href="&mvt:global:basedomain;/&mvt:atrail:code;.html">&mvt:atrail:name;</a>
		</mvt:foreach>
		<br />
	</mvt:foreach>
</div>

After adding the code for the Rich Snippets, this section now becomes:

<div id="breadcrumbs">
	<mvt:foreach iterator="path" array="breadcrumbs:trails">
		<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a href="&mvt:global:basedomain;" itemprop="url">
				<span itemprop="title">Home</span>
			</a>
		</span>
		<mvt:foreach iterator="atrail" array="path:trail">
			&raquo;
			<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
				<a href="&mvt:global:basedomain;/&mvt:atrail:code;.html" itemprop="url">
					<span itemprop="title">&mvt:atrail:name;</span>
				</a>
			</span>
		</mvt:foreach>
		<br />
	</mvt:foreach>
</div>

Each entry (“crumb”) in the breadcrumbs needs to be wrapped inside a <span> tag identifying it as a breadcrumb. The opening span tag looks like this:

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

We also have to add an itemprop attribute with the value “url” to the anchor tag (<a>) and a span with the itemprop of “title” around the link text.

How to Use Hidden Data – The Model Information

Next, we wanted to list the contents of our custom product field with the code “MPN” as the “model” snippet. Unfortunately, the MPN isn’t displayed visually to the customer on the product detail screen. Google says we shouldn’t put the information inside hidden <div> tags. This is where the <meta> tag comes in handy – it’s for providing data via Rich Snippets that we don’t use on the page itself:

<meta itemprop="model" content="&mvt:product:customfield_values:customfields:MPN;" />

Here, we specify a <meta> tag inside our product description, give it an itemprop attribute with the value “model”, and in the content we print out the text stored in our custom product field with the code “MPN”. This tag isn’t displayed at all in the browser, but it provides the necessary information to Google about the model number of the product.

Pricing Information – The Offer

An offer is the overall pricing information regarding the product that you’re selling. We wrapped the entire set of pricing HTML/SMT code within a div that indicates the offer. This <div> tag went around our pricing information that was already in place. The site uses a custom product field to display the product’s regular price if it’s on sale. So the final code for the offer becomes:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
	<mvt:if expr="l.settings:product:customfield_values:customfields:regularprice GT 0">
		<span id="prodsaleprice">SALE <span itemprop="price">&mvt:product:formatted_price;</span> </span> 
		<span id="prodregprice">reg. $&mvt:product:customfield_values:customfields:regularprice;</span><br />
	<mvt:else>
		<span id="prodpricelabel">Price</span> <span id="prodprice"><span itemprop="price">&mvt:product:formatted_price;</span></span><br />
	</mvt:if>
	<meta itemprop="availability" content="in_stock" />
	<meta itemprop="priceCurrency" content="USD" />
</div>

On lines 1 and 9, we’ve added the <div> tag that indicates that this is the offer information. Inside both the “if” and “else” clauses where we’re checking for a value in the “regularprice” custom product field, we’ve added itemprop=”price” to show that this is the price. This element can include the currency symbol. We didn’t add anything to the “regular price” display because we don’t want to feed that through to Google as part of our Rich Snippets.

The other two pieces of information we need to provide are the item’s availability and the currency code, which are both parts part of the offer. We use the <meta> tag described earlier to include this information, because it doesn’t normally show on the page itself.

So that’s a brief introduction on how to set up Rich Snippets using Schema.org markup on your Miva Merchant store.

Stay tuned for Part 2 of this post which will go through ratings and reviews for products on an e-commerce site, as well as testing and notifying Google of your changes.

Image via Wikipedia

Well, readers, how many of you do I have left? I just got home from teaching a Zumba class, and patting myself on the back for accomplishing one of my New Year’s resolutions for last year, while at the same time knowing my plans to write the first post that has been published here since August 2011. Sheesh! Well, it’s a new year and time for new commitments, but also for looking back at last year to see what was accomplished.

I wrote my list of resolutions on this blog last year as a way to keep myself accountable, and since most of them pertained to my e-commerce businesses it seemed appropriate. But how many did I accomplish? Here’s a shortened version of the list:

Business

1. Increase market understanding of AccurateTax: I can’t say that I really did a lot to increase media exposure to AccurateTax, but we did run some good advertising campaigns to bring in new business. 2012 has a lot in store with the proposed upcoming Main Street Fairness Act.
2. Rework Click2Customer website: Talk about your last minute resolution-fulfillment! Last week we launched a brand new version of the Click2Customer website, with a new design and much better descriptions of what the service does. I just made it! This year, I want to increase our exposure of the product. We’ll be attending the Miva Merchant conference and maybe the Magento one too with the hopes of getting new customers to try the product.
3. Update the FeedExact website with current list of comparison shopping engines supported: Check. This one was easy!
4. Increase customer self-service options with better documentation (and possibly customer forums) across all three products: We accomplished some of this – my partner Pete made some great Click-2-Customer videos which we’re putting online at YouTube. We’re still toying with the idea of forums…
5. Do regular email marketing for NetBlazon: Yeah, right? Let’s put this one on the list for 2012!
6. Document and release already-completed modules for Miva Merchant 5: Sometimes resolutions change. We did get documentation online for those we’d released, but we took a break from adding any new modules. This isn’t our focus right now and we didn’t want to take away from the other things we wanted to work on. Tabled.
7. Increase the frequency of DoublePlus posts to at least 2 per week: Did you notice how well I did on this for about 7 months? Woot! And then I let it fall off. Sometimes I have to wear too many hats, but this one is going back on my head for 2012.
8. Explore ways to increase readership and subscribers, through things like popups, giveaways, contests: I’m torn between maintaining professionalism and getting more people over here, but I decided to err on the side of caution for now and forego the kitsch. I was lucky to get listed on Alltop, but not keeping the site updated made it fall off. I’m very disappointed with myself for that.
9. Interact and socialize more through guest-posting and social media: I did a little guest posting and quite a bit of social media. Speaking of that, have you liked our Facebook page yet?
10. Stop procrastinating!: YES YES YES! This one almost makes up for the Alltop delisting. My books are up-to-date, most of my client work is as well, and my overall stress level has decreased as a result.

Personal

Just a quick follow-up on these – yes, I am now a certified Zumba instructor, with additional licenses for Zumba Toning and Zumbatomic, the kids program. I taught at a local elementary school this past fall, and I currently teach one class a week at a local fitness studio. Zumba gives me something to do away from the computer, which I need for balance. And I did take the Jeopardy! online quiz, but Alex has yet to call. I’ll be trying again in January.

Please please stick around for 2012. I really appreciate all of you who are still here reading. May 2012 be the best year yet for all of us!

–Susan

IDWholesaler sells lanyards themselves, including custom lanyards that can be imprinted with a company logo. So it’s important to their business to rank on various keyword phrases that include the word “lanyard”. Instead of trying to promote their products directly, however, they turned to the community of artists and craftspeople who make beautiful jewelry-inspired lanyards. The popularity of this art is easily seen in online communities and on stores like Etsy.com where you can find beautiful, one-of-a-kind lanyards for ID badges or other purposes (like holding eyeglasses around your neck). IDWholesaler engaged these artists with a unique contest.

Lanyard Contest Sub-site

The engagement point for the contest was a special subsection of their website devoted to the lanyard contest. These pages informed contestants of the rules of the contest and its prizes, and allowed visitors to vote on their favorite submissions. It also encouraged visitors to follow the design contest on Facebook and Twitter, and to share a keyword-rich link using the AddThis widget. Every artist who submitted an entry was given a “badge” to include on their own website with optimized keyword text links back to IDWholesaler.com.

Lanyard Contest Facebook Page

Of course, many crafters love to blog and participate in online forums as well, so the contest spread like wildfire, with the participants blogging about their progress and sharing the contest with fellow artisans. In the end, IDWholesaler received 70 entries and over 3600 votes. But the whopper numbers are the SEO-related ones – they received an 8% increase in inbound links, and a 43% lift in non-paid traffic related to the term “lanyard”.

So for those of you looking for creative ways to spread the word about less-then-exciting products, think outside the box like IDWholesaler did in this contest.

Special thanks to Kate at IDWholesaler.com for bring sharing the results of this campaign with us!

Customer Service Emails

As e-commerce businesses, we have a variety of reasons to email our customers. These emails include order confirmations, shipping notifications, customer service response emails, marketing emails, and much more. In this post, I want to focus primarily on customer service emails. Shoppers have come to expect the human touch almost as much online as they do when they visit a store in person at their local mall. <!–more–>Given this expectation, let’s discuss how you can optimize customer service emails to create a stronger relationship with your customers.

Email Addresses

When you contact a customer via email, what email address do you use? Have you considered the impressions that you give simply based on your email address? In my opinion, the following is a best-to-worst ordered list of email addresses used by e-commerce companies.

• susan@mystore.com – Using the name of a person, whether it’s a customer service rep of a major brand or the owner of a part-time hobby business, gives customers the impression that there’s a dedicated person willing to help them complete a purchase and support them after the sale. You can use full names or, for privacy purposes, shorten it to first names or first-name-and-last-initial. This kind of email address allows customers to create a mental image of the person behind the keyboard, and is the best way to create a relationship between the customer and your store.
• customerservice@mystore.com – Any variation on support or service indicates that you at least have a dedicated email account for helping customers with any issues they may have. It might be monitored by one person or many, but there’s the idea of a dedicated department willing to handle the customer’s questions or problems.
• sales@mystore.com – This is my least favorite kind of email address – another variation is orders@mystore.com. This gives customers the impression that the store’s main focus is on income and sales. And of course it is, otherwise you wouldn’t be in business – but a customer wants to feel like THEIR business, and therefore their experience, is your primary objective. Not your overall profit and loss statement.

Email Content

The obvious goal your customer service email should have is to answer the customer’s question or address their issue. Beyond that, you can do much more to strengthen the sense of a relationship that your customer perceives by doing the following:

1. First of all, address all responses with the customer’s name, just like you do on formal correspondence. Your policy might be to use the customer’s first name, or to address a customer as Mr. or Ms. Lastname, but be consistent.
2. Restate their question or concern in your own words, so that it’s clear that you have read their email and aren’t an automated software bot guessing at an answer.
3. Then offer the solution or answer.
4. Finally, sign your name and let the customer know they can respond to the email to contact the same person again. Even better, offer a direct phone number or extension they can use if they would like to continue the discussion by phone.

If the response leads to a sale, provide the “wow factor” by having the CSR sign his or her name and a short “thank you” on the packing slip or as an insert in the box.

Is a Helpdesk OK?

What if your communications require a CRM or helpdesk type of solution?

That’s understandable. Even if customers can tell the email comes from a piece of software, it’s  still better than no response at all! If your volume of correspondence requires this kind of software, just make sure to optimize your emails and CSR accounts to keep them as personalized as possible. And if you use canned responses, at least make sure to sign them with a real person’s name.

Image by Getty Images via @daylife

I was watching an old rerun of “The Big Bang Theory” Friday night, where Sheldon described himself as being a person of infinite patience, having once waited for two-and-a-half hours on the customer support line with Hewlitt Packard just to complain about their customer support. That’s our collective voice in a nutshell.

As social media has continued to grow, the venues people have for making their voices heard is much wider than before. And people like to complain about bad customer service. Personally, I’ve made myself a nuisance a couple of times. Once was on Facebook, after RueLaLa.com sent me the wrong pair of sunglasses and refused to give me credit for them. So I let their community know what had happened via their Facebook page wall. I ended up with a refund and a $10 credit…but I’ve placed three more orders with them since then.

Operating System Not Found?

Last week I posted a picture on TwitPic.com showing my laptop, black screen and big white typewriter letters reading “Operating System Not Found”. I tagged it #DellFail. I later got an @-reply back from Dell’s customer service team asking me to call in. (The fact that I’m not going to has to do with previous bad customer service experiences with that company.)

So all this isn’t to show how nit-pickingly annoying I can be as a customer. But I wanted to point out how a single failure to make someone happy can cost your business credibility. The problem is that good experiences don’t get shared nearly as often. In fact, you have to make excellent customer service a cornerstone of your business, like Zappos does, in order to get noticed for it.

Does this mean you have to go to Zappos’ lengths and offer 365-day returns and free return shipping? No. Most stores can’t afford that. It does mean the following.

1. Your customer service team needs to be NICE. Professional, helpful, and courteous.

2. If a customer request is outside your policies, explain that to them and if at all possible, offer an alternative solution. Even better, if the request isn’t unreasonable, go ahead and let it slide.

3. Be available during business hours by phone, email, and on-site chat. Nothing irritates people more than answering machines and “no one available” chat status messages. (OK, maybe overseas call centers and a static-y connection.)

4. Ask customers to tell their friends if they’ve had exceptional service from your store. It’s ok to beg a little!

5. Try to let the bad experiences become water under the bridge. Some people cannot be satisfied. When you get one of those, don’t get irritated and let it affect your feelings with other customers. Keep your standards up.

What challenges have you faced when dealing with customer service issues? Tell your stories in the comments below.

Data feeds are an integral part of marketing an ecommerce site. A data feed is nothing more than a list of your products, along with certain product details, in a structured format. The details included in the file depend on your site needs and the requirements of the partner to whom you’re submitting your data. The same is true of the data structure – some partners may want a tab-delimited text file (where there’s a tab character between each piece of data), while others may require XML.

Data feeds are used in a number of ways. Internally you may wish to use datafeeds to share product information across multiple systems or different websites. External to your company, you can use data feeds to share product information with comparison shopping engines, affiliate programs, and online marketplaces.

Where Can You Market Using Your Data Feed?

1. Comparison Shopping Engines – I discussed comparison shopping engines in my last post, but for convenience I’ll describe them again here. These are sites such as PriceGrabber.com or Nextag.com where consumers can search or browse for specific products and then compare prices (including shipping and sales tax) as well as reviews of different stores that sell those products.

2. Affiliate Programs – An affiliate program is where you provide product data, creative banners, or both to other marketers, who then advertise your store in exchange for a commission on given sales. This is called a Pay-Per-Sale affiliate program because the affiliate earns their commission whenever a sale is made at your store. (There are also Pay-Per-Click and Pay-Per-Lead programs, but these are much less common for e-commerce stores than Pay-Per-Sale.) Some merchants run their own affiliate program, but many use networks such as ShareASale or Commission Junction.

3. Online Marketplaces – The best-known example of an online marketplace is Amazon, where third-party retailers can advertise AND sell their products directly on Amazon’s website. Amazon handles the transaction, collects the money from the customer, takes a commission, and then pays you the balance. Traffic is not sent to your online store in this method. Other larger retailers have begun exploring marketplaces, including Wal-Mart and Sears. The other popular pure-play Internet online marketplace is Shop.com.

Best Practices for Product Data Feeds

There are several things to focus on getting right when marketing your products by a data feed.

1. Product Descriptions: The most important, assuming you’re hand-writing your own product descriptions is to not use your optimized product copy anywhere other than your own site. Keep some canned copy in a separate field in your store’s database for use in distributing to other websites. That way Google doesn’t have a chance of indexing their pages higher than yours for your optimized descriptions.

2. Keywords: Add any major search terms in your product name, including the brand, if possible. Different websites use different fields when searching, but all of them allow searching on the product name.

3. Product Identifiers: Include major product identifiers so that your product gets grouped with the same product from other sites. This includes, if available, the manufacturer/brand, the manufacturer part number, and the UPC (or EAN or similar international codes). Google Product Feed now requires at least two of these three fields. Also make sure they are right! Wrong UPC codes can cause extreme problems on Amazon, in particular.

4. Categorization: Categorize your products as best you can on each shopping engine. This drives more traffic from shoppers who are browsing, rather than searching for a specific product.

5. Keep it Fresh: At a minimum, update your feeds every 30 days or whenever you add or remove products. If you track online inventory, update it as often as is convenient, and don’t include out-of-stock products unless you accept backorders. That way you don’t pay click fees for products you can’t sell.

6. Track Your Links: Tag your links for each channel so that your analytics packages can tell you what shopping engines and which products are doing the best job of converting clicks into sales. Feed management software such as our FeedExact tool will provide you with this data without the need to manually tag your own links.

Comparison Shopping Engines

Comparison Shopping Engines, or CSEs, have grown in popularity and number over the past decade. They represent a large marketing opportunity for online merchants. These sites take submitted product data feeds from many merchants, match up the products offered by each store, and allow customers to compare prices across the various stores. In addition to comparing base prices, often customers can also enter their shipping address and then compare the total price including shipping and sales tax.

In exchange for sending targeted traffic to a merchant’s website, the merchant pays certain fees to the CSE. There may be a flat cost-per-click depending on the category of items you sell. Other CSEs having a bidding tool that lets merchants choose how much they are willing to pay for each click, and they rank merchants based on their bids, highest to lowest.

For many shoppers, Comparison Shopping Engines are the first place they visit to check prices. Given our current economic situation, bargain hunting is becoming more and more prevalent, especially online – where people can compare prices without spending any money in gas. For this reason alone, CSEs now drive 15% of online sales (source Practical Ecommerce).

Value-Added Services

CSEs also provide retailers with additional value-added services. The most common example is customer reviews submitted by people who complete an order at a given store. These reviews including a rating (usually 1 star for the lowest rating, and 5 stars for the highest) and a textual review where customers describe their shopping experience with the store. In addition to comparing prices, shoppers can also compare the overall store ratings that previous customers have provided. Individual reviews allow shoppers to see what other customers liked or hated about a particular store, for instance, the customer service was great but the shipping rates were too high.

Conversion analytics are often provided by CSEs to merchants who use them, via a bit of JavaScript that is included on the conversion or receipt page. This helps merchants determine their ROI (return on investment) for the money that they spend with the CSEs.

Getting Start with CSEs

If you’re looking to get started with comparison shopping engines, take a look at the biggest ones on the market:

• Google Shopping
• NexTag
• Pricegrabber
• Shopzilla
• Shopping.com

Beginners may also want to focus on free CSEs, including Google Shopping, Bing Shopping, and TheFind.com.

The Benefits

Engaging Customers

Videos engage customers by giving them something new to “do” on your website. People are different – some (like me) prefer to read text and look at pictures, but others like the more real-world feel of a video that shows people using or demonstrating the product. Zappos.com is one of my favorite sites because of the way they accomplish this well. The videos are simple, with an employee demonstrating the features of the product (shot against a white wall background), but they are very engaging because they get to the point. Take a look at almost any product on the site, such as this Tyler Rodan bag, and click the “LARGER IMAGE & ADDITIONAL VIEWS” link to see the product video.

Driving Customers from New Channels

Videos can also be distributed to other channels on the web and used to drive new customers. Creating a YouTube channel for your videos will help define your brand, and as your channel gains subscribers, you’ll get more visibility to your channel and eventually to your own website. Facebook is another great place to publish videos, especially if you already have a fan page. Facebook makes it easy to upload videos from your computer in both regular and HD formats.

The SEO Benefit

How are videos good for SEO? The main reason is that they lower your bounce rate and increase the time a visitor spends on your website. If Google notices someone search for “widgets”, click to your site, and immediate come back to “Google” and search again for “widgets”, it contributes to LOWERING your site’s ability to rank well for the term “widgets”. A video entices the visitor to spend more time on your site. So even if they do leave without seeing another page, they don’t do it quite so quickly.

The Content

One of the challenges you might face is what to shoot a video about.

Product Demonstrations

We’ve already discussed how Zappos uses videos to demonstrate the features of its products. SimplyPiste is another example of a company filming a person showing the features of the products. Another example is Fat Brain Toys, who includes both a product demonstration and a ABC News coverage video for their product Reptangles.

Company Culture

OK, not to beat a dead horse or anything, but Zappos also has a great YouTube channel where, instead of product videos, they show humorous videos that bring their unique corporate culture to the eyes of millions. Titles range from “FUNNY JUSTIN BIEBER PARODY!!!” to “Beard Gang!!! VERY FUNNY!”. But in addition to the funny videos, they also have clips from the Rachael Ray show and CBS Sunday Morning when they had coverage of Zappos.

Wacky and Weird

BlendTec is infamous for the way it has driven traffic to its store from a second website called Will It Blend? BlendTec bought a domain name and a bunch of stuff you don’t normally put into a blender, and created videos of employees testing whether these items could be blended in a BlendTec blender. They’ve blended everything from the dreaded Vuvuzela to an (at the time) hard-to-get iPad. The videos are crazy and entertaining, and BlendTec has gotten a ton of press coverage for their antics.

Great product images are a major key to success for any e-commerce store. A website has to do its best to replace a customer’s ability to see and touch the physical items like they would at the store.

Many manufacturers will provide high-quality images, suitable for us in a product catalog. These can be easily resized in suitable image editing software, such as Adobe Photoshop, to provide multiple sizes for regular and zoom images. However, your site may benefit from professional and unique photographs of the items you carry.

Consider the website Mad Cat Toys, which sells collectible and retro toys suitable for collectors as well as children. The site has won several prestigious design awards, and one of the reasons for its appeal is the uniform look of the product photography. The products are photographed on a white background with a subtle shadow that gives the item dimension. If this site were to use stock images from various manufactures, the effect would be much more hodge-podge than it has now.

Even if you use stock images, though, there are several ways you can use product photography to entice customers to place an order.

1. Show Large, Detailed Images

Most site designs don’t allow for large, detailed images, even on the product detail pages.

However, larger images give customers the ability to see texture and fine details they might miss otherwise. They keep customers from having to guess about certain details of the product. There are several great ways to display larger images to customers. The oldest, simplest way is to open a larger image in a popup window. However, this doesn’t have the flair of modern websites, and has usability problems with pop-up blockers.

The lightbox method is popular now too, especially for sites already running jQuery or Prototype libraries. A lightbox opens in a div element on the same page, usually dimming out the contents of the actual page behind the image. One library I particular like is called ColorBox, a jQuery plug-in. If you don’t know what a lightbox is, take a look at the examples on the ColorBox website. Chances are, you’ve seen a lightbox in use on many sites.

Another method is to use a rollover zoom. If I recall correctly, I first saw this on the Rue La La website, one of my favorite daily distractions (and why you can’t usually reach me on the phone at 11:15am!)  I usually use the MagicZoomPlus script to set this up, and if you visit their site you can see the many different ways this can be implemented. The concept is that the zoomed image opens in a div element that lies on top of other content of the page, but is small enough so that it only shows a bit of the zoomed image at any given time. As you move your mouse over the regularly-sized image, the zoomed image moves around inside its box.

2. Alternate Product Images

Multiple images are also useful. Consider the following ways that multiple product images help the buying decision:

• Show the product from different angles
• Show details of the product, such as the contents of a boxed item or the label on designer clothing (you’ll often see this on Ebay)
• Show an item of clothing or footwear on a model
• Display the item in use, such as a piece of sports equipment being used in a game

Multiple images are most commonly seen on the product detail page. The screenshot below is from Zappos, which not only shows several images, but also incorporates a video.

However, Lands End does a terrific job of using mouseovers to show the back of an item of apparel when rolling over the product image. In this screenshot, t7The normal view shows the front of each swimsuit, but when you mouseover a product it changes to show the back of the swimsuit.

In the real world, a picture is worth a thousand words, but on an e-commerce site, a picture could be worth a thousand dollars.

What other creative uses of product photography have you seen? Let me know in the comments below.

The problem is that we’re so close to our own stores, or those we develop for regularly, that sometimes we get to used to taking certain steps to think about what someone might do when visiting for the first time. We take all the steps an expert customer would take, instead of looking at the site with a fresh pair of eyes.

What happens when you make a new change to your store? You test it, right? You browse to a product and then:

1. select the options (size and color, perhaps)
2. put the product in your cart
3. go to checkout
4. enter your real address, phone number, and email
5. choose a valid shipping method
6. enter valid payment details
7. process your order

Something along those lines? Do you think that’s what your customer does? Probably not…at least not the idiots! You should test-shop your store as if you’re an idiot. (You might also get one of your ditzier friends to shop and look over his or her shoulder!)

Product Pages

Go to your product pages, and try putting the product into your shopping cart without selecting the required attributes, such as color and size. Do you see a helpful error message, or just an error? Or does it go into the cart just fine, leaving your customer service reps to try to contact the customer to see which color and size she needed?

If there are quantity limits – a maximum, minimum, or a certain multiple that the product must be ordered in, can your shopping cart handle that? Test putting in invalid quantities and see what happens.

Even after you successfully put a product into your shopping cart, do you know what to do? If you’re taken to the shopping cart, is it easy to get back to where you were, preferably in a single click? If you stay on the product or category pages, is there a message saying that the item was successfully added? Don’t expect your idiots to keep an eye on your perpetual “mini-cart” to notice that the item was added.

View Cart Page

First of all, make sure a few things are true on your cart page:

1. Customers can click the product name or image (or both) to go back to the product and check the details again
2. Customers can remove products from their shopping cart
3. Customers can change the quantity of the product being purchased

Assuming these are all true, make sure that the links back to the product pages work properly; it’s an easy thing to overlook. Remove some products from your cart and make sure this functions properly. Change the quantity – and try invalid numbers like zero or a negative value – and make sure the error messages are user friendly.

Checking Out

The checkout process is really where things get complicated. First of all, enter as many invalid address combinations that you can think of. Start with your own address, but change the state so that it doesn’t match the zipcode. Then go further into checkout and see if you can get shipping rates. If not, is there an error message telling the user to double-check that they’ve entered a valid shipping address? Even better, try adding an address validator to your website to scrub addresses right after the customer enters them.

Review your shipping methods – can international customers select domestic shipping methods to get cheaper shipping? If so, you might be losing money and not noticing it. If you offer free pricing within a certain area, are other customers able to see that? Do you have any reminders (“Your Order Qualifies for Free Shipping!”) that are shown to everyone instead of being limited to only those customers who can take advantage of it?

On to the payment processing – what happens if the customer enters a bogus credit card number? What if they enter a test number, such as 4111-1111-1111-1111 for Visa? Do they see an error message if the card is expired? Does the shopping cart force them to enter their CVV code (if you want them to)?

Finally, go all the way to the receipt page after having entered an improperly-formatted email address (such as “someone@yahoo” – notice the lack of “.com” at the end). Are there any ugly error messages that pop up?

Really, no matter how much you fix things, you’ll eventually get the idiot who calls your service center and asks where the “any” key is. But hitting the majority of problems will save your customers – and your employees – a lot of headaches.