Example of E-Commerce

Xtreme Mac

Xtreme Mac has the most original and innovative shopping experience  Xtreme Mac interface to be beautiful and all out fun to play with. Getting your visitors to not only be impressed with your site design but actually enjoy the shopping experience is the holy grail of e-commerce design. The more they enjoy your site, the more time they spend on it. Which, theoretically, makes them more likely to actually buy something (the ultimate goal of any e-commerce site).

Icon Dock

Right off the bat you can see that Icon Dock is a beautiful site full of top notch illustrations.  Some websites make it quite difficult to see and edit the contents of your cart, but Icon Dock gives you a visual “dock” of icons that stays with you as you shop. When you want to add something to it, you simply drag the icon to the dock to drop it in. Then if you want to remove anything from the dock, simply hit the little “x” on the icon.

This is crafted in such an intuitive manner that you really don’t need any instruction. It works exactly like you expect it would. And for those who don’t get it right away, there’s still the old option of clicking an “add to cart” button. This is an important feature. When designing a uniquely interactive interface, always think about whether you should still include the traditional way for those who might not understand your fancy new idea. This allows you to blaze your own path in interactivity while preserving usability.

Nike

Nike has integrated everything on the page in a visually seamless manner. They’ve got well over ten unique sections on a single page, yet it looks completely cohesive. Let’s look at a few of the things they’ve done to accomplish this. The first thing they’ve done to cut clutter is fairly simple. Instead of stacking randomly-sized banners promoting different items on top of each other like Kmart, Nike has one primary banner that rotates between three messages. This surely isn’t groundbreaking, but it’s something too few designers consider when faced with loading a page to the brim with content. Prebuilt libraries like jQuery make this type of rotating content a cinch and can really make an otherwise static page come alive in a subtle, non-annoying way.The next thing Nike has done to cut clutter is to put all the sections below the main banner on a continuous background color to avoid that “dropped in” look you get with the sale item boxes in Kmart’s design. This makes the entire page look as if it were built at the same time by the same designers, as opposed to having an old design that you keep cramming more and more mismatched items into over time. It’s all about synergy folks.

Dyson

The lesson we can learn from Dyson is that you can make shopping for a vacuum feel like shopping for a Mercedes. No matter what you happen to be selling, if you want it to look high end, get your inspiration from websites that sell luxury cars, yachts or anything else that costs more than you make in a year. The black and gray background is really complemented by splashes of white and/or blue that really jump off the page with contrast. What really steals the show is the product photography (no doubt as much Photoshop as actual photo), which really captures the essence of the attractive product design. Also notice the rotating banner as with the Nike example. You’ll see this again and again throughout the examples below for good reason, it’s just a great way to put a ton of content into a small space without any visual clutter.

Ikea

Ikea wins the prize for the most interactive shopping experience. When I get the Ikea catalog in the mail, my wife and I love to sit down together and flip through it together for design ideas and to see what cool new products they’ve come up with. This is enjoyable because the Ikea experience has been carefully structured so that flipping through the catalog is just like walking through their showroom. Instead of being presented with individual items, you see custom photography of an entire room completely made up of Ikea products. They give you helpful breakdowns of what each item costs as well as the cost of buying the entire room as a set. This helps normal people who don’t know much about interior design create beautiful rooms.

Recently, Ikea has transferred this experience to their online store. What you get is an experience that’s a lot like flipping through the catalog, only much more interactive and dynamic. You can click on the icons next to certain products to get a closer look or view hidden features, change views to look around the room, or skip the room view and look at a simple grid of products. Like some of the other examples above, Ikea is shooting for a shopping experience that is not only enjoyable, but could even be considered fun. If you’re building an e-commerce site, think about how you can liven up the experience by adding something a bit more interactive than your average online store.