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.

 

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.

Starting at Home
Imagine walking into a store and there is no directory explaining what is on each floor and no signs leading you to the department you desire. You look around for help and can’t seem to find a customer service representative - is anyone working today?

Navigation in online stores is just as important as it is in real stores; customers need to be able to find what they are looking for and it shouldn’t take them a few laps around the place to figure it out. E-commerce websites are too often thought of as a different beast compared to their brick-and-mortar counterparts. After all, the visual merchandising is 2-d and the customers are not walking through departments, but clicking through.

Try thinking of the homepage as the front door. Just like any store, customers need to know what’s available to them and how to get there. Intuitive design and clear signs can make shopping online natural for the customer, just as natural as walking into a store, picking out a piece of merchandise and bringing it to the register. However, not all e-commerce websites are designed with ease of use in mind.

How shop-able is it? How usable is the e-commerce site?

With such a competitive online market, usability issues with a retail e-commerce website can highly affect its success.

After all, if you walked into the department store with no signs, how long would it take for you walk out?

Here are 6 tips for retail e-commerce usability when it comes to the homepage.

1. Welcome Customers

• Avoid any pop-ups or sign-ins that prevent customers from accessing your homepage immediately. The same goes for requiring Flash or another application that requires installation. What if you had to have a key to get into every store you wanted to browse?
• Make sure that your brand name is clearly established on the front page. The best place for the logo or brand name is the upper left hand corner. Remember this is where you make your first impression!

2. Show Customers What You Offer in an Organized Manner

• Provide clear and easy to read navigational tabs or links that highlight the main departments of the site.
  -The title of each tab/link should be easy to understand and intuitive. This is an area where creativity should be limited because you want customers to be able to know what’s in each section without thinking.
• Make sure to organize the titles or tabs in a natural browse, in other words, don’t make the customer search for the categories or departments.

3. Don’t make customers search for the SEARCH bar

• Place the search bar in the top right area, as this has become a standard placement that customers are familiar with.

4. Be Available

• Customer service phone numbers or email contact information should be easy to find. Customer service numbers are often placed at the top right of the homepage or somewhere close by the shopping cart and customers’ personal information.
• Store locations and other contact information should be kept in one place, ideally in the site map. We’ve found that most users navigate towards the bottom of a retail homepage to find information related to the company in our eye tracking studies.

5. Get Personal

• Offer sign-ups to newsletters and accounts on the homepage. Highlight the area in a different color or place at the top of the page to make sure customers notice the feature is available.
• Customers respond to personalization; make sure you have greetings that can be personalized and suggest products to customers based on previous history (e.g., “Welcome Back, Sabrina!”).

6. Avoid Redundancies - They confuse customers!

• Why not just put everything in the most logical spot with the most logical title one time instead of putting it two places? Redundant text and links confuse users and clutter the page, two things you do not want to do.

Follow our blog for more tips on retail e-commerce usability. After all, we still have the product detail pages, quick look features, and more to cover!