The Objeqt Optimization Blog:

Actionable Posts to Help You Improve Your Conversion Rates

Whether you’re just getting started with conversion rate optimization or you’re an old pro, check out our library of how-to-posts, guides, and more. Click the topic you’re interested in now!

Great Ecommerce User Experience For Increased Conversions

Ecommerce User Experience

Published by

January 9, 2018

Great ecommerce user experience will increase conversions! So what is UX? According to the Nielsen Norman Group:

”User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

One of the first steps in conversion optimization is to identify any issues that force prospects to struggle to purchase something from your website or a mobile app.

So it stands to reason that providing a high-quality ecommerce user experience (UX) means employing different methods of engineering, design, advertising, and interface design. You need to ensure visitors face as few obstacles as possible on their journey toward their, and your, ultimate goal: purchase.

To ease friction and improve customer experience, your user interface must be simple and functional. It must allow intuitive navigation, cut down on visual distraction, and omit or hide unnecessary informational or visual content.

First, map your customer journey

Mapping the customer journey is a precondition for creating an engaging customer experience. A customer journey map is an analysis of the entire customer experience that aims to identify and eliminate bottlenecks.

What do we mean by bottlenecks? Every website has multiple customer touchpoints. Creating a map of the customer journey begins by identifying the most common funnel entry point. Then, you’ll create an actual road map of the way the average customer navigates your site.

The point of mapping the customer journey is not to create a “railroading” experience for your customers that limits their freedom and control. Rather, the point is to help them achieve their ideal outcome. To do this, you need to focus on helping your customer succeed in their goals (versus helping them achieve your store’s goals).

e-Commerce Customer Journey Map
Map the entire customer journey, identifying and prioritizing which touchpoints represent bottlenecks that need improvement.

Load speed: A little-considered factor in ecommerce user experience

One of the first things most users will notice is how fast your website loads. It’s a fact that faster websites convert better, so it is obvious that your website should load as fast as possible.

Site speed is influenced by many technical factors, but also by design choices.

For example: using Flash, large high-resolution images, or background video is a sure way to slow down your page load speed. While these design elements can make your website look pretty, they adversely affect load speed. (They have a few other negative consequences, too — such as taking control of the interaction away from the visitor, and adding unnecessary steps to interactions.)

Another frequent load speed issue is the tendency to use container files like .PDFs to show content. PDFs are great tools to present long-form content like books, guides, or instruction manuals. But other types of content are best presented using regular HTML code, so the visitors can view your information or products without interruptions, the need to download a file or plugin, or similar disruptive elements.

Simple ways to improve your visual design

The second element that influences user experience on any website or app is visual design. You can leverage your design to make your user experience simpler, to make information more accessible and easy to grasp, and to clearly, intuitively communicate the customer journey. Some important elements of visual design are:


Typography, or choice of typeface, can aid in conveying meaning, increasing the legibility of your copy, and establishing your brand tone and personality. Additionally, typography allow you to create a visual hierarchy by using simple variations of the same typeface (consider using different header sizes to communicate importance; bolding; enlarging; or otherwise varying the look of the copy.)


The use of color to elicit emotion, attract attention, convey meaning, and encourage exploration is a well-known concept in marketing and advertising. You should carefully consider and pick out a color scheme that conveys the desired mood for your brand. Depending on what you sell, you can use colors to project or provoke emotions that correspond to your offer.

While color is important, the interaction of colors and surrounding content can make or break user experience. Use contrasting elements on the page to make important information stand out, or to make your call-to-action more prominent. Used effectively, visual contrast makes it easier for your customers to accomplish their goals.

Page composition

Composition is all about the way design elements interact with each other. Effective composition eases the customer’s cognitive load (AKA the amount of mental processing they need to do to understand the page), controls the rhythm of interaction, and provides structure and flow to the purchasing experience.

The position of elements on the page should make it easy for your customer to understand the import and significance of different types of content. This is part of establishing a visual hierarchy.


Whitespace, or negative space, is a fundamental design concept. Allowing adequate space calls attention to crucial elements like calls to action, important information, or product images — so prospects will dedicate more of their attention to these elements. And, because it allows the brain to process information, whitespace can provides more clarity and order to your user experience.


In designing your website or app, you should follow a consistent visual scheme to provide the same experience all over. Different designs or experiences within the same site or app will confuse prospects and create an interruption in their experience. This may lead prospects to lose sight of their goals and ultimately abandon the purchase process altogether.

Offering a consistently designed experience also reinforces your brand and breeds familiarity, increasing the likelihood of creating loyal repeat customers.


One of the main issues of every ecommerce website lies in the fact that prospects are not able to touch and feel products prior to purchasing. Solving this issue depends on your ability to convey as accurate a representation of your products as possible. You can use photography, graphics, and other imagery to convey the story of your product, make it tangible, and captivate your prospects.


Movement (or more accurately, dynamics) is the principle used to convey subtle motion within the user experience — without using video elements. For example, you may use a sequence of images to enhance the story, or provide a hero image to help the prospect identify with a product or desired outcome. Moving elements can also be used to gather feedback — for example, you might allow a prospect to select different colors of a given product.

Here is an infographic with the main UX elements for better performing ecommerce websites:

