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 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.
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.
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.
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.
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.
The Mozilla store uses a left vertical navigation menu, displaying the product categories they have in the site.
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.
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 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.
The product navigation system on this e-store is simple. You can browse by theme or by product.
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.
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.
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.
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.
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.
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.
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
The shopping cart of DesignByHumans is clear and functional.
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 shopping cart of BustedTees gives you suggestions of other things you may wish to purchase based on the items currently in your shopping cart.
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.
The Threadless shopping cart is clean and straightforward.
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.
The image slideshow on this e-commerce website takes center stage. At set intervals, it changes slides to display featured products and news.
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.
A big featured area can be seen in this e-commerce website. It takes up a significant amount of home page real estate.
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.
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 allows you to filter products by price, type and more. The e-store also allows you to sort products alphabetically or by price.
The Ten Little Monkeys e-commerce site, which sells designer clothing for kids, gives shoppers the option to sort products chronologically or by price.
Bridge55 has a vertical checklist of product attributes to help you filter products so that you can find ones that match your criteria.
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.
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.
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.
The product images on this site are beautiful and large. They integrate well with the other contents of the product page.
Photos of the wines being sold in this e-store are masterfully arranged to complement the site’s design.
Large product images secondarily serve towards the aesthetic appeal of this e-store’s web design.
Related Content
- Anatomy of an Effective Product Page Design
- Tips for Creating an Excellent E-Commerce Website
- Planning your E-Commerce Website
- Related categories: User Interface and Web Design
26 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!
Leave a Comment