3 Gorgeous e-Commerce User Interfaces

One could argue that when it comes to the Internet that the pointy end of the spear will always be the e-Commerce sites. After all, if you’re not actually selling something on the web, then who knows what you’re doing on there (I’m teasing!). And if you are selling something then your life (or at least livelihood) depends on traffic and sales (I’m not teasing!).

Selling services online is nothing like selling products. It’s easy for brochure sites to reel in people. All they need is sensible navigation, relevant content, clear calls-to-action and a smart marketing plan that drives people to the site.

e-Commerce sites need all of that and more. They need near perfect user interfaces (UI) and remarkable user experiences (UX).

Some people might argue that those two things, UI and UX, are basically the same thing. I am one who believes there are significant differences.

UI is the interaction between humans and machines. It is the ability for the user to effectively conduct a particular operation and control the machine. Good UI design allows feedback from the machine to aid the operator in making operational decisions. Good UI is also intuitive, enjoyable and efficient and creates an environment where the operator provides minimal input to achieve desired output(s).

UX design takes that one step further. It defines a sequence of interactions between a user and a system, whether virtual or physical, that is designed to meet or support user needs and goals.

A clean navigational structure on a website is good UI. The act of someone using that navigation and arriving at a particular goal in a manner that is free from confusion, missteps or crutches (add-on fixes) is good UX.

I have recently finished one e-Commerce consulting engagement and am about to embark on another. In both cases, a portion of the project was or is being devoted to cleaning up some cumbersome user experiences. I like to use examples in my UI/UX comparison presentation so the client can get a visual understanding of good design. These three sites I have come to find represent near perfect e-Commerce user experiences:

Jaqk Cellers

Jaqk Cellers e-Commerce UI Screenshot

Without question, the website is exquisite. The colors are wonderfully muted so that the wine bottles are beautifully showcased and the navigation is foolproof. Look at that screenshot of the cart! Could it be any easier to use? The design team truly lived by the principle that you know you are finished with the design not when there is nothing else to add, but when there is nothing more to remove. My only critique comes in that some of the links do not have a hover state, meaning they do not change when I roll over them. The same applies to a couple of boxes on the page. I think when you get this stripped down you need a little link interaction so the user doesn’t miss what can and cannot be clicked. Beautiful.

Bridge 55

Bridge 55 e-Commerce UI Screenshot

There is a lot to love with the Bridge 55 site. It’s clean, the cart is intuitively functional and the design is wonderful. As they say, God is in the details, and there isn’t a single detail that has been overlooked. Even the littlest graphical elements have a custom touch…all of it pulling the site together perfectly. I especially like the top of the page; the navigation is clean and the cart details easy to see and interact with. Another big plus is the fact that their blog uses the same page header so it is a seamless transition to and from the blog. My dislikes? Well, I don’t have many, but there are a few buttons that have the same look and color as the Add To Cart button. It’s not really that big of a deal except for the Add This button (for social media adds) which could easily be mistaken for the Add To Cart and may actually stand out more than it should with the orange plus sign on it. I am also not a big fan of the homepage, which has a feature element that looks like it was designed by someone from another planet (or the marketing department).

Anthropologie

Anthropologie e-Commerce UI Screenshot

There is no doubt that this is the best e-Commerce site I think I have ever seen. It is truly perfect when it comes to UI/UX. The navigation is so simple, even as you move through the site, that it almost seems like they are selling two or three sweaters and a couple pairs of shoes. But don’t be fooled, they have a lot of stuff on this site and it is easy to find, review, add to your cart….and buy! The design is modern and clean with tons of white space and the muted colors make the products leap off the page. I especially like the next and previous arrows on the top right of the item page that let you navigate through the entire collection without having to return to the full collection page. But, there’s a handy link to the full collection too if you need it. My only complaint…that would be the ugly Facebook Like button they have on the item page. They have some other social media buttons on the page that have been redesigned so they go with their site, so I am not sure why they have the blue Like button plopped on there like that unless it’s to make sure it is recognizable (but it does detract from the design….and I am not yet convinced those stupid Like buttons really have that much ROI in them!).

I hope you find these three sites as compelling as I do. If you have some you think are standouts, please share them. I am always looking for great examples.