The World Wide Web is a privileged channel for spreading good ideas and, in this time of crisis, it could be very useful to improve a business. Internet provides many possibilities to enhance, in different ways, our activities and one of this surely is the electronic commerce.

Here the first words on Wikipedia to describe the electronic commerce:

“Electronic commerce consists of the buying and selling of products or services over electronic systems such as the Internet and other computer networks. The amount of trade conducted electronically has grown extraordinarily with widespread Internet usage. The use of commerce is conducted in this way, spurring and drawing on innovations in electronic funds transfer, supply chain management, Internet marketing, online transaction processing, electronic data interchange (EDI), inventory management systems, and automated data collection systems.”

Issues Behind An E-Commerce Website

The main goals for an e-commerce website are to sell and promote products and services. This kind of website, much more than the others, should be optimized to create a perfect user experience.

Image three visitors in a real store: the first, a pretty girl in a fashion store who are looking for new and nice clothes; the second, a crazy nerd who wants the last electronic devilry; the third, a normal guy interested in deals and discounts.
It’s evident that these potential customers need different things, and for this reason the expert dealer make use of various approaches to sell his products.

On-line the situation changes. There isn’t the direct contact between the expert merchant and the client and the front-end web developer has to create a working selling machine foreseeing the users’ reactions. As web designers, we should build a web interface that shows the right products, in the right place and in the right way to drive the customers to the “Checkout.”

There is another aspect. Our three potential buyers are looking for different products and probably they will seek in specific stores to find them. A pretty girl rarely buy her nice clothes in a generic (and nonexclusive) store, rather she trusts in a “famous” fashion store with well-designed showcase and an accomodatived salesman; our geek knows what he wants and an electronic megastore (direct and fast) could be the right choice for our friend. Who are looking for discounts need a different kind of “trust”, they want to buy good (and notorious) stuff at a low price.
On the web one of the most difficult thing to do is just to create “trust”, and through an e-store we want to sell something; clearly if the visitors don’t trust us, our mission will fail. There is an hard work for us in making a good interface for an e-store website, this work consists in understanding the target and what kind of customer we should engage.

It’s also important to evaluate if the on-line business can work, for example it’s arduous to presume that a worldly girl can buy expensive clothes on-line without to dress them at least one time (or without a good knowledge of the product), but she could buy accessories, bags and t-shirts; on the contrary it’s probably that the our young geek looks for his electronic gadget on-line. So, don’t try to sell “impossible” things on your e-store, things that the consumers with difficulty buy on-line. If you are in a business with difficult customers, be informative and provide more details and images on your on-line store.

A built-to-sell website should also provide information and announcements about products. Remember that the goal is to improve the sales, but not only on-line. In fact, creating interest on your articles through well-done descriptions and useful notes about new ways to use products (or explaining features that might not be commonly known) you can also improve the trust of the visitors in your e-store attracting clients for the future.

So, planning and designing a web interface for an on-line business you should follow three main guidelines: define your aims; design a layout for the specific target; build your website to create a perfect user experience; be informative, be serious and and your clients will have trust in you.
The main objective? You have to convert your visitors into real customers!

Note: the following tips are just some crucial points, on which, in my opinion, it is dutiful making a reflection to plan a good interface for an e-commerce website.

Focalize The Target And Choose The Right Style

Often we have seen unattractive or poorly designed e-commerce websites, but a professional looking and an opportune style is necessary for building a good presence on-line.

The Perfect Style

Define your target and what kind of consumer could buy from your shop, then you must design for them.
For example if you are selling retro football shirts it could be a good idea to create a vintage design using photos of glorious moments of the past in the history of football.
A perfect style for your target means to use an opportune color palette, a good typography and some nice design elements. An attractive website, that communicates emotions, is a good way of saying “Welcome!” to your visitors (and potential buyers).

Dog Funk – A soft grunge style for a website that sells snowboarding clothing and gear.

Toys Rus – Bright colors and a fresh looking to sell toys.

Organic SuperMarket – Grass texture and a stunning animation to promote an irish supermarket.

High-Quality Photography

Maybe the most evident trend in e-commerce website design is the use of large and high-quality images. Many designers use photos with awesome models (or simply with the products) in a clean and fresh layout to generate interest and promote the best articles. This solution might be perfect in many cases from the fashion website to the on-line store where to buy books and DVDs.

Rapha – Black and white photography in a clean layout.

Dune – Large high-quality photo for a minimal fashion website.

Republic – Stunning background photo to highlight the “New Arrivals” section.

Make your Website Usable And Boost The User Experience

