Full header bg

10 August 2016

Ecommerce UX design features and tips

Thumb andrew terehin
Andrew Terehin
Managing Director / Partner
Ecommerce UX design features and tips

Share on

While creating an online store, it is difficult to orientate quickly and understand how the website should look to create a positive impact on the owner’s income. It determines whether clients remain on store’s page, would they have confidence in the store and would they like to purchase. But what exactly “the right design” is supposed to be? In fact, there are no firm rules for page design; it all depends on the individual characteristics of each store and their target audience. However, there are techniques that work equally well for everyone. In this article, we have tried to systematize the knowledge required to create a quality site and focus on the most important aspects. We’ve also added some practical tips on how to optimize the e-commerce website, so that customers would be eager to return.

1. Common recommendations

Such advices can be applied to the website in general.

  • Emotional connection

ecommerce emotional connection illustration

One needs just a few seconds to understand if he or she will use services of a website. Of course, the user should be given clarity on what exactly particular web shop specializes on. Each element must play along with the main idea and emphasize it — this is the website design essentials. Any part of the custom online retail store should be carefully thought through. The overall online store web design must be concise, recognizable and original, to incite only the positive emotions onto the customer. This is the most important e-commerce advice because an annoying interface could easily scare off potential buyers. Use simple geometric forms and a minimum number of neutral colors — the e-commerce UX design looks best if nothing redundant is used. Nevertheless, this does not mean that the successful e-commerce site has to be drab and boring, with bad e-commerce usability. Using large, beautiful images stimulates user's’ imagination and their wish to purchase. Another great feature would be price comparisons, messages about popular items in stock and buttons that call to action, anything, in fact, that will help to create and uphold an emotional connection with the customer.

  • Availability

ecommerce product availability illustration

Even if every detail of an e-commerce store is carefully considered, unified in style and color scheme, up to the current e-commerce UX trends, users won’t become customers, if they can find just about anything at the site, except what they are actually interested in. It would be a good piece of advice to find a balanced combination of minimalist design and comprehensible user-friendly navigation. It is important that all user interface elements of an online shop are placed customary. Because nobody is going to waste time trying to understand site’s odd logic, if they can find tens, if not hundreds, of alternatives where everything is clear. Being attentive to the customer’s time always pays back. It is important to make sure that the goods selection and buying process takes place as simply and quickly, as possible.

Other points to look for would be:
 

1. Site search

Search will help buyers to save a lot of time looking for the necessary items in the catalog. Customers increasingly prefer to use search, rather than site’s menu. Search, in fact, has a huge influence on conversions and sales, so it should be placed in an easily accessible place. An ability to search within a category is also worth adding, especially if you have a large number of titles. Auto-correct for a more accurate result delivery and add the products relevant to the given search into the output for the best effect.

2. Delivery info

The delivery information should be easily accessed from any page of the site; the link can be placed in the header, for example. Buyers will be more comfortable if they would clearly understand the delivery terms and timeframes. It should be noted that free shipping plays a decisive role in choosing a store for many users. In addition, it encourages purchasing more  at a time, as does combined shipping, if paid.

3. Online support chat

Even if anything that could be conceived by potential customers was present at the website, investing into an online support chat won’t hurt. After all, one can never truly predict what the next visitor may be interested in, and prompt replies to their questions will be considered a sign of company’s enthusiasm.

4. Shopping cart

The shopping basket should also be available from any page of the site. It is also important to consider the function of displaying orders in a small pop-up window. That allows users to monitor their carts at any time, correct the quantity, perhaps. But this doesn’t mean that a pop-up window can replace a full-fledged shopping cart page.

5. User testing

This method allows to learn preferences of the audience and to govern the site’s key performance indicators, including conversion, users loyalty, the average order price, bounce rate, and other metrics. The A/B-testing is an important and continuous process that is maintained at all the stages of the website’s life cycle. New features are implemented, tested and improved all the time. All the relative hypotheses are tested with a help of live traffic and real users.

  • Credibility

ecommerce credibility illustration

Each of us is scared by the risk of being deceived, or getting poor-quality goods, and online fraud is on the rise. It is, therefore, necessary to convince potential customers that the company is worthy of their trust. For this reason, the security certification logos that will guarantee the shop’s honesty should be placed prominently on the main page or in the footer.

