10 Ecommerce Design Tips for Increasing Conversions

Sometimes, web stores get too artsy with their designs. Some use flash animations that can slow down the shopper’s browser, while others use color schemes that send the wrong signals to shoppers.

There are many cases where experienced web designers might overlook usability issues, though creative elements might look very attractive from the design standpoint, they can be a nightmare for online shoppers trying to click their way to checkout. A/B testing helps put those in perspective to achieve the best results.

With more than ten years of experience in the e-commerce industry and designing online storefronts, we at 3Dcart have a list of “dos and don’ts” when designing web stores that has increased our merchants profits.

Here are ten tips on how you can turn visitors into customers and improve your conversion rates by employing simple design techniques.

 

1. Make sure your shopping cart is visible

If the customer adds an item to their cart, they want to have the peace of mind that the item was actually registered.

Therefore, somewhere on the page at all times during the shopping process, your store should have an area listing the number of items in the customer’s cart and other relevant check-out information.

Having checkout data visible and readily available also helps ease the transition from shopping to checkout. No matter where the customer finishes shopping, it’s important to have a quick link back to the checkout page.

It isn’t enough to simply have shopping cart information somewhere on the page, however. Make it pop so it’s easier to find. Contrasting colors from the color scheme on the rest of the page is a good way to help the cart stand out.

 

2. Optimize your “add to cart” buttons

Site visitors and customers respond differently to action buttons and their wording. For instance, if your “add-to-cart” button says “more details” or “learn more” our experience shows that customers don’t react as well to indirect calls-to-action.

In contrast, an “add to cart” button or a “buy now” button is a specific and direct call-to-action that elicits a positive response from shoppers.

Coloring is also an important design element here. Depending on the specific type of business, certain colors might trigger different visitor’s behaviors.

For example, blue and green are gentler colors that usually cause people to follow-up, whereas orange and red have shown to hurt the performance of your “add-to-cart” button. Using colors that flow with your site’s color scheme helps further clarify the call-to-action.

 

3. Simplify Searches with an Auto-complete Function

For e-commerce websites, a search box is an imperative feature for the visitor’s ability to access products that match their needs. Over 20% of online visitors prefer the direct use of a search feature than following category paths for navigation.

In some occasions, searches can return more results than expected or the wrong results if visitors don’t use the correct keywords; the use of an ‘’autocomplete’’ function within the search box (which can be implemented with the use of jquery) provides the closest matches as customers type-in their keyword.

The search suggestions allow visitors to correct their search if results don’t match or to directly link to the matching products without the need of loading the search results page.

 

4. Clarify your Navigation Paths

If you have too many categories, this can be a difficult task. However, fly-out menus (that “fly out” when you mouse over them) are an effective way to keep your page from getting too cluttered while giving the shopper the opportunity to access any category page at any time.

Don’t get caught up in getting too artistic about how you design the category and other navigational elements; shoppers will always thank you through better conversion rates when you make practicality a priority.

Using bread crumbs so shoppers can trace their way back from where they came is another way to ensure the shopping experience is a smooth one. Make a path between categories and subcategories somewhere on the page. After shoppers add something to their cart the placement of a “continue shopping” button makes returning to shopping as intuitive as possible.

 

5. Let Visitors Control their Shopping Experience

All visitors are unique, and so are their shopping preferences. Providing tools that allow visitors to customize the way they browse categories and products within the store will improve their shopping experience and increase the chance of converting sales.

Make sure to include the ability to sort products by price, reviews, bestsellers and release date; provide an option to adjust the number of items listed per page and let visitors narrow down the number of items displayed by selecting specific features.

 

6. Provide a Quick Product Preview

Visitors hunting down products online might want to quickly browse your category pages for items matching their needs.

Whether due to lack of time, slow loading speeds or a personal preferences, clicking on individual items for additional details on a separate page is avoided by some visitors.

By adding a quick preview to your category and search pages, ranging from a simply larger version of the image to a more complex view that loads details via ajax, you can get the visitor’s attention towards your products and their details.

 

7. Clean up your Product Pages

The organization of your site’s product pages is a crucial part of ensuring that your customers are drawn in by the information that is most appealing to them.

Have you ever thought about where your customer reviews reside on the product page? Sure, customer reviews are an important part of gaining the customer’s trust—but they don’t have to be the first thing that the shopper sees. Several elements on any given page mean a complex organization process which can confuse the shopper’s eye.

