When it comes to web design, user experience (UX) basically describes the ways in which visitors interact with your site. With that in mind, an eCommerce user experience encompasses everything from site navigation to shopping cart checkouts to the speed at which content loads. Since the primary goal of eCommerce sites is to convert visitors into customers, it makes sense to focus heavily on providing the best possible experience that your online store can offer. In fact, online stores see an average return of $100 for every $1 they invest in better UX.
It doesn’t matter how amazing your products are, the experience of shopping for and buying those items is what will make or break your conversion metrics. Imagine walking into a t-shirt store and all of the clothes are piled on the floor. You struggle to navigate through the mess of items and finally find a shirt you like. Then the cashier or store clerk takes forever to complete your checkout. No matter how incredible that t-shirt is, you’ll likely avoid ever returning to that store. In most cases, you probably wouldn’t even begin to shop there in the first place.
According to an AWS report, 88% of users are less likely to return to an online store after having a bad user experience. With the overabundance of competition in practically every industry, online shoppers almost always have a plethora of alternative options to choose from. If your store offers similar or even better products than your competitors but suffers from bad UX, you’ll more than likely miss out on those conversions.
Creating a high-converting eCommerce user experience rests on your ability to offer engaging, tailor-made, and performance-driven website content. In a nutshell, you want your online customers to have a fun, fast, and easy time while shopping on your site. If possible, you should also try and make each site visitor feel special through the use of personalization. Research by Epsilon suggests that “80% of customers are more likely to make a purchase when brands offer personalized experiences.”
The bulk of eCommerce shoppers will bounce or abandon cart if the site content loads too slowly or if the checkout process has too much “friction”. On average, 40% of visitors will leave a site that takes longer than 3 seconds to load. Another chunk of visitors will drop out of your conversion funnel if your competitors offer a more engaging overall experience. The key is to strike a balance between dynamic and personalized content, ease of use, and site speed optimization. So let’s take a closer look at how to achieve that balance.
Mobile shopping experiences are rapidly becoming a top priority for eCommerce sites as more and more users convert via their smartphones. According to one study, 79% of smartphone users have made a mobile purchase in the last 6 months. Oftentimes, the visitors that ultimately convert on a desktop computer have already explored your site via mobile devices. On average, mobile visitors account for more than half of all search traffic worldwide.
So how can you optimize your eCommerce user experience for mobile visitors? To start, you should think about how smartphone users physically interact with their devices. Sites formatted for desktop visitors organize text forms, call-to-actions, menus, and other interactive elements in a way that prioritizes clicking and typing. On the other hand, mobile design needs to prioritize easy touch-based engagement with things like autofill, one-tap or double-tap gestures, and thumb-oriented interactions. Simply put, mobile-optimized UX should ideally rely on physical intuition and an exceptionally smooth user flow.
Here are a few ways you can make your eCommerce user experience better for mobile visitors:
1. Navigation:
Place navigation in an intuitive and easy to control area. Incorporate a search component and consider placing it above the fold to make it more prominent. Add in autofill or autocomplete features to make searching and navigating your store as streamlined as possible without requiring a large amount of user input.
2. User-Interface:
Improve mobile usability by aligning call-to-actions and other commonly tapped interface elements within the “thumb zone”, aka the area of the phone that’s easily accessible to the thumb when the device is held with one hand. Generally speaking, the “thumb zone” consists of the lower left quadrant of the screen.
3. Easy Checkouts:
Adding mobile payment solutions like Apple Pay, Google Pay, and others can make a huge difference between an abandoned cart and an actual purchase. One-page checkouts and digital wallets can improve mobile conversions by at least 10%, according to BigCommerce. You should also consider including features for users to “save” their shopping carts, one-tap options to “like” or “favorite” certain products, and buttons for easily removing or adjusting the number of items in their carts.
Most of the optimizations that you can make for a mobile-friendly eCommerce experience also apply to desktop users. Navigation and search are tremendously important pieces of the UX puzzle regardless of the size or shape of your site visitor’s device. The average site visitor spends roughly 23% of their time just looking at your navigation bar. It’s usually the first thing that they see when they enter your site and is the map that can unveil everything they’re hoping to find.
Here are a few key ways you can improve your navigation for a better eCommerce user experience:
1. Search Bar Prominence:
Make sure that your search bar is visible and easy to use. This might seem like a no-brainer, but you’d be surprised by the number of eCommerce sites that deprioritize the search feature. A lot of times, store owners forget that they know their site and the products on it better than anyone. It’s easy to overlook the fact that your average site visitor will feel like a stranger in a strange land when they first enter your store. Don’t leave them without a proper map!
2. Autocomplete:
We touched on this above, but it’s worth repeating here. Most eCommerce shoppers are so used to autocomplete that they become paralyzed and disengaged when it’s not available. This is a fairly easy way to optimize the speed at which your visitors can navigate your site.
3. Faceted Search:
Faceted search basically refers to the ability to switch between features to recategorize product lists, primarily within drop-down menus. Imagine you have an apparel store and there’s a button on the navigation that references a specific logo design. Let’s say that logo design is available on a t-shirt, sweatshirt, and shoes. Faceted search allows the user to pivot between those categories with one tap while still looking at the same design. This can also be applied to features of a product like color, size, pattern, etc…
One of the main drop-off points for eCommerce shoppers is during the checkout process. Of course, a number of these users often exit the funnel simply because they were browsing without a real intention to complete a purchase. Still, a sizable portion of those “window-shoppers” are potential customers that left their carts specifically due to bad UX.
In a study performed by the Baymard Institute, they found that roughly 70% of online shopping carts are abandoned at checkout. That number jumps up to 86% on mobile devices. The same study showed that out of those abandoned carts, 34% chose to leave because an account was required, 26% stated that the checkout process was too long, and 21% suggested that the pricing was unclear.
Here are a couple of simple ways to improve your eCommerce checkout process:
1. Minimal Steps:
Reduce the number of steps it takes to get from “add to cart” to actually completing a purchase. As previously stated, roughly 1 in 4 abandoned carts occurred because the checkout process was too long. Adding in a one-page checkout solution similar to Amazon’s “1-click ordering” or simply allowing guest checkouts to occur is a great way to reduce friction within the overall shopping experience.
2. Customize Orders: quantity, size, etc…
One of the most common pain points within the eCommerce checkout experience involves needing to retrace your steps in order to adjust your order. Even grocery store clerks have the ability to ask their co-workers to go find your missing item when you’re in the checkout line. Most of the time, you don’t have to leave everything behind and start over if you discover that your eggs are broken during the bagging process. Apply this same type of customer service to your eCommerce checkout situation by allowing visitors to customize orders up until the very last minute. That means enabling shoppers to adjust quantity, sizes, colors, or anything else that you can manage to make the entire scenario more efficient.
Personalization is quickly becoming a must-have for eCommerce sites. Shopify’s Principle Engineer, Illya Grigorik, has stated that the future of all commerce is “dynamic, contextual, and personalized”. According to Bloomreach, 80% of shoppers are more likely to convert when an online store provides a personalized user experience. And while the concept of personalization is nothing new, the ability to efficiently implement it within eCommerce shopping experiences has never been easier. In fact, Shopify’s own latest development framework, ‘Hydrogen’, marks a big step towards greater efficiencies in the realm of dynamic and personalized eCommerce web design.
The phrase “eCommerce personalization” generally refers to the use of dynamic content to deliver recommendations or other interactive site elements that are based on previous user actions, purchase or search history, demographics, and any other forms of personal data. Recommended products, dynamically generated product categories, and distinct landing pages are all forms of personalization that rely on user data to provide more unique and contextual experiences. This type of UX design can lead to a 44% increase in return customers and an average increase of 20% in sales overall!
Site speed is one of the most overlooked factors that affect user experience in the eCommerce industry. As we mentioned above, 40% of users will bounce if a page doesn’t load after 3 seconds. That number increases to 53% on mobile devices, where site speed can be even more important since most users are “on the go”. On average, conversion rates actually dip by roughly 5% with each second of loading time (from 0-5 seconds)!
It doesn’t take a rocket scientist to understand that consumers demand fast and efficient shopping experiences. People are in a hurry to find what they want and to pay for it as quickly as possible. Unfortunately, there is often a trade-off between offering highly engaging, customized content and ensuring that your site speed is up to snuff.
There are several things that you can do to improve your eCommerce site performance without taking away from the overall experience. Utilizing more efficient plug-ins or coding your own solutions, cleaning up site code for faster content rendering, and fixing the visual stability of images can all lead to a dramatic boost in eCommerce site speed. Of course, most of these fixes are not “cookie-cutter” and require some custom implementation. As we often note, “web performance is an art” and there are rarely one-size-fits-all solutions.
At Render Bender, we specialize in Shopify site speed optimization. We look at each Shopify site with a unique lens and craft a boutique, customized approach to speeding up your online store. Our web performance experts use cutting-edge solutions with a blend of engineering and art that can strike the perfect balance between speed and experience. No matter what content you put on your site or what you’re hoping to sell, speed is a fundamental aspect of a positive eCommerce user experience. We’re here to help you identify and implement the best ways to optimize your site without reducing its unique charm.