21 Tips for Creating Usable Ecommerce Sites
Ecommerce website usability and shopping cart usability are important factors in the success of an online business. It is not by chance that many of the most successful online retailers share some very similar web design and site functionalities.
Through adherence to strict usability principles and continuous optimization testing, many online merchants have arrived at a set of standard features that keep their ecommerce stores easy to use and simple to buy from. Even small design and functionality changes can have large effects on conversion rate and order value. Here are 21 usability principles that I recommend all ecommerce websites consider.
1 – Use Visual Navigation Cues
Show your customer where he or she is within the site by using a breadcrumb trail. Breadcrumbs should provide a quick visual reference so your customer can easily determine where product pages and subcategories lie within the overall structure of your site. Use headers and subheaders on your page to break-up text and product information into easy-to-digest and quick to find morsels.
Breadcrumb Navigation on Bluefly
2 – Offer Lots of Sort Options
If you have product categories and subcategories that include more than just a handful of products, be sure and offer multiple ways to quickly sort the product listings. Pertinent sort options for your site might include High Price to Low Price, Low Price to High Price, Top Rated to Lowest Rated, Lowest Rated to Highest Rated, Bestselling, Popularity, Name A to Z, Name Z to A, Most Reviews, Least Reviews, Newest, Featured, and others.
3 – Let Customers Choose The Number of Items They See
Nothing is more frustrating than wanting to quickly visually skim the products within a category, only to be limited to seeing just a few items on a category page. Let your shopper choose how many products she wants to see on a category page. You can have options that range from 9 to 99 to best suite your shoppers’ preferences. Make one option a “View All” so that customers can quickly see every product in a particular category and make fast decisions about whether to dig deeper into that particular product style.
Revolve Clothing Lets You Select the Number of Items That Appear On A Page
4 – Offer Browsing Refinements
Let your customer control the shopping process and easily filter through your large product categories by offering plenty of refinements on your category, subcategory, and search pages. Include filters appropriate to your product lines that will make it easy for the shopper to compare products and quickly generate pages of items that include attributes he’s searching for. If you sell shoes, you may want to allow attribute refinements by color, heel height, shoe style, shoe size, price, and brand. If you sell TVs, you may consider options like type (LCD, Plasma, OLED), screen size, resolution, price, brand, and aspect ratio.
At Endless, You Can Add or Remove Product Attributes to Refine Your Search
5 – Make Narrowing Refinements Removable
Just like you should include lots of options for your shoppers to drill down into the product attributes, make sure that narrowing refinements can be remove. That way, if you land someone on a customized page, the shopper can choose to de-select some of the options he’s less interested in. Active shoppers may also prefer to delete product attributes from their selections rather than hitting the back button and retracing their steps when in the middle of searching for product options.
6 – Make The Search Bar Obvious
Put your search bar above the fold, preferably somewhere up in the header or top nav portion of your page. Make the search bar big enough to find without trying, and don’t let customers second-guess it by including similarly-styled email sign-ups or other form fields within close proximity of the search bar.
7 – Help Your Customer Search
Searches are rarely perfect. Help your shoppers along the search process by including auto-corrections or suggestions for any misspellings that get typed into your search. Include a “Did You Mean?” recommendation when searches return no results. If your search platform returns categories and products, give the searcher some reference by listing how many product results are within each of the categories returned. Begin showing popularly searched for terms and results in a search box dropdown as your customer begins typing.
8 – Put Contact Info in Plain Sight
Put your customer service contact phone number above the fold on all your pages. If you don’t do customer service via phone, or if you really don’t want your phone number in the header space of your pages, at least include a link to your contact email, live chat, or customer service page in the header where it will be easy to locate.
ABT Electronics Prominently Displays a Phone Number and Live Chat in the Header
9 – Use A Persistent Shopping Cart
Keep your shopping cart link and/or icon above the fold on every page. Keep it in the same place on each page, and make sure it’s on every page within the ecommerce site. When a shopper adds an item to the cart, represent the action by showing a visual change in the total number of items added to the cart. If you can’t create a dynamic item tally within your ecommerce platform, at least show a state change of some sort (change the color, change the iconography) when an item has been added to the cart.
The Office Max Shopping Cart Updates Once An Item Had Been Added
10 – Show Products On Your Category Pages
Don’t make your customer click through one or more layers of product categories before seeing actual products. Put all of your products within a category on that category page. If you’re using category pages as a way to show subcategories and refinements, that’s fine (see numbers 4 and 5). But be sure and show at least a first page of products within that category without making the customer navigate to a subcategory page first. (Tip: Make category overview pages that display a representative assortment of products accessible with just one click from the homepage.)
This Site Fails to Show Any Products on the First Brand Category Page
11 – Include a Detailed Product Description
In a brick-and-mortar retail store, the shopper has a greater opportunity to touch a product, try it on, shake it, smell it, and maybe even peek inside the box. In an online environment, all you’ve got to sell your products are product copy and imagery. Good copy sells. Make your product description as detailed as possible, but don’t think you can’t have fun with it. Enticing, humorous, or vividly visual descriptions can convince customers to buy purely with words. Include as many specifics as possible about use, size, fit, fabric or materials, weight, compatibility, and anything else that might be important to the decision-making processes for your specific product line.
12 – Use Quality Imagery
That single small manufacturer-supplied photo isn’t going to cut it. Get high-quality photos of each of your products. Include shots from multiple angles. Provide photos with the different color combinations. Show the clothing on a model. Show the furniture in a room. Let your customer zoom in or open an enlarged image. If you’ve got the resources, include product demonstration videos with someone explaining how the item works, how it’s assembled, or how it looks when it’s worn.
13 – Make the Add to Cart Button Visible
Surprisingly, product pages still exist where it looks like the Add to Cart button was an afterthought. If your intent is for website visitors to purchase your products online, then be sure and make your buy button stand out. Keep it above the fold of the product page, and put it near the top of the product information. Choose a color or design that stands out and contrasts with your other page elements. Don’t hide it within a cluttered mess of product information.
Toys R Us Makes Their Price and Buy Button Stand Out By Using a Contrasting Color for Both
14 – Make the Price Easy to Find
It is much more difficult to convince a shopper to buy something if she can’t figure out how much it will cost. Make your product price bigger and bolder than your other on-page text, and surround it by whitespace so that it stands out. Keep it within proximity of the buy button, don’t bury it down on the page. If your customer is about to save money, highlight that by showing the sale price or the discount off the MSRP. Make it clear how much money your customer is saving, but don’t include so many numbers that it becomes difficult to tell which is the actual product price.
15 – State Your Lead Time or Product Availability
Use phrases like “Out of stock but coming soon,” “Almost sold out,” “In stock and ready to ship,” or “Pre-order only” to indicate the availability of the item. Don’t be afraid to indicate lead time. If you’re upfront with your lead time and your lead time is accurate, (include phrases like “Ships Today,” “Ships in 2-3 Business Days,” or “Ships in 10 Business Days”), then your buyers will be less likely to become irritated by longer wait times. Don’t ever make a shopper add an item to her cart (or worse yet, make it all the way to the checkout) before indicating that the item is out of stock or unavailable.
This Product Description from National Business Furniture Says When the Product is Expected to Ship
16 – Show Cross-Sells and Related Products
Offer browsers other product options from the category or product pages. You can include fields for cross-sells or up-sells for the current product type, related accessories, popular products, or best sellers. Your customer will have more options for browsing through the depth of your product catalog, and you’ll increase your opportunities for making a sale.
17 – Offer Multiple Shipping Options
You don’t need to provide the full gamut of shipping services from the likes of UPS, FedEx, DHL, and the postal service. But if your ecommerce site offers several shipping options, then your store will be better positioned to capture sales from customers with different needs and urgency timeframes. By including shipping from more than one carrier, your customers will be able to choose one that they are familiar with. Make sure your delivery options are all clearly stated.
18 – Allow Checkout as a Guest
Don’t force your customer to create any kind of account. Offer checkout as a guest, checkout as a returning customer, and the option to sign-up with a new account. However don’t require that shoppers have an account before they add items to their carts or make modifications to the items in their carts, and don’t insist that they sign-up as a user in order to make a purchase.
19 – Show Recognizable Security Measures
Convice your shoppers that they are making a purchase from a trusted and safe site by presenting recognizable security badges or trust certificates on site pages and by using an SSL certificate at checkout. Trust and security certificates should reassure would-be buyers that their sensitive credit card and personal data is safe from hackers. Imagery badges from sites like Verisafe, McAfee, and Thawte indicate that the site is being monitored for security breaches and that private data will be kept safe.
National Business Furniture Suggests Safe Shopping by Showing their McAfee, VeriSign, and BBB Badges
20 – Let Customers Confirm Their Order Details
In the last step of the checkout process, present your shoppers with a chance to confirm every aspect of their purchase – before they hit the submit button. They should have one last opportunity to double check the products they’ve set to order, their shipping and billing addresses, their chosen shipping method, and their payment details. During the checkout process, reassure customers that they will have a chance to check their order before they submit it for purchase. If customers can double-check their order details one last time, your rate of cancellations or calls to change incorrect order details may go down.
21 – Send a Follow Up Confirmation Email
Once an order has been placed, have a confirmation email ready to go that is automatically generated and will be immediately sent to the customer. Show as many of the order details as possible, including a line item list of products ordered, a reiteration of the bill-to and ship-to addresses, the payment account that the purchase was charged to, and a notice on when shipment tracking will be available. There should be a link back to the website where the customer can login to his account to view order history online. For customers who checked out as a guest, offer a link for creating an account. You can also use space in the confirmation email for sharing discounts good for future purchases, highlighting popular items, or making upsell or related product suggestions that the buyer might be interested in based on his recent purchase. Did he just purchase a new computer? This could be a good time to include a reminder that it’s not too late to purchase an extended warranty for new electronics.
The Order Confirmation Email From Rue La La Presents All The Order Details
Final Thoughts
The implementation of these best practices can play a great role in changing how long shoppers stay on your ecommerce website and how many eventually make a purchase. While the field of ecommerce has matured, many retailers – both large and small – are still guilty of site features and functionalities that ultimately make it more difficult or less desirable for a customer to shop online. While these 21 tips do not represent the ultimate list of usability standards for ecommerce sites, their implementation and use may increase the order value, conversion rate, or engagement level of your online shoppers.
Very interesting list! Discovered some new tips I hadn’t thought about. Going to work on implementing them now
thanks a lot for sharing!