The first element should always be the product’s image(s). The shopper wants to see exactly what he or she is getting for the money. Next to the item list the product name, description and the price to get the customer’s attention. Keep elements like customer reviews and links to similar products closer to the bottom of the page.

 

8. Show clearly your product availability

For fast-pace online stores, product inventory levels are constantly changing. Once visitors have taken the time to select a product, compared it to other options and browsed for better pricing it can be a lasting frustration realizing that the product was actually out of stock whether after it adding to the cart, checking out, or even after placing the order. This can result in a potential lost customer.

Avoid shopper’s dissatisfaction by having real-time inventory and clearly displaying the product availability and stock left within the product’s page.

 

9. Display product variations in an intuitive manner

Within many industries the ordering process involves selecting specific variations of the main product. For any item that might require a size or color selection, be as explicit as possible. Include images for the different combinations.

Use color swatches and intuitive graphical representations like a size chart in addition to more traditional elements like dropdowns or radio buttons.

 

10. Eliminate distractions from your checkout page

When your customer proceeds to the checkout, you want them to go in a very specific direction. When designing, remove items like sidebar navigation to define a clear path to the goal.

Ignore the urge to continue selling into the checkout process. Every second between the landing and checkout is precious to ensuring the sale is actually made.

Single-page checkouts tend to have the highest conversion rates. Simplifying the checkout process and making it easier for the shopper is a great way to ensure the sale is completed. On the one page, the customer should be able to fill out their shipping, billing and credit card information.

One-click checkout is also a great way to keep customers coming back. Remember, a good checkout experience will stay in the shopper’s mind which keeps them coming back.


Jimmy Rodriguez is CTO and co-founder of 3DCart, developer of an e-commerce suite for businesses of all sizes. As an authority on e-commerce best practices, Rodriguez combines more than 8 years as an e-commerce developer and web programmer with SEO, social marketing and business intelligence.”

