Shoppers seek a fantastic user experience (UX) without even knowing it.
And it’s your job to offer it.
But it’s not easy.
That’s why we created this article for you.
So you can learn everything you need to learn about UX.
(Including real-life examples, worth thousands of dollars).
“It is not the strongest of the species that survives, nor the most intelligent that survives. It is the one that is most adaptable to change.”
Yesterday’s ecommerce UX theory is old news as we speak.
This is one of the fastest-growing, constantly shifting industries, and your success depends on your adaptability.
To adapt is to meet your customers where they are, no matter the circumstances.
However, the philosophy stays the same: don’t make your customers:
- Wait
- Think
- Get lost, or feel lost.
Below you’ll find some fresh eCommerce user experience best practices; we’ve also included examples that, much like good denim, never go out of style.
TL;DR
In a hurry?
Here are the main takeaways:
- Make the website fast and functional instead of trying to woo people with flashy design.
- Product descriptions should convey the same feel customers would get in stores.
- In-depth personalization will help you upsell and retain old customers.
- Seamless omnichannel experience is a must: mobile, desktop, over the phone and in the brick and mortar shop.
Wondering how to achieve this?
Let’s get into details!
1. Clean up the website design
Is your website a visual equivalent to this nastiness?
KonMari-ing houses and apartments were all the rage back in 2016 (and still is for some).
The essential appeal of minimalist spaces lies in the ability to locate important items instantly.
Apply the same logic to your website!
Messy websites are not only unappealing; they are slower to load and distract the visitors from the key page spots as well — and that’s detrimental to your conversion rates.
How to know if your website is over-cluttered?
It’s probably not about the overall aesthetics. Some websites aren’t a complete eyesore but still need improvements — like this one:
Oh boy, the amount of CTAs crammed together is enough to set off the fight-or-flight instinct. Also, why are some discounts blue, and some red? Makes no sense. Can you combine these discounts? There’s clearance?!
The longer you stare, the more questions you get.
Try something like this instead:
What makes this one by Embalm Skincare so lovely:
- It only has one CTA per page — with powerful, converting button text that captures the attention.
- Addresses the issue right away (don’t know where to start, busy, neglecting your skin) — and offers just the right thing to solve it (a guide to get it done in 5 minutes) for free.
- It doesn’t request tons of info for you to type in, and one of them is optional.
- Notice how they ask for a name? You can use it to personalize your newsletters!
If we’re picky, we will omit the second sentence — why load the popup with more text and limit the offer to busy women?
College students binging on ramen noodles, grooms and brides, folks getting ready for camera… Everyone likes Edward Cullen-tier glowyness! Okay, maybe something more subtle, but healthy skin is always in.
Back to the website design:
The website has a nice, clean and calming design — going in line with the brand purpose to simplify the skincare routine for sensitive skin.
CTA? Check.
USP? Check.
Badges? Four of them (Australian, natural, cruelty-free/vegan, clean) — check!
Reviews? Check.
All is there, form and substance! This just shows that you can fit everything and keep a nice layout.
Scarcity and FOMO
It’s always a good idea to spice things up with some sense of urgency.
Limited quantities or time, free offer/ special price… You can even use our cart timer to let the visitors know the items in their carts are reserved for a limited time only.
Cart timers are good for two reasons:
- They’ll make the visitors remember what they want to buy
- They’ll prevent disappointment in case the item sells out while still in the cart
Now, where to put CTA?
Depends on the web page structure and intention. Here are some other guidelines:
- Above the fold — if there’s not a lot of surrounding text, putting the CTA button above the fold works well; a fullscreen welcome mat usually has it in the middle of the page.
- Below the fold — creating a story, a gripping piece of content people are invested in with a CTA button at the end makes perfect sense; placing the CTA below the fold works if the rest of the page directs the people to it.
- Natural flow — top to bottom, left to right: that’s how most people consume the content according to Fitt’s law and Z-pattern.
An eye-tracking study proved that people are willing to scroll and find the organic search result (but only 7,4% ofcenter them were willing to scroll past the 4th organic result).
This means that people *are* willing to work a bit harder to get to the thing they deem worthy — so you should choose to focus on creating something appealing more than finding the perfect placement.
If the button is there, they’ll click it.
Bottom line
Functionality comes first, and you can build the aesthetics on it.
Nobody’s just gonna stop and admire your landing page for the sake of it: make it minimal and easy on the eyes, and it’s more than enough if it works like clockwork.
Make CTAs the center of attention, with brief and informative text and alluring copy surrounding it.
You need to see for yourself — A/B testing will point you in the right direction since there are multiple theories about CTA button placement.
2. Make the navigation simple and intuitive
Imagine the IKEA store without those arrows to navigate you…
Well, unlike the poor stranded IKEA customers, your visitors can quickly leave by simply exiting the website — but you don’t want that, do you?
As silly as it sounds, you miss many opportunities because people can’t find the products. This research shows that current search and category navigation is mediocre at best; product finding and checkout are, surprisingly, positioned the lowest.
How to improve product finding navigation
Predictive search is a powerful UX feature that does half the job for customers and helps with navigation immensely.
Upon entering a single word in the internal search bar, a drop-down will list clickable, relevant suggestions that take them to the product pages.
We have created the Instant Search app that takes care of this task and goes a step further than other similar predictive searches:
- Hiding the products that are out of stock from the results
- Showing the star-rating snippets
- Providing the fully translatable text
Neat, right?
BookDepository took notes: when searching for items as specific as books, it can be hard to nail the name on the first try. Their search is great because it allows the visitors to search for books by keywords, authors and ISBN in addition to titles!
For that matter — we advise you to look into SEO and add common words and phrases when labeling the products.
To help the visitors with orientation, use breadcrumbs as secondary navigation — especially if the website is large and hierarchized.
There are no carbs here — this is an example of location-based (or hierarchy-based) breadcrumbs that help get around the store.
Speaking of breadcrumbs, there are two more you could try out:
- History-based breadcrumbs — showing previously viewed products.
- Attribute-based breadcrumbs — similarly to filters, they show the attributes of a product.
Ecommerce User Experience Best Practices for Checkout Optimization
Abandonment issues — not just for the relationships.
In March 2020, about 88% of carts were left without a single dime spent. Retailers that don’t make the check-out piece of cake are bound to note an even higher cart abandonment rate.
Nordstrom, however, got everything right.
This is what we love about Nordstrom checkout:
- Returning/ New Customers — people can choose between signing up or guest checkout at the same spot without being forced to create an account. Each step you add between customers and products reduces the chances you’ll sell
- Item Description — very detailed, yet tidy; shopping process is frictionless because visitors don’t have to leave the checkout to double-check if they got the item, quantity and price wrong
- Shipping Info — total price breakdown is displayed at the bottom, so there are no hidden costs and unpleasant surprises
- Customer Service Accessibility — it’s easy to contact customer support for all the questions; at the top right corner right next to the shopping bag; you can choose to talk directly to the rep, chat, or pick another method
- Saving Options — customers can save their information for the next shopping session or save the cart to complete the purchase later
To make sure they don’t forget the filled cart, utilize this tactic, Joe Chavez recommends:
Now, we think that it would be nice to add some security verification badges to assure people that the store is safe, but all in all — this is a prime example of expertly optimized checkout.
Bottom line
Bad navigation and dead-ends are annoying and will lose you tons of money.
To simplify and speed up the navigation:
- Add predictive search with plenty of common terms.
- Leave breadcrumb trail, so they know where they are (use pebbles if you’re in woods not to end up like Hänsel und Gretel)
- Streamline the checkout process by enabling guest checkout and by making everything relevant accessible from the checkout page
3. Speed things up
A whopping 40% abandons the website if it takes more than 3 seconds to load — and even a 1-second delay in page response can reduce your conversion rate by 7%.
If you’re wondering how fast your pages are, you can test them for free by using:
These tools will grade your pages’ speed and provide you with diagnostics and tips on what you need to improve.
Google also has Page Speed Rules Documentation: it is a detailed knowledge base that includes audit, metrics, improvement opportunities and diagnostics.
How to make my website faster?
These SEO practices act as a first aid when increasing the page speed:
- Enable file compression — use Gzip to shrink HTML, CSS and JavaScript files larger than 150 bytes. For images, you can use Photoshop or TinyPNG (works for Animated PNG and JPG too).
If you use the same image on multiple website pages, use CSS sprites so they all load as a single image, just once. Here’s a free, easy to use CSS sprite generator that comes with directions - Minify the code — CSSNano and UglifyJS are good for code optimization
- Remove redirections
- Use browser caching and CDNs — CDN stands for Content Delivery Network, and it helps web pages load faster thanks to the servers located closer to the users.
You can make sure visitors don’t bounce even if the page loads slowly:
- Show the website text first; visitors will start reading it as the rest of the page loads.
- The second thing to display are the main website elements, buttons and navigation features.
Do everything with a single app
Sounds impossible? Think again.
We have created Vitals with eCommerce website speed in mind.
Instead of downloading dozens of different apps and making customers wait for all of them to load, all requests traveling to different servers — just pick the one that has it all.
Vitals has more than 40 apps, all loading as fast as one while keeping the store functionality intact.
Take a look at our blog to learn how to improve your Shopify store load time — we went from 16.1 to 3.1 seconds.
Bottom line
Count to three — if the page isn’t loaded, poof! The visitors are gone.
Start with image compression (images usually take up 50-90% of a page’s size), then minify the codes and implement caching and CDNs.
4. Enable multiple payment methods
People won't create another account just to make a purchase - they'll just buy it someplace else.
Our Payment Logos do just the thing: make the payment logos instantly visible, and they’ll stay with you.
There are dozens of different ways to pay for stuff online — you don’t need to include all of them! Pick a couple of payment methods your target audience uses, depending on their demographic characteristics, location and your market research.
Credit cards, debit cards, PayPal and Alipay, are the most popular worldwide.
Favorable payment options are a huge plus.
Apps such as Klarna and Afterpay offer the “buy now pay later” service — making it easier for visitors to purchase.
These break the total price in several, usually monthly payments, making it less stressful to buy something high-end.
Bottom line
Include as many popular (and secure) payment methods as possible; for more expensive stuff, make it easier with "buy now pay later" options.
5. Ecommerce User Experience best practices for Mobile: make your stores sell more!
Last year, shopping via mobile devices became prevalent: the newest data shows that 55.4% of consumers purchased something this way during the third quarter of 2020.
Customers usually start researching on their phones — remember what we said about the first impression?
No second chances! Check if your website/ page is mobile-friendly here and see what’s missing.
Home Depot's free app has 4.8 out of 5 stars with 890.1K reviews — it’s safe to say that you should use it as an example:
Here’s what’s great about this app:
- Product Locator — pinpoints the exact aisle where your product is on the in-store map, shows the inventory and all the details you would ever need
- Image Search — The search bar's convenient camera icon enables the users to take a photo of an item and show you the item name.
- Barcode Reader — once you scan the product’s barcode, it will display additional info, ratings and reviews of that product.
- AR-Powered — this app lets you see how the product looks like in your home with Augmented Reality, in 3D, with exact dimensions shown
- Unit measurement converter — built-in feature, so you don’t search “cm to inch” each time.
- Family Sharing — up to six family members can use this app (very useful if you want to “subtly” hint what you want for Christmas)
Not so great — it’s only available for Apple products. But that’s about it.
The app has everything else, so customers never need to switch to a desktop in the first place. This is how you take eCommerce user experience design to really work for your customers, not to push promo and pester them with notifications.
Now, what if you don’t have an app (yet)?
No worries — desktop can adapt; here’s how it looks with TrySnow:
They used the space wisely: icons and hamburger menu fit everything nicely, and the screen space is dedicated to what matters the most — shopping buttons, prices, great photos and reviews.
Omnichannel is a must!
Let’s expand on the previous Home Depot example a bit.
This app turns your phone into a powerful, multi-purpose tool; customers can use it to jump from home to store and browse, measure, compare, and purchase with ease.
In short, they have created an omnichannel experience — within a single channel, the app account. Without omnichannel, eCommerce user experience best practices have little value.
With that one point, you can access all the customer data you’d otherwise need to gather from multiple touchpoints. The app features are perfectly integrated with the store (map, inventory, AR), their accounts and products, for next-level ease of use and seamless shopping experience stretching from their homes to the store.
Bottom line
Great mobile experience shouldn’t be an afterthought or a “nice-to-have” — go mobile-first and make it extra comfy.
Do it right, and you’ll bring the omnichannel experience along.
6. A great popup really makes the difference
“But people hate popups!”
It turns out they don’ hate *all* of them — just the bad ones.
Here’s an example we can learn from…
... learn what NOT to do.
First of all, it’s plain ugly. No images, no appealing colors, nada. Not even CTA stands out.
Second, TL;DR. You could safely hide nuclear codes here, and nobody will ever know.
To top it off — “I agree to terms and conditions…” field.
Let me just close this tab really quick. Hey, the X is visible; that’s one good thing!
Let’s take a look at something much better now:
What we like about this one:
- Valuable offer — that’s a HEFTY discount, who wouldn’t like that?!
- Limited text — with an offer this good, you don’t need to beat around the bush; this is just the right amount of text you need on a popup to get the point across.
- Simplicity — there’s not much to it, but it doesn’t hurt looking at it. Blue is nice and calming; there’s a mattress at, end of the story.
- Size — it leaves a part of the screen visible; while in this example, it doesn’t matter as much, it’s better to use a smaller one to make the content in the background visible.
- Engagement-based — somebody probably had second thoughts about purchasing the mattress, so they hit them with a great offer: this makes popup relevant instead of a nuisance.
CTA is alright, visible enough, although we’d strongly suggest you use a bolder colour for the button.
But, can you make it *fun*?
Of course, you can!
You can also make the CTA cool to gamify it — because everybody likes to play!
Our Wheel of Fortune popup gives you the chance to collect plenty of emails for your campaign and your customers to win something cool with nothing to lose!
The best things about this Wheel of Fortune:
- It is fully customizable.
- Captures the emails and automatically sends them to integrated services (MailChimp, for example) and your customer list in Shopify
- It’s translatable and GDPR-friendly
Bottom line
Every popup is designed to interrupt visitors’ intended activities on your page.
Make sure it’s worthwhile by making them relevant and valuable — and with that, less annoying.
Good content + relevant context = high converting popup.
7. Go a step further with localization
Browsing foreign eCommerce websites comes with many barriers. The most obvious one is language; then come the foreign currencies, item availability and store locations.
These obstacles are easy to overcome:
- Geolocation Redirect will guide your customers to the local stores or translate the website content. This way, none of the page SEO value is lost!
Oh, and did we mention it’s a piece of cake
- Currency converter — based on the geolocation, currency converter automatically displays the corresponding currency but still leaves the visitors the option to select another one as a default
Here’s an example of a huge retailer that managed to get it all done:
This is what ASOS did to localize the experience:
- Translated the whole website, including product info, into 7 major world languages
- Provided the customers with 10 different payment methods
- Displayed 19 currencies
- Automatically localized the site for each customer visiting the website.
Bottom line
If you strive for a global customer base, localization should be one of your priorities.
When it comes to eCommerce user experience best practices bring a familiar feel and local flair to the most remote corners of the world — with expert localization.
8. Convey trustworthiness with reviews
Product Reviews are present by default on all respectable eCommerce websites; to make full use out of them, add them at the bottom of the product pages and show:
- Star rating
- Photos attached by reviewers
- Verified review badges
- Review replies — not seen as often as elements above, but a great opportunity to show professionalism and higher customer care levels.
With something as important and fragile as your skin health, it’s only natural that people will want to hear about candid, first-hand experiences.
Derma Universe™ proves the point:
Star rating, written reviews, and most importantly — images; all are there to make the whole thing convincing and assure the website visitors of the quality.
A no-brainer that’s often forgotten
Take time to read the customer reviews and complaints and read them on all channels.
One would think that this is the most basic, cookie-cutter tip — then again, we keep seeing the same complaints repeatedly.
Some bad reviews you can’t avoid.
Instead of playing dead, or worse, hiding the comments or being snappy in replies, address the concerns publicly. Otherwise, you look like the bad guy, and the people seeing it will be deterred from your store.
Bottom line
Flaunt your good reviews and happy customers, and own up to the bad ones to keep your good reputation.
That way, no one can accuse you of not showing accountability.
9. Good product descriptions help immensely
Buying things online always comes with a risk that the product won’t be as people imagined.
Disappointment leads to lower ratings and bad reviews — the best way to prevent that is to include exact, contextualized product descriptions.
For clothing retailers, that would look something like this:
- Sizing guides — US, Europe, China and some other countries and continents have different sizing, which can confuse customers. Put an end to it by including charts with exact measurements for all of those sizes
- Show the items in action — what it looks like in motion, how it wears on different bodies, and from multiple angles; don’t tell, show — with high-quality photos and videos
- Pairing — here’s your chance to upsell the items by matching them with other products from your store
And we have a perfect example:
Thigh Society just gets its customers and nails the product description game:
- Photos showcase the products in their raw, natural state, with movement and different body shapes and angles
- Descriptions help the customers pick the perfect pair of leggings
- Style, sheerness, price, color, “best for” — and that’s all before you click the product
There’s not a ton of text here, but whoever stumbles upon these will know exactly what they’re made for and what to expect.
There’s just one thing we would add: badges.
We took this example from Mindful Intentions; here, badges are an opportunity to add another layer of trustworthiness and remind them of good deals with small yet impactful pieces of illustration.
Social buttons below help with spreading across the channels — to the ones they may prefer.
What to do when the description doesn’t cut it?
Buying perfumes online is a nightmare.
Who knows what a tonka bean is, let alone what it smells like!
If only smells could be transmitted via screens or speakers… Imagine THAT kind of user experience!
Until those dreams become true, The Fragrance Shop uses this insanely cool offer to let people have a taste (or rather, a sniff) of the real thing.
This isn’t among your typical digital eCommerce user experience best practices, but it takes customer care to another level.
Testers, free samples and trials are just enough to get people hooked. Of course, these have to be as amazing as your full-priced product.
Bottom line
In the absence of the real thing, your product descriptions are the closest thing your customers have to try on, taste, smell, click…
Go as detailed as possible, with a special focus on photos and videos — a dash of tasteful humor will bring it all together.
10. Personalization makes people feel special
Did they browse through your boots selection recently?
Use our Related Products app to show them some more models they might like better — or items to match.
Recently viewed products will remind them to get back to the items that drew their attention first and put them in the cart this time!
AliExpress is a well-known retailer that does this amazingly.
After you browse or add an item to your Wish List, AliExpress will show you similar suggestions all over the place (even some with better prices).
Before you know it — your cart will overflow.
You can easily fall into a rabbit hole of similar products, lots of them; putting them into the wishlist or cart is easy and doesn’t interrupt the visitors when they’re looking around.
Our final thoughts: this hard work will pay off!
These great eCommerce user experience best practices are like a fertilizer for your conversion — they are proven to make it grow. ☘️
If you need to pick between looks and substance, go for the latter; ease of use is your number one priority.
With Vitals, you don’t have to pick. We can help you grow big and beautiful, no compromise!
After all, we do have a month-long free trial so that you can see for yourself, no strings attached.