Product recommendation is one of the ways of showing how usability practices can increase online sales. Making your users’ life easier will improve the whole shopping experience and will make buying fun!

"Design your product description page including related products…"

Make shopping easy and people will buy more. Design your product description page including related products that customers might like to buy.

A good design example is the Abercrombie & Fitch website, is you are looking for shorts it will show you a shirt and shoes to combine them with on the "Complete The Look" section.

Making this kind of integration takes time as it requires to internally link products, but all this effort could be extremely rewarding. Read other Design vs Art articles about Compulsive Shopping and Product Recommendations.

Placing action buttons in the right position is something that could improve usability and the whole user experience at your site. Action buttons are used when user input is required. For example a "vote" or "add to cart" button (see more on action buttons).

"Placing a checkout button on a visible location is very important and will prevent users from flying away…"

The checkout button is an action one, it’s used at online shop websites to start the checkout process that finishes a purchase. Placing a checkout button on a visible location is very important and will prevent users from flying away from the website just before buying the products. Once again, this is a clear example of how usability can have an important impact on sales.

Best Buy, the online retailer for electronics, places the checkout button in a position that could be out of the sight of the user if she has a small screen or if the screen resolution is too big. In this example, the user has to scroll down to see the checkout button (below the red line).

Amazon has a smart design, they place the Proceed to Checkout button not only at the bottom of the page but also in a very top position. This way, there is no chance not to see the checkout button.

Searching for products in your website, users could make many mistakes. Your website search engine should not only accept exact matches but also misspelled words.

Petsmart.com, the online pet shop, propose other search terms when the one entered by the user does not match any on the database. Searching for “dogga” will propose the search term “doggy”.

Improving usability and sales, Amazon.com has a much better design of its search result page. At Amazon, searching for “shinning” will not only propose the exact term “shining” but it will also show related products.

This approach makes users’ life easier and could bring the products you want to sell closer to your clients.

Being consistent with the search box position is going to help your users when looking for the products you sell online. Many could say that the right position for the search box is the upper right corner. Maybe Yes.

But setting your own search box position is a practical web design option. Keep in mind that you should place the search box in the same place across your whole website.

Check, for example, Foodnetwork.com, a website about cooking. It doesn’t matter where your are, there is only one search box, always in the same place.

On the other side, an example of poor usability, could be found at Colorware.com. At the beginning the search box is in the right position, after the user makes a search another search box appears in the middle of the screen. This is confusing for some users, many click once again the search button but this time in the new search box.

Everybody hates pop-ups. This time I have a bad usability example of Amazon.com, in contrary to Tesco yesterday’s article about how to avoid pop-ups to show product pictures to users.

When you click on the product picture on the product description page, Amazon splashes a pop-up window with a bigger picture.

Why this is bad? Amazon’s target is everybody, they are a super store, so it could be that many of it’s users don’t know much about computers. One example I can imagine is that many users have pop-up blockers but they don’t know they have it, so they they will never see the pictures.

That means that many users will not get all the information they need to decide.

Sometimes you have to use pop-ups, but try to avoid them if you can. On yesterday’s article you can see how this could have been avoided by Amazon.

Tesco, the British retailer, developed a nice solution to show users product pictures avoiding the use of pop-up windows.

Pop-up windows are a big usability issue, they confuse users and they negatively affects impaired people. Think that some people just don’t notice the pop-up windows, some close them straight away and some don’t know how to close them.

Tesco placed a “View more images” link on the product description, when clicked, the user is taken to the pictures page.

Then, in the pictures page they placed a very visible “Back to product” link. I think this solution is a very good one and help users easily navigate pictures. This is a nice usability pattern to keep in mind.

There is one pattern to keep in mind during the design of the check-out process, and it’s to give customers the possibility of sending products to different addresses.

Again, Amazon is an example of good design and somehow a trend-setter. This box has become an standard and it’s easily recognized by many users, it’s usually located on the top-right corner.

“Forget someone? Enter a new address” is also a hit that users understand. Amazon also places a drop-down list next to each product to select an address. Excellent design, bravo Amazon.

Your icons might not mean the same to users as to you. Try to make clear icons and do not hide menus behind obscure buttons.

As I heard from Snooth I visit the website and was looking for that “social” feature.

I decided to click on the “plus” icon below the wine name. Then I discovered a very obscure menu with items like “Suggest a missing vintage” and “Report an error”. If any of these options are part of the functionalities offered by the site, why are they so hidden? How can users guess what’s behind that icon? Please, try to avoid making users to click without reason.

.

Karmaloop is a nice web shop for young people, they have great stuff. Unfortunately their site has some usability flaws.

Not providing a proper description of the products is not a good thing. In this example, the only information about the product are the title and the pictures, nothing more.

Give users a good description of your products and take advantage of the new internet. Develop modern interfaces, give users the possibility of making comments about your products and gain credibility.

.

There are many approaches for the procedure happening after clicking on the “Add to Cart” button of a product. One of these is to pop up a message asking the user to decide if checking out or to continue shopping.

Threadless is all about design, t-Shirt designs. They have cool products and their site is revolutionary and very web 2.0. People can submit ideas and rate designs. But their site has some usability flaws (nothing is perfect in this world!).

It’s nice from Threadless to make the shopping cart visible all the time, indicating how many products are in it.

The problem is when the user clicks on “Buy!”, then it appears the pop up. Clicking on continue shopping will leave the user in the same window but the shopping cart on the top the page is not updated with the new amount of items. This can only confuse users and make them click several times on “Buy!”. I would call this “a usability bug”; is it possible that nobody tested this?

.