[eCommerce UX Best Practices] 11 Scientific fundamentals to improve your online store’s user experience

Your eCommerce is doing well… Let’s say you cannot complain, but the conversion rate is stuck.

As hard as you try to improve your sales strategy, there’s still a high percentage of visitors that come to your web and leave right away without actually shopping.

And you’ve read somewhere that the key to it all could be user experience. In other words, to ensure that people who come to your store feel comfortable while browsing.

Well, you’re on the right track because user experience is a key factor for conversion.

If your store’s user experience is reliable, that means:

• Stronger SEO positioning: users spend more time browsing your store and interacting with it. To Google, that means the site’s content responds to users’ needs and improves its positioning.
• Higher conversion: users who browse your store easily are more likely to end up making a purchase.

These are two major reasons to focus on improving user experience in your store. The next question is how to do it.

And that’s what you’ll see here.

In this post we’ll introduce you to some best practices that have been shown to improve online user experience, all of which are based on and proven by scientific principles.

Wear your lab coat because this is on. 😉

Note: some of these practices are pretty advanced, so if you still need some clarity in terms of what user experience is or you’ve never worked on it on your website before, we suggest you first read this post in which we explain the fundamentals of it. After reading it, you’ll be ready to return to this post and deepen your knowledge.

👉 11 eCommerce UX Best Practices that’ll increase your sales

To make things simpler, we’ve broken down this explanation into 3 groups, according to the ‘area’ of your web they target.

• eCommerce design.
• Navigability and usability.
• Purchase process.

Having said this, let’s see how to optimize user experience to take your store to a whole new level.

✅ Best Practices: Design

Let’s say you walk into a store and notice that all the shelves are a mess and decoration in general is just horrible.

You’d most likely turn around and leave, right?

The same thing happens with your online store’s design. If you don’t look after it, users’ first impression will be so negative that it’ll be hard for them to come back.

In order for the web design to improve user experience, here are some principles you must take into account.

➡️ 1. Less is more (KISS Principle)

This principle seems to have been created by a US Marine Chief Engineer.

KISS stands for ‘Keep It Simple, Stupid.’

Even if it comes across a bit roughly, its main point is: forget about far-fetched design and keep it simple.

Simple design has been shown to be much more effective in the majority of cases.

How can you put this principle into practice in your eCommerce?

• Try to cut down on colors: use 2 or 3 simple colors that go well together instead of oversaturating your website with many colors. 
• Make it as clear and intuitive as possible: simply by entering the website, the user should be able to identify the most relevant elements (menu bar, search bar, featured products, etc.).
• Don’t overuse CTAs: Call-to-actions are links or buttons that encourage users to carry out a specific action such as adding a product to the shopping cart. Make sure there aren’t too many CTAs both on the homepage and product cards (users are likely to feel overwhelmed with more than 3 and end up carrying out none).

Also, the KISS principle may as well be applied to the purchase process.

For example, it’s possible to simplify checkout to optimize purchases and reduce abandoned carts (we’ll give you a few tips further down).

➡️ 2. The size and position of CTAs matter (Fitts’ Law)

This law was put forward by a psychologist: Paul Fitts. It’s commonly believed he used his experience in the US Air Force to come up with it.

He was able to demonstrate that the farther away and the smaller an object is, the more difficult it is for us to locate it.

Even if it may sound a bit abstract at first, we can transfer this law to design. Specifically, to CTAs design.

How? By making CTAs that:

• Stand out from the rest of the elements: for example, if a given CTA is shaped as a button, you can color it so that it stands out from the site’s background.
• Are as close as possible to the above-the-fold: this is the upper part of a site and the first thing users see just as they land on it without having to scroll. According to Fitts’ Law, the closer a CTA is positioned to the above-the-fold, the more likely it is  for users to click on it.
• Are ‘clickable’: make them look like buttons. If it’s a link, then make sure it’s underlined. The idea is for users to realize as soon as possible that it’s an element they can click on.
• Unclutter them: buttons will stand out even more if you leave enough blank space around them.

As an example, here’s an ‘add-to-bag’ button that meets all of the above-mentioned requirements.

➡️ 3. A good look inspires more trust (Aesthetics Law)

Imagine two slices of cake right in front of you:

• The first one is carelessly slashed with lumps of cream scattered here and there.
• Instead, the second one is well garnished, with fresh pieces of fruit on top and a Michelin-starred restaurant look. 

