The Current State of Homepage UX – 8 Common Pitfalls & Best Practices

The homepage remains the “front door” for the many users who still begin their browsing experience here.

However, in testing we also observed it to act as a navigational anchor and a “safe” fallback.

Therefore, it’s critical that the homepage makes it clear to users — new as well as repeat — how to pursue the three primary product-finding paths: category navigation, search, and curated paths (wizards, inspiration, new arrivals, etc.).

Our late-2020 Homepage & Category e-commerce UX benchmark contains 10,900+ Homepage and Category elements that have been manually reviewed and scored by Baymard’s team of UX researchers, with an additional 3,100 best- and worst-practice examples from the 60 top-grossing e-commerce sites in the US and Europe (performance verified).

In this article we’ll analyze a portion of this dataset to provide you with the current state of the e-commerce Homepage UX, and outline 8 common UX design pitfalls and corresponding Homepage best practices applicable to most e-commerce sites.

The Current State of Homepage UX

For this analysis we’ve summarized the 6,100+ Homepage usability performance scores and plotted the 60 benchmarked sites across these in the scatterplot above. Each dot, therefore, represents the summarized UX score of one site across each of the 17 guidelines within the Homepage experience. The top row is the total Homepage UX performance.

Our 2020 benchmark reveals, within Homepage, the average desktop e-commerce site performs good.

However, behind that average is a very scattered distribution of performances, with 32% of sites performing either mediocre or poorly (up from 25% in 2018). This is primarily due to sites setting a poor first impression and inappropriate expectations.

Thus, despite the decent average performance, many sites are going in the wrong direction when it comes to Homepage performance — harming their ability to keep users on the site and help them find suitable products.

Furthermore, the percent of sites with perfect Homepage performances has decreased from 30% to 17%, indicating many sites, after investing resources to improve the Homepage, haven’t kept up their investment to ensure users continue to have a high-quality Homepage experience.

In the end, the 2020 Homepage benchmark indicates that users are likely to have a fair-to-middling experience on any given Homepage — which is a lackluster beginning to a new site experience.

Below we’ll discuss the UX performance and 8 common pitfalls and the correspodning Homepage best practices to be aware of for Homepage:

1. Failing to Visually Feature a Broad Range of Product Types
2. The Use of Overly Aggressive and Distracting Ads
3. Incorrect Implementation of Carousels
4. Failing to Assist Selection of a Well-Defined Scope
5. Lack of Bespoke Imagery and Design
6. Not Making the Search Field Immediately Obvious
7. Incorrect Implementation of Country and Language Selection
8. Visual Hit Areas That Don’t Match the Actual Hit Areas

These pitfalls were chosen as they are the most interesting or the most suitable for discussion in an article.

(For a beginner’s introduction to UX, start with our primer, What Is UX?.)

8 Common Homepage UX Pitfalls and Best Practices

The pitfalls described here are issues that many sites have, and also include some “missed opportunities” for the e-commerce industry as a whole.

Also, note that this is an analysis of the average performance across 80 top-grossing US and European e-commerce sites.

When analyzing a specific site there are nearly always a handful of critical UX issues, along with a larger collection of worthwhile improvements. This is the case even when we conduct UX audits for Fortune 500 companies.

Thus, almost all sites have a few crucial areas of their Homepage that need to be fixed to avoid some users having a highly negative experience.

1) 6% of Sites Don’t Feature a Broad Enough Range of Product Types on the Homepage

During testing, many users misinterpreted the type of site or underestimated its product range because an overly narrow selection of product types were displayed on the homepage.

Such misinterpretations can be seriously harmful to a site as users typically won’t look for a type of product they don’t believe the site will carry.

On mobile, it’s even more important to highlight on the homepage the different types of products users can find on a site because product categories aren’t permanently visible in the main navigation or available through a drop-down hover menu.

Mobile users are therefore reliant on the homepage to infer the type of site until they access the main navigation.

Sites that sell a broad range of items should highlight a sufficiently broad range of product types (at least 40% of product types) on the homepage. On mobile text links can be used in place of or in addition to images and thumbnails.

Despite how much first-time users rely on homepage content to interpret product diversity, 6% of the largest e-commerce sites still get this “UX basic” wrong and visually feature fewer than 40% of their product types on the homepage (which admittedly is an improvement from 13% in 2018).

For inspiration on featuring a broad range of product types on the homepage, see HP, Home Depot, and Northern Tool on desktop, and Target, Build.com, and Urban Outfitters on mobile.

