Ecommerce websites can be very subjective, everyone has their own opinions as to what looks good and what works well. In this article, we are going share our favourite ecommerce web design examples to show behind the scenes evidence of how certain UX techniques, that don’t seem significant at first, can make a big difference to the design & functionality of the website.
Best Product Lists & Filtering
The importance of the product listings page
This page is key for the user in finding exactly what they are looking for, even if they don’t quite know exactly what that is yet. Sure, there’s a search feature to enable the user to find a specific product (or set of products), but when the user only has a few attributes in mind of what they desire, then a user-friendly, easy to navigate, aesthetically pleasing product list/filter will help them find the perfect product for them.
The key is to build something that is pleasing to the eye and simple enough for anyone to use.
The site has hierarchy breadcrumbs on the category product list, the breadcrumbs can be clicked
Large-scale eCommerce websites – including those in our list of our favourite ecommerce web design examples – can often become a maze. If the user wants to return to the category listing or search results page, but can’t remember how they got there in the first place, then breadcrumbs are a highly-effective method of allowing the user to navigate the website more easily.
Breadcrumbs should be clear, concise and obvious. Using a “back” button makes it even easier for the user as well. The easier the user can find the product they want, the less likely they are to leave the website and go elsewhere.
Increasing the browser width adds more columns, content, or larger thumbnails
Of course, responsive design is an absolute must, that goes without saying, but a truly responsive design that scales seamlessly with the browser/device viewport width is key. Allowing the user to view a snapshot of each product at the optimal size will mean they are able to see the perfect amount of detail, whilst scanning through the highest possible number of products.
The number of results is indicated upon search
Upon searching for a product or attribute, the number of results is displayed. That’s a good indication to the user whether their search is too broad, or too narrow. In this particular case, the displayed number of results isn’t too overpowering; they don’t take any focus away from the more important elements on the page.
List Items: Interface & Hit Areas
Product specs, brands, or features are visually separated from the product title
Within the product description, the most important factor is the product title and price. This has to be clear, descriptive and the largest font size compared to the other attributes. Aside from imagery, which has to be strong regardless, this is what differentiates each product and allows the user to make further comparisons other than the look/style of the product. It is increasingly important, the larger the eCommerce store is.
That being said, other attributes like colour, category, size (or any attribute depending on the type of product) should be considered here. It will result in the user more accurately finding the product they desire, without having to click through as many single product pages before finding the right one for them.
We have already established the price is displayed prominently, which includes the old/discounted price.
Single-path – Yes, the list item is implemented as one large hit area. The entire element is clickable through to a single product
To have a “view product” button on each product listing isn’t necessary. Instead, what Adidas has done here, has enabled the entire product content to be clickable. This helps to reduce clutter, remain focus on more important factors and reduce the height of each item to allow for a greater number of products to be displayed within the viewport.
A secondary image on hover is present
Whilst this is only on desktop (or non-touchscreen devices), this allows the user to view other images for a particular product.
Filtering: Scope & Logic
Yes, it is possible to apply two values of the same filter type
Combining multiple filters, reduces the number of items in the search list, this displaying only products tailored to the users’ requirements.
Sticky filter bar
Even upon filtering the products, the user will likely have to scroll through the page in search of the item they desire. In doing so, they may want to filter further but in turn, not lose their scroll position on-page. This is when a sticky filter bar (one that has a fixed position on the page) can be highly useful.
This must work asynchronously – loading the new results without refreshing the page and forcing the user to the top of the page again.
Best Single Product Page
Often users will land directly on a single product page from google. This page must be content-rich. Once landing on this page, the user may not even scroll down further. That is why key information must be present and visible above the fold.
Ultimately this is where the user decides whether and what product to purchase. Unlike in a physical store, you aren’t able to touch the product or ask questions to a salesperson. This is why this page must be content-rich, to drive users there in the first place. It must also be highly descriptive and aesthetically pleasing, so the user stays on the page and can make an informed decision. Competition is high, this page must stand out from the rest.
Product Page Layout
Image gallery items are clickable & draggle
Without strong and easy to navigate imagery, the chances of converting a visit to that page into a sale dramatically decreases. Without strong imagery, the user is likely to not be comfortable purchasing that product. Angela Roche has written an informative article on the importance of imagery in your eCommerce website, find it here.
On desktop, there are thumbnails easily within the viewport and on mobile, along with any other clutter, these thumbnails have been removed to ensure the maximum size of this image is displayed.
Certain products have finer detail, so with the functionality to zoom in further (on both desktop and mobile), the user is better able to mimic their online shopping experience as if they were in a physical store.
Upsells, cross-sells & recently viewed
It is often you go to a site with a specific product in mind. But a lot of users browse and purchase on impulse. With that in mind, maximising the number of products related to the product currently being viewed is likely to result in the user adding additional products to their basket and thus, creating a higher average order value per customer.
Upsells and cross-sells mustn’t be a random set of products, they must be products most similar to the current one. The user wouldn’t usually have landed on the current page by mistake, they would have searched for it (whether that’s from the search results or from the navigation), but the product might not be completely what they want or they might want to pair it with other products.
On large scale eCommerce sites, users might browse through many products before finding the one they like. This product may have been a previous one they viewed, but they are unable to remember the product name. This is where a “recently viewed” feature can be useful, to allow easy navigation back to that particular product and avoid the user leaving the site altogether.
This relates back to the first point regarding ‘above the fold’ content. Sometimes, the information here isn’t enough. The user might need more detailed information in order to make a sensible decision. Whilst this is an important feature of a single product page, it must not take the focus away from the key information. This is why only partially showing this section before the user clicks or interacts with it, is important from a UX and design perspective.
The ‘Buy’ Section
AJAX Add to cart (page doesn’t reload)
Allowing items to be added to the cart through AJAX simply means this process is achieved without reloading the page. This is beneficial in creating a faster and smoother add-to-cart process, where the user will not lose their position on the page. If this functionality is used for this process, then an animation or alert must be displayed so the user can recognise this item has in fact added to the cart.
Delivery information in modal
A key factor to any eCommerce shopping experience is delivery – and this is true for our favourite ecommerce web design examples. Whilst this does have to be priced competitively, the ease with which this information can be accessed by the user is vital. This is why displaying the delivery information, whether it’s product-specific or site-wide, in a modal/popup on that page is key. If the delivery information is on another page, the user might lose the page they are currently on and not purchase the product.
Unique information here, specific to the type of product, might be a make or break for some users. Take this example. Despite the imagery being very clear, the user still might struggle to know which size will fit them best. By displaying the height of the model and the size of clothing they are wearing, the user will be able to compare that to their body composition and more accurately choose the best variant for them. This will likely, in turn, minimise the number of returns from sizing errors.
Best Mobile E-Commerce
Etsy is one of our favourite ecommerce web design examples. Their homepage is likely the first page the user lands on. This page is usually viewed on mobile devices. With this being said, it’s arguably the most important page. Your design must be a mobile-first approach. Avoid high bounce rate.
61–70% of categories are visually represented
Categories relevant to season/popularity
Displaying product categories that users are most likely to click on will drive traffic to single product pages and result in a higher chance to convert a user session into a sale. If the user can more easily find the product they are looking for, then there is less chance they will exit the site before they lose interest.
The imagery used on categories & layout
Allowing 6 categories to be above the fold and to have category images presented next to the titles, all within the viewport, enables users to more easily find the product category they are looking for, even without reading the title.
Search and the main navigation appear before the homepage content
Multi-level off-canvas navigation
The structure of this navigation allows for multiple levels of sub-pages, which are in fact sub-categories. Sometimes product categories can be too specific, where users might not know exactly what they are looking for. Using broad terms for top-level categories, like Mother’s Day, for example, will mean users can more accurately find the subcategory, than the product they’re looking for. You’ll find that this is a theme across our favourite ecommerce web design examples.
Upon clicking to the lower level navigation menu, there are “backlinks” to the previous (or parent) category. This is especially important to avoid the user losing their place within the navigation.
Sticky search bar and navigation
Mobile pages can often require a lot of scrolling when compared with viewing the site on a desktop. Usually, there is the same amount of information, but instead of this information being displayed horizontally, it’s often “stacked” vertically. This is where “sticky” elements can be appropriate. In this case, it’s a fixed search and navigation bar as you scroll down the page.
It’s only a small change – it’s one you’ll see on a number of our favourite ecommerce web design examples – but it can have a big impact on the overall user experience, especially as the search field is very prominent.
Often users come across an eCommerce site in search of products as gifts. They might not know exactly the product or product type, they are looking for. As a result, they might need some inspiration for what to search for. This is where the suggested search comes in. Before typing, the most common search entries are visible and when the user starts to type, these common entries are tailored more towards the content being typed.
Can browse products without creating an account
In an ideal world, you want every customer who purchases a product to create an account. This way you can target them with promotional offers and are then more likely to create repeat customers. But, not everyone wants to create an account, especially if they aren’t sure of the products available within the store.
Allowing customers to purchase products, or at least browse them, without creating an account will in fact mean that users are more likely to complete the checkout process. You can of course offer rewards and discounts for guest customers that create an account, as an incentive, but it shouldn’t be forced
Footer has semantic sections with headers
Instinctively people will go to the footer of the website to find key information that does not directly link to the shop. This includes FAQ’s, Help, Contact etc. All of this type of information is displayed in the footer, as it should, within dropdown fields. Not every item here needs to be displayed in a long list, which is why the top-level pages need to only be present without any user interaction.
Currency & Language
This of course depends on the size of the store and the target audience, but as your eCommerce site expands and grows, the demographic of users do too – that’s if you decide to deliver/sell internationally.
If this is the case, then language & currency convertor is required. Most users won’t buy from a site in another language, currency or both.
These settings are displayed in a modal (popup) to avoid cluttering other important elements on the page. They are usually settings that only need to be changed once, so whilst they do need to be easily accessible, they don’t need to be visible after the changes have been made. You can then save these settings to your account (or within your browser) so they do not have to be amended every time you visit a page.