People come to your store every day, but they leave because they couldn't find what they were looking for.   You need more than just to be at the top of Google. People must be able to find what they want and trust you enough to buy it. Your e-commerce UX (user experience) should help your visitors reach their goals and gain confidence in you.   A company that studies the user experience, Nielson Norman Group, says that there are more than 800 best practices for making e-commerce easy to use. You can't follow every rule unless you have billions of dollars to spend on development. This post is full of tips and examples to help you improve the UX design of your e-commerce site and get more sales.   Let's break down best practices for different types of pages. Read this article to learn about mobile UX.  

Home Page User Experience Tips That Build Trust at a Glance

  Most people visit your home page. Make it clear that you are selling things. Think of your home page as the storefront. Think of Macy's on Magnificent Mile. Put your best products and pictures on your home page. One thing you won't see at Macy's is dresses flying by in the window one by one. I want to talk about sliders. Make sure they are easy to use if you have to use them.  

Best Practices in the Featured Area

  The featured area is the place on your home page that gets the most attention. Here's how to make the most of the 50 milliseconds you have to make a good impression.   Source: LL Bean Home Do’s 

1. Use a simple, uncluttered design. Try to use as few words as you can. 
2. Get rid of anything that doesn't make a difference. Such as your most recent blog posts. 
3. Use color or arrows or other visual cues to draw attention to a single call to action. 
4. Help people figure out who they are. Do you sell jackets for women that cost a lot? 

  Source: IKEA   Dont’s 

1. Decorate. The cognitive load of your customers is increased by swirls, sparkles, and other meaningless symbols. 
2. Have content that is out of date, like ads from last week or even last month. You will lose all credibility right away. 
3. Too many messages or ads should not be put there. 
4. Have a slider or carousel that moves forward on its own. 
5. Focus on a product that doesn't fit with the rest of your mix.

Home Page Navigation

When people come to your site, you want to help them find what they came for. Tim Ash, a conversion expert, says that the main purpose of your home page is to help people find their way around by category. Use these tips to help people find what they are looking for on your site.   Source: Macy's Do’s 

1. Give people who come to your site a "30,000-foot view" of what you sell so they can find specific categories. 
2. Add the tools or buying guides you use the most. 
3. Give links to the pages about returns, customer service, shipping, and privacy. 

Dont’s 

1. Think you already know what people want. 
2. Put all of your categories and subcategories on your home page. 
3. Push promotions at the product level. You can ignore this if you only have a few things to sell. 
4. Use photos from a stock library. This screams that it's not real. 

 

Navigation: The basis of UX

  When people come to your site, you want to help them find what they came for. Tim Ash, a conversion expert, says that the main purpose of your home page is to help people find their way around by category. Use these tips to help people find what they are looking for on your site.    Source: Best Buy Do’s 

1. Limit the top menu to seven options. 
2. Use a secondary menu on the right side of the screen for things like "Contact Us." 
3. Use a menu with more than one column to set up your categories and subcategories. 
4. Show pictures of your product that are good. 
5. Use colors that stand out to draw attention to your navigation menu. 
6. Products may fit into more than one category. If you want to find a USB drive, you can look in Laptop, Accessories, or Computers.

Dont’s 

1. Have one drop-down menu that fills a long column. 
2. Link category pages that are empty to the main navigation. 
3. Too many categories. If there is only one product in a (sub)category, you should get rid of the category and put the product in a different category. 
4. Don't use vague options like "more." 

 

Shopping Cart Menus 

  Most likely, a user's last click before pulling out their credit card will be on the cart menu. Don't miss this small icon.    Source: Newegg Do’s 

1. Show the total price and how many things are in the cart. 
2. Link to the shopping cart page where they can see what's in it.

Dont’s 

1. Substitute a "mini cart" for a full cart. Your e-commerce site needs a cart page, not just a widget that looks like a cart. 
2. Link directly to a checkout page that doesn't show every detail of the items in the shopping cart.

 

Search

  Many users don't even look at the navigation menu. Instead, they use search or faceted search to find what they need. With faceted search, things can get confusing fast. From the point of view of development and cost, but also from the point of view of the user. Keep things simple and helpful by following these rules.    Do’s 

1. Use a text box with an open field at the top of each page. 
2. When there are more than 20 items in a category, use faceted search. 
3. Price, color, and size are some of the most common ways to use faceted search.

