E-commerce Site


User want to shop for a product.


Create a 'virtual' store where visitors can browse, choose and pay for all their selections in one go.

From www.amazon.com

Use when

When visitors can buy products or services online. The number of products can be bought is not very important, this pattern applies very every basic online shopping site.


The basic e-commerce site is based around the same idea as a normal shop; you search for the products and put them in you cart until you decide to actually buy them. The main real difference is that people cannot 'touch' the products before buying them. So for successful commerce sites it is really important to make users 'feel good' about buying the product. You need to make sure they know EXACTLY what it is they are buying. use pictures or animations to show all relevant aspects of the products. Sometimes, a 3D model that people can manipulate can be a nice way to reach that 'touching the product' feeling online.

An e-commerce site is based around the following components: The home-page | When users visit an e-commerce site, it must be clear that products can be bought. This can be achieved by showing a Shopping Cart, an icon for accessing the cart or a mini-cart, on the home-page. Also list some categories of products that you sell. Use a pay-off to give a reason why visitors should buy at your site and not any other site.

An E-commerce site is based on the following principle; personal, effective, and efficient. When people shop online, the following issues are very important to take into account: The Shopping Experience | The first part in the shopping experience is getting people to buy something. If you are trying to sell something, you need to put the products under the users' nose as much as you can without overdoing it. Show what you have, what is popular/hot/new/ etc. For example using various Hotlist. When they see products, make sure they resemble the real thing as much as possible and let them 'virtually' touch/use the product. Also allow for Product Comparison in order to help people choose

When you allow for Login, visitors can be recognized for even better suggestions. The site can offer recommendations based on previous purchases or wish-lists.
Once people have found a product they want to buy, use the Shopping Cart for dealing with the purchase process. Make sure your design is clear and effective. You must show additional cost such as shipping costs at all times and be flexible with things such as delivery addresses.

The second part of the shopping experience is about actually getting the product you ordered and making sure the customers is happy with the purchase. Offer the possibility to track the order and offer information about what to do when something has gone wrong e.g. the wrong product was delivered or the product was damaged.

The third part concerns the creation of extra value so that people keep on using the site and buy more products. Using personalization in the form of recommendations is a nice way to suggest relevant products to returning customers. Other possibilities are 'wish lists' or 'favorite readings' that people can share with other visitors of the site.


The basic ideas behind an e-commerce site is to mimic a normal shop. The essentials are simple but getting the details right can be hard and have a big impact on your success.

More Examples

This example from Esprit shows an interesting approach. User can shop for clothes and once the arrive at a product they can see the item in different colors, see the material from close-by (the zoom button) and how it looks on a person (fitting button). Just as you would in a shop. It also shows in the bottom of the screen how many items you have in your cart and the total amount.

plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below