Summary: Streamline users’ path to products by providing clear, differentiating product information at all levels — from the homepage to product listing pages.

To purchase products online, people need to understand what an ecommerce website sells and find an item they are interested in. Some may search for a product if they know precisely what they want, but many more rely on browsing to discover what products are available and which best suit their needs. Usable homepages, category pages, and listing pages are critical to the browsing experience.

Visitors can start their journey on the website at any point.

• It could be a homepage if they know the URL or if they searched for a brand name
• Or a category page if they searched for a type of a product rather than a specific product
• It could be a product page if they searched for something very specific

As part of a recent research across 49 ecommerce sites, Nielsen Norman Group analyzed various aspects of homepages, category pages, and listing pages to derive design guidelines for making these pages easy to use. The article presents a brief overview of the recommendations.

Welcoming, Informative Homepage

Not all shoppers enter a site through the homepage, but, for those who do, the homepage should effectively introduce the site and explain what it sells and how it is different from competitors. Your homepage must communicate who you are, and, for ecommerce, should expose the main product offerings and enable users to start shopping.

Too cluttered, without showing what items were sold on the site.

The homepage is to a website what a front-window display is to a physical store: the more items crammed into the window, the lower the overall perceived value (more clutter often means lower quality). And those items in the window better be a good representation of what’s available inside the store, if you want to capture all potential customers.

Clear Product Organization

Navigational options and product categories need to be clear, with labels that make sense to users on their own, as well as in relation to other options on the site. Users must be able to quickly understand each category, and how it differs from the others in order to decide where to click. When space allows, leverage the main navigation bar to show users what product categories are available, rather than merely lumping everything together under a single, easy-to-overlook Shop link.

The REI site had clear navigational categories that made it easy for users to find what they were looking for. The polyhierarchy allowed some users to find hiking clothes under Camp & Hike, while others browsed to the Men or Women categories and then shopped by activity.

Promote Subcategories While Exposing Product Listings

This latest round of research found that, compared to the past, fewer sites provide traditional category pages as interim pages before presenting individual products. In an effort to reduce the number of pages that users must click through, many sites now have replaced or augmented category-landing pages with lists of products plus options for users to use filters or facets to narrow them down.

The most successful mergers of category and listing pages were those that highlighted available subcategories separately from other filters, most often above the product listings. This practice increased the discoverability of the subcategories and encouraged users to navigate to a more specific group of products to reduce the number of items listed and avoid choice overload.

Target.com: The top part of the Kitchen & Dining section looked like a traditional category-landing page, with links to available subcategories; the bottom part displayed individual product listings to allow immediate access to items and minimize the number of clicks.

Differentiating Product Information

Another trend seen in this latest research is an increased amount of product information on product listing pages. As long as the information is well-curated and uncluttered, this trend allows users to make informed decisions about products without visiting each detail page. Especially on mobile browsers, where every click counts if the internet connection is weak and opening multiple tabs to compare items is more cumbersome than on desktop, users expect product listings to provide enough differentiating information so they can fully understand whether an item is worth a click.

Helpful differentiating information for each product listing should include, at a minimum:

• Concise names that contain important and meaningful product characteristics
• Photos large enough to identify a known item and show differences between items
• Indication of other available colors, styles, or options
• Price (while this latest research focused on B2C ecommerce sites, our earlier studies show that lack of prices is a huge usability problem on B2B sites)

Additional product information that can be helpful to users includes:

• Customer ratings
• Icons or similar indications to mark items as popular, new, on sale, and so on
• Availability information (in stock, or available in a nearby physical store; sizes that are available if applicable)
• Link to a quick-view tool to view a brief product description and other details without loading a new page
• Alternate product images available via hover or by clicking through a carousel

Product listings on Sears included detailed names, large photos, alternate color swatches, price, customer ratings and information about the delivery window.

Conclusion

People who browse ecommerce websites need to get a clear understanding of the options available to them, with a minimum expense of time or effort.

A good presentation of the breadth of products available both on the homepage and within the category pages, as well as clear, descriptive product listings can go a long way towards improving the usability of ecommerce sites.

Some of the new trends in category pages and product listings are positive developments inspired by mobile and responsive designs; they minimize the number of clicks and allow users to make informed selections sooner in the shopping process than in the past.

UX Guidelines for Ecommerce Homepages, Category Pages, and Product Listing Pages

PS. Too often, I’m missing a “Sort by popularity” filter on category or product listing pages. If I’m looking for something simple, I want to know what people usually buy. This option is often simply not there. Without it, especially if there are no reviews, I don’t know what’s popular and/or good and I leave, not wanting to risk something of low quality.