105 Ecommerce UX Tips: How to Seduce Visitors to Buy

Everyday people visit your store and leave because they could’t find what they wanted.

You need more than top rankings on Google. People have to be able to navigate to the product they want and trust you enough to buy. Your ecommerce UX (user experience) should focus on building your visitor’s confidence by helping them complete their goals.

According to Nielson Norman Group, a user experience research firm,  there over 800 best practices for ecommerce usability. Unless you have billions of dollars to spend on development, you’re not going to meet every guideline. This post is filled with tips and examples so you can improve your ecommerce UX design and get more conversions.

Let’s break down basic best practices by page type.  Check out this article for tips on mobile ux.

Home Page UX Tips That Build Trust On A Quick Glance

Your home page gets the most traffic. Make it obvious that you sell products. Think of your home page as the window to your store. Think Macy’s on Magnificent Mile. Dress your home page with your best products and images. One thing you never see at Macy’s is different dresses swooping by one by one in the window. I’m talking about sliders here.  If you have to use them, make sure they are user friendly.

Hero Area Best Practices

Your hero area (also called featured area) is the most prominent real-estate on your home page.  You only have 50 milliseconds to leave a good impression, here is how to make it count.

Hero Area Do’s

1. Use simple, uncluttered design. Use as few words as possible.
2. Eliminate everything that does not make an impact. For example, your recent blog posts.
3. Use visual queues like color or arrows to focus attention on a single call to action.
4. Make it easy for people to self identify. Do you sell pricy jackets for women?

Hero Area Dont’s

1. Decorate. Swirls, sparkles, and other meaningless symbols add to the cognitive load and distract your customers.
2. Have outdated content like promotions from last week or even last month. You will instantly lose credibility.
3. Clutter the area with too many messages or promotions.
4. Have an automatically advancing slider or carousel.
5. Emphasize a product that is not representative of your overall mix.

Home Page Navigation

When people visit your site, you want to help them find what they came for. According to conversion expert, Tim Ash, the main focus of your home page is to provide category level navigation. Follow these pointers to help visitors find what they are looking for.

Home Page Navigation Do’s

1. Give visitors a “30,000 foot view” of what your site sells so they can drill down to specific categories.
2. Add your most used tools or buying guides.
3. Provide links to return policy, customer service, shipping and privacy pages.

Home Page Navigation Dont’s

1. Assume you know what people are looking for.
2. Jam every category and subcategory on your home page.
3. Push product level promotions. If you only have a few products, you can ignore this.
4. Use generic stock photos. This screams inauthenticity.

Navigation: The Foundation of UX

Navigation is critical when you have a lot of categories, variable products or products with many options. Nothing is more frustrating than a cumbersome menu. The quicker people can find what they want, the quicker you can move them through to the checkout process.

The purpose of a navigation menu is to get people where they want to go.  Here is a breakdown of what you should address:

Primary Navigation Menu Do’s

1. Limit top menu to 7 choices.
2. Use a secondary navigation at the top right for items like “Contact Us”
3. Use a multi column menu that organizes categories and sub categories.
4. Show high quality images of your product.
5. Make your navigation menu prominent with contrasting colors.
6. Cross reference products into multiple categories. Someone looking for a USB drive may look under Laptop, Accessories, Or Computers.

Primary Navigation Menu Dont’s

1. Have a single drop down that takes up a long column.
2. Show link empty category pages to main nav.
3. Over-classify products. If there is only one product in a (sub)category, remove the category and reclassify the product.
4. Don’t use vague options like “more.”

Shopping Cart Menus

A cart menu is likely the last button a user will click before taking out the credit card. Don’t over look this tiny icon.

Shopping Cart Menu Do’s

1. Show total price and number of items in cart.
2. Link to the cart page where they can see details of their contents

Shopping Cart Menu Dont’s

1. Substitute a “mini cart” for a full cart. Your ecommerce site, needs a cart page, not just a cart widget.
2. Link directly to a checkout page that doesn’t show every detail of the products in the shopping cart.

Search

Many users skip the navigation menu altogether and rely on search/faceted search to drill down further. Faceted search can get complicated quick. From a development and cost perspective, but also a user perspective.  Follow these guidelines to keep things simple and helpful.