Ecommerce User Experience Visual Design Infographic
Ecommerce User Experience Visual Design Infographic (easy embed link:

Don’t overlook the ease of navigation

Navigation is an important aspect of overall customer experience. If your navigation is hard and/or time-consuming, and your average customer needs to spend several minutes finding the appropriate category for a product and navigating to that product, by the end of the process, only the most motivated prospects will be left.

As Steve Krug put it in “Don’t make me think”:

Don’t force your prospects to puzzle out where you’re hiding what they’re looking for! Instead, make your site navigation intuitive and simple.

Let’s start by discussing the menu, which is the main navigational tool on most ecommerce websites. Your menu design should enable your prospects to quickly (and with minimal effort and time) locate a product they want to buy, and navigate to the page where they can purchase that product.

To make navigation effective, intuitive, and effortless, you should follow the Nielsen Norman Group’s 15 principles of usability:

a) Visibility

  • Use the largest menus possible, given space on your website
  • Put menus in familiar locations — either on the top left side (for hamburger menus) or at the top of the page (for navigation bars)
  • Make the menu look interactive, AKA visually distinctive and clickable
  • Give menus visual weight. The menu is an important item, and should be visually differentiated from all surrounding content
  • Contrast menu text links from the background color(s)

b) Awareness

  • Allow prospect to remain aware of where they are at all points of interaction. Techniques like breadcrumb navigation can help prospects answer the question “Where am I?” at any given moment.

c) Relevance and clarity

  • Label links clearly, so users understand what they’re clicking on
  • Make labels easy to scan
  • Enable users to preview lower-level items directly from the menu
  • Provide local level menus for related content
  • Make use of visual communication cues like icons, graphics, or colors

d) Ease of use

  • Make links large enough to be clicked easily
  • Hover-activated menus should stay open for long enough that the user can move the cursor. Don’t make these menus too wide or too long; otherwise, prospects may confuse them for a new page or have difficulty scrolling to the bottom part of the menu
  • Make menus sticky, so prospects who scroll further down the page can easily access them at any moment
  • Show the most frequently used items near the point where the menu is activated, so prospects have to expend minimal effort to reach them

Following these principles should work for most websites, but keep in mind that you should always test.

Interaction and feedback

The way your website interacts with prospects and customer is the final puzzle piece in customer experience. To operate effectively, an ecommerce website must have a way to collect customer data: billing and shipping information, registration data, and so on.

The best way to get this information is by using forms. Forms are a necessary way of collecting customer data, simply because they provide a structured way to both gather and process information.

User experience design - example form
User experience design – example form (Source: UX Matters)

But on the other hand, forms are a huge source of friction. They interrupt navigation, requiring prospect to stop and fill in fields with data. Since this data is invariably sensitive (ex. home address and credit card number), most prospects will be reluctant to provide it.

Even assuming you’ve done your homework and your prospects are ready to trust you with their personal data, your forms can still make this a moot point — costing you dearly in terms of conversions.

What makes forms frustrating?

Effective forms ask only for the information that is absolutely necessary to complete the purchase. Plus, by staying focused on just the critical information, you’ll shorten the form length and the time it takes to complete it.

Next, if your form is long, consider breaking it into several pages or screens so that prospects can fill in one segment at a time (which lowers their cognitive load). To facilitate progress, show prospects a progress bar that tells them how close they are to finishing.

One note on account creation/registration: Requiring prospects to register prior to purchase has obvious benefits for you as the owner of the business. But a truly customer-centric user experience reduces friction — so instead of requiring customers to register, allow them to proceed with their purchase using a guest account or linked social media account.

Even though a user who logs in using a social media account won’t provide you with as many data as one who registers on your site, they’ll still convert, which means they’re more likely to buy from you again in the future (and return customers also tend to spend more).

Grow your post-purchase relationships

This brings us to another important part of user experience: the post-purchase experience.

Till now, we’ve been focusing on the pre-purchase and purchase experiences — but the post-purchase experience is just as important because it has the power to create repeat customers. Even the best pre-purchase and purchase experiences can’t fix a lousy post-purchase experience.

Say you sell clothes. You build an excellent website with a beautiful interface, stunning photography, and a smooth, easy purchase process. You have a high visitor-to-customer conversion rate. These new customers then expect to receive the product they bought in good condition, free of any damage or flaws, delivered on time to the correct address.

Once a customer purchases a product, you need to do a few different things to engage them immediately:

  • Invite them to register (if they didn’t)
  • Invite them to follow or join your social media communities
  • Offer them information how best to use the product they purchased
  • Ask them to review the product
  • Cross-sell or upsell them on complementary products
Ecommerce user experience - secure checkout
Nordstrom guest checkout offers you to join their Borderfree community by registering for accountEcommerce user experience – secure checkout

One of the best ways to engage your customers is inviting them to take part in your social media community. We’ll return to this subject in more detail later on to examine the potential growth opportunities that stem from community. For right now, just know that community plays a role in user experience.

Your customers also expect you to provide post-purchase service. If there is anything wrong with the product they bought, customers want to be able to return it or exchange it without any hassle.

Naturally, your goal should be to make sure that your customers are satisfied and that all of their reasonable complaints are resolved in a timely manner. If your website allows customers to provide feedback after they buy, make sure you respond to negative feedback.

The way you communicate with dissatisfied customers shows how much you care for them. It also shows both prospects and other customers that they can count on your full dedication to solving any potential problems. If you show that you care, you’ll earn loyal and enthusiastic followers who become your best brand advocates.

View your website’s ecommerce user experience as a process that extends beyond the user interface of the site itself.

Published by

Edin is a Senior CRO Consultant. Edin is into Google Analytics and testing (any A/B testing tool really) and likes to write about it. You can follow Edin on Twitter.