Increasing Online Sales: Simple Usability Problems To Avoid

Advertisement

When designing an online store, you have to consider many different types of customers: repeat customers, first-timers, people in a rush, etc. One thing that would help all of them is optimum usability. You can achieve this in a variety of ways, starting with eliminating the most common usability problems from your website. Fixing any one of the following eight common usability problems will get you started on the path to usability and user-experience heaven and, ultimately, more sales.

1. Hidden Search Box

A solid information architecture can do wonders for people who enjoy browsing, but some customers just want to find what they’re looking for, buy it and get out. These people are search dominant, and as soon as they land on your website, they will start searching. And if they can’t find your search box, they will leave. As simple as that.

Overstock.com has a giant search box at the top right of the homepage

A great example of a prominent search box is the one on Overstock.com. It is the second thing I notice on the home page because of its size, proximity to the top and dominant red border.

Imagine stopping at a grocery store on your way home from work to pick up some pine nuts for your world-famous pesto sauce. The nuts could be anywhere, so you decide to ask an employee for help. After a few minutes of looking around, you can’t find anyone who works there. So you leave frustrated and empty-handed. Would-be customers who can’t find somewhere to search your products feel the exact same way.

Get Satisfaction has a prominent search box with a hardly usable drop-down menu. The search box appears only on the front page.
Get Satisfaction has a prominent search box with a hardly usable drop-down menu. The search box appears only on the front page.

Also, make sure that the user can actually use the search functionality and will not be confused or irritated by design elements surrounding the search box. In the example above, Get Satisfaction has placed a search box above a video-block. Once the user types in a keyword, a drop-down menu appears below. However, this menu is hardly readable and is therefore quite confusing. Unfortunately, the search box appears only on the start page of the site which makes the search hardly usable. That’s not user-friendly.

How to Fix It

Make your search box more prominent, and keep it in a consistent location. It doesn’t have to be as big and dominant as Overstock’s, but visitors do commonly look for it in the top-right corner. Also make sure that the search box isn’t surrounded by elements that may affect its functionality. It concerns the search results page, too.

2. Unhelpful Search Results

This dovetails with the last point. Visitors who use the search box want to find what they’re looking for quickly. They are probably searching either for a specific product or for a specific feature of a product that may not be listed in the website’s main categories.

When you search ModCloth.com for 'blue,' it returns all things that are blue

When I search for “blue,” ModCloth does an excellent job of showing me items that are… well, blue! It sounds simple, until you notice that the word “blue” does not appear in any product names or descriptions. The website seems to have used some kind of witchcraft to magically retrieve only blue items. (In fact, it probably uses a tagging system, and when you search for “blue,” all of the products with that tag are displayed… but still!)

How To Fix It

Support common misspellings. Example: See how Google does it.

Google checks my spelling for me and links to the correct spelling.

Make the “Zero results” page clear, and suggest alternative search terms. Example: eBay not only suggests that I rephrase my search but guides me with examples.

eBay suggests that I remove some keywords to broaden the search.

Unhelpful search results are usually fixed with back-end magic. This can be a tricky job and usually calls for a custom solution. You can start by looking at your search log to see what people are searching for. The terms that need the most improvement will be the ones that consistently turn up in that log.

3. Not Enough Products On Each Listing Page

The goal of any online store is to sell as many products as possible, and a great way to increase sales is to get visitors to look at more products during each visit. When you are in a grocery store, you have the freedom to look at as many items as you want with few barriers (the main one being how fast you can skip down the aisles behind a cart).

We lose that freedom when shopping online. We come up against this foreign concept of “pages.” We can look at only one of them at a time, and to get to the next one we have to click on a “Next page” link. That means more work for your visitors, so make it easier for them by displaying more products at a time. This reduces the “Next page” barrier and encourages them to browse more.

You don’t want to overload visitors with too many products. Adding more products to each page is like making the aisles in a grocery store longer. You don’t want to trap your customers in an aisle as long as a football field.

How to Fix It

Add more products to each page, but consider the nature of your products before blindly increasing the number of products. Are your products visual? Or technical in nature?

Search results for 'beach' on iStockPhoto.com

When you search iStockPhoto for “beach,” the results are almost 100% visual, which shrinks the gap between browsing and purchasing. Not much thought goes into comparing products once you’ve scanned an image. If your products are highly visual, then the more you put on the page, the better. Anywhere between 50 and 100 is ideal.

