E-Commerce UX Best Practices

To talk about how to leverage UX to achieve better results or create an optimal layout for e-commerce websites (e-shops), it is essential to explain what UX is.

UX stands for User Experience, and we often come across this term combined with the word design as UX design or User Experience Design. The combination of the acronym UX and the word design often makes people think that UX design is the same as web design (UI) or the design of different pages or that it is about graphics and visual design.

However, the goal of UX design is entirely different, specifically creating a relationship between the user and the brand, where the user is the center of attention. It is the design process that accompanies us to design a product or service from its inception to its launch or deployment to production.

The difference between UX and UI design and an explanation of why, in addition to the visual of the page, you can also depend on the layout, can be explained on a simple example of ketchup bottles.

In the picture on the left, we see the bottles of ketchup that are subject to some design. It can be said that at first look, the visual appeal of both bottles is good and fulfills its purpose. In the picture on the right, you can see that despite the excellent design of both bottles, the experience of using them is different, which will have an additional impact on the customer’s purchasing decisions. Therefore, the same attention must be placed on UX as the overall visual.

One of the mistakes in the e-commerce business is that we don’t know our shoppers and often focus primarily on quantitative data, such as analytics and the technical part of the solution and specification of functions that we want the e-shop to contain because it will solve our specific problems.

However, there is not enough space for the customers, so we don’t know their key concerns and needs and how to meet them, which is often reflected in the profitability and effectiveness of the e-shop and running campaigns.

The following example illustrates the importance of focusing on getting to know your customer. For example, we can take two people from the same country, of the same age, with a family, both going on vacation to the same places. Still, the difference between them is, for example, their profession, lifestyle, or religion, which affects their shopping behavior.

Content hierarchy and layouts for great e-shops

We’ve discussed what UX is, what it is related to, and why it is vital to use it. We will now discuss this term in more detail on the sample of an e-shop page.

Home page

One of the essential pages of the online store is undoubtedly the home page. It is the first thing that the online shoppers come into contact with after opening the e-shop and plays its role in the decision-making of visitors, which we can divide into three basic types:

1. the customer who came to the e-shop and knows precisely what they want
2. the customer who has an idea of what they would like but don’t know specifically
3. the customer who is looking for inspiration, therefore, doesn’t have a concrete idea of ​​what to would buy

Each customer approaches their purchase differently, so the home page layout should match their shopping behavior. One of the basics is to create engaging content on the landing page, especially if you know your potential customers well.

However, there are general rules on how to build suitable content for online shoppers, e.g., banner sites for promotions and seasonal products, which don’t need to allocate unnecessarily much space because they will not always bring you as many clicks as you expect. The exception is a season discount or an attractive discount or offer. Under the banner site, it is appropriate to place basic information about the purchase that interests the user – return policy, payment options, product delivery times, shipping, complaints, etc.

One of the favorite parts for customers is the product listings that showcase alongside high-quality images the most popular product categories such as Popular in the category, Most popular products, Top products on offer, or The most popular brands. For undecided shoppers, strategically placed detailed product descriptions can also be instrumental in driving conversions.

.

Product recommendations and discount communication work mainly for customers who haven’t decided what they want to buy or are looking for inspiration. For potential customers, you have to gain their trust first. User feedback or verification from the review portals will help you.

The lower part of the home page is used to communicate the content that e-commerce sites use to support their sales. In most cases, this is in the form of a blog or displayed posts from social networks. Incorporating SEO-friendly content in this section can also improve visibility and attract organic traffic. If you engage the user with your content in this section, it is possible that they will be more motivated to subscribe to your newsletter or follow your social networks, so this is an excellent place to place them.

E-shop header

The home page must start with a header, which by default contains a logo that serves as a click on the home page. Then you typically see comprehensive navigation in the form of a mega menu. An essential part is an expanded search box. Last but not least, the e-shop’s header has to contain essentials like a cart with a summary of the price, login/account creation, or a wish list click.

The header is important, especially for the customers who know what they want and, in most cases, head straight to the search, which also leads to a high purchase probability. Navigation is used mainly by customers who are in the product discovery phase of their shopping process and need more time to decide.

E-shop footer

