Essential E-Commerce Website Features: Tips and Examples

Jul 8 2011 by Mohammad Moradi | 27 Comments

Essential E-Commerce Website Features: Tips and Examples

There are many different approaches you can take when designing an e-store. However, you might notice that effective e-commerce websites have certain site features that are absolutely critical to the shopper’s experience.

We will look at these common features that you will find in almost all e-commerce websites.

Product Navigation

Perhaps the most important component of an online store is its navigation system.

Good website navigation is essential for any site, but much more so for e-commerce sites. Users need to have the ability to browse among different categories and products quickly through an intuitive navigation system. Investing in the information architecture of an e-commerce website is paramount in the site’s success.

Amazon

Amazon has had one the best-designed (and also extensive) navigation systems out there. The categories of the products that can be found on the site are well organized and give users the ability to swiftly navigate between different product categories.

As you’ll see in the preceding examples, a left vertical navigation menu is popular because it allows us to include more links versus a horizontal navigation menu.

Amazon

Overstock

Overstock represents its comprehensive primary product navigation system as a vertical menu bar. In addition to the site’s primary navigation menu, Overstock has a robust navigation menu in the site’s footer.

Overstock

Overstock

Olive & Myrtle

This e-commerce site sells eco-friendly products. It has a vertical navigation menu on the left. They chose to style the "Sale" link so that it’s bold and in red in order to make it more prominent.

Olive & Myrtle

Via Snella

When an e-store has a small amount of products or product categories, a horizontal menu bar can be all that’s needed for product navigation. In the example below, you can see that Via Snella, a male fashion company that’s only been in business since 2006, can get away with a simple filter navigation arranged horizontally.

4th Street Cookie Company

The 4th Street Cookie Company is primarily a physical, brick-and-mortar store. However, they complement their physical store sales through their online shop. The product navigation in this case doesn’t need to be as extensive as a store like Amazon.com, since the cookie company only has a handful of unique products to offer. They’ve resorted to a thumbnail navigation for navigation to product pages.

4th Street Cookie Company

Mozilla Store

The Mozilla store uses a left vertical navigation menu, displaying the product categories they have in the site.

Mozilla Store

etnies

This e-store provides shoppers two ways to browse products: a vertical navigation menu and a drop-down menu that appears when you hover over the "Shop" menu item in the site’s horizontal menu bar.

Trilby Phoenix

In this e-store, you can browse products using the left vertical navigation menu. The menu is subdivided into three main categories. Clicking on one of the main categories displays more links.

Empire Patio Covers

Empire Patio Covers uses a horizontal navigation menu. To get around the lack of space that’s associated with fixed horizontal navigation menus, submenu items are progressively disclosed using drop-down menus.

Empire Patio Covers

OneHorseShy

The product navigation system on this e-store is simple. You can browse by theme or by product.

OneHorseShy

Search Box

Having a clear and well-positioned search box is crucial to an e-commerce site. The ability to search an e-commerce website is very important because many online buyers have a specific item that they are looking for. A search box is a powerful site feature that will improve findability and navigability.

Often, search boxes in e-commerce stores are in very prominent positions, high up in the layout, enticing the user to search the site for the product they want.

Etsy

The search box of Etsy is a jutting fixture of the site’s design. It also allows you to limit your search within specific categories.

Etsy

TasteBook

This e-commerce site has a search box that’s highly visible and placed in a high-value location. It has placeholder text to give users ideas on what they could search.

TasteBook

Cosmicsoda

The search box in Cosmicsoda is located on the right sidebar. Its unusual shape and eye-catching design can draw the attention of site users.

Cosmicsoda

ThinkGeek

ThinkGeek places its search box on top of the vertical product navigation menu to make it easy to find. In addition, grouping the search box and product navigation menu makes sense because they are two site features that can be used together.

ThinkGeek

Airfix

Airfix has a search box widget that has options for advanced search criteria filtering. This example demonstrates a good way to provide a persistent advanced search feature that’s compact.

Airfix

Shopping Cart

A shopping cart is almost always present in e-commerce stores. The shopping cart is usually the first screen in a checkout process. Products in the user’s shopping cart are typically displayed in a table/matrix format.

Its purpose is to display the items that the user has decided to purchase. It’s a highly functional feature that gives you a summary of the things you’re buying.

Common elements of shopping cart pages are:

  • Product name
  • Short product description (if the product name needs further explanation)
  • Product’s price
  • Total cost of products in the shopping cart
  • Product image thumbnail that displays a preview of the item
  • Quantity box that allows users to modify the number of items they want to purchase

DesignByHumans

The shopping cart of DesignByHumans is clear and functional.

DesignByHumans

The Brown Corporation

This example displays most of the common features we repeatedly see in shopping cart pages: quantity box, cost summary, the ability to remove a product or modify the quantity you want to purchase, etc.

