Published on <a href="https://blog.prototypr.io/how-to-optimize-ecommerce-conversion-rates-by-replacing-quick-view-fa75dfd5ac93?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> eHouse Studio <img alt="" src="https://cdn-images-1.medium.com/max/780/0*BKGE6dHQr1c-AYtJ.png">
In our article titled <a href="http://www.ehousestudio.com/blog/ecommerce-quick-view">“Why ‘Quick View’ Isn’t the Best Solution for E-Commerce”</a> we discussed reasons why many e-commerce sites use a “quick view” modal to allow customers to preview the product details and reasons why this technique can be problematic for an e-commerce user experience. In this article, we hope to guide you towards a better solution to increase conversion rates by showing just the right amount of information on product list page (or PLP) items and progressively enhancing on larger devices. We have reviewed a few sample sites solutions which you can download for reference.
<h3>The Right Product Information on the Product List Page is Critical for Conversion Rate Optimization</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/980/0*oWByeADjLUiXbbSD.png">
In e-commerce website design, the PLP serves an important role in the customer’s shopping experience. At this step in the process, customers are evaluating your product line and deciding whether your store offers what they are looking to purchase. The time it takes for a customer to find the right item can mean the difference of their ability to purchase an item and moving on to another task. It is important to use their time wisely by reducing their need to jump frequently between the PLP and the product detail page (PDP) to select the item they want.
<blockquote>“Poorly selected list item information [was found] to be one of the most severe usability issues related to product list navigation” — <a href="https://baymard.com/blog/product-listing-information">Baymard Institute</a></blockquote>
Assuming your store has successfully helped your customer narrow their search to the right category and provided customers with the filtering tools necessary to produce a manageable list of products, a customer is then required to scan as many as a several hundred items to determine which product serves their needs. The more effective this process is for your customer, the more likely they are to find and purchase an item from your store.
<h3>Product List View Information is a Balancing Act</h3>
Ideally, your store uses landing pages and product list filters to narrow the product list to a manageable number of options. From there, customers must scan the list, compare options and choose which ones that are worth investigating further. Providing too much information and it becomes difficult for customers to visually scan the options to see what’s available. Not providing enough information could mean customers will need to click back and forth to the detail view more times than necessary. Striking the right balance is highly dependent upon the product type you are selling. According to the <a href="https://baymard.com/blog/list-item-design-ecommerce">Baymard Institute</a>, testing reveals that a majority of e-commerce sites provide too little information, inconsistent information or images that are too small for customers to evaluate.
<img alt="" src="https://cdn-images-1.medium.com/max/860/0*G0Va-Gd7IdQSPOxb.jpg">Above: The PLP on Best Buy contains a lot of details about each item. While this may be helpful to access each item, on a high resolution laptop, only 3 items are visible within the viewport. Even worse, on mobile, customers can only see a single item within a viewport. This can have a similar effect as the quick view, potentially becoming confused for the product detail page.
Above: The PLP on Best Buy contains a lot of details about each item. While this may be helpful to access each item, on a high resolution laptop, only 3 items are visible within the viewport. Even worse, on mobile, customers can only see a single item within a viewport. This can have a similar affect as the quick view, potentially becoming confused for the product detail page.
<img alt="" src="https://cdn-images-1.medium.com/max/859/0*FR0ySQvAEI2oHz59.jpg">Above: The Product List page for Aldo Shoes suffers from the opposite issue. The product photography is very clean and displays a good number of products within the viewports. However, until customers click on each item, they cannot compare by reviews or see what color variations are available for each. Since the names of the products don’t appear on desktop until hover, it can be difficult to scan for the titles to confirm that two items are in fact the same model in different colors.
<h3>Attributes That Allow Customers to Make Informed Selections</h3>
When customers are reviewing a PLP, their goal is to scan the items as quickly as possible to determine which item best matches their requirements. Presenting just enough attributes to support the customer’s goal, while allowing them to visually focus on the differences between their options is essential in order to reduce ineffective clicks.
In their article, <a href="https://baymard.com/blog/list-item-design-ecommerce">“UX Research: 3 Key Design Principles for Product Listing Information”</a>, Baymard Institute outlines two groups of attributes that should be included on list view items:
<h3>Universal Attributes</h3>
Universal attributes are critical to all product categories. These characteristics must always be displayed. If one is missing for a single item in the product list, customers often dismiss it as not meeting their needs or search criteria. These attributes include:
1. Product title or type
2. Price
3. Image
4. Ratings (for most)
5. Product Variations (for most)
<h3>Category Specific Attributes</h3>
Category-specific attributes vary depending on the type of product. Choosing which attributes to include for a specific category of products is unique for each store. These attributes add a level of detail that needs to be carefully selected as a high priority for customers in choosing the specific product type. In addition, the ability to have a consistent layout of attributes across all products within a store can influence which attributes are displayed and how they are prioritized. For example, a store that only sells only cameras may need to choose their attributes differently than a store that sells cameras, attire, and home goods in order to achieve consistency throughout the site.
Using progressive enhancement allows us to strike the right balance by only displaying what is critical on the default view, and adding key facts as space allows. We recommend showing 1–2 category specific attributes on a desktop hover state to provide an additional layer of detail to assist customers.
1. Visually driven products: For products that are selected based on aesthetics or tactile details, additional images can be crucial in choosing which items suits a customer’s needs. In this case images of an item-in-use context, from a different angle or as a close-up can be very important to customers. However, a ‘cut out’ image is always best as a default, since it allows customers the most consistency and least amount of distractions to compare products on a default list view.
2. Compatibility dependent products: These types of items are typically selected based upon their compatibility with other items. For example a laptop sleeve, chargers for electronics, ink for a specific printer, etc. In this case, listing key facts such as dimensions or items with which the product might be compatible will save customers time investigating. In some cases, additional images that help clarify compatibility can be helpful as well.
3. Recommended Usage: In a case where the customer may not be the end user of a product, providing recommended usage information can be helpful. For example, providing a suitable audience or occasion for a gift can help customers make a selection.
4. Special conditions: Some e-commerce sites that offer products that work in certain conditions, stating these on the list view can be helpful for customers. For example, hiking boots that are used for specific types of terrain or sleeping bags designed for certain climates.
<h3>Key Guidelines to Remember</h3>
Designing a list item display that supports a customer’s ability to select the right item is a unique challenge that requires difficult choices. For this reason, we recommend starting with these guidelines and talking to customers of your store to see what is most important to them when choosing an item on your site. Here is a summary of the guidelines we use at <a href="http://www.ehousestudio.com/">eHouse Studio</a>:
1. List all universal attributes by default (product title/type, price, image, ratings, and variations)
2. Use hover states on desktop to display 1–2 category specific product features
3. Make sure images sizes are sufficient for customers to evaluate the type of product you are selling (but use caution as not to make images too large)
4. Do not distract customers by including repetitive content on each item in the list view
5. Consistently display attributes in the same position on all products to support product comparison
<h3>Get the Product List Item Usability Benchmark Review</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/860/0*ulO7gEHS9FURZ82C.png">
We have reviewed 5 e-commerce sites against the guidelines above to illustrate some opportunities for optimization of list view items. While all of these sites have an overall high-quality shopping experience, even leaders in the industry have opportunities for improvement and need to continuously optimize the experience to maintain customer loyalty in a saturated marketplace. This Product List Benchmark Review includes the following online stores: <a href="https://www.aldoshoes.com/">Aldo Shoes</a>, <a href="http://www.levi.com/">Levis</a>, <a href="http://www.lampsplus.com/">Lamps Plus</a>, <a href="https://www.vitaminshoppe.com/">Vitamin Shoppe</a> and <a href="https://www.walmart.com/">Walmart</a>.
<a href="http://www.ehousestudio.com/ecommerce-benchmark-review-product-list-item">Download the review</a>
Since each e-commerce website has a unique set of products, audience members and business models, one of the first steps of our <a href="http://www.ehousestudio.com/ecommerce">conversion rate optimization services</a> at eHouse Studio, is to do a thorough <a href="http://www.ehousestudio.com/ecommerce-user-experience-competitor-audit">user experience audit</a> to help clients identify conversion improvement opportunities. If you are interested in a UX audit of your store, <a href="http://www.ehousestudio.com/contact">contact us</a>.
<h3>What’s Next</h3>
<a href="http://www.ehousestudio.com/shopify-plus-developer">eHouse studio is a Shopify Plus Agency</a> specializing in e-commerce user experience design. Our next article in this series will focus on achieving the recommendations in this post within Shopify Plus. Sign up for our newsletter and be the first to read about optimizing PLP items in Shopify Plus.
Originally published at <a href="http://www.ehousestudio.com/blog/optimize-ecommerce-conversion-rates-by-replacing-quick-view">http://www.ehousestudio.com/blog/optimize-ecommerce-conversion-rates-by-replacing-quick-view</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fa75dfd5ac93" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-to-optimize-ecommerce-conversion-rates-by-replacing-quick-view-fa75dfd5ac93">How to Optimize eCommerce Conversion Rates by Replacing ‘Quick View’</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Optimize eCommerce Conversion Rates by Replacing ‘Quick View’

Top Stories