Best Practices For E-Commerce UI Web Design
When you imagine shoppers moving through the e-commerce sites you build, you basically anticipate 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 store and zero in on the specific things they're searching for.
• Step 3: Review the descriptions and other pertinent purchase information for the products that ignite their interest.
• Step 4: Customize the item requirements (if possible), and after that add the products they want to their cart.
• Step 5: Check out.
There are discrepancies they may bring the way (like checking out associated products, perusing various classifications, and conserving items to a wishlist for a rainy day). However, for the a lot of part, this is the leading pathway you develop out and it's the one that will be most greatly traveled.
That being the case, it's particularly essential for designers to zero in on the interface elements that consumers come across along this journey. If there's any friction within the UI, you will not simply see an increase in unforeseen deviations from the path, however more bounces from the site, too.
That's what the following post is going to focus on: How to make sure that the UI along the purchaser's journey is attractive, instinctive, engaging, and friction-free.
Let's examine 3 parts of the UI that shoppers will come across from the point of entry to checkout. I'll be utilizing e-commerce websites built with Shopify to do this:
1. Develop A Multifaceted Navigation That Follows Shoppers Around #
There as soon as was a time when e-commerce sites had mega menus that consumers needed to sort through to discover their wanted product categories, sub-categories and sub-sub-categories. While you may still face them nowadays, the much better option is a navigation that adjusts to the buyer's journey.
THE MAIN MENU #
The first thing to do is to streamline the primary menu so that it has only one level underneath the primary classification headers. For instance, this is how United By Blue does it:
The item classifications under "Shop" are all nicely arranged below headers like "Womens" custom web apps 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 "Gifts" is in a lighter blue typeface and "Sale" is in a red typeface in the main menu. These are extremely prompt and pertinent classifications for United By Blue's consumers, so they should have to be highlighted (without being too disruptive).
Returning to the website, let's take a look at how the designer was able to keep the mobile website arranged:
Rather than shrink down the desktop menu to one that shoppers would need to pinch-and-zoom in on here, we see a menu that's adapted to the mobile screen.
It requires a few more clicks than the desktop site, however consumers shouldn't have an issue with that considering that the menu does not go unfathomable (again, this is why we can't utilize mega menus anymore).
ON THE PRODUCT RESULTS PAGE #
If you're constructing an e-commerce site for a customer with a complicated stock (i.e. lots of products and layers of categories), the item results page is going to require its own navigation system.
To help shoppers narrow down how many items they see at a time, you can consist of these two components in the design of this page:
1. Filters to limit the results by item requirements.
2. Arranging to buy the products based upon buyers' top priorities.
I've highlighted them on this item results page on the Horne site:
While you might save your filters in a left sidebar, the horizontally-aligned style above the results is a much better option.
This space-saving style allows you to reveal more products at once and is also a more mobile-friendly choice:
Remember that consistency in UI style is essential to shoppers, especially as more of them take an omnichannel approach to shopping. By presenting the filters/sorting alternatives regularly from gadget to gadget, you'll produce a more predictable and comfortable experience for them while doing so.
BREADCRUMBS & SEARCH #
As consumers move deeper into an e-commerce site, they still might require navigational assistance. There are 2 UI navigation aspects that will assist them out.
The first is a breadcrumb path in the top-left corner of the product pages, similar to how tentree does:
This is best utilized on websites with categories that have sub-categories upon sub-categories. The additional and additional consumers move far from the product results page and the benefit of the filters and arranging, the more important breadcrumbs will be.
The search bar, on the other hand, is a navigation element that ought to constantly be readily available, no matter which point in the journey shoppers are at. This goes for shops of all sizes, too.
Now, a search bar will definitely help shoppers who are short on time, can't find what they need or simply desire a shortcut to a product they already understand exists. An AI-powered search bar that can actively predict what the shopper is looking for is a smarter choice.
Here's how that deals with the Horne website:
Even if the shopper hasn't ended up inputting their search phrase, this search bar begins dishing out ideas. Left wing are matching keywords and on the right are leading matching products. The ultimate goal is to accelerate shoppers' search and reduce any tension, pressure or disappointment they might otherwise be feeling.
2. Show The Most Pertinent Details At Once On Product Pages #
Vitaly Friedman just recently shared this suggestion on LinkedIn:
He's right. The more time visitors need to invest digging around for pertinent information about an item, the greater the possibility they'll simply quit and attempt another shop.
Shipping alone is a huge sticking point for numerous shoppers and, unfortunately, a lot of e-commerce sites wait up until checkout to let them learn about shipping costs and hold-ups.
Since of this, 63% of digital consumers wind up abandoning their online carts because of shipping costs and 36% do so due to the fact that of how long it takes to receive their orders.
Those aren't the only information digital consumers want to know about ahead of time. They also need to know about:
• The returns and refund policy,
• The regards to usage and personal privacy policy,
• The payment alternatives available,
• Omnichannel purchase-and-pickup options offered,
• And so on.
However how are you anticipated to fit this all in within the first screenful?
PRESENT THE 30-SECOND PITCH ABOVE THE FOLD #
This is what Vitaly was discussing. You don't need to squeeze every detail about a product above the fold. But the shop should have the ability to offer the product with only what's in that area.
Bluebella, for instance, has a space-saving style that does not jeopardize 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 typefaces as well as the hierarchical structure of the page, it's easy to follow.
Based upon how this is developed, you can tell that the most crucial information are:
• Product name;
• Product cost;
• Product size selector;
• Add-to-bag and wishlist buttons;
• Delivery and returns info (which nicely appears on one line).
The rest of the product information are able to fit above the fold thanks to the accordions used to collapse and broaden them.
If there are other important details buyers might need to comprise their minds-- like item evaluations or a sizing guide-- build links into the above-the-fold that move them to the pertinent areas lower on the page.
Quick Note: This design will not be possible on mobile for obvious factors. The item images will get leading billing while the 30-second pitch appears simply below the fold.
MAKE EXTRA UI ELEMENTS SMALL #
Even if you're able to concisely deliver the item's description, extra sales and marketing components like pop-ups, chat widgets and more can become simply as bothersome as lengthy item pages.
So, make sure you have them stored out of the method as Partake does:
The red sign you see in the bottom left allows buyers to control the ease of access functions of the website. 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 join the commitment program.
Both of these widgets open just when clicked.
Allbirds is another one that consists of additional components, 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 also puts details about its current returns policy in a sticky bar at the top, freeing up the product pages to strictly focus on product information.
3. Make Product Variants As Easy To Select As Possible #
For some items, there is no choice that shoppers have to make aside from: "Do I wish to add this product to my cart or not?"
For other products, buyers need to define product versions prior to they can add an item to their cart. When that's the case, you want to make this procedure as pain-free as possible. There are a few things you can do to ensure this occurs.
Let's state the shop you develop offers women's undergarments. Because case, you 'd have to offer variations like color and size.
However you would not wish to just develop a drop-down selector for each. Imagine how tedious that would get if you asked shoppers to click on "Color" and they needed to sort through a lots or so options. Likewise, if it's a standard drop-down selector, color examples may not appear in the list. Rather, the shopper would need to select a color name and wait on the product picture to update in order to see what it appears like.
This is why your variants should dictate how you design each.
Let's utilize this product page from Thinx as an example:
There are 2 variants available on this page:
• The color variation reveals a row of color examples. When clicked, the name of the color appears and the item image adjusts accordingly.
• The size variant lists sizes from extra-extra-small to extra-extra-extra-large.
Notice how Size comes with a link to "size chart". That's because, unlike something like color which is quite clear-cut, sizing can change from store to shop in addition to area to area. This chart offers clear assistance on how to pick a size.
Now, Thinx uses a square button for each of its variations. You can change it up, however, if you 'd like to develop a difference in between the options shoppers need to make (and it's most likely the much better style option, to be sincere).
Kirrin Finch, for example, puts its sizes inside empty boxes and its color swatches inside filled circles:
It's a small difference, however it needs to suffice to assist consumers shift smoothly from choice to choice and not miss out on any of the needed fields.
Now, let's say that the shop you're building doesn't offer clothing. Rather, it offers something like beds, which clearly will not consist of choices like color or size. At least, not in the very same way just like clothes.
Unless you have popular abbreviations, symbols or numbers you can use to represent each variation, you ought to use another kind of selector.
For instance, this is a product page on the Leesa website. I've opened the "Pick your size" selector so you can see how these options are displayed:
Why is this a drop-down list as opposed to boxes?
For starters, the size names aren't the very same length. Box selectors would either be inconsistently sized or some of them would have a heap of white space in them. It truly wouldn't look great.
Leesa carefully utilizes this little space to provide more details about each bed mattress size (i.e. the typical vs. sale cost). So, not only is this the very best design for this particular variant selector, but it's also a terrific way to be effective with how you provide a great deal of information on the item page.
A NOTE ABOUT OUT-OF-STOCK VARIANTS #
If you want to get rid of all friction from this part of the online shopping process, make certain you come up with an unique design for out-of-stock variants.
Here's a better look at the Kirrin Finch example again:
There's no mistaking which options are readily available and which are not).
Although some shoppers might be irritated when they realize the t-shirt color they like is just readily available in a couple of sizes, think of how irritated they 'd be if they didn't learn this up until after they chose all their versions?
If the item selection is the last step they take before clicking "add to cart", do not hide this details from them. All you'll do is get their hopes up for a product they put in the time to read about, take a look at, and fall for ... only to find it's not readily available in a size "16" until it's too late.
Wrapping Up #
What is it they state? Great style is undetectable?
That's what we require to bear in mind when developing these crucial user interfaces for e-commerce sites. Naturally, your customer's shop requires to be attractive and memorable ... But the UI elements that move buyers through the site should not provide stop briefly. Simplicity and ease of use need to be your leading priority when developing the main journey for your client's shoppers.
If you're interested in putting these UI design philosophies to work for new clients, think about joining the Shopify Partner Program as a store developer. There you'll be able to make repeating earnings by building new Shopify stores for clients or moving shops from other commerce platforms to Shopify.