February 8, 2018

One of the most crucial things that can never be ignored when designing an e-commerce website is thinking for your user. Regardless of who your target audience is, it is important to maximize the simplicity of the ecommerce user experience.

Website design is not art. Website design uses art though to get a point across, present a solution, answer a question. Websites have goals to be achieved and problems to be solved. A lot of times web designers are trying to show off their skills and in pursuit to create something original they sacrifice the simplicity of the functionality. The cost of that is a frustrated user, drop-offs, an annoying experience. No serious business will ever want this for their clients, unless intentionally.

When designing an ecommerce website, or any website for that matter, keep your client’s target audience in the center from start to finish. Ask yourself, “How can I simplify in a beautiful way to get my client’s user go from start to finish in as few clicks as possible, fewer moments of doubt and searching?” The world wide web is already complicated enough and eventhough your website can be a work of art, if it is not extremely easy to use, your client is losing business while paying you to show off your stab at originality.

Here are some tips from our very own experience designing and developing countless ecommerce websites:

1. Make sure the visitor instantly knows where he is at.

All those intro effects and loading animations are cool, but are they functional? Don’t make the user wait to know where he is at. Don’t leave him hanging, cause he won’t. He will simply leave.

Regardless of the page the visitor may land on, don’t make him doubt for a second or make him start scanning the page trying to figure out where he is at. Most likely before he figures it out, he will already be back to search results looking for another website. 

The home page specifically should serve as an easy navigational point that can immediately show the user whatever he may be looking for. This is where psychology and general principles of use are involved. (We will cover this in the later posts)

2. In a product thumbnail, show everything the user needs to buy.

In each product thumbnail, we always show these:

• Product name
• Price
• Quantity
• Options (color, size, etc.)
• Add to Cart button

These 5 things (sometimes more, sometimes less) should be visible – right away or on rollover – without the need to click into yet another page to find that info. Most of the time, the user doesn’t need to read all the product details. Give him an option to just buy it. The very curious or doubtful can take the extra step if they have to, but do not make everyone do it. Especially, a returning user.

3. Create the cart as a pop up, not as a separate page

First of all, the moment the user adds a product to the cart, slide in the cart as a popup. Don’t make him take the extra step of clicking the Cart button in the navigation to see what he has put in there. When your cart is a popup, it can be viewed on any page without leaving it. The user also doesn’t have to wait again for the cart page to load but makes the content immediately available. This is something any user will appreciate, especially on mobile devices.

Honestly, a separate cart page is kind of an old-school approach. At times it may still be appropriate, but at the very least, have both options available. Going from page to page takes decision making, clicking, going back and forward, figuring out yet another layout with all the little options (add, remove, update, etc.).

It is much easier to get back to shopping when you can just click outside the pop up area or click “continue shopping” to close the cart. When the pop up closes, the user sees the same page he was on allowing him to seamlessly continue browsing and shopping.

Oh, and if your website has only 3-5 menu items, don’t use that sandwich icon just cause it makes the website look cool

Remember, design is not art. All those sandwich icons make the website look all cool and clean. Sure… but it also makes it less functional. Don’t make your user do the extra work he doesn’t have to do. Use the sandwich icon for the secondary, less important menu items. Use it if you have a one-page website because the user can scan through the whole website without any clicking at all. But do not use it if you need a user to go places on your website. Don’t make the user think where he doesn’t have to. Simplified ecommerce user experience is a bigger priority than a very clean looking website and a confused user.

 

So there you have it. On one hand, these tips are very basic and fundamental. They are something most of the web design students will hear in a class. On the other hand, this is something many times designers and design studios egnore.

More resources on this here

Want us to take a look at your ecommerce website? Send us a message.