Best Practices For E-Commerce UI Web Design

When you picture buyers moving through the e-commerce sites you construct, you more or less expect them to follow this journey:

• Step 1: Enter on the homepage or a classification page.

• Step 2: Use the navigational components to orient themselves to the shop and absolutely no in on the particular things they're trying to find.

• Step 3: Review the descriptions and other relevant purchase information for the products that ignite their interest.

• Step 4: Customize the product specifications (if possible), and then add the products they wish to their cart.

• Step 5: Check out.

There are discrepancies they might take along the method (like checking out associated products, perusing different categories, and conserving items to a wishlist for a rainy day). However, for the many part, this is the top pathway you construct out and it's the one that will be most heavily traveled.

That being the case, it's specifically important for designers to absolutely no in on the interface elements that shoppers encounter along this journey. If there's any friction within the UI, you won't simply see a boost in unanticipated variances from the path, however more bounces from the website, too.

So, that's what the following post is going to focus on: How to make sure that the UI along the buyer's journey is attractive, intuitive, interesting, and friction-free.

Let's take a look at 3 parts of the UI that consumers will encounter from the point of entry to checkout. I'll be utilizing e-commerce websites developed with Shopify to do this:

1. Produce A Multifaceted Navigation That Follows Shoppers Around #

There as soon as was a time when e-commerce websites had mega menus that consumers needed to arrange through to discover their preferred product classifications, sub-categories and sub-sub-categories. While you might still encounter them nowadays, the much better choice is a navigation that adapts to the consumer's journey.

THE MAIN MENU #

The first thing to do is to simplify the main menu so that it has only one level below the main category headers. This is how United By Blue does it:

The item classifications under "Shop" are all neatly organized below headers like "Womens" and "Mens".

The only exceptions are the categories for "New Arrivals" and "Masks & Face Coverings" that are accompanied by images. It's the very same reason that "Gifts" remains in a lighter blue font and "Sale" remains in a red font in the main menu. These are very timely and appropriate categories for United By Blue's shoppers, so they deserve to be highlighted (without being too distracting).

Returning to the site, let's look at how the designer was able to keep the mobile site organized:

Rather than shrink down the desktop menu to one that buyers would need to pinch-and-zoom in on here, we see a menu that's adapted to the mobile screen.

It requires a couple of more clicks than the desktop website, however buyers shouldn't have an issue with that given that the menu doesn't go too deep (once again, this is why we can't use mega menus any longer).

ON THE PRODUCT RESULTS PAGE #

If you're constructing an e-commerce site for a customer with an intricate inventory (i.e. great deals of items and layers of categories), the product results page is going to need its own navigation system.

To help shoppers limit how many products they see at a time, you can consist of these two aspects in the style of this page:

1. Filters to narrow down the results by product specification.

2. Sorting to purchase the products based on consumers' priorities.

I've highlighted them on this product results page on the Horne site:

While you might store your filters in a left sidebar, the horizontally-aligned design above the outcomes is a much better option.

This space-saving design allows you to reveal more products at once and is also a more mobile-friendly option:

Remember that consistency in UI style is important to shoppers, particularly as more of them take an omnichannel approach to shopping. By presenting the filters/sorting choices consistently from gadget to gadget, you'll create a more foreseeable and comfortable experience for them in the process.

BREADCRUMBS & SEARCH #

As consumers move deeper into an e-commerce site, they still may require navigational help. There are two UI navigation components that will help them out.

The first is a breadcrumb you could try these out trail in the top-left corner of the product pages, comparable to how tentree does:

This is best used on sites with classifications that have sub-categories upon sub-categories. The additional and more shoppers move away from the product results page and the convenience of the filters and arranging, the more important breadcrumbs will be.

The search bar, on the other hand, is a navigation element that should always be offered, regardless of which point in the journey consumers are at. This chooses stores of all sizes, too.

Now, a search bar will certainly help buyers who are short on time, can't find what they need or merely desire a faster way to an item they currently understand exists. Nevertheless, an AI-powered search bar that can actively forecast what the consumer is looking for is a smarter option.

Here's how that deals with the Horne website:

Even if the shopper hasn't completed inputting their search phrase, this search bar begins dishing out recommendations. Left wing are matching keywords and on the right are leading matching items. The ultimate goal is to accelerate buyers' search and reduce any stress, pressure or frustration they may otherwise be feeling.

2. Show The Most Pertinent Details At Once On Product Pages #

Vitaly Friedman recently shared this suggestion on LinkedIn:

He's best. The more time visitors have to spend digging around for important information about a product, the higher the possibility they'll simply quit and attempt another shop.

Delivering alone is a big sticking point for lots of consumers and, regrettably, too many e-commerce sites wait till checkout to let them understand about shipping expenses and hold-ups.

Due to the fact that of this, 63% of digital buyers wind up deserting their online carts since of shipping costs and 36% do so since of how long it requires to receive their orders.

Those aren't the only details digital buyers wish to know about ahead of time. They likewise want to know about:

• The returns and refund policy,

• The regards to use and privacy policy,

• The payment choices readily available,

• Omnichannel purchase-and-pickup choices available,

• And so on.

But how are you expected to fit this all in within the very first screenful?

PRESENT THE 30-SECOND PITCH ABOVE THE FOLD #

This is what Vitaly was speaking about. You don't have to squeeze each and every single detail about a product above the fold. The store ought to be able to sell the item with only what's in that area.

Bluebella, for instance, has a space-saving style that does not compromise on readability:

With the image gallery relegated to the left side of the page, the rest can be dedicated to the product summary. Due to the fact that of the differing size of the header font styles along with the hierarchical structure of the page, it's simple to follow.

Based upon how this is designed, you can tell that the most essential information are:

• Product name;

• Product cost;

• Product size selector;

• Add-to-bag and wishlist buttons;

• Delivery and returns info (which neatly appears on one line).

The rest of the item information are able to fit above the fold thanks to the accordions used to collapse and broaden them.

If there are other essential information shoppers may require to make up their minds-- like product reviews or a sizing guide-- build links into the above-the-fold that move them to the relevant sections lower on the page.

Quick Note: This design will not be possible on mobile for obvious reasons. The product images will get top billing while the 30-second pitch appears just below the fold.

MAKE EXTRA UI ELEMENTS SMALL #

Even if you're able to concisely provide the product's description, extra sales and marketing elements like pop-ups, chat widgets and more can become just as frustrating as prolonged product pages.

Make sure you have them kept out of the method as Partake does:

The red symbol you see in the bottom left allows consumers to manage the availability features of the site. The "Rewards" button in the bottom-right is in fact a pop-up that's styled like a chat widget. When opened, it invites buyers to sign up with the commitment program.

Both of these widgets open only when clicked.

Allbirds is another one that consists of additional aspects, but keeps them out of the way:

In this case, it includes a self-service chat widget in the bottom-right that has to be clicked in order to open. It likewise places information about its existing returns policy in a sticky bar at the top, freeing up the item pages to strictly concentrate on product details.

3. Make Product Variants As Easy To Select As Possible #

For some items, there is no choice that shoppers need to make besides: "Do I want to include this product to my cart or not?"

For other products, consumers