Cover image
UX Design
8 minute read

Paving the Path to Purchase – eCommerce UX Best Practices

Mobile eCommerce may be the future, but desktop sites are digital gold mines. To engage shoppers, boost product value, and unlock more revenue, designers must master these eCommerce UX best practices.

eCommerce sales continue to rise. Mobile devices comprise the bulk of eCommerce traffic, yet desktop sites have lower cart abandonment rates and higher average purchase values. Mobile eCommerce is the future, but if designers wish to maximize profits in the present, they must enhance desktop sites with eCommerce UX best practices.

The potential is staggering. Year after year, eCommerce earnings climb higher. Offline sales still account for the majority of retail revenue, but the upward arc of eCommerce is undeniable. This year, eCommerce retailers in the U.S. are projected to achieve $840 billion in sales, a level they were not expected to reach until 2022.

eCommerce accounted for 21% of all retail earnings in the U.S. in 2020.
Source: Digital Commerce 360

Swirling within the statistical splendor are proclamations of an eCommerce future dominated by mobile—and for good reason. Mobile devices generate the most traffic and retail revenue worldwide. Unfortunately, mobile fails to satisfy two key metrics: Mobile sites have higher cart abandonment rates and lower average purchase values than desktop sites.

Desktop eCommerce sites have lower cart abandonment rates than mobile sites.
Source: Merchant Savvy

Is the destiny of eCommerce mobile? Undoubtedly. Is there significant money to be made by optimizing desktop sites with eCommerce UX best practices? Absolutely.

The eCommerce Experience in Four Pages

On desktop, nearly all eCommerce sites rely on a similar sequence of pages to funnel shoppers through the sales process.

  • Uncluttered homepages with irresistible value propositions
  • Well-organized category pages that are easy to navigate
  • Polished product pages that combine social proof and compelling content
  • Uncomplicated checkout pages that show progress and make shoppers feel secure

Desktop eCommerce UX design patterns consist of four main pages: a homepage, category page, product page, and checkout page.
The four most common pages on desktop eCommerce sites are homepages, category pages, product pages, and checkout pages. (Judy)

The layout, content, and navigation of each page exist to help shoppers find the information they’re looking for—while ushering them ever closer to purchase. All four pages must work in tandem to create the seamless eCommerce experiences shoppers desire. It all starts with the homepage.

Uncluttered Homepages

1. Make Product Value Instantly Apparent

A homepage is a first impression. Shoppers must be able to quickly ascertain a product’s value. Don’t use the homepage to drone on about technical features. Help shoppers envision how products will solve their problems and improve their lives (the Jobs to Be Done framework is a useful starting point).

Keep copywriting short and to the point. Use photos that illustrate product benefits. If shoppers have to read a lot, scroll a lot, or watch long-winded explainer videos to understand value, then value isn’t instantly apparent.

Text and imagery must make value propositions apparent.
On eCommerce homepages, text and imagery must make value propositions immediately apparent. (Myro)

2. Enable Search From Anywhere

eCommerce sites that only sell a few items may not need search bars, but as offerings increase, search becomes an essential way for customers to find products according to their mental models. Sticky search bars ensure that search is available everywhere on every page, but it’s best to remove search from checkout pages for the sake of conversion.

Include a sticky search bar on eCommerce sites with multiple product categories.
It’s wise for sites with multiple product categories to include a sticky search bar so shoppers can find what they’re looking for faster. (Native Union)

3. Give Products Names That Make Sense to Shoppers

Product names that make sense internally can leave shoppers perplexed. Provide decision-making context. Names based on model numbers or underlying technology risk alienating the layperson. The same is true of overly cute or creative titles. Choose product names that indicate utility or value from shoppers’ perspective.

Write eCommerce product names that make sense to shoppers.
Bacca makes wooden stands for laptops and instruments. Its product names are simple yet indicative of their intended use.

4. Highlight Deals and Promotions

Shoppers come to eCommerce sites with specific products in mind. When deals and promotions blend into homepages, they go unnoticed. Call out deals with bright colors, bold text, and full-page photos.

If a sale is of secondary importance, it should be noticeable but shouldn’t compete with the homepage’s primary value proposition. If a promotion is the number one thing shoppers need to know about, shine a spotlight on it.