A footer is where the shopper often searches for traffic information, payment options, contact, ads, clicks on social networks, etc. Suppose the user gets used to scroll to the bottom of the page. In that case, they were likely looking for something or liked the e-shop content, so it is advisable to place, in addition to legislative items in the footer, links to the main categories of the e-shop, so that shoppers can continue browsing comfortably.

Navigation

E-shops’ navigation and structure of e-shops have a significant impact on metrics like conversion rate, sales, or bounce rate. It’s logical that if shoppers can’t figure out where and how to find what they want or where they are, they’ll leave the website without any reason to come back. Without straightforward and functional navigation, they will not be able to find out how to go through the product catalog, blog, office or store, add to cart button, etc.

If the user should visualize the main navigation on a website or online store, they usually imagine a horizontal bar menu in the header. A frequently used space to support the top-main navigation is the sidebar. When users move to a top-level category, their subcategories appear in the sidebar. Sidebar navigation features are an excellent solution for online stores or websites that require much information to structure. In addition to subcategories, it provides a perfect space for product filtering.

The standard and effective solution is the already mentioned mega menu, representing a large navigation bar displayed when the mouse hovers over the item in the main navigation. It is an excellent choice for placing many items in the product category structure or showing a more significant number of lower-level subpages. Such a clear layout also offers more space, for example, for displaying products or advertisements and more space for items, enhancing the customer experience while ensuring clarity in the overall page design.

Searching and results

Alongside the navigation menu, the search function is a vital component for fulfilling customer needs and minimizing cart abandonment that may result from frustration. Users are more likely to search for the desired items if they know that an online store offers the product or category they are looking for.

Our study shows that approximately 30% of users leave a website or online store if they don’t find what they are looking for. The users choose between a search and navigation menu depending on various factors, with the pivotal ones being the already mentioned types of shoppers and their intent, and the product segments that e-shops belong to.

Search results also play a separate role in users’ shopping behavior. The search results pages are very similar to the classic product lists accessible via navigation menu in an e-shop. However, a typical search problem is that it is not intelligent enough to provide the user with results that reflect their interests and shopping behavior. Therefore, users often get to the site without results, which in a third of cases means their immediate exit from the e-shop.

The second common problem is that it is impossible to filter the products found on the results page or that the available filters are limited. This means that the search cannot work with the faceted filters, and the user has to search through the results instead of being able to filter the products according to their preferences.

Product Listing

Product lists are an essential part of an e-shop that directs shoppers to convert to product detail. The basic layout of product listings, or more precisely displayed categories in the e-shop, consists of:

Extended header

Extended header with the name of the category together with a description in which the user is located. You can also help users by adding tips on choosing the right product for your label.

Breadcrumbs

Breadcrumb, or otherwise crumb navigation, is used in combination with search. Users find it easier to “travel” to a category that interests them, and they don’t know, for example, its exact name. Then they can click through the detail of the searched product into the desired category using breadcrumb.

Sorting options

Sorting options are often used to display subcategories or product filters under the name and description of a category. However, they tend to be displayed in the sidebar by default.

Sidebar

The sidebar is often used to display subcategories, product filters in a category, or the mentioned facet filters in the results. Suppose the sidebar filter is not sufficiently optimized or the category structure is not adequately processed. In that case, the sidebar content is significantly longer than the page’s, negatively affecting user behavior.

Content

The central part is the page content, which consists of products, where each product should have displayed at least:

1. Preview image
2. Product name
3. Product description
4. Price, or the displayed original price
5. Product availability, or estimated delivery and the number of products in stock
6. The “add to the cart” button depends mainly on the segment. If it’s clothing that depends on the size, it doesn’t matter that much, but if it is, for example, books, then the use of the button would make sense
7. Marketing elements – news description, discount, sale, convenient packaging, last pieces – are various forms of how to make the products more attractive to the shoppers
8. In the list, you can display anything for products just by thinking about the critical factor or factors on which the user makes decisions, such as the number of colors or other variations, and so on.

A common question is what the ideal pagination in the e-shop should look like and whether to use the “show more” button or arrows. Both options work well, but the perfect solution combines them, where the user chooses the solution that suits him best.

When listing products, avoid infinite scrolling, which finds its use in completely different cases of viewing the content, e.g., on social networks, galleries, etc., but not while shopping.

The product detail

