Editor's note: As we explain in the article below, improving UX is effective for such common ecommerce issues as cart abandonment, high bounce and low conversion rates. If you face any of these problems, feel free to request ScienceSoft’s ecommerce UX and UI design services.
Through its web projects with various industries, ScienceSoft has ascertained the tangible impact of user experience on return on investment (ROI) and its importance for user retention. In this article, we laser focus on UX in ecommerce and explain the crucial specifics of building a successful user experience along the entire customer journey – from search to checkout.
What UX means for ecommerce
According to the latest ROI of UX study, which comprises data gathered by eMarketer and Baymard Institute, ecommerce websites lose as much as $1.420 trillion yearly because of bad user experience. The same report reveals that 88% of online consumers are prone to leaving an ecommerce website if they aren’t satisfied with the experience it offers.
Furthermore, the Baymard UX studies show the role of user experience for lowering cart abandonment rate, which is at 69.2% globally today. Out of top 5 reasons for cart abandonment, 3 are under the ‘poor website user experience’ umbrella: 31% of US online customers abandoned carts because they were asked to create an account, 23% did so because the checkout process was too complicated, and 20% – because the store didn’t display the order total upfront.
Best practices for UX in ecommerce
Drawing on its 16 years in ecommerce consulting, ScienceSoft offers you hands-on tips that will help you improve the user experience of your web store on all major steps of the customer journey.
Predictive suggestions are the surest way to facilitate a customer’s search, which is adopted by 96% ecommerce websites nowadays. However, about ¼ of these web stores fail to offer satisfying UX in predictive search. The most popular mistakes include cramped screens (especially on mobile), distracting visuals, and unhelpful or confusing text formatting.
Here are some of the tips on improving predictive search:
- Offer no more than 10 search suggestions on desktop and 5-8 – on mobile.
More than 10 or 8 suggestions make for cramped screens and prevent users from seeing anything besides the expanded search bar.
- Don’t make the list of suggestions scrollable.
Scrolling through predictive search suggestions can be very inconvenient, especially on mobile.
- Keep the typed symbols/words in regular font, and the suggested ending of a word or a phrase – in bold.
The user already knows what they just typed, so you should put more visual accent on new information to make info scanning easier.
- Make the active suggestion highlighted.
When a user recognizes a suggestion as a relevant one and tries to interact with it, the website should give visual feedback making it clear that the suggested line is selected, indeed.
According to ScienceSoft’s experience, over half of all web stores suffer from over-categorization. This means that the items are wrongly classified and some of the defined categories are types of a single product category. For instance, ‘glasses’, ‘cups’, and ‘mugs’ should all be product types of a ‘containers’ category in the kitchenware web store.
Too many categories make your catalogue unmanageable and confusing, which is likely to repel customers. Don’t underestimate the importance of classification and take the time and effort to create the minimum number of categories as well as powerful filters for convenient search among product types.
When exposed to a rich category and not offered the filtering feature, many customers immediately leave the site. Yet when offered, the filtering should be done right as filtering UX problems confuse and disorient the customers, who end up bouncing too.
We recommend the following 4 tips for implementing the filtering feature:
- Let your customers see the selected filter values checked in the filtering sidebar.
Web stores that have the filter value disappear from the sidebar once selected leave customers lost and unsure if the filter was actually applied.
- Let your customers see all the selected filter values as a list.
A list of applied filters helps keep the user informed about what exact selection of products they have chosen to view.
- Offer both visual and numerical scales for filters with a range.
For the characteristics that can be ranged (for instance, price, capacity), offer a visual scale with the possibility to both input the numerical values and choose the range by toggling the cursors.
- Let users easily de-apply filters.
Make it possible for the filter values in the list and the filtering bar to be easily deselected and offer the ‘Cancel all filters’ button for the convenience of users who select more than 3-5 filtering values.
As we’ve already mentioned, over-complicated checkout processes are, sadly, a reality. Studies reveal that on average, US web stores show customers 13 default field forms. Moreover, 76% of US web stores don’t mark the fields as ‘required’ or ‘optional’. As a result, 1 in 4 customers abandons the cart on a website because they don’t have the time and eagerness to input a lot of information.
To optimize the checkout process, we suggest doing the following:
- Minimize the field forms to 5-8 and openly state whether filling each field is ‘required’ or ‘optional’.
Around 8 field forms – including a credit card number – are an optimal number of fields to offer to a customer. Marking the optionality or necessity of each field in the form simplifies and speeds up the checkout process.
- Request the card’s expiration date in the MM/YY format.
Formats that ask a user to choose the name of the month in a drop-down menu or choose the expiration date on a calendar slow down the input process. The MM/YY format, which coincides with the way the expiration date is marked on the card, is quick and easy.
Make Your Web Store Convert More with Better UX
To offer a high-quality user experience, it’s important to pay attention to every little detail in the customer journey. If you want to enhance the retention and conversion of your store, ScienceSoft is ready to use its expertise in UX research and design, and help you bring these improvements to reality.
Start with a consultation
Ecommerce Website Design by ScienceSoft
At ScienceSoft, we create ecommerce websites with balanced visual appeal and usability.
Start with a consultation