Sales and deals should stand out on eCommerce homepages.
Sales, deals, and promotions ought to stand out on eCommerce homepages. (Package Free)

Well-organized Category Pages

1. Present Products in Grids

The space afforded by desktop screens is perfect for product grids. Grids align with F-pattern scanning and enable shoppers to compare multiple products quickly. They are especially effective for items that are easy to explain in pictures. To maximize the benefit of grids, try to keep the number of items per row between two and four. At five or more products, grids become significantly harder to scan.

Bonus: List views do work, but they’re best suited for products that require more detailed explanations.

For the best eCommerce user experience, arrange products in grid views on desktop sites.
On desktop sites, shoppers prefer to browse products arranged in grids as opposed to lists. (Wayfair)

2. Ensure Effortless Navigation

Navigation needs to be intuitive. Shoppers shouldn’t struggle to switch between category pages or enable product filters. Sites with large numbers of products in a single category should use the left-column navigation to allow shoppers to sort products according to different attributes (faceted search).

Category page navigation must be intuitive and uncluttered for the most optimal eCommerce experience.
Category page navigation must be intuitive, uncluttered, and easy to use. (TRUE Linkswear)

3. Showcase Bestsellers

Mark bestselling items with unique icons or place them in bestseller sections. Why? Bestsellers are a form of social proof. When people are uncertain, they’ll look to the actions of others to determine their own. This is particularly true of new shoppers.

A similar principle applies to recently launched products. Showcasing new and improved items is more than just a one-time sales tactic; it’s a way to entice shoppers to return for updates in the future.

Show shoppers bestsellers and new arrivals on eCommerce product pages.
Great Jones upholds its homey brand personality by marking bestsellers with an oven mitt.

Polished Product Pages

1. Entice with Social Proof

Social proof instills trust in shoppers. Ratings and reviews have a profound impact on purchasing decisions, but desktop sites are spacious enough to handle other forms of social proof as well:

  • Product photos taken by customers
  • Celebrity and influencer endorsements
  • Quotes from experts
  • Approval badges from independent review sites

The goal of social proof is to help shoppers feel like they’re making informed decisions that align with other people’s positive experiences.

Social proof is a persuasive eCommerce sales tactic.
Ratings, reviews, and customer photos are potent motivators. (Etsy)

2. Use Copy and Imagery to Show the Good Life

eCommerce content should be informative, but there’s more to persuasion than facts and feature lists. Use text and imagery to help shoppers imagine the good life awaiting them after checkout.

Here again, desktop sizes are an advantage. There’s no reason not to use colossal photos and videos or show products from multiple angles. The same goes for copy. Don’t hesitate to make headers huge and surround text blocks with generous amounts of whitespace.

eCommerce UX best practice: Product page copy and imagery should illuminate value.
The text and imagery on Allbirds’ product pages help shoppers envision their ideal futures.

If shoppers aren’t satisfied with what they see on product pages, they shouldn’t have to navigate back to category pages to find other options. Instead, show them alternative products at similar price points or more expensive options with better features, reviews, or brand recognition.

It’s also possible to suggest related items that complement the product page. Buying shoes? Why not get shoelaces and arch supports too? To reduce friction, make sure that related items have an “Add to Cart” option.

Earn more revenue on eCommerce product pages by including upsells and cross-sells.
Amazon’s desktop interface is loaded with opportunities for upsells, cross-sells, and impulse buys.

4. Design Big and Bold “Add to Cart” Buttons

When it comes to product pages, “Add to Cart” buttons have to stand out. Make them big, high contrast, and easy to click. Resist the urge to be witty and write call-to-action text that is unambiguous and action-oriented.

Shoppers must receive visual feedback when they add items to their shopping carts. Many desktop sites do this with cart-summary overlays that slide in momentarily from the side of the screen (a creative way to allow shoppers to transition to checkout or keep browsing).

The "Add to Cart" button should be easy to find and click for the best eCommerce experience.
Design “Add to Cart” buttons that are easy to spot and click. (Kin Euphorics)

Straightforward Checkout Pages

1. Show Shoppers Checkout Progress