The product detail is one of the primary “conversion” pages of the e-shop, and this is where the biggest decision-making takes place. We can divide the detail for the user into two essential parts – the shopping part and the information part.

Shopping part

The shopping part presents the basic parameters and information that directly influence the shopper’s decision. The ideal composition of this part of the product detail consists of:

Product photos/gallery

Always display as many product images as possible – video or video review of the product, everything in the best possible quality. Even from product photos/videos, the user gets a lot of information that may not be in the description. This section often uses labels or information about the discount/promotion, news, or various awards or certificates.

Product brand

Including a product brand can make it easier for customers to search for products from a specific brand. It’s best if it includes brief information about the product selection and industry.

Product name

An ideal addition to the product name is also the name of a brand, and variation details such as colors, size or materials (red, metallic, XL, etc.)

Product code

Great importance, especially in B2B e-commerce, but it also helps the shoppers who buy the same products repeatedly in the B2C e-shops,

Category

The category in which the product is located plays a vital role in the user’s navigation, especially if the product is reached by an advertisement or discovered during an Internet search.

Product parameters

Product parameters – size, variants, colors, etc. – an essential role in decision-making, ideally located near the information with availability and price at the “add to cart” button. When the user changes any of the parameters, they should see changes in price, availability, or other values ​​that interest them.

Availability

Availability of the displayed product in the e-shop and stores.

Delivery

Delivery speed, or estimated delivery date – the more accurate an estimate you can give, the more satisfied the shopper will be after the purchase.

Add to cart button

The most important button on the page should always be clearly defined and unmistakable. Wherever it is on the site, it must always be clear that it is a button to add to the cart. The button’s design should align with how you aim to sell products and the specific business segment. For example, if you sell products like luxury electric motorcycles online, you can easily use a sleek black button with the text “Buy.” However, if you sell and deliver food, a green button with the text “In the Cart” will probably be more appropriate. The button usually displays a field with the amount the user can or wants to add to the cart.

Product price

The most decisive part of the purchase. In e-shops, we often work with promotions and discounts, so it is important to communicate them. If you discount the product, display the discount label and the original price. It is also not the best solution to discount all products simultaneously, as this can undermine product exclusivity.

Additional functions

Additional functions such as wish list, share, or size chart are common elements a user is used to or expects in detail. A short product description, linked to the information part of the page, is usually placed after the product name.

The information part

The information part of the product consists mainly of the main description of the product and its properties. It should also include a gallery, product images, video reviews or presentations, a table of all product parameters, a description of the manufacturer, and various additional downloadable materials.

In this section, there is often a space for customer reviews or questions from visitors, such as a discussion in the form of Q&A. The reviews themselves are a valuable source of information for users and, at the same time, support the trustworthiness of the e-shop. The better the product detail is processed, and the better the products are described, the more likely users will buy in the e-shop.

Product detail is a great place where we can quickly help users discover other products or categories in the e-shop offer with the help of recommendations. It is advisable to place recommendations directly below the central shopping part on the product detail so that they gain enough space and don’t distract unnecessarily from the main product.

When viewing recommendations, it is essential to be careful that the user doesn’t confuse them, for example, with the mentioned variations. These should be placed higher near the shopping button and product parameters.

The shopping cart

The shopping cart is the gateway to the shopping process. The cart has a simplified interface compared to other parts of the site to help the user focus on completing a purchase and avoid shopping cart abandonment. A frequently used feature of the cart is the timing of the products, which alerts users that the products will only be there for a certain period, thus motivating them to make faster decisions and purchases.

The ideal composition of the shopping cart consists of the following parts and parameters:

• Simplified header without navigation – allows you to quickly return to the previous page or home page and view the next steps in the purchase process that await the user
• Information about free shipping, or a gift, working on the same principle – ideally placed below the header above the summary of products
• Summary of products in the cart – by default, it should display products with the final price and the possibility to change their numbers or remove them from the cart. Products need to show their selected parameters and the ability to click on their detail in the e-shop
• The final price of the products – is displayed immediately after the summary of the products and the place to the code for the discount coupon
• Estimated delivery times and return policy links –after customers have added items to the cart, a dedicated section for order details can include both the estimated delivery time and a brief overview of the return policy
• Product recommendation – the cart is an ideal place to support the purchase with a recommendation. The place to place referrals is just above or below the “go back” and “complete purchase” buttons. The position depends on the content of the products in the recommendation. If there are too many parameters in the block with the product and it takes up too much height, we place them entirely down, but if they are compact and not too high, we can comfortably place them above the mentioned buttons, then they get more user’s attention. However, never store recommended products in the cart summary above the inserted products. This will confuse users who expect to see completely different products, which may encourage them to leave the site.