Also, the company’s physical address can serve a kind of guarantee that online retail can be trusted. People easier believe in site’s solidity when they are aware of its operators’ actual address.

Compliance with these online store building essentials should be enough to improve site’s conversion. However, in order to get a hold on the client, stimulate them to purchase and return repeatedly, each element of the interface needs to be carefully worked out.

Online stores consist of several typical enough pages that must be as simple as possible, not overloaded with superfluous components, but still provide users with all the necessary information. The following overview discusses the most important key features of each individual store page.

E-commerce navigation best practices

ecommerce navigation best practices illustration

Two main elements of the e-commerce navigation are the product catalog and the search. They should be designed and optimized with regards to the average user, and create the most comfortable conditions for customers to find their way in the online store’s assortment.

Important e-commerce navigation elements:
 

  1. Product catalog or the store’s main menu is an overview of the range of goods. This is a unique part of the shop — the simplest way for the visitor to get acquainted with the features of product assortment and immediately understand what differentiates the shop from the competition. It is better to make it drop-down and divide the catalog into categories and subcategories, but limited to only two levels for easier understanding of site’s structure. In addition to the main menu, it is necessary to place auxiliary buttons for quick access to the page with the company info, shopping cart, delivery services, featured articles, etc. Usually, it is placed at the top of the website over the search box and the contextual menu. Sitemap, however rarely used, should be also present. This section holds a reference to all the shop pages, which improves the search engines indexing.
     
  2. Faceted navigation. Next thing to take care of is the faceted navigation design — giving users the list of the goods, which correspond to a given characteristic. Simply put — filter items. For example, if a user has selected leather goods, all items to be displayed on the page should be made of, contain, care of or be reminiscent of leather. It is important that faceted navigation is very detailed, with the ability to customize the most appropriate filter for each client.
     
  3. Site search, as we mentioned already, must be maximally adapted  to the queries of potential buyers, reachable from any page and easy to use. The two most necessary functions for the search are auto-complete/spell-checking and category search. First is needed to avoid zero results in case of a typo or an incorrect keyboard layout. One of the best practices is to design a drop-down list so it shows some of the most suitable products with a reduced images and prices. Search bot can collect user experience statistics, thus helping to find out the trends in consumers’ needs. This way the likelihood of particular item purchase will increase if a new user, already knowing exactly what he/she needs, visits the site.

Make sure that users always know where they are and can navigate a step or two back in site’s structure in a single click, as well as return to the search results.

2. Recommendations by page types

In this article we discuss only the basic types of pages. Each online store is unique and should be taken as such, so every individual case and the e-commerce features list is discussed separately.

  • E-commerce homepage design tips

ecommerce homepage design tips illustration

Important e-shop homepage elements:
 

  1. Promotional block, informing customers about campaigns, updates, events and popular goods must be present on the main page. This is one of the most important elements of an online store, in fact, it’s what primarily draws client’s attention. Usually, it is made as a vertical or a horizontal banner with switching slides. Such elements should be created by the UX designer to cling to users and motivate them to purchase. Of course, the colors and their combinations should be bolder and brighter here, than in all other parts of the site. Also, it is necessary to use titles, descriptions, and price comparison on the slides 
     
  2. Banners with popular products and innovations are a sales mechanism that is based on human psychology. The probability of purchase of goods and services presented on banners is higher among both permanent and new customers. It would be great, if the store’s business logic allowed adapting to regular customers’ preferences, providing promo-blocks with information on the products or brands they are most interested
     
  3. Floating windows or pop-ups are the most convenient way to get any information from the visitors. Country and language choices may be offered to the user via pop-ups in shops focused on international deliveries. One can also use pop-ups to demonstrate the most suitable product range to clients, based on their behavior, age, physical characteristics, and interests. Pop-ups, in addition, help collecting the leads and increase the number of subscribers to social media pages. Pop-ups have a number of undisputed advantages such as high functionality and space for experiments. They effectively guarantee to attract attention and to provide greater opportunities for information personalization. However, one must be careful in their use, as not everyone would like exploring store’s content being continuously interrupted for interaction with something not included in their scope of interest.
     
  4. Product page design 

Product page design illustration

In this section we strive to discuss the product card design. On the product card page, a potential buyer must acquire maximum of possible information about the product they are interested in, though it is important not to overload it.