BestBuy.com's search results for cameras

On the other hand, if your products require technical explanation, limiting the products to about 15–20 per page is best. On Best Buy, customers can compare cameras without feeling overwhelmed or getting lost in a sea of megapixels and LCD screen sizes.

4. Small Pagination Links

Make your pagination links more usable by increasing the clickable area. This lowers the barrier between pages that we talked about above and encourages visitors to view more products.

Overstock's phony pagination links

The pagination link above appears to have a large clickable area, but only the small oddly positioned blue box is actually clickable. This confuses visitors and makes the navigation more difficult. Consequently, readers have to think about positioning the mouse properly which has a negative effect on overall user experience.

Flickr's well done pagination has padded links and incorporates the blue and red color scheme from its logo

The best example of pagination links I’ve come across is Flickr’s. Though not an online store, the same concept applies. These links have a large clickable area, clearly marked by the gray border. They also reinforce Flickr’s brand by using the logo colors to let viewers know what page they are on and which elements can be clicked.

How to Fix It

Increasing the clickable area of your page links is as easy as adding one line to your CSS:

.pagination a { padding: 4px; }

As a bare-bones usability test, visit your website on an iPhone, and try to click each pagination link with your thumb. If you can’t do it, you probably have to give the link some breathing room by adding more padding.

5. Non-descriptive Product Page Links

When your customers send each other links to your product pages, they should be able to tell what the product is even before clicking on the link.

What I mean are links like http://www.ecrater.com/product.php?pid=5540041; if you get that link in an e-mail, you would have no idea what the product would be. A much more user-friendly URL would be http://www.ecrater.com/products/kodak-slide-projector. Being able to see the product name gives potential customers an incentive to click on the link.

Friendly URLs improve your search engine ranking because they give search engines more information about what is on the page. If a customer is searching for a chrome faucet that you happen to sell on your state-of-the-art faucet website, which URL would they be more likely to click on:

Google result showing URL of www.rensup.com/Products/Cat-442.htm

or

Google result showing URL of dornob.com/futuristic-fixture-chrome-faucet-head-handle-design/

Amazon does a great job of using customer-friendly URLs for its products. Take this typical product page link as an example:

http://www.amazon.com/Crush-Time-Cash-Your-Passion/dp/0061914177/

The book title comes right after amazon.com. This helps visitors confirm that they’re on the right page by glancing at the URL, and it helps potential customers share links with each other. Amazon URLs would be even more user-friendly without the gibberish at the end. But the company still does an amazing job, given their product catalog of hundreds of thousands of unique products.

How To Fix It

Add product titles to the beginnings of your links, using URL-friendly strings such as Crush-Time-Cash-Your-Passion.

6. Forcing Registration For Purchases

When a customer wants to buy a product from you, by all means get out of the way. They want to fork over their hard-earned cash!

One way to get in their way is by requiring them to register an account before purchasing anything. This is commonly done to keep track of purchasing details and make it more convenient for customers to make future purchases. This is all well and good, until you realize that this is a significant barrier between the customer and check-out page. The home stretch is the absolute worst place to give the customer a reason to abandon their cart.

Don’t believe me? Read how Amazon increased its sales by $300 million (yes, 300,000,000 dollars) simply by changing one button in its checkout process.

How to Fix It

Instead of forcing potential customers to register during the check-out process, sell them on the benefits of registration. Highlighting the convenience, increased security and fraud detection can convince them to do it. But leave the choice to the customer.

7. Ads Throughout The Store

Displaying ads in your online store tells the customer that you’re trying to squeeze every cent possible from them. Ads detract from the goal of your store, which is to get customers to buy products they want.

Buy.com has flashy animated ads that distract from their product offerings

When I first land on Buy.com’s camera page, the first thing I see isn’t the camera listings, but the flashy animated ad for the Sidekick. Ignoring the ad and focusing on the cameras is not easy. I came here to buy a camera, and it gets in the way.

Overstock.com actually displays ads for competitors on the same page it sells its products

It turns out that some sites actually link to its biggest competitors right in its search results. Imagine if your shop were a physical store. Would you let your competitors advertise their cameras right beside where you are selling your products? By putting ads on its website, you would be doing exactly that.

Don’t confuse this with cross-promotion, which is selling ancillary items from your own store based on what the customer is looking at. Ads don’t drive your own sales but rather drive customers to your competitors while adding a measly 5 or 10 cents to your bottom line.