Ideally, suppose you can already communicate to users in this section what payment methods and shipping options you can offer them when purchasing without having to go to the next steps just to find out information. In that case, you will improve your statistics and reduce your bounce rate.

Shopping process

The most commonly used purchasing process is multi-step. Unlike alternative solutions, such as the one-step/one-page purchasing process, it brings more advantages and possibilities.

The one-step process is effective, mainly when used at the beginning of an e-shop business or in more straightforward cases like when e-shops don’t offer more payment methods and shipping options in the purchasing process, and users are not used to making too many purchases in terms of a large number of items.

However, the disadvantage is measuring the purchasing process, as the whole process is only one step. Each user’s purchase means leaving the entire purchasing process; based on that; we can hardly estimate where the problem was.

The advantages of a multi-step purchasing process are, in particular, clarity and significantly better measurements of the transition through the purchasing process thanks to the division into several steps:

Shopping cart, or cart summary

Summary of the products the customer chose to add to their cart.

Payment and shipping selection

This part of the purchasing process is straightforward, but provided that all options for the user are sufficiently described and supplied with all the critical information, not only the name of the choice and the fee but also additional information such as choosing delivery by courier, which delivery company services do you use, delivering the goods only on working days or the weekends as well, date when he can expect the goods, etc.

Suppose the customer chooses a personal pick-up. In that case, they should have a choice to select an online store and automatically see the opening hours, the specific address of the store, ideally also telephone and, of course, the date when they will be able to pick up the goods. Users often visit Shipping and payment options to find out what the final price of their purchase will be with delivery and when they will have it, even if they have not yet decided to complete the purchase.

Logging in to your account and entering your billing and shipping information

This is often the most frustrating part of the purchase for the user, as it is often a matter of filling out forms. Even if the user doesn’t log in, we can simplify filling it by using the name, phone number, and email address. Confirm each field at the filling time so the user knows they have entered the correct information. Ask the user for the data one by one; if he is interested in registering, he will display the fields for entering the password only after selecting this option. You’ll need billing and shipping addresses in the following steps.

You can make it easier for users to fill in addresses by auto-completing so that you can complete a billing or shipping address. If the user enters a street and number, you don’t have to worry about filling in other unnecessary fields. Completing the data usually ends with the granting of consent. Try to simplify this part as much as possible and formulate it as simply as possible. In the personal data section, there is often an option to add a note to the purchase from the customer, but if you are not sure that you will not miss these notes, better not work with them at all, thus reducing the likelihood of a bad user experience.

Summary of the entire purchase + check of entered data

The user may decide to change something, so it is advisable to allow him to get to any step from the statement itself without having to click through the buttons “back and continue.” In this step, they must see all the essential data for their decision and send the order. Therefore, don’t forget to inform them about the final price of the purchase and, ideally, the most accurate estimate of the time of delivery of the order.

After sending the order, it is ideal if the user gets straight to the payment gateway and only after paying for the so-called “Thank you” page; you avoid the user closing the page before it is redirected to the payment, which in the end makes the purchasing process difficult not only for him but also for you. The “Thank you” page is, in principle, also part of the purchasing process and mainly provides information about a successful purchase. Its great advantage is that you can obtain information from the customer thanks to a simple form.

Among other things, on this page, you can motivate the anonymous or signed-in user to become loyal customers and make further purchases by special offers or discount codes or direct them to other content in the e-shop, such as product recommendations or, for example, SEO–optimized blog articles, or you can also set up email campaigns to send out offers.

Mobile shopping

Mobile shopping is a growing trend, and mobile phones play an increasingly important role in users’ shopping behavior. It’s a common practice to do research before buying something, based on which users will later decide whether and where to purchase the product. Interestingly, according to the latest numbers, 69% of customers mainly do their research on mobile devices.