Dont’s 

1. Use filler text for the search box. Leave the box blank or type "Search." 
2. Use filtering options like "heavy-duty" or "light-duty" that are based on how you feel. 

 

Category Pages: Move Shoppers One Step Closer

  Category pages aren't always easy to use. You want to make sure there is enough content. More text can do wonders for your Google ranking, but too much text can make your customers confused.   The result from Macy's is a good match for the search term "bathing suit." It is easy for a user to make their search even more specific.   

Don't add too much to the category navigation

  Choose which subcategories you want to show on your category page. Macy's could have shown photos of pink swimsuits, black swimsuits, one-piece swimsuits, two-piece swimsuits, and so on. If every option were shown, it would be too hard for shoppers to choose. You also don't want your category page to be mistaken for a bad product listing page.    Source: Macy's

Do’s 

1. Use a lot of blank space and not too much text. 
2. Use as few words as possible to describe subcategories, but be clear. 
3. Use pictures to show what the main subcategories are about. 
4. Use only text for categories that don't get a lot of attention. 
5. If you use a mega or drop-down menu, you should have a parent category. 

Dont’s 

1. Show pictures that don't matter. 
2. Rely only on text. 
3. Use multiple-color text. 
4. Heavily push promos. 
5. Use the names of the products as subcategories. 

 

Category Page Content

Category pages don't have to have little information on them. Keyword research can help you figure out what shoppers really want to know. Use these keywords to answer questions that people often ask about your product line. 

Do’s 

1. Think about what your buyer wants. 
2. Use keywords that are related to your main keyword. 
3. Answer the frequently asked questions about the category. 

Dont’s 

1. Large chunks of writing should go at the top of the page. 
2. Use your main keyword as often as you can. 
3. Use irrelevant images. Can you believe that Target's bathing suit page has a picture of a man in a suit? 
4. Add text to pictures.

 

Product Listing Pages: Give Information and Build Trust

  I can't believe how many product listing pages don't have much to say. Best Buy's product listing pages always rank high because they have a lot of content and are easy to use. Their page shows many good ways to do things. On the product listing page for Best Buy, you can convert without even going to the product page. Pages that list products for e-commerce must include important information about the product, such as its price, options, and availability. Allow these pages to help you sell.   

Content for SEO on pages that list products

  Copy that is easy for users to read will naturally be good for SEO. You want people and Google to be able to understand what your page is about. You should also make it easy for people to leave this page if they don't find what they need.    Source: Best Buy

Do’s 

1. Use the most important keywords with the least amount of competition in your page title and h1 tag. 
2. In a short summary of the category, you should use more keywords. 
3. If you need more information, put it below the list of products. 
4. Use breadcrumbs to help people find their way around your site and share PageRank among your category pages. 
5. Give prices and choices. 
6. If there is a "Add to Cart" button, describe the product. 

Dont’s 

1. Too much content should go before the list of products. 
2. Use names that are cute or make sense. Don't call brown sandals "George" if you are selling shoes for kids. 

 

Product Listings: How to Get Around

  When a user knows what they want to buy, they will go to your product listings page to buy it. Make it clear that they can shop in different ways and on different pages. If they don't find what they want on the first page, you want them to keep looking.  

Do’s 

1. Show how many pages come before and after the list of products. 
2. Show how many products are in that category as a whole. 
3. Users should be able to sort by price, 
4. Let users go straight to certain pages in the results. 

Dont’s 

1. Users should use arrows to move between pages. 
2. Expect that people will scroll back up or click the "View All" button to see everything. 
3. Use product photos that are small or fuzzy. 

 

Product Pages Bring Together SEO, UX, and Sales

  Full product details are critical. For SEO and how the user feels. Internal links are good for SEO and help the user get back to the page with all of the products. A product page that is easy to use will have the most important information about the product above the fold.    The pages about your products are the heart of your site, so they need to be convincing. If the customer needs to choose an option before adding to the cart, shows an error message when they click "Add to Cart."   

Content Layering on a Product Page 

  Your product page can quickly get too crowded with information. You want to give shoppers just enough information about a product if they already know what they want to buy, but also enough information if they want to know everything about it. You can appeal to both types of buyers by putting your information in layers.      Source: Samsung Do’s 

