The very best eCommerce websites share a few common characteristics. First, they are easy to use and navigate. After all, the more time it takes a shopper to find what they’re looking for, the more likely they are to abandon your site.
Secondly, they pay attention to the little details that make the user experience all the more enjoyable. Whether it’s the ability to configure a product in real time or even simple microinteractions, everything is designed to keep shoppers engaged.
In all, it’s about converting window shoppers into full-fledged customers. And the most successful shops have this down to a science.
Today, we’ll take a look at some of these concepts in action. We’ve scoured the archives of CodePen, searching for features that, with a little elbow grease, can be added to any eCommerce site. Let’s get started!
The Complete Toolbox for Web Designers
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
Build Your Own Office
People love visual experiences, and the ability to configure a product this way brings a great deal of flexibility. This desk configuration tool lets you pick and choose components and visually represents your choices on the screen. It’s also a nice touch that it automatically shows various setups via a slideshow. This shows potential customers some possibilities, before they even click.
Pick a Card
Card layouts are extremely popular these days, as they are a great way to let each item have its own well-defined space. This product card example is unique in that, when you hover over it, purchasing options appear (size, color and an “Add to cart” button). It could be a very efficient way to list a lot of products, while allowing visitors to select options and add items without having to leave the page.
What a Vue
There’s something to be said for a shopping experience that provides all the relevant data in an easy-to-use format. Take this product listing for example. Powered by Vue.js, it allows users to quickly add items to their cart. But the real star of the show is the cart contents display at the bottom right. It instantly updates the cost and items ordered. Plus, it allows for quantity changes and clearing the cart. Very handy!
The checkout process should be as simple as possible, while allowing customers to complete it all very quickly. This concept is a multistep panel that asks for only a few relevant pieces of information at a time. While single-page checkouts are fashionable, they can sometimes bombard you with too many fields. However, this alternative makes for a less stressful experience.
Make It Mobile
As more people use their mobile devices to make purchases, it’s vital that your shop serves up a great experience on small screens. Here we have a mobile product page that is reminiscent of the product card above. It uses a scroll bar to allow users to view product details and features both wish list and add to cart buttons. Everything you need is right there.
The Amazing Flying Product
Animation can be an effective means of providing context to user actions. This is especially useful in eCommerce applications. For example, when you add a product to this cart, a copy of the item “flies” towards the cart icon (located on the upper right). To add further confirmation, the cart tilts to affirm that it has received the item. The idea is to leave no doubt in the user’s mind about what’s happening.
A shopping cart contents page should be intuitive. Shoppers, for example, will need to know what the next steps are and how to make changes. This React-powered cart page has a clean look and some killer features. It’s easy to change product quantities and all of the totals update instantly.
Size Me Up
For items like clothing, size is an important consideration. You want to make sure that customers have easy access to this information. Here, we see a simple button. But click it and you’ll find a handy size guide that is broken down into an accordion menu. Go further and you’ll see tabbed navigation as well. It’s a straightforward, no-nonsense and mobile-friendly way to deliver this info.
Online Shopping with Users in Mind
When building an eCommerce website, there is no shortage of shopping cart applications available – not to mention the option of building your own. But, regardless of which path you take, it’s important to consider every feature’s user-friendliness.
The examples above could fit in nicely with any one of these solutions, from a WooCommerce site to a completely bespoke configuration. It’s proof that, while the platform is always a consideration, it’s the UI that affects customers most.
If you’d like to check out more interesting examples, take a look at our CodePen Collection.
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets
- 6 M-Commerce Design Practices to Help Improve Your Sales in 2019
- Key UX Considerations for Optimizing eCommerce Product Pages
- The eCommerce UX Mistakes That Drive Us Nuts
- Three Common UI Trends eCommerce Loves But Should Hate
- Concepts & Design Trends for Modern eCommerce Web Design
- Share Your Story with These Terrific Timelines
- 12 Stunning Retro Neon Effects in Web Design