Best Practices For E-Commerce UI Web Design
When you visualize shoppers moving through the e-commerce websites you build, you more or less expect them to follow this journey:
• Step 1: Enter on the homepage or a category page.
• Step 2: Use the navigational aspects to orient themselves to the shop and no in on the specific things they're searching for.
• Step 3: Review the descriptions and other relevant purchase details for the items that pique their interest.
• Step 4: Customize the item requirements (if possible), and after that include the items they want to their cart.
• Step 5: Check out.
There are discrepancies they may bring the method (like checking out associated items, browsing various classifications, and conserving items to a wishlist for a rainy day). For the most part, this is the top pathway you build out and it's the one that will be most heavily taken a trip.
That being the case, it's specifically essential for designers to zero in on the interface aspects that shoppers come across along this journey. If there's any friction within the UI, you will not just see an increase in unanticipated variances from the path, however more bounces from the website, too.
So, that's what the following post is going to concentrate on: How to ensure that the UI along the buyer's journey is attractive, instinctive, engaging, and friction-free.
Let's analyze three parts of the UI that consumers will experience from the point of entry to checkout. I'll be utilizing e-commerce sites developed with Shopify to do this:
1. Create A Multifaceted Navigation That Follows Shoppers Around #
There once was a time when e-commerce sites had mega menus that buyers needed to sort through to find their desired product classifications, sub-categories and sub-sub-categories. While you might still run into them nowadays, the much better option is a navigation that adapts to the buyer's journey.
THE MAIN MENU #
The very first thing to do is to streamline the main menu so that it has just one level beneath the main classification 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 classifications 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 style and "Sale" remains in a red typeface in the primary menu. These are extremely timely and pertinent classifications for United By Blue's consumers, so they are worthy of to be highlighted (without being too disruptive).
Returning to the site, let's look at how the designer was able to keep the mobile website arranged:
Instead of shrink down the desktop menu to one that shoppers would need to pinch-and-zoom in on here, we see a menu that's adjusted to the mobile screen.
It requires a few more clicks than the desktop website, however shoppers should not have an issue with that given that the menu doesn't go too deep (again, this is why we can't utilize mega menus anymore).
ON THE PRODUCT RESULTS PAGE #
If you're developing an e-commerce website for a client with an intricate inventory (i.e. great deals of products and layers of classifications), the product results page is going to require its continue reading this own navigation system.
To assist consumers narrow down how many products they see at a time, you can consist of these 2 aspects in the style of this page:
1. Filters to narrow down the outcomes by product spec.
2. Arranging to buy the products based upon buyers' concerns.
I've highlighted them on this product results page on the Horne website:
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 show more products at the same time and is likewise a more mobile-friendly option:
Consistency in UI design is crucial to buyers, particularly as more of them take an omnichannel method to shopping. By presenting the filters/sorting options regularly from device to device, you'll create a more foreseeable and comfortable experience for them in the process.
BREADCRUMBS & SEARCH #
As shoppers move deeper into an e-commerce site, they still might need navigational support. There are 2 UI navigation components that will assist them out.
The first is a breadcrumb trail in the top-left corner of the product pages, comparable to how tentree does:
This is best utilized on sites with categories that have sub-categories upon sub-categories. The additional and further consumers move away from the product results page and the benefit of the filters and sorting, the more vital breadcrumbs will be.
The search bar, on the other hand, is a navigation component that need to always be offered, regardless of which point in the journey buyers are at. This opts for stores of all sizes, too.
Now, a search bar will certainly assist consumers who are brief on time, can't find what they require or simply want a faster way to a product they already know exists. An AI-powered search bar that can actively anticipate what the buyer is looking for is a smarter option.
Here's how that deals with the Horne site:
Even if the consumer hasn't finished inputting their search phrase, this search bar starts dishing out suggestions. On the left are matching keywords and on the right are leading matching items. The supreme objective is to accelerate shoppers' search and minimize any stress, pressure or frustration they may otherwise be feeling.
2. Program The Most Pertinent Details At Once On Product Pages #
Vitaly Friedman recently shared this idea on LinkedIn:
He's ideal. The more time visitors need to spend digging around for essential information about an item, the greater the opportunity they'll just quit and attempt another shop.
Delivering alone is a huge sticking point for numerous buyers and, sadly, a lot of e-commerce websites wait up until checkout to let them learn about shipping costs and hold-ups.
Since of this, 63% of digital shoppers end up deserting their online carts because of shipping costs and 36% do so due to the fact that of the length of time it takes to get their orders.
Those aren't the only details digital shoppers would like to know about ahead of time. They likewise wish to know about:
• The returns and refund policy,
• The regards to use and personal privacy policy,
• The payment alternatives readily available,
• Omnichannel purchase-and-pickup options available,
• And so on.
But how are you anticipated to fit this all in within the very first screenful?
PRESENT THE 30-SECOND PITCH ABOVE THE FOLD #
This is what Vitaly was talking about. You don't have to squeeze every single information about an item above the fold. However the store must have the ability to offer the item with only what's in that area.
Bluebella, for example, 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 committed to the item summary. Since of the varying size of the header font styles along with the hierarchical structure of the page, it's simple to follow.
Based on how this is developed, you can inform that the most crucial information are:
• Product name;
• Product price;
• Product size selector;
• Add-to-bag and wishlist buttons;
• Delivery and returns information (which nicely appears on one line).
The rest of the item details have the ability to fit above the fold thanks to the accordions used to collapse and expand them.
If there are other crucial details shoppers might need to make up their minds-- like item reviews or a sizing guide-- develop 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 reasons. So, the product images will get top 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 product's description, additional sales and marketing elements like pop-ups, chat widgets and more can become just as annoying as prolonged item pages.
So, make sure you have them stored out of the way as Partake does:
The red sign you see in the bottom left enables buyers to control the availability functions 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 consumers to sign up with the commitment program.
Both of these widgets open only when clicked.
Allbirds is another one that consists of extra components, but keeps them out of the way:
In this case, it consists of a self-service chat widget in the bottom-right that has to be clicked in order to open. It also puts information about its current returns policy in a sticky bar at the top, freeing up the item pages to strictly concentrate on item details.
3. Make Product Variants As Easy To Select As Possible #
For some products, there is no choice that shoppers have to make besides: "Do I want to add this product to my cart or not?"
For other products, shoppers have to specify product variations prior to they can add a product to their cart. When that's the case, you wish to make this process as pain-free as possible. There are a couple of things you can do to ensure this takes place.
Let's say the shop you create sells women's underwears. Because case, you 'd have to offer variations like color and size.
You would not want to simply create a drop-down selector for each. Imagine how tedious that would get if you asked shoppers to click on "Color" and they had to arrange through a dozen or two alternatives. Likewise, if it's a basic drop-down selector, color examples might not appear in the list. Instead, the consumer would need to choose a color name and wait for the product image to update in order to see what it appears like.
This is why your versions ought to dictate how you create each.
Let's use this product page from Thinx as an example:
There are two variants offered on this page:
• The color version shows a row of color swatches. When clicked, the name of the color appears and the item picture adjusts accordingly.
• The size alternative 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 pretty clear-cut, sizing can alter from shop to shop as well as area to region. This chart offers clear assistance on how to pick a size.
Now, Thinx utilizes a square button for each of its variants. You can change it up, however, if you 'd like to develop a difference in between the options consumers need to make (and it's probably the better design choice, to be truthful).
Kirrin Finch, for instance, positions its sizes inside empty boxes and its color examples inside filled circles:
It's a little distinction, but it must suffice to assist consumers transition smoothly from decision to choice and not miss any of the needed fields.
Now, let's state that the shop you're developing does not offer clothing. Rather, it offers something like beds, which certainly will not include choices like color or size. At least, not in the same method just like clothes.
Unless you have well-known abbreviations, signs or numbers you can utilize to represent each variation, you must utilize another kind of selector.
For instance, this is an item page on the Leesa website. I've opened the "Pick your size" selector so you can see how these choices are displayed:
Why is this a drop-down list rather than boxes?
For starters, the size names aren't the exact same length. So, box selectors would either be inconsistently sized or a few of them would have a lots of white area in them. It truly wouldn't look excellent.
Also, Leesa carefully uses this little area to supply more details about each bed mattress size (i.e. the regular vs. price). So, not just is this the very best design for this particular variant selector, but it's also an excellent method to be effective with how you provide a great deal of information on the product page.
A NOTE ABOUT OUT-OF-STOCK VARIANTS #
If you want to eliminate all friction from this part of the online shopping procedure, ensure you develop a distinct design for out-of-stock variants.
Here's a better take a look at the Kirrin Finch example again:
There's no mistaking which choices are offered and which are not).
Although some shoppers might be annoyed when they realize the t-shirt color they like is only readily available in a few sizes, imagine how upset they 'd be if they didn't discover this till after they picked all their variants?
If the item selection is the last step they take previously clicking "add to cart", don't hide this information from them. All you'll do is get their hopes up for an item they put in the time to check out, take a look at, and fall for ... only to find it's not readily available in a size "16" till it's far too late.
Wrapping Up #
What is it they say? Great design is undetectable?
That's what we require to remember when developing these essential user interfaces for e-commerce websites. Naturally, your client's shop requires to be appealing and unforgettable ... But the UI components that move consumers through the website must not give them pause. Simplicity and ease of use need to be your leading priority when designing the main journey for your customer's buyers.
If you're interested in putting these UI style philosophies to work for brand-new customers, consider signing up with the Shopify Partner Program as a shop developer. There you'll have the ability to earn recurring revenue by building new Shopify stores for customers or migrating stores from other commerce platforms to Shopify.