Ecommerce user experience best practices

User experience is MASSIVELY important to e-commerce website design. The easier and more intuitive your store is, the more sales you will make and the happier your customers will be.

Just look at Amazon – they’ve spent millions of dollars mastering their UX design. And it’s done well for them.

Let’s dive into some e-commerce UX best practices.

1. Adhere to The “F” Pattern.

Users spend as much as 80% of their time viewing the left side of the page compared to the right. 

This eye-tracking research is what leads experts to the “F” pattern. This layout allows your site visitors to naturally take in the most important elements of your page and mentally create a hierarchy of the information.

F Pattern

Here’s an example of the F pattern in action:

UX best practices

When using the F pattern we suggest that you:

  • Put the most important information on the top of your page
  • Expect that your site viewers will scan and not read (format your text accordingly)
  • Position your CTAs on the left and right sides (this is where the site user will start and finish their scanning)
  • Use sidebars to encourage your customers to stay engaged with your site

2. Use No More Than 2-3 Colors Sitewide, You Crazy Artist!

You may be tempted to use all of the colors for your website. But for the love of your conversion rate, please don’t.

The best way that you can get a potential customers’ attention is by communicating a clear and concise message.


Make your site copy succinct and use a limited color pallet (no more than three colors).

Once you’ve chosen your three colors, follow the 60-30-10 rule:

  • The primary color should cover about 60% of the space and create the overall unifying theme of the design.
  • The 30% should contrast with the 60% to create a visually striking effect.
  • The 10% is an ‘accent color’, which should complement either your primary or secondary color.

See how these sites below follow this rule?

Choosing the best colors for your e-commerce store

e-commerce homepage best practices

3. Use Large, Readable Font (16px Is Ideal)

Like color pallet, font plays a huge role in conversions.

Have you ever been to a website with font so small you could barely read it? How long did you stay on the site? We’re guessing not very long!

Experts say that 16 pixels is an ideal font size. It’s readable without being too obnoxious.

Make sure that the font you chose displays your messaging clearly. A script-like font may look nice, but can your customers actually read how your products can benefit them?

This helpful infographic from showcases what emotions the different typography evoke.

Psychology Behind Typeface large

4. Add Breadcrumbs (Not the Kind You Eat)

Remember that old Hansel and Gretel fairytale? This web design practice is a nod to Hansel and Gretel leaving a trail of breadcrumbs behind them so they wouldn’t get lost in the woods.

Did birds end up eating those breadcrumbs? Well, yes.

However, there is an important lesson we can learn for web design: always leave a trail behind you.

And for good reason — most e-commerce sites have a lot of products to sift through.

On your site, these breadcrumbs are text links separated by the (>) sign. The string of text links and arrows clearly defines where you are and how you got there. Like this example from Best Buy:


Top three reasons we love breadcrumbs:

1. They clearly define where your customers are on your site

2. Google uses them in search results

3. They save your customers’ time (no more endless clicking to find a product)

Location, location, location

“Breadcrumbs placed directly near the page title received a whopping 82% of all breadcrumb clicks.”

Simply having breadcrumbs on your site is good. Placing these breadcrumbs in a highly visible location is even better.

5. Offer Multiple Payment Options

Once your customer finally reaches the checkout window, the last thing you want is for them to abandon their cart because of insufficient payment options.

50% of customers jumped ship because their preferred payment option was not available. 

Be sure to offer plenty of options for your customers. Thankfully, these days there are no shortage of payment methods to add to your site.

We suggest that you take a good look at your target audience and the ways that prefer to pay online.

And always display trust signs on your site (remember point #2?).

The example below from Solo Stove does a great job of offering many viable payment options (no customers lost there!).

Checkout Best Practices