8. No Notice of Out-of-Stock Items

If a customer pays for a product only to find out later that it is on back order, they won’t be happy. They will either cancel their order or contact customer support to complain. Neglecting to notify customers that an item is out of stock is a customer service problem and makes for a poor user experience.

How to Fix It

Be up front with visitors. Tell them about your inventory level so that they can factor that into their decision.

Even on the product listing page at ModCloth.com I'm notified of a low stock level

ModCloth immediately tells visitors on its product listing page about the current inventory level. If an item is out of stock, the friendly orange (and not harsh red) text tells me right away. If inventory is low, I’m warned that only a certain number of items are left, in this case four. This nudges me to be snappy about my decision but doesn’t stress me out either. If the message had said, “Our stock will be out in 19 minutes,” I would feel like I’m diffusing a bomb on Mission Impossible. You have no reason to panic your customers.

ModCloth.com displays a bubble immediately attracting my attention to tell me the product is out of stock

ModCloth also tells me on each product page whether an item is sold out. It is the first thing I see when I land, so I know about the stock right away. ModCloth’s user experience designers get bonus points for letting me quickly add my name to a list to be notified when the item is back in stock. While I may be upset that the red dress I want is out of stock, I’m quickly appeased by the friendly and helpful messages on the page.

Summary

The goal of user interface design is to make a website easier for visitors to use. For online stores, fixing problems brings in more visitors who browse more products for a longer period of time. Even simple fixes, like not requiring registration for purchases, can have a huge effect on your bottom line. Keep these common problems in mind the next time you design an online store. Your customers will thank you for it.

Related Posts

(vf), (al)

↑ Back to top

