Homepage > Journal > UX guidelines for an E-Commerce Home Page
Journal

UX guidelines for an E-Commerce Home Page

How you like that:

How to design an effective E-Commerce Home Page? What kind of User Experience of a Home Page drives sales?

What online store design principles should we use when creating a Home Page?

Today we will answer these questions. We will also take a look at the functions of a Home Page in an online store.

I know what kind of question you are going to ask... Yes, these things are indeed important.

Do you want to know what all the fuss is about? Then read this article. Enjoy!

We audit and create paths to purchase.

The problematic nature of Home Page design

According to many researchers, for instance, those associated with the Nielsen Norman Group, the Home Page has several specific functions.

The Home Page:

  • represents/creates the image
  • informs about the content
  • shows the path – provides a kind of guide
  • explains
  • is responsible for trust and credibility
  • encourages purchases.

The Home Page answers some important questions that users ask themselves (more or less consciously) when visiting an online store.

Namely:

  • What category of stores does it belong to?
  • What can I buy here?
  • Where can I see the specific product/s?
  • How do I buy the product?
  • Why should I buy the product on this site?    

The first question is not only about the assortment but also about the store's status, for example, its exclusivity. And also about its credibility. The second question allows customers to ensure that the store has the product they are looking for.

E-commerce home page - etutor.pl
Limited-time offers are often presented through landing pages. While effective, they still haven't replaced the standard listings available from the Home Page or Category Page. | Source: eTutor.pl

The answers to the next two questions – more detailed and technical – allow customers to initiate their search and get an idea of whether the buying process will be compatible with their expectations.

The answer to the last question gives them confidence (although not yet certainty) that they've come to the store they wanted to go to, to the store that offers sought-after products that attractively presents them.

Although more and more traffic in online stores is taking place on product and category pages, this doesn't diminish the importance of the Home Page.

Especially since it's common for customers to "go back," they move from a landing page to the Home Page.

The shopping path in E-Commerce can be really winding. Moreover, the E-Commerce industry is constantly changing. We must admit that it responds to new customer behavior patterns very quickly.

E-commerce home page - amazon.com
A separate category for people visiting the Amazon website for the first time is a nice gesture that evokes positive emotions. We can also use the Home Page to establish relationships. | Source: Amazon.com

The problematic nature of designing Home Pages is also a matter of discovering a common denominator for the experiences occurring at different stages of the customer journey. We should remember that the customer's shopping path leads through the Home Page.

We recommend our articles on User Journey and Customer Journey.

The optimization and design of the Home Page also answer the question of how to increase E-Commerce sales. Many store owners are asking themselves this very question.

What should the E-Commerce Home Page look like?

In the article "UX Guidelines for Ecommerce Homepages, Category Pages, and Product Listing Pages," we can find some useful tips.

According to the NN Group authors, the Home Page should be:

  • easy to browse
  • friendly
  • should offer exhaustive information
  • transparent
  • organized clearly based on understandable and intuitive criteria.
e-commerce home page design - rabble
Image, identity, personality... The E-Commerce Home Page can also be an invitation to the world of a solid and distinctive brand. Especially if its name is as unusual as rabble ;) | Source: Rabblewine.com

As the research cited above shows, an equally essential issue is the readability of the Home Page. Overly cluttered Home Pages make it difficult or even impossible for a user to:

  • orient themselves on the website
  • find information that they're looking for
  • navigate with a sense of purpose.

In turn, an excess of:

  • information
  • functions
  • capabilities
  • offers

creates a somewhat unexpected paradox. What paradox exactly?

Usually, E-Commerce users are attracted by a large number of choices. Online stores that have an extensive assortment are seen as more attractive. It's a worldwide trend.

Unfortunately, the appeal comes with a hidden and unexpected price. The excess of choice hinders the process of decision-making. It's sometimes the source of decision-making paralysis.

It is a situation in which a customer, when unable to handle a large amount of information, prefers to resign from the purchase rather than spend an unspecified amount of time exploring, comparing, evaluating, and choosing.

Balancing these two needs (unlimited offers and limited choice) is not a simple thing to do. Resolving such dilemmas is what E-Commerce sales are all about.

Here we should remind about two other issues pointed out in NN Group's research.

An abundance of features on the E-Commerce Home Page results in the:

  • complicated interface that is difficult to use
  • more problematic flow and experience of users (User Flow UX)
  • longer decision-making time (Hick's law)
  • higher cognitive load
  • complicated shopping path that is less useful and makes the online store more problematic (the E-Commerce customer doesn't like these kinds of paths)
  • need to offer more hints, explanations, and instructions
  • greater chance of making an error.

Fortunately, the situation isn't hopeless because people tend to find the most straightforward solutions.

Home page design in an online store - value proposition
Value Proposition plays a vital role in E-Commerce Home Pages. Thanks to it, users can be sure that they are in the store they were meant to be. | Source: Wnder.com

Our limited ability to process information makes us look for the simplest solutions. The Home Page should offer such shortcuts.

A small memento! The continuous process of UX optimization in E-Commerce

The solution that will help us balance these two needs is the process of optimization of the User Experience of online stores.

It's circular, and the starting point is the identification of customer segments and the analysis of their needs and characteristics.

Thanks to this kind of fundament, that is, knowing who we will be selling to, we can begin designing variants of solutions adequate to these needs. The next step is to measure the impact of each solution on crucial metrics (such as UX metrics).

It's not everything. After that, we need to determine which E-Commerce solutions are more effective, and this, in turn, is the base for their implementation. This process doesn't end; it needs to be repeated. And why is that?

optimization and design of ecommerce home page
The ability to select basic variables and categories in the part of the page visible after loading (Above the Fold) makes the purchase faster and simpler. | Source: NotJustaLabel.com

The optimization of the Home Pages of online stores should be a process. It should be a string of recurring actions thanks to which it's possible to:

  • diagnose needs and changing expectations
  • monitor reactions
  • react to them by implementing concrete design solutions
  • improve the User Experience.

In other words, the continuity of optimization makes it possible to stay in touch with customers and meet their expectations.

Thanks to these activities, we can determine the importance, usability, and possible problems of individual elements of the Home Page.

It's also worth remembering that the optimization of the Home Page, among other things, has tangible results, not just in terms of sales.

It also has an impact on the following:

  • lowering the cost of customer acquisition and customer service
  • more spontaneous recommendations
  • a feeling of satisfaction and desire to make repeat purchases.

No one needs to be convinced that these factors are crucial.

The most important elements on the E-Commerce Home Page

Of course, the most important elements are those that have the highest value and are the most useful from the perspective of the customer and the store owner. Expectations placed on them mainly concern the ease/difficulty with which they combine the two perspectives.

The key elements of the Home Page include the following:

  • menu and top navigation
  • search icon
  • wishlists
  • shopping cart icon
  • bars with offers
  • product categories created according to the following criteria: popularity, seasonality, relevance, recommendations, etc.
  • testimonials and trustmarks
  • forms and contact details
  • CTA (Call to Action) and USP (Unique Selling Proposition)
  • configurations (such as size)

The elements mentioned above are often arranged and grouped according to the principle of an Inverted Pyramid.

According to this principle, the top part of the screen (Above the Fold) has to provide information and functionalities that are essential for most customers. A little reminder here, the lower a given element is located, the fewer people will reach it and use it.

elements on an E-Commerce Home Page
Banners on Home Pages are the ideal place for calls to action – CTAs. | Source: MyKalios.com

For example, the most general division in clothing stores is by gender (female/male), sometimes supplemented by age criteria (adults/children). Only after this selection, the customer has the opportunity to perform more detailed actions.

So, among other things, the Home Page is intended to initiate the buying process and guide the customer to the desired product category.

Selected UX guidelines for the E-Commerce Home Page

We can divide the guidelines into those referring to:

  • independent and forced user behavior
  • users' impressions
  • customers' objectives and tasks
  • customers' experiences, perceptions, expectations, and habits.

In the first group, we will find recommendations such as different buying variants (without registration, as a customer, etc.). Forcing time-consuming and work-intensive behavior is strongly discouraged.

It is worth making customers' impressions positive with, for example, high-quality photos that show products (but also illustrate categories) in a diverse way. The overview photos are just as important as those showing details.

UX guidelines for the ecommerce home page
An excellent-quality photo is worth more than 1000 words. The pleasure and impression that it creates are a powerful attractor. | Source: Neker.co.kr

Supporting goals and objectives also means understanding that in E-Commerce, impulse purchases are less popular than rational purchases, for which customers are (more or less) prepared.

Social proof, a compelling CTA, and a well-formulated offer influence the purchase decision, which is why we should also communicate them on the Home Page.

Presenting a product in an online store also means placing it in a favorable context.

Navigation is a complex problem that requires a separate article to discuss it properly. For now, we will just mention one of the most important recommendations. It's about using the design conventions that customers are used to.

In E-Commerce, the most common one is horizontal navigation. And its use is strongly recommended.

The loading speed of the Home Page is responsible for the effect of the first impression and feelings toward its usability, reliability, and security.

first impression - ecommerce homepage
In clothing stores, banners on Home Pages are often designed to direct purchases through the primary criterion of gender. | Source: Oliveclothing.com

Latency, measured in milliseconds, translates into a significant decrease in the conversion rate. Redundant or unnecessary audiovisual content, "clutter," server inefficiency, poor code quality, and poor widget performance significantly impact the customer experience.

Therefore, it is also worth optimizing the Home Page for loading speed.

Fostering credibility and trust in the online store

According to the "Reasons for Abandonment During Checkout" study conducted by the Baymard Institute, low trust and poor store credibility are responsible for 17% of shopping cart abandonment in E-Commerce.

This is a considerable number. The Home Page establishes the credibility of the store and the trust it enjoys.

Let's remember that the strongest impressions are evoked by:

  • graphics, design (its visual appeal, industry relevance, and compliance with design trends)
  • trustmarks – certificates, awards, ratings – in particular, ratings issued by independent institutions
  • user reviews made using external rating and recommendation systems.

It is also extremely essential to inspire trust and credibility in the following matters:

  • payment security
  • speed and method of delivery and returns
  • respecting consumer rights (e.g., the right to withdraw from a purchase)
  • quality of the products and the order fulfillment process itself.

We should also communicate this information on the Home Page.

The Design of Above the Fold on the Home Page

Above the Fold is the part of the page that is visible after the website loads and doesn't require scrolling. The Above the Fold part is the most diverse, functional, and challenging (in terms of design and optimization) element of the Home Page.

Often it includes:

  • navigation menu
  • search bars and icons
  • shopping cart/wishlist icons
  • icons and labels of the most important categories
  • hero shots – used to present Value Proposition, calls to action, inform about current promotions, sales, and news
  • icons and labels that reinforce the Unique Selling Proposition (e.g., return guarantees, support services).

The number of categories must also result from the cognitive capacity of our mind – their excess results in confusion and a sense of randomness. In turn, an insufficient amount may suggest that the store doesn't sell a particular product.

Positioning categories in the Above the Fold section aims to show the most representative products, not the whole assortment.

The icons of categories in this part of the page should allow customers to understand where to start looking for a product.

And this brings us to another very important problem.

Narrowing down the choices on the E-Commerce Home Page

Customers usually want to buy a specific product model or purchase the best model in a particular category.

Beware!

Identifying such a product is a task not only for the customer but also for the store, which should offer search, filtering, and sorting tools to make the decision easier.

The search bar should be easy to find. In fact, it should always be in a fixed position.

However, it must be more than just a soulless tool. We want to see in it a helpful assistant who is involved in the process of delivering the best results.

Home page design of an online store - Natori
Can a search engine be helpful? Can it narrow down the choices effectively? Of course! | Source: Natori.com

Improving search engines certainly pays off, as users who use them in online stores end up finalizing the purchase more often. According to some studies, this tendency can be as much as three times stronger.

Limiting choices, or actually guiding interest, avoids decision paralysis. The optimal choice is between up to three options.

functions of the ecommerce home page
Home pages also have a ludic function (they provide fun). Tests, quizzes, and puzzles are perfect for this task. | Source: MyKalios.com

As a general rule, the store should minimize the amount of doubt by reducing the number of offers and indicating the differences between products, also by offering the option of comparison.

Naturally, this is a very difficult task to accomplish when offering a very wide assortment.

UX guidelines for an E-Commerce Home Page. Summary

  1. The Home Page represents, is responsible for the image, informs about the content, and shows the path.
  2. In addition, it's a guide responsible for the trust and credibility of the store.
  3. It also narrows the choice, directing and concretizing the search.
  4. The Home Page should answer the important questions the users ask themselves while browsing through it.
  5. The problematic nature of designing Home Pages is also a matter of finding common characteristics of experiences in terms of different stages of the customer journey.
  6. According to the authors from NN Group, the Home Page should be easy to browse, friendly, offer exhaustive information, and be clear.
  7. It should also be organized based on understandable and intuitive criteria.
  8. Overly Cluttered Home Pages make navigation significantly more difficult.
  9. Usually, E-Commerce users are attracted by the large selection, and online stores offering it are seen as more attractive.
  10. Unfortunately, an excess of choice hinders decision-making and causes decision paralysis.
  11. The solution that will help us balance these two needs is the process of optimization of the User Experience of online stores.
  12. The optimization of Home Pages should be a recurring and continuous process.
  13. Thanks to the optimization, we can determine the importance, usability, and possible problems of individual elements of the Home Page.
  14. The most important elements of the Home Page are often arranged and grouped according to the principle of an Inverted Pyramid.
  15. By directing interest, we can avoid decision paralysis.
  16. The optimal choice is between up to three options.
  17. The online store should offer search, filtering, and sorting tools to facilitate decision-making.
  18. The store should minimize doubts by reducing the number of offers and indicating the differences between products.
  19. According to the research conducted by Baymard Institute, low trust and poor store credibility are responsible for 17% of shopping cart abandonment in E-Commerce.
How you like that:
Journal / Redaktor
Author: Radek
UX Writer and researcher by education + experience. Collects The Story's knowledge and shares it on the Journal.
Reviewer: Dymitr Romanowski

Are you interested in working with us? Take a look at our Portfolio