9 Characteristics of Well-Designed E-Commerce WebsitesPublished in Design
E-commerce web design and development presents some unique challenges that you won’t always face with other types of web design. For sites that exist primarily to sell products, it’s very easy to look at sales and have a measuring stick to use when evaluating the success of the website. However, there are any number of factors that can influence the success of an e-commerce site, and identifying areas of strength and weakness is not always so simple.
In this article we’ll look at nine specific factors that are generally present on well-designed e-commerce websites.
If you’re looking to build your own e-commerce website, we recommend Shopify.
1. Ease of Navigation
When attempting to sell products to visitors, the first requirement for selling a product is that the shopper has to be able to find specifically what he or she is looking for. Effective navigation is important to any website, but it’s especially critical for e-commerce sites. Lost visitors will result in lost sales, so every effort should be made to have a site with clear, logical navigation.
E-commerce sites often face considerable challenges with navigation because of the number of products that are presented on the site. Large sites, such as those of department stores, have to be especially careful with navigation, because finding what you want will usually become increasingly difficult with more options. One factor to consider is how the average visitor will attempt to find a particular product. What makes sense to the designer or to the company owing the site may not be the same path that the average visitor would take to find a product. Sufficient user testing is extremely helpful for identifying potential navigational issues.
The Pottery Barn uses a drop down navigation menu to help visitors find what they are looking for. The top level of the navigation menu contains links to the major product types that are available on their site, and hovering over a link will bring up the drop down menu that helps to narrow it down to find more specific products.
Nike’s online shop uses a vertical navigation menu. When you hover over an item, such as “Men”, you will then be presented with options for different product types, brands, collections, and sports, making it easier to narrow it down and find what you want quickly.
2. The Design Does Not Overpower the Products
The focus of an e-commerce site should be on the products that are available for purchase. A design that is extravagant for no legitimate reason will usually do more harm than good, as it will draw attention to the design of the site and away from the products. Yesterday we posted a showcase of e-commerce sites with a minimal design approach. There sites have chosen to keep the design simple so that the products don’t have to compete for the attention of visitors.
Apple uses simplicity in the design of their products as well as anyone. Their online store takes the same approach with a clean, attractive design that does not provide any distractions for shoppers.
Rapha has a beautifully design website, but it still has a rather simple approach.
Shoe Guru is another very well-designed site that avoids anything excessive. The page shown below lists the men’s athletic shoes that are available. The page simply provides a product photo, name, and price, as well as a link to the product page for more details and purchase options.
3. Easy Checkout
User experience on e-commerce sites is critical to success. If the checkout process involves too many steps or is confusing, shoppers will wind up abandoning their cart with items left unpurchased. Ideally, the checkout should involve a minimal amount of steps and should be as easy as possible for shoppers.
Add an item to your cart at White and Warren and you will immediately see the contents of your shopping cart. You will be presented with the options to continue shopping or to checkout. If you chose to checkout, you can login as an existing customer or create a new account.
At BCBGMAXAZRIA when you add an item to your bag, rather than being taken to a new page, your cart will appear on top of the page you are viewing. If you wish to checkout you can simply click the link to do so, or you can close the bag and continue shopping.
Many shoppers are influenced in their purchasing decisions by the brand, and so the need to establish a strong brand is import for both online and offline selling. In the cases of stores that sell online as well as in physical locations, the website is only a part of an overall branding strategy. In these cases the website should work well with other branding efforts of the company so that customers feel comfortable on the website.
Oakley is a well-established brand that is recognized as a leader in their industry. Their website does an effective job of working with their existing brand. It is an attractive website that stands out from many of the others that are selling sunglasses online.
Crate and Barrel’s website is well-designed and fits well with the companies overall branding.
5. The Design Style Matches the Products
Like any other type of website, e-commerce sites can have countless different design styles. However, when designing an e-commerce site it’s important to consider the style of the products that will be available on the site. This is a little bit more relevant for smaller stores with a specific type of product and for websites of a particular brand or company that has established a certain identity.
If the design style does not match very well with the particular products that are for sale, there will be a disconnect that exists and visitors may have a hard time relating to products and determining if it is right for them.
Innovative Baby sells clothing, furniture and other items for kids. The design and color scheme of their website does a good job of matching up with their products, but it still looks professional and appealing to the adults who are likely to be the ones doing the shopping.
ShopRush’s website has a trendy look that fits well with its salon products.
6. Showcases the Most Popular Products
Many e-commerce sites make an effort to showcase items that are likely to be of interest to visitors, obviously with the intention of helping visitors to find something that they will buy. A number of sites are using a large area on the homepage that they can use to promote current sales, new product lines, or whatever will generate interest. On theses sites, this area will often be updated frequently, or it may include some type of slideshow.
In the image below you will see that Eddie Bauer uses a large portion of the homepage to promote an end-of-season sale. There is a very large image and links to sale items in several categories: men, women, bags and gear, and white sale.
When you click on “Girls” at TOOBYDOO, you will arrive at the page shown below. There are links on the left to specific types of products, but a large portion of the page is used for promoting popular items. A large image of a specific item is shown with a link to buy the product. There are several different products that are promoted in a rotation.
7. Promotes Related Products
One of the keys to a successful e-commerce store is the promotion of related products that the customer may also be interested in. Sometimes you will see related products listed and shown on item detail pages, and other times you will see suggestions being made after adding an item to your cart. Promoting the right products that buyers are likely to be interested in is key regardless of the approach that is used.
When looking at the detail page of a comforter on The Company Store, visitors will be presented with related products such as cleaning and storage products. This is an excellent example because someone who is going to buy the comforter may easily be influenced to add on these other products to take care of their original purchase.
PacSun shows related products to the right of the screen on product detail pages, where they will easily be seen by all visitors that are looking at a specific product.
8. Effective, Accurate Product Photos
Selling online is different than selling in a physical store because the buyer cannot touch the product or see it in person before making a buying decision (unless they have seen it somewhere else). Providing quality photos that accurately portray the product can help to overcome this challenge and can make the buying decision easier on visitors.
REI includes many different pictures of products, in this case a tent. The pictures show the product from several different angles and stages, as well as packed up. Potential buyers will be able to get a very good feel for the product based on these photos, and not buying it because of a fear of the unknown is much less likely than would be the case without as many good photos.
Armani Exchange includes product photos from all angles so that potential buyers will not have to assume how the back or sides of an item will look.
9. Effective Site-Wide Search
Although navigation is critical for making it easy on visitors to find what they want, there is still the need to allow them to search. Some visitors will still have trouble finding a specific product even with good navigation, and with larger e-commerce sites it may often be more feasible to simply do a search than to move through several layers of links. The type of search and the amount of options that should be offered to narrow the search should be based on the size of the site and the items that are available.
At Lee, after choosing the type of product you would like to look at, the left sidebar will include some advanced search options that will narrow down the products being displayed if you are having trouble with the items that are shown.
What’s Your Experience?
What items would you add to this list of characteristics of well-designed e-commerce sites? Your comments could be based on experience designing an e-commerce site, or from the perspective of a visitor/shopper.
Other Posts from E-Commerce Week:
- E-Commerce Week Giveaway! 6 Prizes for Online Shops – DesignM.ag
- E-Commerce Web Design Toolbox – DesignM.ag
- 40+ Magento Themes for E-Commerce Websites – DesignM.ag
- 15 Resources for Setting Up an E-Commerce Site with WordPress – DesignM.ag
- 30+ CRE Loaded Templates – DesignM.ag
- Design an E-Commerce Website in Photoshop – DesignM.ag
- “Add to Cart” Button Showcase
- 20 Inspirational, Clean E-Commerce Website Designs