Tips and Tricks on E-commerce User Experience

Nowadays, e-commerce sites are changing how they look dramatically. But what is the reason? User Experience. I have attended a UX crash course at General Assembly, and I have to admit, as someone who used to not care about UX as much, I am definitely convinced that good UX can lead to more sales and paying more attention to how websites are designed. Here are some tips I find useful when browsing and shopping online.

Navigation

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 and sometimes it's easy to lose that focus.  Here is a breakdown of what you should address:

Primary Navigation Menu Do’s

1. Limit top menu to 7 choices or less.
2. Use a secondary navigation at the top right for items like About 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 empty category pages to main navigation.
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.”

This ambiguous menu creates a lot of hesitation.

Product Details Page

Full product details are critical for SEO and for 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.

Product Page Content Layering Do’s

1. Provide a short product summary at the top of the page or next to the photo or consider having a "quick view" pop-up option in PLP.
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 pixel trackers on the product pages.
5. Put product details, reviews, data, etc. below the product image and CTA area.

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

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.

Why Hide The Most Important Button?