A Few Unique User Interface Approaches for Ecommerce Sites

Making purchases online can be confusing, tedious, frustrating and unreliable. Most of these problems are a result of poorly planned and executed user interface design. Whether it is a badly placed checkout button, a confusing multi-step checkout process, an un-editable shopping cart, or even a poorly organized catalog, many details have to be carefully considered and in sync in order for an online store to perform at its full potential. After all, if a person is trying to buy something on your site, youve already done the hard work- selling to them! Sealing the deal should be simple and painless. Below are a few examples of well considered and well executed details in some e-commerce sites Ive run across lately:

Simple, Quick and Visual Search Results
This quick search results layer on apple.com is actually really helpful. It provides quick results as you type your query, with visual aids too.

Personalized Product Recommendations
Most larger e-commerce sites are catching on that satisfied customers will return and buy more items and gradually build trust with them, especially if the site gets to know the customers preferences. amazon.com has been building this kind of rapport with its customers for a long time, and has plenty of customer-specific recommendations on its homepage and throughout the site, provided you are logged-in. One nice detail is the visual recommendations display shown below. By clicking the arrows, your recommendations spin in perspective before you.

Another example of this can be found on the new borders.com site. Their homepage has a bookshelf display that can be personalized based upon specified preferences and your purchase history. Since I havent purchased anything on this site, its recommendations to me arent really based upon anything concrete- thats my careful way of saying, Im not a Jewel fan, really! (see below):

Simple Shopping Cart and Checkout
Planning the checkout process is probably one of the biggest pitfalls in developing e-commerce sites. What seems really straightforward on paper or in a prototype can be completely problematic once customers actually want to use it. I recently bought something on gap.com and was surprised at how well-considered and simple the entire process was. Below is a screenshot I just took of how their shopping bag keeps track of your purchases, and how simple it is to edit as you go. I threw this t-shirt into my cart as an example, which, so you know, was easy to cancel. Over $30 for a t-shirt? No thanks!

We took a very similar approach when building the shopping cart interface for our client, Cranston Print Works, at qtfabric.com. See the screenshot below (our brilliant Creative Director, Justin Kerr, came up with this almost two years before Gap did!):

Also, below is a screenshot of the checkout screen, which is really well done. Rather than having to click through multiple screens and lots of are you sure? confirmation steps, Gap has put all the steps into one flexible flash-driven application. You can edit any of your information without having to load a new page, or click back on your browser by using the simple edit buttons beneath each piece of information. Once you hit edit the area expands to show all the fields for each piece of data, which you can edit, save and then close.

I would love to see our own sites start to use some of these approaches and begin to be a bit more creative with how we approach search, catalog, and checkout interfaces. Especially checkout interfaces (the gap.com example above is my favorite- not flashy, just smart)!

Let me know if there are any other great examples out there, too.