The Brown Corporation

BustedTees

The shopping cart of BustedTees gives you suggestions of other things you may wish to purchase based on the items currently in your shopping cart.

BustedTees

Atom Bicycles

When you hover over the shopping cart icon on this e-commerce website, instead of being directed to a shopping cart page, it will show you a short summary of items in your cart. This is a convenient way for shoppers to quickly see what they have placed in their cart without having to wait for another web page to load.

Atom Bicycles

Threadless

The Threadless shopping cart is clean and straightforward.

Threadless

Featured Products

Often, e-commerce stores have certain products they want to highlight. These products are often found on the front page of the site. These products are usually items that are on sale/clearance or new items that have recently been added to the inventory.

There are many ways to put featured products on center stage. A popular method is to have an image slideshow at the top of the home page’s layout.

Alexandalexa

The image slideshow on this e-commerce website takes center stage. At set intervals, it changes slides to display featured products and news.

Alexandalexa

Rifle Paper Co.

Featured products on the Rifle Paper Co. website are displayed in an image slideshow, as well as in a 3-column thumbnail arrangement below the main slideshow.

Rifle Paper Co.

River Island

A big featured area can be seen in this e-commerce website. It takes up a significant amount of home page real estate.

River Island

Chicago L-Shirts

Featured items in this e-commerce website are displayed as the site’s background. As you navigate through the items using the left and right arrows on the left, the background image changes.

Chicago L-Shirts

Product View Filtering and Sorting

When displaying a category of products or a list of search query results, having the ability to filter or sort products can greatly enhance the ability of the user to find exactly what she’s looking for.

Crate&Barrel

Crate&Barrel allows you to filter products by price, type and more. The e-store also allows you to sort products alphabetically or by price.

Crate&Barrel

Ten Little Monkeys

The Ten Little Monkeys e-commerce site, which sells designer clothing for kids, gives shoppers the option to sort products chronologically or by price.

Ten Little Monkeys

Bridge55

Bridge55 has a vertical checklist of product attributes to help you filter products so that you can find ones that match your criteria.

Bridge55

Product Images

The main disadvantage of e-commerce websites when compared to traditional physical retail stores is that websites can’t give shoppers the ability to touch and see products.

Thus, images of the products being sold must be included and displayed in an enticing way. Images must be big enough to see details and features of a product.

Free People Clothing Boutique

This clothing e-store has high-resolution images. Browsing through product photos gives shoppers an interesting user interface that allows them to drag their mouse over areas of the photo to see the area in greater detail/resolution.

Free People Clothing Boutique

Storenvy

Many e-stores place thumbnails of other product images below the current image. However, in this example, they are arranged vertically on the right side of the current product image being viewed, making them highly visible to users.

Jules

The product images on this site are beautiful and large. They integrate well with the other contents of the product page.

Jules

Black Estate Vineyard

Photos of the wines being sold in this e-store are masterfully arranged to complement the site’s design.

Black Estate Vineyard

Jax Vineyards

Large product images secondarily serve towards the aesthetic appeal of this e-store’s web design.

Related Content

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer. Contact him via moradi.c85@gmail.com. (He likes email among others!)

27 Comments

NoeG

July 8th, 2011

Very good to know I’m going to keep this in mind when I make my first E-Commerce site thanks

Evan Skuthorpe

July 8th, 2011

I don’t think navigation is the most important element of an ecommerce website to be honest. I think search refinement is the most important aspect.

Mark Jones

July 8th, 2011

Great article, however I would love to see another article by yourself with information about the latest functionality to include on an ecommerce site.

The reason I ask is because I have recently created a simple t-shirt ecommerce web site selling t-shirts for a new company I am working for. I was wondering if you could give me some good functionality ideas to put into my ecommerce site.

I have already got functionality such as related products, wish list and Facebook like links on the t-shirt product pages etc, but something along these line is what I am looking for.

Much Appreciated

Kent Mauresmo

July 8th, 2011

Amazon is great! I think the best feature that Amazon has is the “People who bought this item also purchased…” ..then it refers you to similar products.

That really helps me shop on Amazon especially when im looking for Jewelry.

Sirwan

July 9th, 2011

Quality article man thanks for this

Chris Duhon

July 10th, 2011

Having am interface or software that manages user analytics and customer feedback is very important. It helps in improving the product cycle and branding of the company.

Irina

July 11th, 2011

I’ve only designed an ecommerce site once and it was quite challenging. It may seem that designing a site, whether it’s a simple brochure or an ecommerce, is one and same thing. But I found that it’s rather different and requires a lot more careful planning. Will definitely keep this article in mind, when I design an ecommerce next time.

Tim

July 11th, 2011

