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.
Homepages are the first introduction to a site and the range of products or services sold. Category pages and product listing pages are midlevel pages within an ecommerce site; they introduce product groupings and items within those groupings, respectively. The path to products must be thoughtfully designed to convey differences among various product categories and among individual products, and thus help users locate the item best suited to their needs.
Users who arrive at a site from an external search engine will often land on a category page or a listing page, if they searched for a type of product, rather than a specific product. These intermediate-level pages can have excellent SEO performance, which is one more reason to care about their user experience, besides their importance for within-site navigation.
As part of our recent research across 49 ecommerce sites, we analyzed various aspects of homepages, category pages, and listing pages to derive design guidelines for making these pages easy to use. In this article we present a brief overview of our 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.
While this recommendation may seem straightforward, some of our study participants struggled on homepages that were overly cluttered and failed to showcase items representative of their offerings. 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.
To support the multiple ways people browse through products, a polyhierarchy can improve findability by allowing certain items or subcategories to exist in more than one parent category. When users don’t find what they want where they expect to find it, they assume the site doesn’t offer what they need.
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. The breadth of the site’s inventory often dictated the exact merge of these category pages and listing pages, with some sites (like Target) leaning toward a more-traditional category-landing page with product listings appended to the bottom, and other sites (like Asos) leaning toward presenting a product listing page with subcategory navigation highlighted at the top of the page.
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)
Some sites provided even more information, going above and beyond these basic requirements. Users appreciated this extra information, as it allowed them to gain further knowledge about an item before committing to a new page load.
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
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.
Full Report
The new edition of our full 222-page report on Homepages, Category Pages, Listing Pages, and Product Comparisons with 69 evidence-based UX design guidelines is now available. (This is one of the reports in the new edition of the Ecommerce User Experience series.)
Share this article: