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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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
- The Home Page represents, is responsible for the image, informs about the content, and shows the path.
- In addition, it's a guide responsible for the trust and credibility of the store.
- It also narrows the choice, directing and concretizing the search.
- The Home Page should answer the important questions the users ask themselves while browsing through it.
- 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.
- According to the authors from NN Group, the Home Page should be easy to browse, friendly, offer exhaustive information, and be clear.
- It should also be organized based on understandable and intuitive criteria.
- Overly Cluttered Home Pages make navigation significantly more difficult.
- Usually, E-Commerce users are attracted by the large selection, and online stores offering it are seen as more attractive.
- Unfortunately, an excess of choice hinders decision-making and causes decision paralysis.
- The solution that will help us balance these two needs is the process of optimization of the User Experience of online stores.
- The optimization of Home Pages should be a recurring and continuous process.
- Thanks to the optimization, we can determine the importance, usability, and possible problems of individual elements of the Home Page.
- The most important elements of the Home Page are often arranged and grouped according to the principle of an Inverted Pyramid.
- By directing interest, we can avoid decision paralysis.
- The optimal choice is between up to three options.
- The online store should offer search, filtering, and sorting tools to facilitate decision-making.
- The store should minimize doubts by reducing the number of offers and indicating the differences between products.
- 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.
