In our article titled “Why ‘Quick View’ Isn't the Best Solution for E-Commerce” we discussed reasons why many ecommerce sites use a “quick view” modal to allow customers to preview the product details and reasons why this technique can be problematic for an ecommerce user experience. In this article, we hope to guide you towards a better solution to increase ecommerce 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.
The Right Product Information on the Product List Page is Critical for Conversion Rate Optimization
In ecommerce 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.
"Poorly selected list item information [was found] to be one of the most severe usability issues related to product list navigation" — Baymard Institute
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.
Product List View Information is a Balancing Act
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 Baymard Institute, testing reveals that a majority of ecommerce sites provide too little information, inconsistent information or images that are too small for customers to evaluate.
Attributes That Allow Customers to Make Informed Selections
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, "UX Research: 3 Key Design Principles for Product Listing Information”, Baymard Institute outlines two groups of attributes that should be included on list view items:
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
4. Ratings (for most)
5. Product Variations (for most)
Category Specific Attributes
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 ecommerce 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.
Key Guidelines to Remember
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 eHouse Studio:
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
Get the Product List Item Usability Benchmark Review
We have reviewed 5 ecommerce 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: Aldo Shoes, Levis, Lamps Plus, Vitamin Shoppe and Walmart.