What Makes for Successful E-Commerce Website Design?

What Makes for Successful E-Commerce Website Design?

January 10th, 2013 | Articles & Tutorials | Theme Author:

Have you ever noticed how there are many web stores that tend to be a bit too dainty for their own good? Often, they won’t even let you in until they laboriously pick up their skirts and get ready for an impressive, high definition (read slow-loading) flash animation song and dance that will not turn off. Once they do let you in, everything just appears artsy – more like the website of an art gallery than a store that actually wants to sell you things.

There are beautiful pictures everywhere and beautiful color schemes, with nary a product or promotion in sight. When you use the cleverly-hidden search box that’s blended into the background, all you get is a bunch of product announcements – no actual products. Needless to say then: this is exactly what you shouldn’t do with your e-commerce website design.

You must not think that these websites are designed by inexperienced people. They could be very experienced – at designing art gallery websites with those little merchandise stores at the back. It happens all the time that experienced website designers simply overlook the very purpose of an assignment. They could just be deeply concerned with producing a website that looks very beautiful from an artistic point of view – while forgetting about usability, functional efficiency and maintenance issues – the whole lot. When you hire a website professional for your online store, you need to make sure that he really knows what e-commerce website design is all about.

How can you tell?

Well, you certainly cannot leave anything as important to you as your commercial website entirely to a designer’s best judgment. You do need to educate yourself first and work closely with your web designer to make sure that he does what is best from a business standpoint. You could first educate yourself by looking up the most successful web store design examples that you can think of – Amazon, Converse, Reebok, Sony Style USA, Giraffe, Harry Winston – stores that have won plaudits the world over for their effective and attractive design choices.

Before you do that, though, you really should read up on what the best principles of e-commerce website design are. These pointers below should get you started. Study those award-winning websites with these pointers in mind and you will really know what to look for.

How quick and easy is your website?

No one is just eager to part with money coming to a store. A good part of that eagerness comes from how easy you make it for them to be all over your website and your products on a whim – at the speed of thought as it were. The more hassle-free your customer’s path through your website, the better the likelihood is that he will actually buy. To begin with, the search box is the most important thing to pay attention to.

You need to make sure that the focus is already on the search box when a page opens – with no need for an additional click. You also want to invest in a full-featured auto complete/search suggestion system (perhaps one that uses jquery) that works very quickly. The more quickly you make those search suggestions come on the more certain your sale is.

Offer search clarity

Amazon doesn’t really do this very well. For instance, when you search on Amazon for a product that could appear under multiple categories, the website usually asks you to pick a department before it will let you go on. How is a customer supposed to know if he will find a better selection of calculators in the Office department or the Electronics department? You need to have as few categories as possible, and you need to make the search process as smooth as possible. Whatever category menus there are, making sure that they operate in the fly-out menu style could make navigating easier. Offer a breadcrumb trail wherever your customer goes on your website. These features may not exactly be attractive to look at. But they offer practical conveniences.

Once a customer arrives upon a list of products, you need to let him sort them in as many ways as you could possibly imagine. Amazon offers a number of features to let you filter for what you want. They offer detailed filters for price, brand, customer rating, product feature, shipping charges and so on. As many filters as you offer, your customers are going to be pleased with you.

If you want imagery…

Oddly enough, when the artistically inclined among e-commerce website design professionals try to brighten things up with imagery, they never tend to think of usable product images. They instead think to use clever and artistic pictures.

Amazon slips up in a different way – they don’t have that many product images on every product page. In fact, they only have a couple – offering a poor level of detail. If there were another website that offered a generous range – a couple of dozen close-up looks at every product including a look at every side of the box – wouldn’t you go there first?

It can be very difficult to get people to actually trust a small web store. It can be tough for these stores to actually compete with larger ones that offer the same products at lower prices. What is it that you have to compete with? Amazon has an unbeatable selection of user comments. If you can’t match them here, you should certainly hit back by going overboard with product images and videos for every single product that you carry.

If you do this you will probably have people coming to you first before heading anywhere else. This can be a wonderful way to ensure that your website stays relevant. Some of them may even decide to buy.

A no-click interface

