ecommerce site search header

Paving the Path to Purchase: E-commerce UX Best Practices

Mobile e-commerce 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 e-commerce UX best practices.

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

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

Swirling within the statistical splendor are proclamations of an e-commerce 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.

The E-commerce Experience in Four Pages

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 e-commerce experiences shoppers desire. It all starts with the homepage.

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.

2. Enable Search From Anywhere

E-commerce 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.

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.

4. Highlight Deals and Promotions

Shoppers come to e-commerce 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.

Clean design

Nearly 60% of people prefer to interact with a visually pleasing website, according to a survey from Adobe. When it comes to homepage design, less is more. It can be tempting to add a lot of text or photos, but that approach can overwhelm your visitors.

Think of your homepage as your storefront. You wouldn’t put everything you sell in the front window, right? Instead, engage and entice customers by using a few words or sentences that convey your most important message paired with striking graphics.

White space, also called “negative space,” allows balance and breathing room for your website elements. It minimizes distractions and helps consumers absorb and comprehend your content and offerings. The use of bullet points on product pages can also make content more scannable.

High-quality photos

You’ve heard that a picture is worth a thousand words. This is essential to your website. Our 2018 study on online shoppers found that more than 75% said great photos influenced whether or not they made a purchase.

Take a “show don’t tell” approach. For example, our study found that nearly two-thirds of shoppers said multiple camera angles influenced their buying decision, and over half said a mix of closeups and distance shots were important.

If you’re handy with a camera and have good lighting, you can take photos yourself. If not, hire a professional photography service. Making sure you have good photos can help reduce your return rate. Twenty-two percent of online purchases are returned because the item looked different than the photos.

20 Ecommerce Site Search Best Practices

Design

Make the Search Box Easily Visible

Make the Search Box Big Enough for Queries

Many users would get confused over a short search box that does not contain their full search query. A more comfortable experience would provide a box big enough to contain a decent amount of words.

But statistically, most queries do not exceed 27 characters. So definitely take that into account as a minimum size for your search box on desktop, mobile or tablet devices. This will help create ecommerce search experiences that truly benefit your shoppers.

Enable Product Image Browsing with Mouse-overs

Wolf & Badger has a great set-up for image browsing when you mouse-over one of their products. In the example below, a picture of a model wearing the advertised shirt shows up after you mouse-over.

Enable Dynamic Thumbnails to Match Queries

According to Baymard Institute, 54% of online shops display static thumbnails that do not match their users’ search queries. This lack of resonation with search queries easily results in website abandonment after the users do not see the colorway or variable of the product they are looking for.

Show the Query on the Search Page

With all the distractions of social media and technology nowadays, shoppers can easily forget what they were searching for. And especially if the results are irrelevant or absent, your visitors won’t be able to easily go back and adjust the search query if it is not displayed.

User Experience

Show Product Details to Save Your Customers Time

The jeans pants enlisted above are accompanied with details such as prices, jeans fit types, and product images. Users will scroll down further if any products do not match their criteria, and therefore will be more likely to find a product they would actually buy.

Enable Sorting Options

Allow Customers to Filter out Results

It is always a disappointment to find a great product that does not match your size or any other necessary criteria you set for your purchase. For example, I hate to browse through XL only options for clothes, when the only size I can wear is S.

Enable the Search Box on All Website Pages

Focus on Mobile Site Search Optimization

Conversion

Suggest Upsells & Cross-sells

You can set this up by associating the products in the results with your existing product bundles. Your search page will retrieve products that may interest your visitor based on their search query. This can increase your customer conversion rate and average order value.

Add “Favorite” and “Add-to-Cart” Buttons to the Search Results

Show Results for More Than Just Products

Never Show a “Nothing Found” Result

“Nothing Found” pages are where most ecommerce retailers lose customers via site search. You will want to display products based on the user’s browsing history or show some best selling categories or products.

Algorithm

Show Results for Terms Customers Actually Use

Unless the vast majority of your buyers have a good grasp of your industry jargon, you will want to arm all of your product pages with simpler terms that your visitors actually search.

When you use the language your customer speaks and diversify the terms in your product pages, you increase the accuracy of your site search results and consequently benefit online shoppers.

Leverage Crowd Logic to Learn More About Your Customers

Set up Strong Typo Tolerance

Enable Synonym Search (Metadata)

Integrate Natural Language Processing (NLP) In Your Site Search

Search nowadays is all about user intent. Top search engines such as Google leverage natural language processing to return results that are more focused about the user rather than the keyword itself.

NLP for ecommerce sites involves studying the most clicked results to set up product ranking rules. You will want to float your best performing products to the top, followed by the lesser clicked products.

Search Query Auto-complete

According to Baymard Institute, autocomplete suggestions lengthen the duration of the search, while maintaining a satisfied experience for the user. The longer the user is adjusting their search query, the more likely they are to find their target product.

Sources:

https://www.toptal.com/designers/e-commerce/ecommerce-ux-best-practices
https://www.forbes.com/sites/square/2020/11/24/6-best-practices-for-ecommerce-website-design/
https://www.nosto.com/playbook/ecommerce-site-search/