The growing trend of mobile shopping is influenced by many factors, such as technological progress, coverage, and availability of high-speed internet, affordability of mobile devices, mobile payment services such as Apple pay and Google pay, but also the support of e-shops by developing their e-commerce applications and striving to achieve the best shopping experience for the user. One way to gain a positive user experience is to understand how the user controls the mobile device.

Page layout and thermal map

Through user testing and analysis of shoppers’ behavior, we can determine how users interact with the display screen by displaying thermal maps. Thus we can define precisely how to design the interface of an application or website so that the user can work with it comfortably. Each color explains how easy it is to use different screen parts.

This information is an essential input for us in designing the user interface and layout of crucial elements because the structure of these elements in the right places on the screen significantly improves the digital experience, as the screen space of mobile devices is considerably limited compared to traditional computer screens.

Critical parts of the e-shop on the mobile view:

Header

The header should meet specific parameters to serve as a practical navigation element; it should also be compact, not too high, because it will deprive the user of a place in the content, and it will be challenging to navigate the e-shop. It should contain a logo with a click on the home page. Often used is the so-called floating header, a header that is always displayed even when scrolling.

Logo

A simplified version of the logo easily fits into the mobile display and doesn’t take up much space.

Hamburger menu

A vital part of the header, under which the navigation and shopping cart, which shows the minimum number of inserted items, are used to hide.

Search bar

The search bar in its entirety, ideally not hidden behind the magnifying glass icon, shouldn’t deprive the users of comfort when browsing the e-shop. Key elements of good search bar design include consistent placement, adequate size to accommodate long queries, and helpful placeholder text to guide users.

Mobile search

Optimized and functional search on mobile devices plays a vital role in the survey of the visitor to the e-shop. Optimization consists of the correct layout of elements and settings of their interactions, which will simplify the user’s control as much as possible, such as:

• The compact display of the autocomplete with the search bar on the entire screen of the device – significantly increases the clarity and ease of use of the search
• Autocomplete – displays the results from the first character and, when opened, recommends the categories, most searched phrases, favorite products or articles, and other content
• When viewing the results in the autocomplete, the virtual keyboard is automatically hidden so that the user has enough space to view the products
• The results are arranged in tabs according to critical parameters, between which the user can click or move by simply sliding to the pages

The functionality of the search lies in its behavior when interacting with the user. An accurate search should always lead the user to a relevant result and consider their normal behavior, regardless of how he writes the search phrase, whether he writes a title with typos, uses a slang term or archaism, etc.

Conclusion

Users are likely to be seeking out a personalized experience more than ever. Therefore as an online business, a nice-looking website is not enough. Success now hinges on a deep understanding of customer needs, translated into thoughtful UX design that incorporates clear product listings, intuitive navigation, and strategies to minimize cart abandonment. You must build a seamless experience to claim success or risk losing your customers just after their first visit. We hope that this blog helps you understand how effective proper use of UX can be for you to make your online business more attractive and win more customers.

Frequently asked questions

What is the difference between UI and UX when they are usually listed together?

At the most basic level, the user interface (UI) consists of all the elements that allow someone to interact with a product or service. On the other hand, user experience (UX) is what an individual interacting with this product or service takes away from the entire experience. It is essential to distinguish the overall user experience from the user interface (UI), although the user interface is a critical part of the design. As an example, consider a movie review website. While the UI for finding a movie is perfect, UX will be bad for a user who wants information about a minor independent release if the base database only contains movies from large studios.

How to confirm the credibility of the E-shop?

• valid SSL certificate
• privacy statement
• current prices / don’t discount all products at once
• existing address and telephone number
• watch out for spelling and grammar mistakes
• possibility to write e-shop reviews
• links to social networks
• A/B testing

Will interest in online shopping grow even after the pandemic?

Thanks to lockdowns, interest in online shopping has logically increased. E-commerce sales increased by up to several billion dollars abroad in 2021 and over 2 billion EUR in Slovakia. Whether this will remain 100% cannot be predicted. Still, during the two years of the pandemic, the online space has evolved and adapted to the situation so that the entire online purchasing process is as fast and convenient as possible.

How to attract e-shop visitors?

• nice design
• advertisements
• “Get to know” your customer
• reviews and clicks on social networks
• also, focus on details – page layout plays a significant role
• don’t press on customers with registration or newsletter
• assistance to users
• discounts and offers – benefits for registered users