vintage convertible with two people inside

How to Create a Website That Converts: Key UX for Ecommerce

4 minute read
Chad Rubin avatar

There are certain ecommerce websites that make their shoppers comfortable, streamline the process and make it easy to buy. Then there are online stores that make visitors wary, are hard to use and don’t inspire trust.

The difference between a well-optimized store could be something big, like features that work and images that look good.

However, many of the differences are in the details — overlooked microtext, tracking your check-out progress, and other little things all contribute to user experience (UX) for e-commerce. We’ll be going over a few key UX components you should pay attention to if you have an online store.


microtext on a website
An example of microtext on a website.Skubana

Microtext is the smaller instructional text you sometimes see as you fill out fields on a form. It gives you more information about what those fields are, any errors in the form, or explains why you need particular information.

Microtext is often overlooked, but always appreciated when someone is stuck filling out an order form. It could mean the difference between a successful conversion and shopping cart abandonment.

A good example of microtext would be an email newsletter for professionals that asks, “What’s your favorite business email?” in the signup field. That way, people immediately understand the form wants a business email, not a personal account.

Success Notices

When someone inputs their payment information, like credit card details or PayPal accounts, they want to make sure their money went to the right place.

It’s vital to have some sort of notification once a payment or transaction was successfully completed. Even just a simple note on the webpage in green text saying “Your payment was completed, thanks!” is leagues better than nothing.

Often, ecommerce stores will incorporate emails into their sales and delivery process, giving their clients an added sense of security and information to ease their minds. I recommend setting up confirmation emails that contain thank you notes, tracking information, and how to get in touch if there are any problems.

If you don’t have any success confirmation, and someone clicks the “submit” button too many times and makes multiple payments, because the goal completion wasn’t clear, you’ll have unhappy customers. Plus, this could throw off your inventory counts.

Relevant Images

Just because an image looks great doesn’t mean your visitors will intuitively know what it’s for.

Many online visitors notice images before text, so if your homepage uses images as a navigation tool (ie. features, online store, or about pages) make sure they make sense to your target audience.

The images should not only be high-resolution, look good on mobile, and load quickly. They also need to help get your visitors to where they want to go, faster.

Learning Opportunities

If you have an online clothing store that sells socks and other items, you may have navigation images for different types of items like pants, shirts, and socks. Use a photo of a sock for the socks section, not a full-body shot of a model wearing the socks, to make it immediately clear where that page will take you.

Checkout Tracking

progress bar
Being able to track checkout progress is a benefit to buyers.James/Dribble

Being able to see how close to completion you are in the checkout process encourages your buyers to complete their transactions. It gives them a goal to work towards, doesn’t leave them in the dark about how long the process will take, and empowers them to manage their time appropriately.

This could be as simple as a tab that shows how many pages are left to go, or a progress bar that lists the upcoming steps your buyers will have to fill in (ie. order details > shipping addresses > payment information > confirmation).

It’s a good idea to also let them save their progress, or have your site auto-complete some fields in case work is lost.

Navigation Structure

Test and learn what the best way to structure your navigation and store pages is. It should make sense to your visitors, go from top-level down to details, and allow visitors to get to where they want to be within 3 clicks at the most.

A bad example of ecommerce UX is burying your online store in your navigation. If people have to go to your “about” page to get to your store and make a purchase, you’re making it too hard for them to find your items.

Ideally, your visitors will be able to see all your pages at a glance, without having to click through to drop-down menus.

However, if you must nest pages, make sure they make sense. For example, socks and sandals could be filed under “footwear,” but don’t put gloves there or no one will ever find it. Follow your common sense and test out your site to make sure your navigation is user friendly.

About the author

Chad Rubin

Chad Rubin is CEO of Skubana, a provider of ecommerce plug-ins for websites. Chad builds ecommerce businesses and is a top 250 Amazon Seller.

About CMSWire

For nearly two decades CMSWire, produced by Simpler Media Group, has been the world's leading community of customer experience professionals.


Today the CMSWire community consists of over 5 million influential customer experience, digital experience and customer service leaders, the majority of whom are based in North America and employed by medium to large organizations. Our sister community, Reworked gathers the world's leading employee experience and digital workplace professionals.

Join the Community

Get the CMSWire Mobile App

Download App Store
Download google play