What other methods do you use to increase conversions on your designs? Please share them in the comments…

  • http://twitter.com/wp_tricks JIM

    I think that this post will really help entrepreneurs, so they can improve their productivity and be more efficient in their jobs.

  • http://www.albruna.nl Martin

    Seeing as I am in the middle of creating and setting up an ecommerce site, this list of tips was very helpfull!

    Thanks Jimmy!

  • pesho

    Awesome Info
    thnaks a lot we wait 4 more
    i love WDD ^_^

  • http://esvelte.com Esvelte Web Design

    I would perhaps also add having a returns policy clearly shown on the product page – helps with customer confidence and will probably result in more impulsive sales.

  • http://www.visualbuzzer.com VisualBuzzer dot com design blog

    This is a great set of useful tips. I am just now getting into ecommerce websites so I will surely be using these tips for future reference.
    Thank you.

  • http://martinlucas.co.uk Martin Lucas

    Another one; where possible – don’t force the customer into registering their details with the website before making a purchase, the registration grabbing can always take place after the sale has been made.

  • http://understandinggraphics.com/design/how-to-avoid-split-attention/ Connie Malamed

    Good article, Jimmy. Although it should be obvious, it’s amazing how hard it can be on some eCommerce sites to find the damn shopping cart! I also like your advice for maintaining focus by cleaning things up and avoiding distraction.

  • http://omel.co.cc Omel

    nice post, wish you included sample websites, I am creating ui for an e-commerce site right now for a client in the middle east.

  • http://web30textures.com/ GKL

    Helpful information, thanks for sharing!

  • http://www.mactsolutions.com Puge Teopengco

    Great list!! thanks jimmy

  • http://www.trebiano.it/ecommerce Studio Trebiano

    Very helpful tips about e-commerce design.. thanks a lot for sharing !

  • http://www.offroadcode.com James Young

    I wrote this earlier today which has some alternative suggestions on how to improve conversion rates too.

    http://www.offroadcode.com/2010/9/6/improving-ecommerce-conversion-bit-by-bit.aspx

  • http://creapptives.net/ creapptives

    Thanks for the tip. Very helpful.

  • http://www.webdesignshock.com juan webdesignshock

    Hello, well done, we have implemented some of these techniques in our commercial site (iconshock)… however, remember that conversions are not only sales… you could include as well improvements in contact forms …

    see u !

  • http://www.webidentity.pl sebastian

    Very good lesson in the design of e-commerce. I’m impressed. Thank you for sharing.

  • http://www.itsdigitalmarketing.co.uk Gary Robinson

    A good article, full of great advice. The important thing to remember is that these 10 tips are based on the author’s experience and will provide great starting points for anyone looking to improve their ecommerce performance.

    However as alluded to in the article, it’s always a great idea to test your design changes through A/B or multi variate testing, as the results will vary dramatically from site to site.

    I’ll be taking a second look at this article tomorrow to see what I can change on the sites I work on

  • http://www.thefreelancegeek.com/ The Freelance Geek

    Great post! Thanks.

  • http://www.webpixelkonsum.de Ralph

    A short nice list to improve a E-Business-Website. This list means the first steps. The right first steps ;)

    Ralph

  • http://www.hastishah.com Hastimal Shah

    Nice tips to improve the ecommerce website..
    thanks for sharing

  • http://www.childmonster.com/ Childmonster

    Great infomation !

  • http://www.clippingdesign.com Clipping Design

    Nice and very interesting tips. This really help me in my design. Thanks for sharing this wonderful post. :)

  • Niubi

    Great article with some excellent information, some of which I didn’t know about and shall be implementing soon. Incidentally, DubLi have an excellent conversion rate if anyone wants to study a particular ecommerce website’s process.

  • http://www.bastiansolutions.com Gregory

    Thanks for the article its great to get a step by step check list like this.

  • http://www.benstokesmarketing.co.uk Web design Shrewsbury

    Great article – this will help out newby designers and also experienced designers alike. Thanks guys :)

  • http://www.mjswebsolutions.com Michael Swartz

    Add to the list…Make sure you include a ‘Purchase as Guest’ feature. No one likes to create an account to make a purchase.

  • http://www.amnavigator.com/blog/ Geno Prussakov

    Excellent post. I echo Martin Lucas’ point about avoiding mandatory registration (to complete checkout) at all costs.

    Also, during the shopping phase, have a “Customers Who Purchased This Also Bought” function.

  • http://feint.me Anthony Feint

    One thing I found was to make sure you provide clear links to information such as faq, shipping, payment options etc. Users really like to read this stuff before completing checkout.

  • Royston

    Nice post and got more useful points. Thanks for sharing :)

  • http://www.straightsell.com.au Todd Hobley

    Great article, this is an excellent point of reference for me, my clients and my prospects. I will be sending this to my clients and prospects as reinforcement of the value that our solution provides. Thanks for the great post!

  • http://www.3dcart.com Jimmy Rodriguez

    I’m glad the information was helpful and that it can be used as a guideline for ecommerce merchants looking to redesign or optimize their websites.

    It would be great to hear from your own experience as a designer and the results from these type of changes in conversion rates, quality of orders and returning customers. I can always use the data from your feedback and sample sites for any future studies.

    Feel free to contact me at jimmy[at]3dcart[dot]com, or via twitter (jimmy3dcart)

    Thanks!

  • http://oggettoweb.com Stanislav Lisov

    Greate tips, tnx a lot! All info is usefully!

  • http://ultimento.com Ultimento

    Good post! If you’re interested in increasing your store conversions and boost your ecommerce sales, take a look at Ultimento – the ultimate Magento ecommerce template.

    Takes 60 seconds to install.

    Thanks!

  • http://www.bazaarvoice.com/resources/stats bvdesigner

    Good post, there is one part I disagree with:
    “Keep elements like customer reviews and links to similar products closer to the bottom of the page.”

    This goes against everything we’ve ever heard from users when we test product page layouts. They express a strong preference for review content above the fold. Putting the star rating near the product image/name/price is an expected convention–it allows the consumer to make a quick decision about the quality of the product. Since it is an established convention users are trained to look for that information there–moving it to an unexpected place could result in a user assuming there are no reviews at all. Reviews drive conversion, don’t hide them.

  • Dave

    Great advice – Can anyone tell me the name of the puzzle site referred to in number 5. Let Visitors Control their Shopping Experience?

    Thanks – Dave

  • http://www.rpsjewellers.com Chandresh

    Hey nice tips. i will use it for my new website.

  • Ruud

    Creat article, such useful information is very nice!
    I have 1 question: what’s the referred website on
    step 9. – Display product variations in an intuitive manner ?

    Thnx in advance