2) 59% of Sites Use Overly Aggressive and Distracting Ads on the Homepage

During testing, overly flashy ads in a prime content location on the homepage (particularly in the upper part of the page) were often met with negative reactions from users.

Pop-up banners and overlay dialogs (typically promoting newsletter signups) on the homepage were met with even greater disdain, with some users going as far as referring to them as “spam”.

Meanwhile, our mobile testing revealed the potential for homepage ads to cause even more — and more severe — issues is increased due to the reduced size of the viewport.

For both desktop and mobile, it’s critical to be particularly mindful of the size, placement, aesthetics, and integration of the ads within the overall homepage design.

Despite the risk of setting a poor first impression, 59% of sites exhibit issues with “ad-looking” content on the homepage (up from 37% of sites in 2018).

For inspiration on implementing ads on the homepage in a nondistracting way, see Marks & Spencer, GAP, and Zalando on desktop, and B&H Photo on mobile.

3) 75% of Sites That Use Carousels Implement Them Incorrectly

While our testing reveals that users generally like the large imagery of carousels, they can cause more harm than good if serious usability issues aren’t addressed.

For example, carousel slides were often observed changing just milliseconds before a user clicked — causing the wrong page to be loaded.

On the other hand, when implemented with care, carousels are a powerful way to promote features, offers, and wizards.

In particular, carousel slides can autorotate, but not too quickly (especially if they include text), and autorotation should temporarily pause while hovered and permanently pause after any user interaction.

Alternatively, using static content sections scattered throughout the homepage in combination with featured categories was observed to perform well during testing.

This instead relies on users scrolling the homepage, a vastly simpler and more ingrained web interaction.

While only 36% of sites use a carousel on the homepage, nearly 75% of those sites implement it incorrectly. See our complete guide on how to mitigate the most grave carousel usability issues.

For inspiration on carousel implementations, see Home Depot and B&H Photo.

4) 62% of Sites Don’t Assist Users in Selecting a Well-Defined Scope Directly from the Homepage

During testing, the success rate of a user’s initial product-finding strategy was tightly linked to their ability to quickly find a relevant well-defined scope within the site.

Meanwhile, ending up in the wrong scope had dire consequences, in particular when users believed they were in the right scope and consequently concluded that the site didn’t carry items that were relevant to them (a logical yet often false conclusion).

Promoting popular subcategories (in addition to popular categories; see #1 above) directly on the homepage helps users bypass the generic higher-level scopes and go straight to more relevant and well-defined parts of the site’s taxonomy.

Additionally, in certain industries such as toys and gifts (where users often buy for someone else), and for compatibility-dependent product catalogs, wizards can be a powerful scope to integrate on the homepage too.

Despite how harmful it can be when users end up in the wrong or a too-broad scope, 62% of sites don’t assist users in quickly and seamlessly finding a well-defined scope from the homepage (up from 55% of sites in 2018).

For inspiration on assisting users with the selection of a well-defined scope from the homepage, see Lowe’s, and Newegg.

5) 19% of Sites Don’t Use Bespoke Homepage Imagery and Design

Through multiple rounds of testing, sites with good design and inspiring photography on the homepage received numerous positive remarks from users. In effect, the initial positive impression made users more loyal to the site.

Clearly, using design and imagery to make a good first impression is paramount.

Meanwhile, sites that didn’t have any custom imagery at all, instead relying on stock photography or bland and boring cut out imagery, were observed to underperform.

(However, note that it can be possible to go too far with bespoke design, as observed during our large-scale research study of direct-to-consumer (DTC) sites.)

To set a positive first impression of your site and convey brand values, invest in design and content production (copywriting, graphic design, and especially photography), and curate it on an ongoing basis.

Despite the negative implications, 19% of sites don’t use bespoke homepage imagery and design to set a positive first impression of the site and convey its brand values (although down from 28% in 2018).

For additional inspiration on homepage imagery, see Urban Outfitters, Crate & Barrel, and Gilt on desktop, and GAP, IKEA, and Marks & Spencer on mobile.

6) 22% of Sites Don’t Present the Search Field Prominently on the Homepage

During testing, numerous users relied on search as a fallback strategy when they got stuck.

However, the search field often drowns in the sea of eye-catching graphics on the homepage, which can lead to problems for search-driven users and those using search as a fallback.