Search Do’s

1. Use an open text field box at the top of every page.
2. Use faceted search when there are over 20 products within a category.
3. Filter by price, color, size are basic faceted search options.

Search Dont’s

1. Use filler text on search input. Leave it blank, or say “Search.”
2. Use subjective filtering options such as “heavy-duty” or “light-duty.”

Category Pages: Get Shoppers One Step Closer

Category pages can be a little tricky. You want to make sure the content isn’t too thin. Additional areas of text can work wonders with Google rankings, but too much text can confuse your customer.

Given the search query, “bathing suit” the result from Macy’s is highly relevant. It is easy for a user to further refine what they are looking for.

Keep Category Navigation Clutter Free

Be selective about what subcategories you present on your category page. Macy’s could have shown pictures of pink bathing suits, black bathing suits, one-piece, two-piece, etc.  If every option was presented, shoppers would be paralyzed by the number of options. You also don’t want people to mistake your category page as a poor product listing page.

Category Navigation Do’s

1. Use lots of white space and limited text.
2. Describe subcategories in as few words as possible, but be specific.
3. Use images to represent main subcategories appropriately.
4. Use only text to represent less popular categories.
5. Have a parent category if using a mega or drop down menu.

Category Navigation Dont’s

1. Show irrelevant pictures.
2. Rely only on text.
3. Use multiple color text.
4. Heavily push promos.
5. Use product names for subcategories.

On Target’s website. you have to look really hard to find “juniors swimwear.”

Category Page Content

Category pages don’t need to be thin on content. Keyword research can help you understand shoppers’ burning questions. Use those keywords to address common questions about your product line.

Category Page Content Do’s

1. Focus on your buyer’s needs.
2. Use semantic keywords to supplement your main keyword.
3. Address FAQs related to the category.

Category Content Dont’s

1. Put large blocks of copy at the top of the page.
2. Use your primary keyword over and over.
3. Use irrelevant images. Can you believe the photo of a man’s suit on Target’s bathing suit page?
4. Put text in images.

Product Listings Pages: Inform and Build Confidence

I’m shocked at how many product listing pages are thin on content. Best Buy’s content rich, user friendly product listing pages consistently rank high. Their page illustrates many best practices.Best Buy’s product listing page makes it possible to convert without even visiting the product page. Ecommerce product listings pages must give essential product information such as: image, price, options and availability. Let these pages do some selling for you.

SEO Content For Product Listing Pages

User friendly copy will naturally be SEO friendly. You want people (and Google) to clearly understand the contents of your page. You also want to gently navigate people away from this page if they don’t see what they want.

SEO Content Do’s

1. Use the most relevant, lowest difficulty keywords in your page title and h1 tag. Read more about keyword research.
2. Use additional keywords in a short summary of the category.
3. If additional information is needed, put it below the product listings.
4. Use breadcrumbs to help users navigate and distribute PageRank to your category pages.
5. Show pricing and options.
6. Provide a product overview, if there is an add to cart button.

SEO Content Dont’s

1. Stuff too much content before products are listed.
2. Use cutesy or figurative names for products. If you are selling kids’ shoes, don’t call brown sandals “George.”

Product Listings Navigation

Once a user has an idea what they want to buy, they will shop your product listings page. Make it clear that they have multiple options and pages to shop on. You want them to keep looking if they don’t see what they want on the first page.

Product Listings Page Navigation Do’s

1. Show the number of pages before and after the product listings.
2. Show the total number of products within that category.
3. Allow users to sort by: price,
4. Allow users to jump to specific pages within the results.

Product Listings Page Navigation Dont’s

1. Make users click arrows to change pages.
2. Assume people will scroll back up to the top or click the “View All” button.
3. Use tiny or blurry product photos.

Product Pages: Where SEO, UX and Sales Meet

Full product details are critical. For SEO and user experience. Internal links boost SEO and help the user navigate back to the product listings page.  A user-friendly product page design will have essential product information above the fold.

Product pages are the meat of your site, they need to be persuasive. If  your customer has to select an option before adding to cart, display an error message when the “Add to Cart” button is clicked.

Product Page Content Layering

