Everyone's a fan of buying or selling online. Either way it's typically seen as more convenient than the traditional brick-and-mortar alternative. Few people realize, however how much of an impact stellar design can have on the success of an ecommerce store.
Unfortunately, clever design isn't easy. There are tons of considerations for just about every major decision one can possibly make about the look and feel of his or her site.
Luckily, ecommerce retailers don't have to go it alone. Here's a handy list of 10 design tips to get you started. Some of the items in this list will include both a live shop and an ecommerce template to exemplify the tip or technique used to build a better store. Happy designing!
1. Responsive Design
If you're any kind of a reader in the Web design niche, you've probably heard of Responsive Web Design or RWD. It's imperative for making your website look good across different screen sizes. That way your products look good no matter if their on an iPhone or a big screen TV. If that weren't enough, RWD has SEO benefits.
You can purchase responsive templates, or learn how to adjust the HTML and CSS yourself to make your site respond to the user's device. Either way, make sure you have a mobile strategy in place, because the vast majority of paying customers are using their mobile's to shop these days.
2. Filters & Search
For ecommerce sites with big catalogs this is a must have. When your customers are searching through your products, if there are too many and no way to narrow down the options, they encounter a UX problem known as overwhelm. In essence, too many choices = a higher bounce rate.
You want to help eliminate all the least-likely choices for your users, so you should include search filters that can differentiate between product sizes, colors, manufacturers and so on. This way the user can customize their search and get to the products they want more quickly. That means happy customers and higher conversion rates.
3. Large Item Photos
Big images make for big sales. It's no surprise if you're familiar with TV or print advertising. You've seen gigantic product images that look way better on a screen than in real life for a long while now. The detail and attention paid to the subject photograph can give customers a positive impression of the product that just wouldn't be possible otherwise.
4. Navigation
This online store, Vashi.com, illustrates the effectiveness of prioritizing navigation. Rather than the industry standard hero image taking up the majority of the page space above the fold, Vashi has opted to dedicate the Web real estate to dropdown menu options. This allows users to quickly and easily find their way through the site via the use of categories and the process of elimination.
This drastically reduces the number of steps users have to take before they arrive at their desired content. And that's the very essence of usability: giving the user an immediate path to his or her destination. Vashi's megamenus are exactly what the ecommerce doctor ordered.
5. Call To Action & Sign-up Buttons
CTA design is a complex art all its own. The main things you have to remember are to make them obvious and unambiguous. This is normally accomplished by making them brightly colored, slightly skeuomorphic (designed to resemble something in real life, in this case a button), and with explanatory and demanding text.
6. Progressive visual features
One way to make your ecommerce site appear professional is to include such progressive visual features as video backgrounds, parallax scrolling or full-screen hero images. Features such as these add a degree of credibility to a website, gaining you user trust. Not to mention it makes your Web pages appear to be expensive, even though the implementation is often very affordable.
On Fiftythree.com we see a few of these visual effects in place. First a full-page image that's blurred in the background to emphasize the quality of the pencil in the fore. And further down the page you can see the construction of the pencil in its entire parallax scroll animated glory.
7. Attention to each pixel
Sometimes what isn't said is as important as what is. The value of a minimalist presentation can be seen with careful use of imagery, text, branding, contact info and navigation options, but not much else. Such cautious and contentious efforts against crowding on a page, can put the focus on a value proposition.
8. Shopping Cart
Did you know that more than half your customers are likely to be lost when they've already put items in their shopping carts? Having a dynamic and usable shopping cart is a major UX priority. Decreasing shopping cart abandonment can be much easier by implementing a simple and dynamic shopping cart.
Lacarotte.be hasthis down to a science. A simple mouse hover over one of their products brings up two options:
1. View
2. Buy
Clicking "Buy" immediately puts your chosen item in the shopping cart. When the customer is ready to checkout, they just click the shopping cart icon in the top right of the page and a few clicks later their order is on its way.
9. Cross-sells and upsells
Getting a user to commit to buying one of your products is difficult. However, once they've made one purchase, it becomes much easier to convince them they need to buy something else. That's where cross-selling and upselling come in.
This technique consists of making special offers on one or more items when purchased simultaneously with another. Or just recommending other items that are similar or complementary to the one the user is currently viewing. It's a common technique, for example, to let buyers know they can purchase two items to get them cheaper than they would for the individual purchase. This is an extremely common technique and as such it's featured in a variety of premium templates.
10. Clean, product-focused design
Finally, your ecommerce store should always have a clear idea of what its purpose is: namely the selling of products. Therefore, put your products at the forefront of your real estate above the fold, and eliminate anything that draws attention away from the product image, price, title and other relevant information that users will need to make a purchase.
Forward-Thinking
Remember that there are always improvements that can be made to your designs, especially in relation to ecommerce, and the effects of your changes are always pretty immediately available thanks to your handy page analytics. Experiment with some of these tips and tricks to see what kind of an effect great design can have on your bottom line.
What are your favorite design techniques for ecommerce sites? Let us know in the comments.
