105 Ecommerce UX Tips: How to Seduce Visitors to Buy

Ecommerce UX Best Practices
378 Shares

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 website’s user experience (UX) 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.

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.

UX-Best-Practices-LL-Bean-Home
L.L. Bean has a boatload of products, but the uncluttered photos and concise copy make it simple to navigate their main product line.
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?

UX-Best-Practices-People-Version

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.

UX-Best-Practices-Home-Page-Macys

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:

UX-Best-Practices-Best-Buy-Navigation

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.
This ambiguous menu creates a lot of hesitation.
This ambiguous menu creates a lot of hesitation.
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.”

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.

UX-Best-Practices-Cart-Menui

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
UX-Best-Practices-Cart-Menu
Friction is created when when people have to stop and think. Friction slows buyers down.
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 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.

Ecommerce User Guidelines for Category Pages
This category page for Macy’s ranks in the top 5 for “Bathing Suit”
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.
UX-Best-Practices-Taget-Category-Page
Target ranks behind Macy for “Bathing Suit” despite having 30X more backlinks than Macy’s bathing suit page.
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.

Best Buy nails the basics.
Best Buy nails the basics.
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 layout 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.

Samsung's Product Page Illustrates Many Best Practices
Samsung’s add to cart button is unmissable.
After the button is clicked, it is very clear the product was added. Users are sent right to the shopping page.
After the button is clicked, it is very clear the product was added. Users are sent right to the cart page.
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.

 

Why Hide The Most Important Button?
Why Hide The Most Important Button?
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.

Victoria's Secret Is To Not Hide The Button
Victoria’s Secret Is To Not Hide The Button

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%.

UX-Best-Practices-Product-Photos

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.
UX-Best-Practices-Bad-Product-Photo
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.

Cart Page

The first page in your checkout process is your cart page. You never want to send a user past this page. This page reaffirms what they have purchased in detail. This helps them build confidence and trust in your store.

Macy's cart page hits many best practices.

 

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.
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.

UX-Best-Practices-Checkout-As-Guest

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.

UX-Best-Practices-Macys-Checkout-Process

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 user 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.

Darren DeMatas

Darren DeMatas

Darren has an MBA in Internet Marketing, but hangs his hat on 10+ years of experience in the trenches. Follow him on TwitterLinkedIn to learn ecommerce.

24 thoughts on “105 Ecommerce UX Tips: How to Seduce Visitors to Buy”

  1. Wow Darren, you absolutely crushed it with this post.

    I’ve read a lot about Ecommerce UX, but most of it it pretty basic. This, on the other hand, was insanely detailed and well done. Rock on!

    1. Hey Brian, thanks for dropping by. It was a lot of work getting those screenshots and breaking it down into simple do’s and dont’s but I know it will be helpful for someone looking to improve their conversion rate.

    1. You’re welcome, Vijay. Good luck with the site updates! I checked out your site and you are not that far off! My only comment would be there is a lot of movement on your home page, swirling logos, text scrolling, etc. but your product pages and category pages are AWESOME! Keep up the good work!

    1. Wow! It’s great to see you here 🙂 People need to be seduced to stay around on the site. It is kind of like a date, you don’t go straight to third base 🙂 If you bombard people with promo’s it is a turn off.

  2. Thank you for putting this together, Darren. This is very well done! I will be using some of these tips moving forward and share this as a definitive UX resource. Nice job, buddy!

  3. Bidisha Banerjee

    Hi Darren,
    Very helpful and detailed post. I have a question:

    In few e-commerce sites they propose new products/newsletter as a pop up. Do you think it is a good experience even if the close button is quite prominent?

    Also, do you have any input for e-commerce sites for luxury brands where they are implementing substantial amount of branding( edito) + ecommerce.

    And thirdly your views on mobile first m-commerce…

    I think I asked too many of questions 😛 Keep up the great work!

    1. Those are excellent questions, Bidisha! Tough to answer.

      Let’s start with the first one. User experience and conversion optimization are not quite the same thing. UX would say no. CRO would want to test to prove it’s profitable.

      For luxury brands, you want to focus on the copy of your website. Copy is how you can differentiate your business and appeal to luxury customers. I just published a write up on persuasive copy for ecommerce: http://intertwinemarketing.com/persuasive-writing-techniques/

      m-commerce is something I also want to learn more about. Mobile computing is evolving quickly.

  4. Hi Darren,

    Great article, I found this very useful! I am just starting a new UX project for an ecommerce website and I can see myself referring back to this article A LOT! Just one question though; why would you not want users to use billing address as shipping address with a single click?

    Thanks

    John

  5. Great tips.. Thanks for sharing informative article .Unlike content, which has to be unique, the navigation should be entirely predictable. Customers are more likely to make additional purchases or give positive feedback on a website that is a delight to navigate.

  6. It is a great post-Darren!
    User experience is one of the most important things that need to take special attention. The way you explained some points are really helpful especially for marketers who are not getting enough leads and conversion.

  7. This is GREAT STUFF! Thanks for sharing it.

    I’m putting together an email right now to a client who I feel is making the whole buying process a lot more complicated than it needs to be:

    Home Page > links to a 3rd party catalog (removes all navigation and opens in a new window) > visitor has to “turn pages” to find products (no category break down or navigation within the catalog) > when visitor clicks on a product, it then opens the Home Page site and takes the visitor to that product page. NO IDEA why they are doing this but this article helped me clarify my thoughts.

    Thanks again.

Leave a Comment

Your email address will not be published. Required fields are marked *