Important product page elements:
 

  1. Pictures. Online shopping is inferior to the real one in that the customer cannot touch goods directly, and is guided only by pictures and descriptions. It is, therefore, necessary that the images are of good quality, with an option to view them in original resolution, in a sufficient number of views from different sides, and, possibly, in different usage cases. A major role is also played by correct composition — the possibility to watch products in relative contexts might increase the sales. Also, it is important to present photos of the goods in all the available colours. Cutting costs on hiring professional photographers might prove catastrophic. Moreover, clients often don’t want to know what material the product is made of, preferring a photo, which shows it clearly. Images should arouse a desire to purchase the goods.
     
  2. Video reviews can illustrate the value of the propositions, their functionality, and performance.
     
  3. Rotatable 3D-model of the product in question can be added to its card so the visitor can observe it from any desired angle
     
  4. Price and stock. The second by importance for the buyer is the information on product price and availability. Naturally, the price should be the same, regardless of color or size. Discount options, notifications of short-term promotions and demonstration of savings as a percentage will help visitors to decide quicker. It will not hurt to have a "follow the price" button — this way the company gets the leads, and the client will be able to learn quickly about promotions and sales. The message about the stock shortage might stimulate immediate purchase. Never should the customer learn that the product has already ended after adding it to their cart. This should be pointed at the product page with an option to subscribe to notifications, telling the product is back in stock.
     
  5.  Shopping cart  page design

shopping cart page design illustration

In this section, we strive to discuss the e-commerce cart design. We have already mentioned the importance of a well-made web design of shopping cart page in the first part of the article; let us look at its optimization in more detail now.

The client interacts with the shopping basket in the process of goods selection. Advertisement and banners are unnecessary here — buyers have already decided what they need, extra information will be annoying. Another crucial moment would be deciding whether the registration is one of the requirements for booking an order. Small shops should not create additional obstacles for shopping, but for the large ones it is easier to work with a pool of loyal customers. Critical elements of this page are the check-out button, promo code field, price calculator and the ability to continue shopping.

Please note that if the delivery price depends on the customer's’ geographical position, they must be able to calculate the overall cost here. Same thing goes for the promo codes: do not forget to create a field to enter it, if such codes are supported by shop’s marketing strategy, so that it would be immediately taken into account by the calculator.

Would be nice to remind the customer that their privacy is respected and personal information will not be used against their explicit will and the return policy. If the cart is still empty, it is better to display the information on how to place an order here, instead of just reminding them that they have not chosen anything yet.

Among other additional functions of the cart, users would greatly appreciate an ability to print the contents their order or send it by e-mail: the purchase could be made for someone else , thus requiring their approval. Also, it would be logical to place the information on the goods that other people tend to buy together with present in the cart, or suggestions that may still be necessary to the client. Consider several payment options for the processed order to reduce the number of failures due to improper calculations.

  • Check out page UX design

Check out page UX design illustration

Basically, the same guidelines applied to web forms design can be used here. For the convenience of the customers, it is better to let them check the entered data one more time in the additional tab before finalizing the checkout. This will help to complete the purchase quickly and with the least effort. All the information should be displayed on the same page, starting with the general information about the customer down to the chosen payment method details. On the right a short order contents list can be put. It will display summary information so that it can be controlled in the process of filling out the checkout. Try not to overload the page with input fields – the checkout process should be as simple as possible. The site should store the data, input by the user, so that when they come back the next time, the check out would be even simpler. The customers should be kept up to date on how many steps left to complete the purchase. They should be ensured of the company’s reliability: provided with security credentials and customer service contacts. The faster and more comfortable for the customer the checkout flow is, the higher is the likelihood of their return.

Summary

Same as for the real sales, the main task of creating e-commerce website is to do everything for the customer’s satisfaction, not just to sell goods and make profits. In general, store designs have similar logic and consistency. Nevertheless, each one of them has its own unique features, according to which the clean e-commerce design is chosen, directed at solving of some crucial tasks. In this article, we gave examples of the most important and common interface elements and tried to explain, how to improve e-commerce website. However, it is impossible to use the same functionality for all the different businesses. The best way to choose the most appropriate solution for each specific case is found with the help of the A/B-testing. We plan to feature the A/B-design guidelines in detail in a separate article in near future.

Hope that this e-commerce web design tutorial will prove helpful for our readers.

Share on

Let's talk
To the top

Let's talk

  • Budget
Attach a file

File size should not exceed 10mb

captcha

Please type the words in the box above