< Back to Design Stream

Case Study: Shopping interfaces

Ubercart is the awesome shopping cart suite for Drupal.

The default Ubercart interface is as functional as it is boring:

Key Features of Ubercart

-Easily to identify what products you have added to your cart. -Gives the most important in a concise and easy to access manner. -Deadly boring -Table layout gives it a Web 1.0 look. -The remove column is slightly confusing - Ticks mean accept, so why would you tick to remove something?

Alternatives to Ubercart

I had a look on the web for alternative designs:

Loop De lou

Loop-De-Loo uses a table layout like Ubercart, but the use of dotted lines helps to make the table less prominent, avoiding the web 1.0 look.

A narrow canvas area for the table keeps content closer together and easier to follow which again avoids the need for a table look.

Unlike Ubercart, the keep shopping and check out buttons are closer together and at the bottom right corner of the page. This makes it easier for the user to work out what to do next when they have added an item to the cart. The update cart button is also in a more logical place.

Pay Pal

Pay Pal's cart interface isn't that much better than Ubercart, in the sense that it has a web 1.0 table look. However, there are a few crucial improvements: -The interface uses paler colours to make the table less prominent. -Like Loop De Loop the Update Cart, Continue Shopping & Checkout buttons are in a more logical place.

Adagio

Adagio does away with a cart screen and displays the cart screen and keeps the contents of a cart in the block that is consistently on display.

This has a number of benefits: -It's clearer and easier for the end user to keep track of what is in their cart -Adding items to the cart does not interrupt the flow of the shopping experience.

It doesn't work very well on Adagio, because the site has quite a busy interface. However, on a site that is less cluttered, Adagio's approach could work very well.

Fox Cubs

Fox Cubs interface is similar to Loop-De-Loops in that takes the table layout but makes it subtle. It uses delete buttons in place of check boxes which is more intuitive.

Placing the continue shopping button at the top, however, is confusing - especially, as the checkout heading separates the content above from the checkout area.

Words for Life

Words for life tries to avoid the table look but fails due to the inconsistent use of alignment. However, a nice feature is the use of product icons which are more recognisable than names.

Threadless

Threadless takes the approach of Words for Life but makes it work through the use of better alignment and clearer sectional markers. The colour bars work because they bring order, but as they are pale, they don't dominate the layout.

Little Paper Planes

Little Paper Planes uses a stripped down table look that suits the elegant style of the website.

Metro Park USA

Metropark contains one of the nicest checkout interfaces. It takes the traditional table layout but modernizes by using coloured bars. The only real weakness is the checkout now button, which should really be on the right to compliment the reading breeze.

Stuck Apparel

Stucka apparel uses a table layout but forgoes the cell lines to make it more modern.

Key information is in bold colours while secondary information is separated with dotted lines.

Sturck Apparel uses bold colours for the most important information and dotted lines for secondary information.

Panic Goods

Panic Goods contains an awesome shopping cart. It is Java based, but it should be possible to reproduce the functionality in Ubercart: 1. Select which products you want by dragging them into the cart.

2. Products appear in cart.

3. On the cart screen, you quickly modify all your products on one screen. No need to delete items and then put them back in your cart if you change your mind about the size.

Create and Barrel Like Panic Goods, Crate and Barrel contain another example of an excellent Java based cart that shouldn't be too difficult to replicate in Ubercart.

1. The floating footer contains the cart, making it easily accessible.

2. When you place a product in the cart, a pop-up dialogue briefly and unobtrusively appears, making it easy to locate.

3. You can click on items on the cart and change their attributes without having to leave the current page.

4. When finished, you can click the checkout button to go to the checkout screen.

The page uses a table but avoids the web 1.0 look in the following ways: -Careful use of colour - A bold coloured frame directs attention to the content. Paler colours bring structure to the table without over dominating it. -Key words are in bold. Less important information is in grey to make it recede. -Recognisable Buttons make it easy to access key cart functions. -The buttons are small to avoid over dominating page.

The continue shopping button is discretely consigned to the left side. On other websites this would be a problem, as the cart screen is displayed every time a purchase is made. Here it isn't, as the cart is continually displayed in the footer and so the cart screen will only be accessed when the user is ready to pay for the goods.

Return to Design Stream

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.