Pretty recently, we were wondering how to improve product pages in E-Commerce. Previously, we described patterns that are worth considering in the process of designing an online store.
Today we'll discuss the problem of optimizing the User Experience on a Home Page, Category Page, and Product Listing Page in online stores.
These are the key areas where fatal mistakes are made, essential to the effectiveness and competitiveness of online stores. Therefore this issue is very important, crucial even.
Are you interested? We hope so! In any case, we invite you to read it.
We Audit. We Research. We Design.
User Experience in E-Commerce
According to Business Insider analysis and data, E-Commerce in Poland was driven by the Sunday trading ban in 2019. In 2020, E-Commerce grew because of the pandemic.
Thanks to these trends, Poland had nearly 45,000 online stores in 2020. It's a tremendous amount.
What does that mean? It means a problem. Not just for their owners, who are facing more competition. It's also a problem for users and customers who receive more offers.
And, as we all know, once a certain threshold is crossed and a situation of excess occurs, we're faced with a "paradox of plenty."
The offer, price, speed of order processing, convenient shipping methods, and safe and easy payment methods attract customers. It's true. However, other factors are increasingly encouraging people to buy.
The more important factor is how users interact with a store's interface. How they experience the shopping path, and what User Flow the store can guarantee them.
The method of purchasing, speed, and ease of buying determine success. Shopping is supposed to be effortless and satisfying in many ways.
The buying process can't be a source of uncertainty, frustration, or cognitive friction. We should remember that the usability of an online store means matching the functionality, aesthetics (visual appeal), and accessibility to customers' expectations, habits, and needs.
Looking at the E-Commerce User Experience from the usability and UX optimization side, we can distinguish 4 critical elements. In addition to the Home Page, these are the pages that make up the so-called shopping path. In this path, some people distinguish the Shopping Cart and Payment process separately:
- Category Page and Product Listing
- Single Product Page
- Shopping Cart and Payment Pages.
Their importance stems from several issues, namely the:
- traffic they generate
- sales they provide
- conversion rate they can achieve
- credibility and trust they create
- loyalty they can develop
- recommendations and ratings that they provoke
- sense of security that they provide.
In addition, E-Commerce sales volume is also affected by the following:
- length and intuitiveness of the purchasing process
- quantity, adequacy, and structure of categories
- microcopy
- location and type of a menu
- search engine, sorting, and filtering results
- relevance of category labels, subcategories, and product names
- regular UX audits, A/B tests, usability testing (and other research methods).
Therefore, E-Commerce is a huge "debtor" of User Experience. Without regular, multi-dimensional, multi-faceted research and optimization work, it's challenging to compete in E-Commerce, especially since the benefits of applying UX research and patterns are becoming more widely recognized.
So how do we design the Home Page, Category, and Product Listing Pages?
Home Page Design in E-Commerce
"Home Pages are the most valuable properties in the world. Every year, companies and individuals spend millions of dollars on a space that doesn't even exceed a square foot. A Home Page is the face of your company turned to the world."
This is how Jakob Nielsen wrote about Home Pages 20 years ago. Admittedly, he meant it in the general sense, but in E-Commerce, this statement is even more true.
In the article "Top 10 Guidelines for Homepage Usability," you will find many valuable comments that are still relevant and useful.
Alright, skeptics. Maybe the words of the NN Group founder sound a little exaggerated, I agree, but this is just a matter of rhetoric, not facts. Right?
Nielsen's insightful remarks still hold true. They're even highly relevant. The role of UX (User Experience) on company websites and online stores has become crucial.
Today, no online store that wants to grow or maintain its position can ignore User Experience optimization.
The relevance and importance of Home Pages in E-Commerce are emphasized not only by NN Group researchers. Their role is recognized by designers and analysts but also by customers themselves. We can arrange their tips, insights, and recommendations into an interesting list.
The E-Commerce Home Page has the following functions:
- informational function (shows the profile, range of offerings, availability of products, method of operation, and paths to reach)
- positioning (in terms of SEO) and branding function (in a marketing sense)
- sales function (it's a kind of lure)
- image and representational function (it's responsible for the First Impression effect)
- introductory function (announces, highlights the content, main product categories, bestsellers, currently promoted products)
- a function that reinforces engagement.
Therefore, it should first and foremost:
- be updated regularly
- be clear, transparent, and minimalistic in the good sense of the word
- guarantee the expected User Flow
- be logical, in line with the design conventions prevailing in E-Commerce, and a given industry
- be easy to navigate
- be simple
- be user-friendly and useful
- load fast.
All of that sounds right, although it's not very specific.
How to achieve such effects on a Home Page of an online store?
Let's start with the location of some key elements.
A good practice is to place:
- the navigation at the top or left side of a page
- special offers at the top-left side of a page
- the search bar in the top-right corner
- the Value Proposition on the main banner, in the middle of a page.
In terms of the presentation of elements or functions, it's essential to:
- increase the accessibility of categories; place them not only in the menu (this is especially recommended in mobile applications)
- adjust the size and typeface fonts – slogans, headlines, and labels should be described in appropriately large text, contrasted with the background color
- highlight special offers – with color, shape, size of elements, and with text (e.g., CTA)
- reduce the number of categories – the optimal number is 7, and there should be no more than 12
- personalize the offer for regular and returning customers – it should be tailored to purchase history and preferences
- clearly communicate terms and conditions, rules, policies, and methods of operation (e.g., regarding returns, costs, time, and method of shipment)
- use high-quality photos, used for most of the main categories, consistent in the technical sense, presentation, so preferably proprietary and not from the manufacturer, therefore varying wildly in aesthetics, quality, and the way of presentation
- follow the "most important products first" rule, that is, above the scroll line (above the fold).
We recommend reading NN Group's article "Scrolling and Attention," which clarifies that users don't like to scroll through pages and delve into their content. What they're looking for should be given to them immediately and directly.
When designing navigation and searching, we should pay special attention to the following:
- the number of clicks leading to the destination – their number should be small, and the path should be as simple, logical, and intuitive as possible
- the supporting hints and auto-complete function
- adapting the type of menu to the nature of the store (complexity and number of products) – in the case of very complex, large platforms, megamenu works quite well
- matching search engines, filtering to the needs of customers (which should be learned directly through research)
- adequacy and comprehensibility of navigation labels – the division into categories must be understandable and not raise doubts about what products we will find by clicking on a link with a given label.
And here's a little warning!
If we don't find a product in the category where we were looking for it, we'll sooner assume that it isn't in the online store instead of looking for it in other categories.
We should also remember that people use searching most often when they know exactly what they want to find (such as a specific model). If they're simply looking for a product in a particular category whose features have yet to convince them, they're more likely to use the navigation available within the category.
Interesting additions to these design guidelines are the recommendations featured in the article "UX Guidelines for Ecommerce Home Pages, Category Pages, and Product Listing Pages." Its author, Aurora Harley, points out, among other things, that an excess of information and elements on the Home Page severely limits its usefulness and communicativeness.
Her advice is simple.
According to Aurora Harley, the Home Page must first and foremost inform, present the product offerings and allow users to start shopping. This is its overall goal. The entire design thinking should be oriented around it.
Pages overloaded with information, seeking to put a large amount of it in a small space, lose their persuasive function. Instead of giving the impression of a place capable of meeting shopping needs, they give the impression of a place that hinders shopping by overstimulating a customer.
It's also important to recall Harley's very valid point – the visual mess, the excess, is often associated with poor quality.
So, the Home Page doesn't have to give the impression of being rich in products but the impression of being relevant to the needs.
After all, customers rarely buy all the TVs, shirts, shoes, or drinks available in a store.
Okay, so now we know how to design Home Pages, but shopping in online stores very often doesn't start there. In many cases, by clicking on ads, we are immediately redirected to Category Pages. How should they be designed?
Category Page Design
Category Pages are crucial sales tools. While Home Pages initiate sales, Category Pages actually make it happen. However, for them to have such a chance, it's essential to indicate their location.
Category pages should be very clearly and unambiguously labeled in the first place.
Users of Category Pages need to know precisely where they are, which part of the store they are in, what options they have, and how they can achieve their goals (such as browsing products).
For this purpose, we should take care of the following:
- the readability of Breadcrumbs
- labels
- headers
- banners that clearly show the location
- an indication, verbal or visual, of the scope of a given category.
Determining the scope is important because of the nature of Category Pages, which collectively present similar products. The TV category suggests that we visit a page with different types of TVs. The more specific category, however, is a matter of knowing store customers' preferences and perceptions of collections.
After all, TVs can be categorized by brand, diagonal, and technology (e.g., OLED). That's why the general Category Pages should quickly and clearly redirect to the Product Listing Pages, where we will find offers specified according to the imposed criteria.
Product Listing Page Design in E-Commerce
We should remember that Product Listing Pages are increasingly replacing Category Pages. The reason seems clear – it shortens the purchase path.
And here it's worth going back again to Aurora Harley's article. She writes, "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. At the same time, offering filters so we can further narrow our search for a product with specific characteristics."
One of the more common design mistakes we find on these types of pages is leaving a customer without help.
And the essential role of Category and Product Listing Pages should be to act as a helpful assistant for a user. An assistant responding to questions:
- What to find?
- Where to find it?
- How to find it?
- Why is it worth finding it?
We should provide hints and information in category descriptions, descriptions of individual filters, headers, and CTA buttons. This gives the customer a chance to make decisions that narrow the choice (making it easier and faster).
While discussing the selection problem, we must examine how the Product Listings are presented. The number of columns and rows available is a tough nut to crack. Single-column layouts, containing from a dozen to even several dozens of items, are standard. But grid-like configurations are not at all uncommon. They usually have 3 columns and a few rows.
Which of the options is more effective? There is no universal answer to this question. It all depends on the industry, quantity, type, nature of products, shopping habits, etc.
Some stores solve this problem by offering the ability to change the view to a more optimal one and give a user the option to specify the number of items displayed.
Other problems in designing Category and Product Listing Pages
However, these are not all the design problems that need to be solved when creating Category and Product Listing Pages. The next ones include the following:
- availability of convenient and anticipated filtering
- clearly indicating the difference between filtering (determines quantity) and sorting (determines order)
- the problem of the relevance of the results that filtering should provide – the number of available filters doesn't always translate into the quality of filtering
- consistency of images – aesthetically, referring to quality, format, number of product views, methods of presentation, and style.
How information is presented matters. The online store should:
- adapt the criteria, features, and presented information to the categories and subcategories (the category TVs raises different questions than the category OLED TVs)
- provide means of comparison – readability of similarities and differences should be a priority
- operate with product names that avoid alphanumeric designations; instead, we should use the language of features, attributes, and parameters
- use only the most relevant information for the customer about the product (regarding its adequacy, usability, and cost (including operational)
- maintain consistency in the presentation of information – each product should be described according to the same set of features, and information given in the same order and sequence.
Let's return one last time to the article by Aurora Harley, who also discusses the problem of how to differentiate products. This can be done best with the help of the following:
- names
- photos that clearly highlight the difference
- indicating the range of product variants – size, color, compatibility
- price display, discount rates, and deferred or installment payments options.
E-Commerce Clients expect the store to present a product adequately to their needs and to provide as seamless as possible insight into its attributes and features.
Usability of E-Commerce websites, User Experience in E-Commerce today means adapting the store's functionality to its customers' very specific needs. And customers are increasingly prioritizing experience over price.
The shortened path to the list of products (now shortened from the Home Page and Category Pages, but also positions in search engine results) and the ability to effectively filter, sort, and compare selected products translates into higher customer satisfaction.
UX in E-Commerce is often a method of making tasks faster and easier.
Design Guidelines for a Home Page, Category Page, and Product Listing Page in E-Commerce. Summary
- The offer, price, speed of order processing, convenient shipping methods, and safe and easy payment methods attract customers.
- It is increasingly important how the user interacts with the online store interface.
- The speed and ease of buying determine success.
- In E-Commerce, we can distinguish the 4 most critical elements: Home Page, Category and Product Listing Page, Product Page, and Checkout and Payment Page.
- Above all, the Home Page should be clear, transparent, and minimalistic in the good sense of the word.
- An excess of information and elements on the Home Page severely limits its usefulness and communicativeness.
- The Home Page must first and foremost inform, present the product offerings and allow users to start shopping.
- Home Pages initiate sales; Category Pages actually make it happen.
- Product Listing Pages increasingly replace Category Pages.
- The most successful combinations of Category Pages and Product Listing Pages are those that highlight subcategories that are relevant to the user.
- The primary role of Category and Product Listing Pages should be to act as a helpful assistant for a user.
- E-Commerce Clients expect the store to present a product that is adequate to their needs and provide as seamless as possible insight into its attributes and features. This is why Product Page Design is so important.
- The shortened path to the list of products, filtering, sorting, and comparing selected products translates into higher customer satisfaction.
