For this next installment on retail e-commerce usability, we will focus on the product page. Product pages are virtual descriptions designed to sell an item to a consumer. Since the potential buyer is unable to get their hands on the actual product, it is extremely important to relay as much accurate information as possible on the product page. What colors are available? What are the dimensions? What does the back look like? What are the shipping costs? These types of descriptive questions should be answered on the product page.

But that’s not all. Virtual shopping also entails virtual, “Do you think this will look good on me?,” “What about this one?,” and “Should we get this for Mom’s birthday?” types of questions. These questions are solved through various social tools on the product page that are becoming a standard for retail e-commerce.

This overview on e-commerce usability for the product page will cover the basics and then some. Keep in mind that your target audience and the type of product you are selling effects what the ideal set-up of the product page looks like. For example, luxury websites should not highlight the price in orange or boldly advertise savings deals, but discount sites should. For more information about product page usability specific to your company, feel free to contact us.

Product Page Information and Organization

1. What’s for sale?
To make your product pages easy to digest, it is important to organize the page so that the most important information is easy to find and logically laid out alongside the image of the product for sale. What information do your customers want to see? This partially depends on the type of product for sale, however, there are a few basic details that should also be included on the product page.

• Name of Product – The name of the product should be the title of the page, this not only allows the customer to confirm what they are looking at, but it also allows for easy bookmarking. *It is also extremely helpful to include breadcrumbs at the top of the product page so customers know how they navigated to the specific item they are looking at.
• Price – Customers should never have to search for the price of a product, nor should they ever have a doubt as to which price they will be paying for the product. The most common place for the price is directly beneath the name of the product.
• Product Images – High quality, hi-resolution (300dpi+) images of the product from various angles (front, back, top, bottom, inside, etc.)help the customers feel confident about what the product will look like once they’ve received it. If there are any small details on the product, there should be close-up images or zoom-in capabilities, so the customer is not surprised later.

• 

• Product Description – Descriptions will vary depending on the type of goods, but they should always be thorough and include the basic information about contents, size, weight, place of manufacture, etc. Depending on the type of item there is bound to be more specifications about what’s included in the purchase, available sizes, optional colors, etc.

• 

• Stock Availability – Be up front about available stock to ensure customer satisfaction with the website. Waiting until checkout to tell customers that their desired product won’t be shipping for a few more months usually results in an upset customer who now knows that your site is not frequently updated.

2. Building Trust
Shopping online can be risky, and customers know that things are not always as they appear. How can your website build trust? Online customer reviews can do wonders for online sales, in an earlier report, we teamed up with Relevant View to discover that “in general, 63% of users indicate they are more likely to purchase from a site if it has ratings and reviews. If executed properly, ratings and reviews can boost the confidence in making purchases as well as foster a trusted relationship with site visitors” (Source)

• Customer Reviews = Social Proof - Customers tend to trust other customers and the online shopping world proves that customers are at least interested in what others have to say about a product. Star ratings speak volumes to consumers with just one look, often answering their thoughts, “Is this product really as great as it seems?” “Is this product worth buying?”
• Seeing Stars – Whether you use stars or some other rating system, it should be easy to understand and clearly displayed somewhere within the product description. By providing a place for customer feedback, there is a sense of transparency and openness to the customers that can make the shopping experience more comforting. Not only will the ratings help other customers, but they will provide insights as to what products the customers enjoy or prefer over others.

3. Spread the Word!
Share Options – Give customers the opportunity to share product directly from your e-commerce site with an email share option (at the very least). Depending on what merchandise you are selling and who your audience is, additional sharing options may also be beneficial, such as Facebook, Twitter, Digg, etc.

Required Information – Don’t make the customers jump through hoops to share a product, this feature should be simple and quick! The best “Tell a Friend” email feature will include : sender’s name and email, recipient name and email, optional personalized subject line, optional personalized message, ability to email multiple recipients, ability to share multiple products in one email.

A few more examples…

4. Before the Checkout…
What if the customer needs help? – Customer service numbers and emails, live chats, etc. should be readily available for the shopper in case they have any questions about purchasing a product online. Instead of putting these on a separate “Contact Us” page it is a best practice to keep them on the main frame of the website or include them within the product description area to make it easy for the shopper.

Don’t leave S&H to the end – Advertise special offers on shipping & handling on the main frame of the website or the product page. If there are no special offers, provide a link on the product page that will at least estimate shipping costs for the customers when they enter in their zip code.

If you are interested in finding out more about how to improve retail e-commerce usability for your company, please contact us. In this blog series we are only covering the basics of retail e-commerce, shall we say, the tip of the iceberg.

How can you get your customers to the shopping cart faster?

In an attempt to get users to shop faster, many online retailers have added a “Quick Look” feature that allows customers to remain on the multi-product page while adding an item to their virtual shopping cart. In my opinion, this feature is extremely useful when shopping online and has the potential to increase sales.

