Arrow close_button arrow_dropdown angle_left angle_right Phone Search Hand Slider Checkmark Read Icon eguide tools video
Groove Commerce
Design 1, 2, 3: eCommerce Best Practices & User Expectations
  • Topic
  • Website Design & Development

In eCommerce, there’s a lot of talk about best practices. For some companies and clients, best practices are at the foundation of every eCommerce site. For others, best practices are rules that are made to be broken. In this month’s Design 1, 2, 3, we’ll look at some best practices and why they are the standards (hint: standards improve usability.)

For this back-to-basics adventure, we’re going to Japan (figuratively.) Morphica is a stylish, minimalist home furnishings company. For the most part, their site is completely in Japanese. No, I do not read Japanese, and yet this language barrier doesn’t hinder my ability to shop their website. Why not? Because Morphica uses eCommerce best practices, and the beautiful thing about standards is that they translate across cultures and languages to focus on user behavior and expectation.

Take a look at their “Furniture” category page (above the fold):

1. The Product
All of the products are lined up in a uniform grid making them easily approachable. The image is a link and so is the blue text. Sure enough these links continue on to that image’s product page, exactly what I would expect to happen. The price is clearly displayed. On other pages, discounts are clearly labeled with pricing done in red and/or crossed out. Granted there is a line of plain text (not-linked) in Japanese that I don’t know what it is, but that is more or less irrelevant to me. All of the necessary information is available to me – 1. I know what the product is (image), 2. I know how to find more information about the product (link), 3. I know how much the product costs (price displayed). One point for best practices.

2. The Header Links
On nearly all eCommerce sites, there are a cluster of links in the top right corner of the site of the usual suspects: Sign-up/Register/Log-in, My Account, Shopping Cart, Contact/Customer Service etc. Morphica sticks to this best practices and has all the expected links in the top right corner. After a few clicks back and forth, I can decipher how to get to my shopping cart, log-in, search and get help. Again, there is an expectation of what those links should be from a user standpoint, and it’s good to meet expectation. The one thing I think they err on is the blue button in this corner. What page do you think it would take you to? To really adhere to eCommerce best practices, this button should go to the Shopping Cart/Checkout as that is what you (the business) really want to drive the user to do. On the Morphica site, the button actually leads to an account sign-up/log-in.

3. The Purchase
The image above shows a lower section of Morphica’s product page. Again, without being able to read the Japanese, it’s still very easy for me to get a grasp on what is happening on this page. The product is available in different colors. I can see the corresponding price for each color. There is also a drop down which is surely to select the quantity of items. I know this because the numbers run from 1 to 10. Had the numbers been 100 to 1,000 then I might become confused, but because the drop down was in the range that I expected, I can keep moving along and buy this product. After all of the product colors, there is one single black button for me to click. Sure enough this adds the product to my cart which is exactly what I would expect it to do. I expect it because of 1. It’s alignment with the price and quantity and 2. because best practices say to remove all distracting buttons (clear, reset, continue shopping, delivery etc.) from the “add to cart” button.

Hopefully, this month’s Design 1, 2, 3 helped you focus in on some eCommerce best practices and more importantly, why there are such. By following best practices, you’re putting your site in the best position to convert by meeting user expectation.

Mentioned in this Post
Category Page :: Morphica
Product Page :: Morphica