An on-line store must be easy-to-use to generate regular sales, but to make a perfect selling machine an usable website is not enough. You should generate curiosity and interest in your users, you should drive the visitor in a pleasant virtual tour on your e-store.
The front-end web developer can use more tools to enhance usability and to make comfortable the navigation for the user and here we analize some solutions that might make user-friendly an e-commerce website.

Highlight Your Best Products

Make sure you’re highlighting your best products (best sellers, new arrivals, special categories of products etc…), many well-done websites use featured sections where to show their most attractive articles. A good slideshow effect helps to display more contents and for this reason the home page of many sites make use of javascript (or flash) techniques to create short galleries.

Surfride – This site use a nice slideshow gallery with large images to promote some products and discounts.

Chrome Bags Store – This is another example of a good use of slideshow in a very nice layout.

Use Call To Action Buttons

Entice your user to visit more products, or interesting stuff, using nice call to action buttons and good “hover effect” for clickable images.

Nau – Here a nice hover effect for clickable images that makes fresh and “dynamic” the website.

Cellar Thief – Some strategic call to action buttons in this layout.

Chocri / The Autumn Film – Other examples of call to action buttons.

Simplify The Navigation and Organize Your Products

Categorize and organize your contents and provide useful tools to your users to allow them an easy navigation. This is a very important point, if the shoppers don’t find their favourite products they don’t buy and our mission fails.
A good and working navigation menu is strictly necessary to boost our interface, but to manage huge lists of categories could be complicated. To solve this problem we can use a clever mega drop-down menu (some sites use also simple drop-down lists – GUI widget – but, in order to enhance usability, this isn’t a good choice).

Republic – Great example of mega drop-down menu implementation.

Zumiez – Another example of a well-done drop-down menu.

Provide An Effective Search Function

A good navigation menu isn’t sufficient. The site search function must be unexceptionable and you should also consider the possibility of adding advanced options to obtain precise results, like search by category or brand and other filters to refine your search.

Borders – Nice search box in the header.

Liga Retro – Search form with some additional options.

The Perfume Shop – Search results with an useful filter system.

Use Breadcrumb Trail

Another important feature to add to our website could be a breadcrumb trail, a navigation aid that gives users a way to keep track of their location on the site. It provides useful links to reduces clicks for returning to higher-level pages.

Master Of Malt – Example of breadcrumb in e-commerce web design.

Big Brown Box – Simple horizontal and text-based breadcrumb trail navigation.

Apple Store – The solution of Apple Store to reveal the user’s location.

Create An Exhaustive Product Page

Some statistics says that more of the user’s time is spent to know more about products. The lack of detailed article information is a common mistake that you can avoid creating an accurate product detail page in which to provide useful data (and accurate technical specifications).

You can also include related products on your product description pages to promote more articles of the same category.

Rapha – A complete product detail page.

Master Of Malt – A deatiled product page.

Bridge 55 – Deatiled images on this website.

Shopping Cart

The shopping cart is a crucial part of your e-commerce website. It must allow users to add (and remove) multiple products and to edit the quantities of items. A well-done shopping cart allows users of adding a product to their cart without leaving the page they’re on (or to provide a return-button to the last page they were on).

An effective use of icons and symbols could be necessary, in shopping cart as in other sections (like lists of features for the products), for helping the user to assimilate information more efficiently.

Crate And Barrel – Clever solution. A fixed toolbar on the bottom of the page (using Flash).

Dog Collars – Shopping cart using a modal window.

FireBox – Nice basket on the sidebar.

Checkout Process

The checkout process must be transparent and it must provide all details to complete correctly the payment. It should have as few steps as possible and they must be clear and easy-to-read.
A nice progress tracker could be a good solution to boost your checkout progress page(s) and keep it tidy and sequential.

Make sure your users know that your website is secure and that their privacy will never be compromised. Be transperent including accurate shipping rates details and precise information about the taxes; you should also provide several options for the payment (PayPal, Credit Cards, Google Checkout etc…).

It’s a good idea provide some quick checkout FAQs to simplify the communication with your users.

FireBox – Progress tracker for a checkout page.

Cafe Press – Another example of progress tracker.

Dog Collars – Example of checkout page.

Take your users (customers). Be serious, Be informative

We have understood as to create a strong trust in our users is very important to maintain a business on-line. Sure, a well-done user interface is a good presentation for your activities on the web, but consumers need safety to buy something on internet. With some tricks you can improve your reputation.

Provide Details About You and Your Company

A customer wants to know the real company (or the man) behind the e-commerce website, they are leaving their personal information (and their credit card data). They want to be sure that if there is a problem they will directly contact a real person to solve the complication. Put your contact information in a strategic position on every page of the site, provide all necessary details: email address, phone number, mailing address etc…