Think about it. If users can find out the information they need about a product and add it to their shopping cart whilst remaining on the same page, they:

• can make a quicker decision about whether the product is right for them or not (meaning they can move onto another product faster)
• do not need to wait for the page to load
• do not need to click back in their browser to get back to the multi-product page
• do not lose their place on the multi-product page

However, there a few key rules that need to be followed to ensure that your Quick Look feature is effective.

1. Show it off - Make sure users know that the Quick Look feature is available on your site by simply putting the text at the bottom of each product image or by having the text appear when the customer hovers over the product.
2. Make it More than a Look - To make your Quick Look feature as effective as possible, it should have the following:
   • Item description
   • Item details (e.g., content, place of manufacturer, care instructions , specifications, special features, weight, parts included, etc.)
   • Alternate views of the product including a zoom feature
   • Alternate colors/styles available (Name and image or swatch)
   • Available sizes and inventory status
   • Add to shopping cart option
   • Add to wish list option (if applicable)
   • User rating (if applicable)
   • Sharing options (e.g., Email a friend, Facebook, Twitter, etc.)

   Let’s take a look at the online retailer ModCloth.com for an example of best practices when it comes to the Quick Look feature.

   

   The only thing missing from ModCloth.com’s Quick Look feature is an option to go straight to the shopping cart (See Anthropologie.com example).

   

3. Keep it Quick! - One of the most obvious mistakes that retail e-commerce websites make is bringing users to their shopping cart immediately after they have added an item. Would you want to take the items you shop for to the register one by one? Show customers that their shopping cart has been updated, but don’t force them to go there until they are ready .Don’t waste their precious time!

A different way to quick look…

Now that we have looked at what makes an effective quick look tool, let’s take a quick look at a less conventional quick look feature, that is still effective.

Neiman Marcus has created an elegant quick look tool in their Beta website redesign. Instead of a pop-up that opens on top of products, the quick look information unrolls itself within the browser, revealing additional views, product name, available sizes and colors, and the option to place the item in the customer’s shopping bag.

While there are a few things missing from this quick look feature, it is still a great example of how the quick look pop-up can be aesthetically changed to match the users’ taste (Can you see what’s missing?).

Remember, usability and design go hand in hand! Added features that don’t work only clutter a website and confuse users. Make sure your site is usable. Contact us for more information about our research and testing services.

The web is filled with less-than-ideal retail e-commerce websites that are losing dollars over simple design flaws. This blog series shares tips on retail e-commerce usability, covering how to improve different parts of a retail e-commerce website.

Power Browsing

A customer can walk around a department store and look for a pair of shorts for several hours. Are the shorts all kept in one area? No, they are dispersed among different designers. Are all of the designers in one area? No, they are categorized by targeted age group or price range. Is everything available out on the floor? Of course not! There is a stock room full of merchandise and multiple stores across the country or around the world that might have the pair of shorts in the size and color you are looking for.

Online shopping gives retailers the advantage to let customers find what they want without leaving their chair. That is if the site’s navigation system and design doesn’t hide it from them.

Here are a few tips on how to make browsing on a retail ecommerce site useful.

1. Let Customers Refine their Browse

• After choosing a main category to shop under, it is ideal for a user to be able to refine the selection they have made.
  - The most common way to do this is by including a left navigation that reveals all of the different options the user can check/uncheck, with the items re-populating based on the customer’s selections- A more recent change on retail ecommerce websites is the mega drop-down menu that doesn’t appear until the user clicks on a header category.

2. Let them Sort!

• Offer “Sort By” options in addition to the filters to give the users a chance to explore by price, relevancy, popularity, designer, style, etc.

3. Viewing Options

• All sites should know this by now. Let users choose how many items they want to see on a page at one time. A “View All” option should always be available to users when categories of items have say 200 items or fewer.

4. More than Breadcrumbs

• When you are using filtering systems it is important to clearly display what categories have already been chosen by the user to prevent them from getting lost in their browse.
• A clear path between product pages and the user’s browse (with customized selections/sorts) should always be available (e.g., “Back to Results”)
• Customers should have the option to deselect categories and clear all the selections with one click.

5. Show the Customer’s Progress

• Don’t let customers drown in merchandise - let them know how many pages you are going to show them and where they are at all times (e.g., “Showing 75-95 of 560 items,” “Page 13 of 62″).

6. Back and Forth Action

• Make sure users can add items to their shopping cart and return to where they were in their personalized search.

While there are many more specific attributes you can use to improve your retail e-commerce website’s browsing function, remember that the main goal is keep the customer on the purchase pathway. Always consider how you can make your website easier to shop and easier to use!

For more on usability tips click here, or contact us for more information about our services.