In this article, we will try to provide some general insight into eCommerce UX – best practices, UI patterns, and strategies to track and improve it.
What is UX and why should you care?
In the broadest sense, UX can be defined as an overall experience you have when using or interacting with something. It’s typical undervalued and really rarely invested in as people turn to templated solutions.
It’s no different with eCommerce as people are evermore trying to copy their competitors hoping their strategy will resonate with their customer base – which is most often not the case.
In eCommerce, UX is referred to an overall experience a customer is provided from the moment they discover your store to the point they make a purchase and beyond. And it’s not uncommon that people intuitively tie UX to design but this too is a poor stereotype. There is a lot more in providing a great user/customer experience than simply making the design fluid and appealing to the eye.
Have you thought about how fast your site is loading? Is it easy to navigate? Do users get confused or bored by unnecessary steps they make towards the purchase? It’s an exhaustive list.
UX is data-driven. It’s a customer-driven. It’s user-centered and is built on research and validation. And is by far, the most important thing for a solid foundation for building retention and solid customer relationships.
So how do you achieve a solid UX in eCommerce? Let’s go down to some basics.
Some guidelines to keep in mind
Before evaluating and establishing your strategy for UX eCommerce improvement, you need to understand some basic ground rules. UX improvement will often lead you to a complete redesign or otherwise tectonic changes in page layouts that may cause confusion with existing customer base. This can hurt retention and cause drops in revenue. Here are a few golden rules to follow.
#1 Function beats design
To list a few popular design trends today:
- Image sliders with CTAs
- Autoplay video backgrounds
- Inverted or ghost buttons
- Parallax scrolling
These are all very nice and appealing to the eye, however, they cause a series of problems that may damage the user experience. To elaborate:
- Sliders usually take up images or illustrations often in PNG formats that, due to their large resolution, can take up to a few megabytes in size. This burdens the connection and increases the page load time. Aside from that, their automation is hugely distracting. Automated image sliders have proven to perform poorly. (https://conversionxl.com/blog/dont-use-automatic-image-sliders-or-carousels/)
- Autoplay video is just image sliders on steroids. Video formats take up more in file size and cause the same distraction ratio.
- Inverted or ghost buttons are seen as a sleek design trend that is often misused. Designers tend to use ghost buttons so they won’t damage the design flow of a page and blend in the secondary CTA buttons. This often backfires as those buttons appear unclickable or are being overlooked by the users.
- Parallax scrolling is becoming more popular but it’s often poorly implemented. Parallax scrolling often causes problems when it comes to responsiveness and multi-device design optimization. And aside for bringing out the design, it doesn’t have any specific, meaningful or measurable function that leads to higher conversion in eCommerce.
The design is important but you need to always put your users intent before it. The design isn’t about adding elements that appeal to the eye, it’s about keeping the elements that support the users to their journey of reaching the conversion goal.
#2 Copy should lead the design
Which came first? The chicken or the egg?
Or let’s try the UX adaptation.
Should you write your copy and design around it? Or write a copy that follows the design style and layout?
A good UX practice is to always let the copy lead the design. The design is there to support and elevate the copy. Try and remember the last time you actually bought something online merely because the website looks nice?
When writing content copies for your eCommerce, you need to focus your customer behavior. Conducting customer research early on is important. Try understanding your audience, ways, channels, and devices in which they experience your website, how they value your products and how they describe them when referring them to others. This should give you a good head start when designing your content strategy.
#3 Intuitive navigation promotes discoverability
Intuitive means allowing your users to navigate and complete desirable actions with ease and with no interruptions. A single element can cause friction in user’s journey and damage the overall experience. And this is especially true when it comes to large eCommerce with complicated architecture and vast categorization and filtering.
When structuring navigation for your eCommerce, keep in mind to:
- Use card sorting technique to visualize and understand how users discover and find your products
- Use legible and easy to understand labels
- Always have internal search enabled and available for the users
- Keep consistent with navigation structure – standardize categorization early on
- Use breadcrumbs!
#4 People want to feel safe
It’s not uncommon for a user to abandon a checkout flow if they distrust the website with their credit card information. It really goes without saying here even though this has been confirmed in several studies. Most recent one conducted by Baymard Institute.
A simple act of increasing perception by let’s say, adding an image of a padlock next to a “Secured by _” copy might improve might alleviate trust issues.
#5 Mobile eCommerce UX is a different thing
Having a well-performing desktop website doesn’t guarantee the same conversion success on mobile. You can’t rely on responsiveness.
When using mobile, the design presented to the users is restricted to a screen size similar to a business card. When prompted to make any kind of text input, the screen size is cut in half as the keyboard overlaps the screen. Working within this viewport is challenging, especially when aiming to replicate the desktop layout in order to provide native experience for the user.
Best UI practices to improve customer UX
Your store copy and design will vary depending on operating location, product types, and placement, customer base and demography among many other factors. However, there are some well-established UI patterns that solve some of the most common UX problems with eCommerce. To list a few.
#1 Search bar
Though it sounds quite basic, you would be amazed just how many eCommerce websites have poorly optimized sitewide product search, or worse, not have it at all.
On-site search is critical for a solid shopping experience. According to a study by Invesp, almost 60% of online purchases are not impulsive but rather planned.
People often know what they are looking for and prefer using internal search rather than scrolling through complicated menu navigation. By enabling predictive search with autocomplete feature, you are helping users reach their destination more quickly. This shortens the sales cycle and leads to better conversion.
#2 Prominent CTA buttons
Users shouldn’t be confused when completing actions on their journey. They need to intuitively understand how to achieve important actions such as adding a product to a cart or how to proceed to checkout.
Primary CTA buttons need to be placed in prominent locations to capture their attention and stand relative to the rest of the content layout.
#3 Breadcrumbs
Breadcrumbs or link paths should help both shoppers and web crawlers scan your website with ease and understand the paths that lead them there. They are an extremely useful secondary navigation tool, especially for mobile users who would otherwise have to open megalithic navigation in small viewports.
#4 Product copy and images
High-quality product photos, followed up with appropriate, detailed descriptions will help customers better understand your product.
Try implementing a progressive disclosure in the visual hierarchy of a product page. The most important information should be available in the first fold. You can break down details into smaller sections like features, sizes, colors, shipping, and payment information. The key is to avoid content and visual cluttering and provide a seamless flow down to the desired outcome.
#5 Progress indicators
Progress indicators will help your customers understand where they are at the checkout process and how much further to its completion. By adding encouragement or power words like “Hooray!”, “Good job!”, “One more step” etc., you will keep the customer in the positive emotional state and lower the chances of cart abandonment.
#6 Customer support chatbots
The development of AI and NLP has lead to more sophisticated chatbots. They enable you to be there and now for the customer and help clear the confusion throughout their shopping journey. In 80% of the time, these questions can be segmented in FAQ so AI-powered chatbots can learn to answer them more quickly. Mot chatbots today are developed not to mimic but elevate and improve real people working in the customer support department. Their data can be easily layered into a CRM and ERP to give insight invaluable data for improving customer experience.
Spotting UX problems with your eCommerce
Best practices are a great starting point, however, as aforementioned, they can only get you that far. Each eCommerce has its own community and targets a specific market, industry, and niche. Each one of them has specific UX problems. In order to identify those problems and define strategies to improve/fix them, you will need to set up an in-depth monitoring with behavioral triggers on each part of the customer journey.
You need to isolate specific paths and junctions of a customer journey to isolate the drop-off points in the funnel. Some techniques you can employ to achieve this are:
- Heatmaps – click and scroll tracking
When analyzing heatmaps try identifying perfect scroll depth and user click intent. Are there any links or text people try to click but aren’t allowed to? Are users consistently scrolling or are there any huge scroll jumps? Test your messaging and it’s position on a page layout to improve its readability. Try making visual cues that guide the user eye flow.
- Session recording
Enable session recording and watch how real users are experiencing your website. Is there anything that frustrates them? Can you identify a pattern in their behavior that causes a drop-off?
- 5-second test
Have people look at your page template and test if your messaging and UVP are clear.
- User testing
Make a specific test to distribute to the users. For example, make a task like “find a TV under $400 and add it to the cart. Make them follow that instruction and explain each action out loud. If you manage to capture their current emotional state after each action, you can distribute priority on specific fixes or features that will help build a frictionless experience.
Some tools you can use to achieve this are UserTesting.com for user testing, Hotjar for heat map tracking, Google Tag Manager for triggers and event tracking in Google Analytics, Crazy Egg for session recording, etc.
Although these tools are open for everyone to use, it’s advisable that you look for and consult with some of the top website development companies that have a strong understanding and experience with UX methodologies and frameworks. They may advise you on the choice of tools and setup process that will give insight into proper KPIs of the analysis and guide the implementation accordingly.
How to approach them with a fix?
A good choice of tools and early monitoring setup will help you identify and isolate problems with UX. But they cannot help you solve them.
The key takeaways here are to:
- Prioritize the problems based on your current budget and time scope for implementation. Evaluate the impact and act appropriately.
- Use common sense. It’s easy to get lost in the sea of unstructured data. Copying is the most common form of flattery so continuously monitor your competition for changes and improvement.
Awareness and education are the cornerstones of a good UX strategy. Knowing to look through the eyes of a customer and to be able to leave out the looks from the equation is what drives the best usability and builds great customer experiences.
———————————————————-
Bio: Nina is a technical researcher & writer at DesignRush, a B2B marketplace connecting brands with agencies. She loves to share her experiences and meaningful content that educates and inspires people. Her main interests are web design and marketing. In her free time, when she’s away from the computer, she likes to do yoga and ride a bike. You can find her on twitter
Ready To Upgrade Your Logistic Solution?
Speak to Floship ecommerce logistic consultant about improving your global support chain today