Which would you say is tastier?

Most likely, the second one. In fact, flavor has nothing to do with appearance (the well-garnished cake might be too sweet and treacly). However, this is how our brains work.

This is known as Aesthetics Law.

According to this law, if something looks good, we unconsciously associate positive characteristics to it.

In terms of eCommerce, this means that the more attractive your online store’s design is, the more users will place their trust in you, and will feel you’re offering them a better service with higher-quality products. 

For this purpose, it’s important that:

• Your website has a professional look (that’s why investing on a good template is relevant).
• You use temperate, corporate-like colors.
• You include large HD photos of your products on the homepage.
• Etc.

For you to have an idea, have a look at Bliss’ homepage, which has an elegant and trustworthy design.

More specifically, we can also apply this law to product cards.

For that purpose:

• Use professional photos and videos: high-quality images that allow any customer to have an idea of what your product’s like and how it works.
• Use models: it’s been shown that photos of a person wearing a product have a higher conversion rate over those in which you just see a product against a neutral background.
• Move onto 360º photos: some stores have started to implement this technology to showcase their products from every angle, inspiring even more trust.

Here’s an example from the same eCommerce store.

In this case, they’ve also chosen to include videos on each product card.

As you can see, the result is pretty flashy.

If you’d like to know more about how images and videos increase product card conversion, have a look at this post.

Note: watch out. Don’t mix up the KISS principle with Aesthetics Law. In the case of KISS, it’s about implementing a simple design, while Aesthetics Law is about making the design attractive and user-friendly.

➡️ 4. The brain fills in any missing elements (Continuity Law)

Continuity Law is one of the 13 laws of Gestalt psychology, which explains how we perceive reality in terms of the stimuli we receive.

According to Continuity Law, if we see a cropped or incomplete object, our brain tends to complete it with the missing information.

You might be asking yourself: “What does any of this have to do with my eCommerce anyways?”

You can make the best of this mind feature and introduce discrete, ‘incomplete’ elements to insinuate to your users there’s continuity.

You could apply this, for instance, to product or category carousels. Try locating the last image so that it looks cropped, just as in this example from Ikea.

By doing something as simple as this, you’re encouraging users to click so they can see every other category in the carousel.

✅ Usability and Navigability: Best practices

First off, let’s clarify some basic concepts:

• Web navigability refers to the efficiency with which users browse a site.
• Web usability refers to the efficiency with which users can interact with the elements of a site (whether CTAs are easy to click on, whether it’s simple to unfold the menu, etc.).

They’re both fundamental pillars of your eCommerce user experience.

So let’s see how we can improve them.

➡️ 5. Search experience is paramount

This is not a law as such, but we know this first-hand: an eCommerce’s internal search engine is a fundamental piece to improve conversion.

Watch out, though! Not just any search engine will do.

You’ll need one that can guide users to the product they look for every time. It may sound basic, but it actually isn’t.

To get started, your internal search engine should be capable of offering relevant results when dealing with:

• Synonyms: regardless of whether a user types ‘fridge’ or ‘refrigerator’, an advanced search engine will return the same results because it gets that the person is looking for the same product.
• Typos: even if a user types ‘toastr’, the search engine should offer results for toasters (this is something most search engines can’t do).
• Non-product search queries: more people are increasingly using search engines to run this type of search. For example, return policies, shipment costs, etc.

In addition, it’s also important for the internal search engine to have some extra features such as:

• Autocomplete.
• Faceted search.
• Voice search and image search.
• Artificial intelligence-powered personalized results.

This way, you can improve user experience and increase conversion (by a lot).

Just so you get an idea, customers who use smart search engine Doofinder have seen their sales increase between 10% and 20% thanks to these features (among many others).

>> If you’d like to see for yourself, click here and try Doofinder for free on you online store for 30 days.

➡️ 6. A familiar look inspires trust (Jakob’s Law)

Let’s see this next usability principle.

Jakob’s Law states that users feel more comfortable browsing a site with a similar structure to other websites they’re already familiar with.

In conclusion: make customers feel at home.

How do we make this?

See what most eCommerces have in common:

• The main menu is on the upper part.
• The shop button is placed on the upper right area of product cards, while images go on the left.
• The search bar is placed at the top and to the right of the page or, alternatively, at the center of the menu.