Kevin Holesh has a passion for everything Web development (HTML, wireframes, Ruby on Rails, you name it). He loves usability and writes about design and business at minimali.st.

  1. 1

    thanks! very nice examples.

    0
  2. 2

    Another great article!

    0
  3. 3

    Wow, great article! Things to definitely think about in designing for a rich user experience. I really enjoyed the fact that you picked difficult and crucial areas for the article.

    Favorite was the last: no notice of out of stock items. I really enjoyed how modcloth presents the situation to the end user.

    Kudos!

    0
  4. 4
  5. 5

    Good tips. Great post (as usual), thanks :-)

    Small changes can have a huge effect on the bottom line. Here’s another solid example…

    The $300 Million Button
    http://www.uie.com/articles/three_hund_million_button/

    0
  6. 6

    Great!
    This article is very useful!

    0
  7. 7

    Very nice article Kevin, but you can’t imagine how many “Usability-Mistakes” are made by Online-Shops. Watch those successful Online-Shops and their Conversionsrates and a lot of them aren’t very usable.

    0
  8. 8

    Great article thanks. Really good to see actual solutions too. Bizarrely we’ve just taken the decision to remove our search box for a while. We have very few ‘items’ available at any one time for now and felt the search created more confusion than it not being there. That’s the theory at least!

    0
  9. 9

    Re. the $300 million fix – was that really Amazon? I just went there and I don’t see the fix to the checkout process that was mentioned in the article!

    0
  10. 10

    looks like some great ideas on there.

    not just for online shops but normal sites can use a lot of the info too.

    0
  11. 11

    These posts sadden me. I know I need to do it but I don’t have the technical skills to do it myself and I certainly don’t have the budget of these stores to pay someone to do it.

    Damn you for depressing me on an otherwise nice Friday afternoon ;-)

    0
  12. 12

    I like this article – I think we all know that customers don’t give up quite as easily as is suggested in the article – they are actually rather robust, but that doesn’t detract from the good advice.

    0
  13. 13

    Point 8 is spot on. Both asda-entertainment.co.uk and play.com say “awaiting stock pick” when purchased and never notify you it’s out of stock until your waiting for your purchase. I think their ecommerce is actually a very similar system which also makes sense.

    0
  14. 14

    boring. a friday afternoon post

    0
  15. 15

    Does the “out of stock” notification not depend on how long the user will have to wait? We sometimes run out of stock and allow the user to click a button to enter an email address. We then email them when the stock is in (usually < 7 days).

    If we have the items in stock, we send them out the same day by Royal Mail so the customer will get them within 1-2 days (except when they are on strike). I think this is what people expect but would a wait of 7 days actually make much difference?

    I am trying to decide whether to leave the "notify me" functionality or whether to take the order then email them telling them it will take about 7 days to get the order to them.

    0
  16. 16

    Mike Everett-Lane

    October 30, 2009 8:46 am

    One thing I wish for (but never seem to see) is a more up-front way to figure out how much the shipping is going to add to the cost. Many times I’ve had to go all the way through checkout (and cancel before paying) just to find this out.

    0
  17. 17

    Awesome article and the $300 million button article was interesting as well.

    0
  18. 18

    @Mark Davidson

    Definitely tell customers before they purchase. I personally wouldn’t mind at all waiting 7 days for a product to arrive, but I would want to know before I purchased. I wouldn’t be particularly worried about the 7 days, however, i would be worried that it could be more next time, and probably wouldn’t use that site again.

    Nico

    0
  19. 19

    Blue Sail Creative

    October 30, 2009 11:36 am

    Amazing how sometimes the simplest most obvious things make a difference.

    I talk about the same sometimes on my blog at bluesailcreative.com . Most people lose track of the core idea of what problem they are trying to solve.

    KEEP YOUR EYE ON THE BALL!

    0
  20. 20

    I think the article is a little bit overgeneralized. Saying “the goal of any online store is to sell as many products as possible” wouldn’t be true. Merchants’ goal is usually to increase revenue by increasing order size. Selling more items is only one of the ways. There are plenty of merchants who have limited number of items in the store. All in all – good points, but there is so much more to ecommerce usability. I would love to see some deeper insights in three separate areas of ecommerce usability: finding a product and learning about it; ordering a product and finding information about order process; finding all necessary post-ordering information and customer support.

    0
  21. 21

    Nice post, although the “How To Fix It” section for the Get Satisfaction example is flawed, and doesn’t address the root of the problem.

    It’s not that the designer of the site implemented search ineffectively, it’s that they’ve embedded a Flash object incorrectly. All that’s necessary to get the search box to display above the Flash video is to change the WMODE parameter to “transparent”. Then, any HTML content will nicely overlay the Flash content and the problem is solved.

    The solution proposed in this article is proposing a design change to respond to a technical flaw. Compromising a design to respond to a technical issue, particularly when there is a technical solution, is rarely a preferred method.

    0
  22. 22

    Superb!

    0
  23. 23

    I cannot agree enough on number six and in fact clicked on this article hoping that you would post the 300 million dollar button article. This is a pet peeve of mine. If a site forces registration and I REALLY want to buy the product, I may spend 10 seconds looking for a phone number to place an order before deciding to go without, or paying 2 dollars more at a competitor’s website.

    0
  24. 24

    Another great article….. i’m new written here, but i’m a smashing magazine’s fan !!! Excellent Website, i’m from venezuela !!! Have fun !!!

    0
  25. 25

    Minor correction: the UIE article you link to in #6 isn’t actually about Amazon. The retailer is not named. Amazon doesn’t actually do what this tip is about, so the article probably isn’t secretly talking about them.

    0
  26. 26

    Forcing people to register as the first step in the checkout process is so 2002! Excellent supporting facts to your argument. Amazon is definitely the holy grail in eCommerce functionality.

    0
  27. 27

    For the modcloth search works how it is meant too and by taking away its context creates a non useful search. If you think about the audience involved and their expectations from searching through clothes. For example, when you go shopping and tell a friend about shoes you found, you don’t remember what the manafacturer called it, the shoe would be described as white and flat. The search caters perfectly to its context and audience with a simple and effective search.

    0
  28. 28

    Great article with useful and to the point information. Thanks Kevin and good topic SM.

    0
  29. 29

    I love this article! All that you’ve mentioned are we trying to implement into Pixmac from the beginning. Sometimes with a better result, sometimes not. But definitely we’re trying. You cannot tell that about all stock sites around the world…

    0
  30. 30

    Nice tips! Anyone tried a good usability site? I was thinking about using Userfly.com on my site, but am curious if anyone else has used it/liked it?

    0
  31. 31

    This was a really great article. It is good information for a business that needs to up their website or make a new website. I really liked the examples of the different companies and how their different site content works. We have been updating our search bar and content on our page to help the customer.

    0
  32. 32

    Also consider if you really need a Quantity box on your product page:
    http://czarto.com/2012/07/05/ecommerce-usability-do-you-really-need-a-quantity-box-on-your-product-pages/

    Depending what you are selling, you may not need it. ie: How many people buy the same shirt in the exact same size, color, style, etc…?

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top