What is better than having plenty of images to each product? Well, not having to click to see those images to enlarge them, of course. Google Images has a version of this no-click interface. On that search engine, each image that you pass your mouse over just jumps forward and offers an expanded view. You could imitate this as far as possible on your website. The more your customers need to click on things, the more tired they get. Delight them with images that expand on their own with no more urging needed than the simple hover of a mouse. You could even use Ajax to make quick product previews blow up from thumbnails this way.

This is the kind of artistry that e-commerce website design needs – artistry that actually gets the job done.

Is it in stock?

People don’t like being misled. When they see a product, they want to know as soon as possible what the price is and if it is in stock. Try to make sure that you list both pieces of information very clearly. You need to understand how frustrating it can be for the consumer to learn a little later than he would have preferred that the product he hoped for is not in stock. That kind of disappointment is hard to overcome. Try not to do this. You need to program your inventory database in such a way that the availability status is clear at all times.

What does your Add to Cart button look like?

Believe it or not, there are many online stores that like to disguise their Buy Now button. They disguise it by calling it Learn More or Details. It’s as if the website designer never heard of such a thing as a “call to action”. Most people do not respond well to veiled invitations to buy. They actually need a good push. You need to make that Buy Now button as prominent as you tastefully can, and word it in a way that is universally understood.

As long as you’re thinking about your Buy Now button, try to read up about color theory before you decide on what color to make it. Amazon uses a light orange Add to Cart button, as do many other successful websites. Some color theorists, though, believe that the color orange is a turnoff. It might have something to do with the culture one is from.

Where’s the shopping cart

When a customer takes the trouble to come in and trust your online store enough to actually add a product to the shopping cart, he actually wants to be able to keep an eye on that cart. Somehow, many online retail stores seem to feel obligated to make the shopping cart button as small and as unobtrusive as possible. It’s as if they are embarrassed to admit that they’re here for actual money instead of art.

This isn’t a good idea. It can be very distracting to a shopper to press on the Add to Cart button and not really know if their choice has been accepted. In fact, it would be even better if you could add a shopping cart widget to some part of the website that really displayed at all times.

This isn’t simply a matter of being sensitive to your customer’s needs. You can’t take for granted that a shopper who adds a product to the cart will actually take the next step. When a shopper is always able to see the shopping cart, you make sure that he never forgets what the next step of the process is. You need to make the shopping cart appear prominent, easy to see, and easy to go to.

The checkout page

The basic rule of e-commerce website design is – that you’re there to inform the customer and to make a sale. You make sure that there are no distractions on any page – especially on the checkout page. You need to design blinkers into your checkout page – remove the sidebar, for instance, if that might make the customer change his mind and go elsewhere. There have been numerous studies done that show that distractions appearing at this point result in a lower likelihood of an actual sale. This is why online retailers don’t even ask you to register for an account anymore. If you’re a new customer, you can just check something out on the fly now. You supply them with your e-mail ID and they automatically register you for an account without involving you with the details. A single-page checkout that doesn’t distract the customer with anything else has the highest chance of actual completion.

The single-mindedness of good e-commerce website design

As with anything else, designing a good retail website comes from knowing exactly what you are designing for. Once you make it clear to yourself what the purpose of the website is, all you need to do is to keep your eye on the ball; so that the customer doesn’t take his eye off it either.

  1. Michael says:

    Where’s the shopping cart is SO important. When I’m shopping online that is the number one reason I bounce because the experience is beyond confusing.

    • Dieter says:

      Yes, I totally agree. It seems like many webshops almost hide their shopping cart. Make it big, visible and simple (no one ever complains that things are too simple) :)

  2. Pamela says:

    I believe that a good e-commerce site will also keep in contact with the buyer throughout the entire buying and shipping process through email conformations, letting you know that your payment has gone through and include the item SKU and prices, your order number, the total of your purchase including s/h and tax, and a shipping conformation with tracking number. There’s nothing worse than a customer being left in the dark wondering if their payment was accepted and if their order was processed and if it shipped. Believe it or not, this just happened to me a week ago with a popular e-store and I finally had to call customer service to complain. Needless to say I will never purchase from them again.

  3. Dilek Feneri says:

    Ohh nice blog. Thanks for sharing

  4. bao cao su says:

    You can make html css like amazon.com?


  1. What Makes for Successful E-Commerce Website Design? | inLine Media RSS Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Get notified when we release new templates and other free goodies!