The search field should be prominently presented on the homepage so users who want to search can get started immediately and seamlessly, but also so that any user — even those who don’t search right off the bat — instinctively know where the search field is located from the very beginning of their browsing session, so they can return to it as a fallback strategy in moments of despair.

Despite how critical search is to product finding, 22% of sites don’t present the search field prominently on the homepage (up from 15% in 2018).

For inspiration on prominent search field presentation, see Wayfair, J.C.Penney, and Staples.

7) 35% of Sites Don’t Implement Country and Language Selection Correctly

During desktop testing, the use of splash pages made country and language selection needlessly cumbersome for users.

Meanwhile, overlays showing shipping, country, and language selections were often mistaken by users for ads, surveys, account creation, or newsletter subscription boxes, and closed without users even glancing over their content.

Therefore, only use splash pages on desktop to force the user to make a country or language selection (or confirm one) if you have significant regional customizations or restrictions, and never use an overlay dialog.

Additionally, make the process unobtrusive by autoselecting a value for the user (preferably by using IP geotargeting; otherwise, by autoselecting the most popular country).

On mobile the overlay should take up the vast majority of the viewport — typically 70% or more — and include very prominent flag graphics to assist users in quickly recognizing that the overlay is for country or language selection, rather than, for example, a newsletter sign-up.

Country and language selection can have wide-ranging implications for the shopping experience, yet 35% of sites don’t implement country and language selection correctly (up from 27% in 2018).

For inspiration on country and language selection implementations, see Overstock, Victoria’s Secret, and Gilt on desktop, and Best Buy, and Foot Locker on mobile.

8) 43% of Sites Don’t Style Clickable Interface Elements Effectively

During testing, users were observed to hesitate when multiple items were enclosed in a single visual element.

This was due to the fact that it was unclear if the visual element was one large hit area leading to a single page or whether there were multiple distinct hit areas leading to different pages.

On mobile, users sometimes experienced an even more foundational issue — whether a visual element was even tappable.

To address this issue, hover effects and styling can be leveraged to make it clear if a visual element leads to a single location or multiple different locations.

Meanwhile, on mobile it’s crucial to always make it clear what elements are links, make each visual element a single hit area that goes to one location, and to ensure that the hit area for links matches the size of the visual element.

Despite how vital it is to the overall navigation experience, 43% of sites don’t make it obvious to users what in the interface is clickable, where those clicks are going to take users, and where the hit areas begin and end (up from 18% in 2018).

For inspiration on optimal styling of clickable and tappable elements, see Hayneedle, HP, and Grainger on desktop, and Asos, Crate & Barrel, and Nike on mobile.

Homepage UX Performance Has Declined

In practice, the homepage should simultaneously inspire users to explore, convey the site’s brand values and product range, and possibly even educate users about unique or novel product features — all without causing visual or mental overload.

Moreover, while the homepage may not be the predominant entrance path it once was (though its importance was observed to be even greater on direct-to-consumer websites), it still serves a central role as an anchor for the site’s category taxonomy, and an escape route — a place to refer back to throughout the shopping session.

Although our UX research for our 2020 Homepage benchmark has revealed that the average e-commerce site performs good, it’s clear that there’s room for improvement, as 32% of sites perform either mediocre or poorly— up from 25% in 2018.

This analysis of the current state of Homepage UX focuses on just 8 of the 17 homepage issues included in our benchmark analysis. The other 9 issues should be reviewed as well to gain a comprehensive understanding of the current state of Homepage UX, and to identify additional site-specific issues not covered here.

In particular, avoiding the 8 homepage UX pitfalls described in this article, by adhereing to the below 8 homepage best practices, is the first step toward improving users’ Homepage experience:

1. Feature a Broad Range of Product Types (6% Don’t)
2. Avoid Overly Aggressive and Distracting Ads (59% Don’t)
3. Implement Carousels Carefully (75% Don’t)
4. Assist the Selection of a Well-Defined Scope (62% Don’t)
5. Invest in Bespoke Imagery and Design (19% Don’t)
6. Make the Search Field Immediately Obvious (22% Don’t)
7. Implement Country & Language Selection Carefully (35% Don’t)
8. Ensure Visual Hit Areas Match the Actual Hit Areas (43% Don’t)

For additional inspiration explore our public database of 242 desktop Homepage examples and 79 mobile web Homepage examples from leading online retailers, annotated with what homepage UIs to emulate, but also of what to avoid.

This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.