eCommerce shoppers spend a great deal of time and energy looking for products online. When they’re ready to buy, they need reassurance that the end of the process is in sight. A progress bar is a simple way to show shoppers where they are during each stage of checkout.

For the best checkout UX, checkout progress bars keep shoppers aware of how close they are to the finish line.
Checkout progress bars help shoppers see the light at the end of the sales funnel. (Mulberry)

2. Accept Multiple Forms of Payment

Convenience and security are shoppers’ primary concerns when they reach payment gateways, and they’re two of the top reasons for cart abandonment. Luckily, there’s a growing number of online payment options that alleviate security fears and expedite checkout. Third-party payment options backed by trusted companies (like Amazon and Apple) may be more appealing to shoppers than entering credit card information.

It’s also worth considering “buy now, pay later” (BNPL) options like Paypal Credit and Klarna. BNPL is a form of point of sale credit that allows customers to pay for products over time after receiving the goods.

Accept multiple payment forms to make eCommerce checkout easier.
By accepting other payment forms than credit cards, eCommerce sites make shopping easier and boost perceived levels of security. (Azteca Soccer)

3. Consider Guest Checkout

Guest checkout may not be right for all eCommerce retailers, especially those whose business strategies revolve around generating customer accounts. However, it’s proven to accelerate checkout, prevent account-creation fatigue, and reduce cart abandonment.

An alternative is requiring emails for order confirmation, then following up with deals in shipping and delivery messages.

For the best checkout UX, provide guest checkout to reduce cart abandonment.
Two Chimps is a coffee subscription service, but it allows shoppers to make single, guest purchases.

4. Provide a Clear Order Summary

This one’s mandatory. Give shoppers concise order summaries that include:

  • Product details and quantities
  • A breakdown of all fees
  • Shipping and billing information

It’s also smart to show product pictures, but make sure attributes match customers’ selections (color, size, finish, etc.).

To ensure superior eCommerce user experiences, order summaries are a must-have.
Order summaries are a mandatory part of the eCommerce checkout process. (Vipp)

5. Boost Trust with Security Badges and Customer Support

Give shoppers confidence by displaying security badges and third-party endorsements. Checkout is a great place to remind shoppers of verified rankings and reviews.

Nearby, include support features like chatbots, return policies, links to FAQs, and customer support lines. Shoppers may not use these resources at checkout, but they’ll have peace of mind knowing they exist.

Security badges and verified reviews increase shopper trust.
In addition to displaying security badges, Physiq Apparel reinforces trust by reminding shoppers that the site has thousands of positive reviews.

Observe eCommerce UX Best Practices

Shopping is tactile. The weight of an object, its angles and edges, its fit and feel—these things matter. In the absence of presence, familiarity and display size are crucial. Desktop delivers both. It’s a comfortable paradigm where screens are spacious, navigation is straightforward, and images and videos are more true to life.

Despite its shortcomings, mobile retail is a relatively new field. There are kinks to untangle, but it remains the future of online shopping. Until then, designers are wise to profit from the present by optimizing desktop sites with eCommerce UX best practices.

Let us know what you think! Please leave your thoughts, comments, and feedback below.

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

Websites can improve eCommerce UX by optimizing home, category, product, and checkout pages. eCommerce UX best practices build trust and help shoppers make informed decisions. For example, image grids work better than lists on category pages, and most shoppers won't complete checkout without an order summary.

UX design is based on a user-centered approach to design. User-centered design is founded on a body of design methods and best practices that exist to help users meet goals. Ultimately, these methods enable designers to create intuitive experiences that align with users’ expectations.

eCommerce user experience is designing for sites that sell products online. Successful eCommerce UX design provides intuitive shopping experiences, employs best practices, gives businesses advantages over their competition, and extends brand reach and appeal.

High-quality eCommerce experiences have similar attributes: intuitive layouts, compelling copywriting, and illustrative visuals. eCommerce pages should make value propositions apparent and provide shoppers with the information and navigation components needed to make effortless purchases.

There are several aspects of eCommerce design. Brand, visual, UI, copywriting, and eCommerce UX must work in tandem to highlight product value and motivate shoppers to make purchases. Successful eCommerce sites are iterative, meaning all design elements are continuously measured and improved.