Your product page can quickly suffer from information overload. You want the right level of product information for people that already know what they want to buy, but also cater to shoppers that need every last product detail. By layering your information, you can cater to both types of buyers.

Product Page Content Layering Do’s

1. Provide a short product summary at the top of the page or next to the photo.
2. Add a border or shaded background to your “action area” – where people select options and click your button.
3. Present the ordering options near the top in the action area
4. Have breadcrumbs on the product pages.
5. Put product details, reviews, data, etc. below the product image and CTA area.

Product Page Content Layering Dont’s

1. Put a large block of copy near or above the CTA button.
2. Hide your add to cart button until someone makes a selection.
3. Make availability information an extra click away.
4. Have a subtle change when someone clicks your add to cart button. People will miss your “Successfully added” message.

A common mistake I saw with many WordPress ecommerce themes was hidden “Add To Cart” buttons.

Product Page Images

Large photos and zoom is about the closest your buyer can get without physically touching the product. Fuzzy, poor quality images make the products look poor quality too. Check out this case study, where bigger, better product images increased conversions by over 300%.

Product Page Images Do’s

1. Use large, high res photos on a white background.
2. Use zoom features to let users see details for themselves.
3. Allow users to scroll to back and forth between images.
4. Provide clear instructions that additional images or zoom features are enabled.

Product Page Images Dont’s

1. Show “lifestyle” images or your product. Show just the product.
2. Don’t muddy up your photos with logos, watermarks or backgrounds.
3. Force an image pop-up to see more details or additional photos.

Checkout Process: Built For Trust

Your checkout process needs to be simple, logical and distraction free. Don’t complicate it. Macy’s cart page hits many of the main points. The cart shows product details with images, pricing, tax and links back to individual product pages.

Shopping Cart Page

The first page in your checkout process is your cart page. This page reaffirms what they have intent to purchase in detail. This helps them build confidence and trust in your store. A well designed cart age will help you reduce cart abandonment.

Shopping Cart Page Do’s

1. Confirm everything. Product, size, color, quantity, availability, ship date, estimated delivery.
2. Allow users to navigate directly back to products in their cart.
3. Make it easy to change quantity or delete products. Let users change qty to 0 to remove products or click a “remove” button.
4. Show a picture of the product, in the color it was ordered in. If your customer orders a black jacket and sees a blue one at checkout, they lose confidence.
5. Make the continue checkout button prominent, but allow people to continue shopping.
6. Show the total out the door price.

Sopping Cart Page Presentation Dont’s

1. Prematurely ask for a credit card or email address. Let people confirm what they are buying.
2. Don’t use an “Update” button to remove products.

Registration Page

This is the pivotal moment that you have to get information from your visitor. Let buyers checkout without creating an account. Customers are not forced to create and remember a new login and password, but the benefit of creating an account is stressed. Note the simple layout of the page. The simple choice reduces cognitive load.

Registration Page Do’s

1. Stress the benefits of creating an account.
2. Use a simple layout.
3. Don’t ask more than 2 questions.

Registration Page Dont’s

1. Force people to create an account. No one wants to remember a new username and password.
2. Prematurely ask for a credit card or email address. Let people confirm what they are buying.
3. Don’t use an “Update” button to remove products.

Checkout Page

After buyers feel confident that they are ordering the right product from the right company (yours), it is time to get the party started.

Once users start the check out process, they want to complete the purchase as quick as possible.  Help them help you. Remove distractions and make the process as easy as possible.  Don’t make them re-enter their address or guess how to complete the form.

Checkout Page Do’s

1. Ask for only the minimal required information.
2. Replace the main navigation with a “contact” navigation.
3. Keep your checkout process short and your steps clear and logical.
4. Show progress during the checkout process.
5. Let users use billing address as shipping address with a single click.

Checkout Page Dont’s

1. Present new information or choices.
2. Force people to “join” or “become a member.”
3. Make people reenter the same information twice.

How Does Your Site Stack Up?

You don’t have to have a million dollars to create a positive shopping experience. None of the big brands above meet the 800+ guidelines suggested by Nielson Norman Group.  Don’t assume your customers know your site like you do.  Nail these basics and you will get Google and customers to love your site and buy from you.