Some merchants might not realize it, but the design of their online storefronts-from the landing page to the shopping cart-has a direct effect on sales. Even the smallest of design elements can improve or harm conversion rates, and this tutorial will tell you five things you can do as a web developer to increase online sales.
Think about it from a shopper's perspective. It seems pretty clear that you want your shopping process to be as intuitive as possible-but a lot of online storefronts don't practice what they preach. Sometimes, web stores get too artsy with their designs. Others use flash animations that can slow down the shopper's browser. Still others use color schemes that send the wrong signals to shoppers.
Performing A/B testing on your online storefront is an important part of making sure your site appeals to customers and makes shopping as intuitive as possible. There is a range of ways that different design elements can affect online users, and testing helps put those ways in perspective. With more than ten years of experience designing online storefronts, we've seen enough to know what the "dos and don'ts" of web store design look like.
Here are five tips on how you can turn more visitors into customers and seriously improve conversion rates using some simple design techniques.
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.
Optimize your "add-to-cart" buttons
Site visitors and customers respond differently to different calls to action. For instance, if your "add-to-cart" button says "more details" or "learn more," our experience has been that customers don't react as well to this kind of indirect call-to-action. In contrast, an "add-to-cart" button that says "buy now" is a specific, direct call to action that elicits a much more positive response from shoppers.
Coloring is also an important design element here. Blue and green are gentler colors that usually cause people to follow up, whereas orange and red can 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.
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. So many elements on any given page mean a complex organization process.
The first element should always be the product images. The shopper wants to see exactly what he or she is getting for the money. After that, make sure to feature 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.
Clarify your navigation paths
Hidden menus and other elements on the page are very ineffective and can sometimes lead to shopper frustration. One of the most important parts of clarifying your navigation is by avoiding hidden elements on the page.
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 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 carts, a "continue shopping" button makes returning to shopping as intuitive as possible.
Eliminate distractions from your checkout page
When your customer proceeds to the checkout, you want them to go in a very specific direction. So, when you're designing your checkout, this is the time to remove items like left sidebar navigation to define a clear path to the goal.
Ignore the urge to continue selling into the checkout process. Every second between landing and checking-out 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. In 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. A good checkout experience will stay in the shopper's mind.
