UCD Concepts

Today I came across the Google Shopping Cart beta widget.  Now this isn’t exactly a new idea, but Google has done a pretty good job with the dynamics of the cart.

Let’s start by showing you a picture of the page at its default state.

Notice the “View Cart” at the top right?  This is always in the top right corner of the web page.  This is how it looks by default when first coming to the page.  There are a variety of items (none of which interest me) that can be added to the cart.

Let’s pretend I have added a few items to my cart.  When each item is added, the most recently added item is placed at the top of the cart and the background of that row is highlighted as show below:

The item seems to be highlighted on a timer and the highlight color fades to white after about 3 seconds.  This is an excellent visual cue for the user when the item is added and highlighted so they can quickly scan the cart to confirm the item is indeed there.

Notice the clean lines separating each item?  I would hope the styles were customizable though so that the cart can tie in nicely with e-commerce storefronts.

The cart automatically minimizes when the users clicks elsewhere on the site other than the cart itself.  The user can also click the top row where it displays “View Cart (# items)” to minimize the cart as well.

The interaction model works well here and I would question if any other indicators, to minimize the cart, are necessary.  Mainly I would question if there needs to be the ability to have the cart open when the user moves their cursor over it.  The cursor turns into a hand on mouseover, to signify that it is clickable, but would every user know to mouse over that area?  Is the right arrow enough of an indicator to the user?

My guess is that users will easily learn this is clickable by discovery if they already don’t know it.  Of course, I have

So I’ve got one more screenshot to share with you that displays an item removed from the cart.

You’ll notice the “has been removed.” text underneath the item that has been removed.  The nice thing is that it stays there until the cart minimizes and the next time that opens, the item will no longer be showing. 

Other nice features of this cart are:

When the user adds an item that already exists in the cart, and the attributes of that item are the same, it just increases the quantity of the item by one.  There is no need for an additional line item of the same product.

There is also affordance text that lets the user know that shipping and taxes will be on the next page.  The text is nice to have instead of making the user not knowing what to do about the shipping and taxes. 

I would suggest automatically calculating the charges if the ZIP/Postal Code was already known.  If not, I have seen many sites take the national average for taxes (6.00%)  and calculate that with messaging that lets the user know that total may fluctuate depending on where the item is being shipped to.

I also really like the quick response of the item being added to the cart.  AJAX style functionality can sometimes go a long way with something so small. 

Overall, I think Google has done an excellent job with their shopping cart widget.  I would love to know the issues they ran across in any usability tests they may have done.  Yes, I am assuming that they performed usability testing on this widget.  If not, it’s a pretty good start.

Check out (pun intended) the new Google Shopping Cart widget.  It’s still in beta so I don’t know how long the link will remain available.

Cheers.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.