Write accurate pages with FAQs, privacy policy, terms of use, detailed information about shipping options, payments and… your return and exchange policy. This last point is really important: “If you are not satisfied with the merchandise you received, we are more than happy to accept returns or exchanges within 90 days of the original order” are words that sound good for the consumers and they will have a real trust in you if they read something like this on your website.

Create An Effective Communication On The Web

Well, to sell effectively you need to offer solutions and useful services to your customers through a well-designed website, but you also need several channels of communication through wich to spread spontaneous (and positive) words on your products. In order to improve your presence on-line you have to plan a clever action on social networking and bookmarking websites: creating and managing your accounts on this kind of web service, providing sharing-buttons to your users, engaging your “audience” and encouraging happy clients to share your contents through the social networks.
“Contents” doesn’t mean only the product details, but a complete description of the product with reviews and comments from users.

An on-line business can often benefit from having a direct communication with potential customers. To seriously boost your presence on the web you should consider to start a blog; to have a direct line with your customer, to facilitate the spread of your links (and products) and to receive feedbacks.

Another brilliant idea? Use video demonstrations to present your products (or services) and in a few minutes you can show more features of your high-quality stuff.

Finally, remember to make your e-commerce platform SEO-friendly.

A Showcase Of 65+ Well-Designed E-Commerce Websites

Below a massive collection of beautiful and working e-stores. They might be a good source of inspiration for your next works. Enjoy it!

Surf Ride

Me and Mommy-to-be

Big Brown Box

Itself

Lallevopuesta

Tillymoss

Fugitive Toys

One Horse Shy

Chrome Bags Store

Clothing at Tesco

Green Label Organic

Cellar Thie

Shirt Fight T-Shirts

Dog Funk

Dog Collars

20×200

Duchy of Cornwall Nursery

Piccadilly

Toys Rus

Master of Malt

Nature & Découvertes

Schokolade Von Chocri

Japnó Shop

Wood And Beyond

Ukecosas

Torn Robes

Yellow Bird Project

La Patate

Shirt City

Page CXVI

Opera Magé

The Autumn Film

Cosmicsoda

Borders

Liga Retrò

FarFetch

Weta’s Online Shop

Ride Four Ever

Hello, Bird!

Red Velvetart

I’m Walking

Feel Unique

Organic Food Ireland

Republic

Online Grocery Store

Tiger Leisure

Fat Face

Organic Vegetable Seeds

Shoes And Handbags

Shop Rush

Dune Shoes

Nau

Pixie Market

Hmv

Fire Box

Design Collectors

Cafe Press

Zumiez

Pure And Little

Apple Store

Rapha

Bridge 55

Crate and Barrel

Nineteen 47

Tommy Hilfiger

Trolley Cards

Plus De Bulles

Teesey

The Perfume Shop

9 Solutions To Build Your E-Commerce Platform

Here a list of 9 different solutions to build your own e-commerce website. Read the features and technical specifications of each of the following options to choose the opportune platform for your project.

Open Freeway

Freeway is an Open Source e-commerce platform. It doesn’t just sell products but extends to sell in some very fancy new ways and is very configurable.

Magento

Magento is a robust e-commerce software application designed to be simple and highly-customizable.
Magento’s modular architecture puts the control back in the hands of the online merchant and places no constraints on business processes and flow.

Open Cart

OpenCart is an open source PHP-based on-line shopping cart application. A robust e-commerce solution for internet merchants.

osCommerce

osCommerce is an online shop e-commerce solution. It offers a wide range of out-of-the-box features that allows on-line stores to be setup fairly quickly with ease, and is available for free as an Open Source based software.

PrestaShop

The PrestaShop e-Commerce Solution, despite its technical sophistication and advanced functionality, is very light (around 2 MB not including translation files), so it’s easy to download, install, and update.

Zen Cart

Zen Cart truly is the art of e-commerce; free, user-friendly, open source shopping cart software. The ecommerce web site design program is being developed by a group of like-minded shop owners, programmers, designers, and consultants that think ecommerce web design could be and should be done differently.

Drupal and UberCart

Ubercart is an open source e-commerce solution fully integrated with the leading open source content management system, Drupal. This is a killer combination for anyone looking to build a community around a product, sell access to premium content, offer paid file downloads, and much more, all while maintaining a seamless connection to your users.

Drupal E-Commerce

Drupal e-Commerce is a package of modules to let you create your own online store. It is totally free, open source, rich featured and flexible.

WordPress and Ecommerce Plugin

The WordPress e-Commerce plugin is a state-of-the-art e-Commerce platform with a focus on aesthetics, web standards and usability. It is both free and priceless at the same time.