How to apply web usability principles to e-commerce.
We’ve talked about the importance of website usability in a general context, but there are few places where usability is so crucial for a business as on their e-commerce website. If you sell products online—especially if you don’t also have a brick-and-mortar store—providing a positive user experience is the lifeblood of your company. If your visitors can’t use your website, they can’t buy your product. And online, where everyone is competing for attention, any friction in your purchasing process can cost you business.
E-commerce usability is a long and complicated subject that requires a lot of testing to perfect. But if you’re wondering where to start, here are our top suggestions.
Clear navigation.
Navigation is a key feature of good usability no matter your site. Use standard navigation labels, and limit the number of items in your top-level navigation. We also recommend not going beyond a third-tier of navigation, as this becomes increasingly more difficult for users to interact with.
Breadcrumbs.
If you have a lot of products on your page, make sure your visitors can see where they are and how to get back to previous pages. The most common way to do this is to show your users the path they took to get to where they are now. You may remember seeing a line of hyperlinks at the top of a page that looks something like “Home > Women’s > Shoes > Flats.” This is a breadcrumb trail that lets users hop back to a previous page without having to go through navigation.
Reduce pop-ups.
One of my favorite online stores also has the world’s most irritating pop-up. Every time I get on the site, within a few seconds a chat box appears in the center of my screen, usually with a little beep, asking me if I need help and want to chat with customer service. It stays there, in the middle of my screen, covering the product I’m trying to view, until I tell it to go away. As much as I love the store for the quality of its products, this pop-up drives me up a wall.
As a rule of thumb, get rid of anything on your website that makes unsolicited noise. Unless I click a “play” button, I don’t want to hear it. And for the most part, anything that’s blocking my ability to view products and browse the site on my own is hindering my ability to make a purchase. If you want a live chat feature, keep it out of the middle of the screen. It can be visible, but it shouldn’t distract me from making a purchase.
Keep product information formats consistent.
As your users browse your website, they should become used to how you display product information. If the location of key details shifts from one product to the next, this lack of consistency can be disorienting and frustrating. Clear product pages display information in a format that makes it easy for users to compare products on your site with each other.
Make your Calls-to-Action prominent.
The main goal of your e-commerce website is to convert sales. This means making it as easy as possible for your visitors to buy your product. Yet, for some reason, many websites have “add to cart” buttons which easy to miss. Keep yours large and colorful, and place them close to the product rather than buried at the bottom of a page.
Make your check-out process as smooth as possible.
How many pages long is your check-out process? How long are your forms? What information do you need to complete the purchase? If I go to view my cart, how easy is it for me to double-check product information, add or remove items, or change payment methods?
Include error notifications.
There are very few things more frustrating on an e-commerce site than not knowing why you can’t finish the checkout process. If all I get is an error message which reads “Some of the information you provided is incorrect,” it forces me to proofread my entire form. What’s more useful is an error notice which highlights the problematic form, or reminds me to check a box I might have missed.
Similarly, if I get an error notice while trying to add an item to my shopping cart, I need to know why. Is it because I failed to include a size or select a color? Or is the item I want to purchase out of stock? If I find out the item I want is no longer available in my size I may be disappointed, but I won’t blame your store. If I don’t know what’s going on, I’m more likely to leave and never come back.
Accommodate foreign personal information.
Different countries use different formats for address information. Even if you don’t ship oversees, some of your customers may be using a foreign credit card with billing information in these other formats. The same applies to phone numbers. The best way to avoid this is by not limiting your form field to a rigid input format. Don’t assume every phone number begins with +1, or that all addresses are in the United States.
Simply the process for returning customers.
Converting brand new customers takes a lot of time and energy. This is why your most lucrative business will come from customers who have made purchases from you already, and are now coming back for more. Because of this, you should include user functionality that benefits these returning customers. This includes customer accounts that stores user information for future purchases, tracking and ordering information so they can their order history, and a wish list where they can save items they’re interested in for future purchase.
Test everything.
The best way to improve user experience on your site is to track user behavior. You don’t have to wait for customer feedback to know if they’re having a good experience on your site. You can watch where they click, how long they spend on a page, and when they leave. If you understand the importance of providing a quality products and services, you should also appreciate the value of a quality user experience on your website. After all, it’s all about keeping the customer happy.