Amazon’s navigation sucks. It is well organized, the problem is that they just carry too much stuff. No one I know uses the navigation. They go right to the search field and type in what they’re looking for. Their site might as well look more like Google.
Amazon’s search refinement IS good, though. However, their page layout is not. There is too much information/text. And their Add to Cart button needs to be larger. It is not a friendly site for senior citizens to shop.

Kadee Gray

July 11th, 2011

Great tips – we work with a lot of eCommerce clients and this is helpful to keep up on what’s working, what isn’t and share it with our customer and fan base. Thank you!

Mark Lemon

July 11th, 2011

Good info and useful, as I’m ready to upgrade our current site http://www.co2meter.com. However, it would be helpful to know if these solutions are available using out-of-the-box e-commerce packages, or if they are custom designs (Amazon is, obviously).

Elisabeth

July 11th, 2011

Great Post!! thank you ;)

Mohammad

July 12th, 2011

Thanks everyone for comments.

@Mark
I’m going to write up another article around this topic ASAP, but now I think the most proper way you could get inspired is to review similar stores , of course popular ones. the rationale behind this suggestion is most of users often shop from famous stores and this way they used to (and like to) see their features in others.(they compare your shop with them) the AMAZON is a good proof.
we can see lots of similarities among it and others.
In fact (usually)giants make defacto standards.
Anyway it doesn’t deny creativity.as an example see onirikstore.com/.

Crusher

July 12th, 2011

I’d like the 9th. very nice, and adopt to design for clothes

steff

July 13th, 2011

these are probably the best ecommerce websites in the world. sites like amazon must have the best functionalities and design, otherwise they won’t be recognized as the best ecommerce site in the world. plus it’s easy to create websites like those when you have unlimited money…

Kristin Currier

July 14th, 2011

This is great. I work as an eCommerce designer, especially in dealing with product photography, so I am glad to see some attention paid to that. We have a photo studio with professional photographers (and me the Photoshop web queen) to get our photos looking rad. If you are selling high-quality lifestyle goods, don’t skimp with a point-and-shoot and fail to do any serious color/tonal correcting and sharpening or people won’t respond the way you want.

We’re currently re-designing our homepage and shopping cart. It’s been a loooong time coming, and we’re all pretty excited about it. I have 1 .psd mockup almost ready, looking at these examples makes me want to try some different configurations. Thanks for the inspiration.

I used to work as a brick-and-mortar designer of sorts. Merchandise, fixture and sign placement. Funny now how I still do that, now for web. For both situations, thinking like a customer is the key.

Nils Berlin

July 14th, 2011

There are some great ideas for tuning conversion rates in this post! Thanks a lot.

Russell Poulter

July 15th, 2011

Nice round up & good article. Bookmarked!

Matthew Wehrly

July 15th, 2011

Thanks for the article, a lot of useful info here. I think your examples show the importance of high quality collateral when selling products, whether digital or physical. Keep up the good work.

Best-
Matthew Wehrly

Mark Jones

July 17th, 2011

@Mohammad

Thanks for your advice. I have been looking at many web sites as you said to try and find new functionality and found a few good ideas. ONIRIK,CafePress and MoreTVicar just to name a few. I will keep an eye out also on Amazons functionality to give me some ideas. You mentioned about writing a new article, I would appreciate it if you could let me know when you have posted this new article as I would be very interested in reading it. Thanks again

Olivia Heller

July 17th, 2011

Creating an e-commerce website might be really challenging, and a functionality list with examples is very handy. Great article! Thanx for posting it.

Paul

July 27th, 2011

This article is a must-read for designers looking to create good experiences for their users.

Keep up the good publishing, Six Revisions.

Mark

July 28th, 2011

I would like to see this is really a good article for e-commerce website and theme designer. Thank you for compiling all information for a one . If I am going to browse internet for these thing It would take long time. You have saved our time with quality article

Kiran

August 3rd, 2011

Very inspiration tips for design Navigation, Product Display and Simplicity… All the best!

Cobalt

September 16th, 2011

Great information. How does the above apply to saas products such as online project management software?

MDsouza

November 2nd, 2011

I think you hit the nail on the head, navigation is the most important component, without it the end user would be lost. Great stuff, keep it coming.

Vv

November 4th, 2011

How do you guys feel about “Famous Cookies on 4th street” How is there organization and consistency? how is there navigation? how is there product page? how is there communication, ease of purchase, and technology? And finally would you guys have recommendations to improve such a simple site Thanks!

Razibul Hassan

June 19th, 2013

Product Videos, Compare products, Loyalty points, Cross and Up Selling features, Flexible shipping options, Easy and intuitive checkout, Shipment calculator, Multiple product images/ 360 degree view of the product, share in Social media after checkout are some really necessary features for the better online business.

Thanks for the article. It provides a good insight on the eCommerce features. I’d love to read some of your articles related to necessary ecommerce features.

Leave a Comment

Subscribe to the comments on this article.