1. Give a brief description of the product at the top of the page or next to the picture. 
2. Add a border or a shaded background to your "action area," which is where people click your button and choose from the options you give them. 
3. In the action area, put the ordering options near the top. 
4. On the product pages, you should have breadcrumbs. 
5. Below the product image and "Call to Action" area, put product details, reviews, data, etc. 

Dont’s 

1. Put a large block of text near or above the CTA button. 
2. Hide the "Add to Cart" button until someone has made a choice. 
3. Make it take an extra click to find out about availability. 
4. When someone clicks your "Add to Cart" button, make a small change. People will miss your message that says "Added successfully."

  I saw that many WordPress e-commerce themes had "Add to Cart" buttons that were hard to find.    Source: Victoria's Secret  

Product Page Images

  Large photos and zoom are about as close as a buyer can get to the product without being able to touch it. The products look like they aren't very good if the pictures are fuzzy and of low quality. Check out this case study to see how bigger and better images of a product increased sales by more than 300 percent.   Source: Amazon

Do’s 

1. Use big photos with a high resolution and a white background. 
2. Use zoom features to let people see details for themselves. 
3. Users should be able to scroll between images. 
4. Give clear instructions on how to see more images or zoom in on them. 

Dont’s 

1. Show images of your product in a "lifestyle" setting. Just show the item. 
2. Don't add logos, watermarks, or backgrounds that will make your photos hard to see. 
3. Make an image pop up so you can see more information or more photos. 

 

The Checkout Process Is Made to Build Trust

  Your checkout process needs to be easy, make sense, and not get in the way of anything. Don't make it hard. The cart page at Macy's covers a lot of the important points. The cart shows information about the items in it, such as images, prices, taxes, and links back to the pages for each item. 

Shopping Cart Page

  Your cart page is the first page you see when you check out. This page tells them again in detail what they want to buy. This gives them a reason to believe in your store. If your cart page is well made, people will be less likely to leave it.    Source: Macy's

Do’s 

1. Make sure of everything. Product, size, color, number, availability, date of shipment, and estimated delivery date. 
2. Let users go straight to the products they have in their cart. 
3. Make it easy to change the number of products or delete them. Let users change the quantity to 0 or click a "remove" button to get rid of a product. 
4. Show an image of the item in the color that was ordered. If a customer orders a black jacket and gets a blue one instead, they won't trust you anymore. 
5. Make the "continue checkout" button easy to find, but let people keep shopping if they want to. 
6. Show the out-the-door price in full. 

Dont’s 

1. Ask for a credit card or email address before you have to. Let people make sure they are getting what they want. 
2. Don't remove products by clicking "Update." 

 

Registration Page

  This is the most important time to find out what your visitor wants to know. Buyers should be able to check out without making an account. Customers are not forced to make a new login and password that they have to remember, but the benefits of making an account are emphasized. Look at how simple the page is put together. The simple choice makes it easier to think.    Source: Macy's

Do’s 

1. Focus on what's good about making an account. 
2. Use a simple layout. 
3. Don't ask any more than two questions. 

Dont’s 

1. Make everyone make an account. No one wants to have a new username and password to remember. 
2. Ask too soon for a credit card or email address. Let people check what they are buying. 
3. Don't use the "Update" button to remove products. 

 

Checkout Page

After buyers are sure they are ordering the right product from the right company (yours), it's time to start the party.    Once a user starts checking out, they want to finish their purchase as quickly as possible. Aid them in helping you. Take away any distractions and make it as easy as possible. Don't make them fill out the form twice or guess how to fill it out.    Source: Macy's

Do’s 

1. Ask for only the information you need to know. 
2. Change the main navigation to one that says "contact." 
3. Make sure your checkout process is quick and that each step is clear and makes sense. 
4. Show how far along the check-out process you are. 
5. Let users click once to use their billing address as their shipping address. 

Dont’s 

1. Bring up new facts or options. 
2. Make people "join" or "become a member" of your group. 
3. People should have to type in the same information twice. 

 

How Does Your Site Stack Up?

  You don't need a million dollars to go shopping and have a good time. None of the above big brands meet the more than 800 rules that Nielsen Norman Group suggests. Don't think that your customers know as much about your website as you do. If you get these basics right, Google and your customers will love your site and buy from you.