For example, Amazon meets all these requirements. That’s why —even if we happened to stumble on their web for the first time— we’d still know how to browse it.

➡️ 7. The science behind the number 7 (Miller’s Law)

We all know our capacity to process a lot of information at the same time is limited.

But did you know an American psychologist studied this specific phenomenon?

Indeed.

George Miller published an essay in which he analyzed the boundaries of short-term memory. Apparently, we can only keep from 5 to 9 elements in our memory —this is where the average number 7 stems from.

Therefore, in order to improve user experience, we must keep this in mind and remember that the more elements we add to a task, the more complex it will be for a user to carry it out.

You can take put this into practice by:

• Making sure product carousels don’t have more than 7 products at a time.
• If you provide a contact number, break it down to groups of 2 digits.

Now that you know this, you’ll most likely start seeing sets of 7 elements everywhere. 😉

Take it easy now. There’s still more in store for you.

➡️ 8. Personalized content is just what the user needs

You visit an online kitchen supplies store and buy a Black & Decker mixer.

A few days later, you go back to the same store and amongst featured products on the homepage, you see a specific accessory for that very model of mixer you bought.

Coincidence?

Not really. Most likely, the website has artificial-intelligence assisted technology that offers the user personalized content.  

In other words, the system has used:

• Previously visited product cards.
• Previous searches.
• Shopping history.

… In order to show you products that meet your needs.

This personalized content is not limited to featured products.

If you have an intelligent search engine (like Doofinder) you can even offer personalized search suggestions.

In other words, the internal search engine will show each user different search results based on their previous behavior.

For example, if a user has previously been seeing women’s clothes, when they type ‘pants’ on the search bar, they’ll get suggestions for women’s clothes —not men’s.

➡️ 9. Clear and direct messages guide users (UX copywriting)

UX copywriting is a branch of copywriting whose purpose is to enhance navigability through the text on the web.

This kind of writing is based on:

• Using concise messages.
• Easily-understandable messages.
• Clear content about how to keep on browsing or interacting.

The idea is for users not to get stuck, asking themselves ‘Now what?’

Here’s an example taken from Natura’s store: error page 404.

This text informs users they’ve come across an error page, while indicating how to return to the homepage. It does all of it with a pinch of humor in order to better connect with users and ‘smoothen’ the error.

✅ Best Practices: The Purchase Process

To conclude, we have two best practices that are ideal for optimizing the purchase process and reducing unwanted abandoned carts.

➡️ 10. Incomplete tasks keep us alert (Zeigarnik Effect)

Psychologist Bluma Zeigarnik discovered this effect by examining something curious in a group of waiters.

She noticed that while a table’s check was still open, waiters could remember which person had ordered which plate. But the second they’d paid the check, the same group of waiters couldn’t remember either the cost or the orders.

After observing this phenomenon, Zeigarnik found out that our brain remembers best those tasks that are incomplete because they keep us ‘alert’, while it gets rid of information related to completed tasks.

Can you think of a way to make the best of this phenomenon in your eCommerce?

On the one side, you can use this with progress markers in multi-step processes, such as:

• Checkout.
• Log-in process.

This way, you can let users know how many steps are left for completing the process. 

On the other hand, this also explains the impact of abandoned cart emails.

With this type of emails, you remind users of those incomplete processes and ‘activate’ the Zeigarnik effect in their brains (the same goes for retargeting campaigns).

➡️ 11. A simple checkout process enhances conversion (Hick-Hyman Law)

Last but not least, there’s Hick-Hyman Law.

According to this law, the more options you provide a person with, the longer it’ll take them to make a decision.

Remember when we said that more than 3 CTAs together can be overwhelming?

This is also valid for the checkout process; the more alternatives you provide your user with, the more likely it is for them to abandon the purchase.

However, we insist on the relevance of  providing different payment options, shipping methods, etc.

So how can you bring these two ideas together and provide users with enough alternatives without overwhelming them?

For example, highlight card payment and standard shipment. And if the customer wants to choose a different option, it should be right there for them to select it.

👉 Use these laws as your new commandments to improve user experience

You’re all set up now to optimize your eCommerce customer experience.

Be careful, though: these ‘laws’ don’t mean infallible principles.

As you know, nothing’s written in stone in the online world. The important thing is for you to apply these ideas and follow up on your analytics to see which work best for you.

Come on now! Let’s put these principles into practice.