Design Pattern? On-page Shopping Cart Summary

19 Jun 2008 - 4:06pm
8 years ago
1 reply
2443 reads

Before I get to my post, I have to apologize to the list. A while back, I posted a request for a website critique and received LOTS of excellent feedback and suggestions. I haven't had a chance to reply and thank you all for this yet, so here it is: THANK YOU!

Now to my "actual" post...

Has anyone seen a documented design pattern for an on-page shopping cart summary?

The site I design for,, has one in the right-hand "sidebar", right below the registration/sign-in area.

I like having an on-page summary for a variety of reasons. For our customers, it's nice to have an easily-viewed running list of things in the cart while you shop, because what you add to your cart next is often affected by what you've already added. It's nice to have the ability to reference the cart summary, without having to go to another page, and without being interrupted.

We've received nothing but positive feedback on this from our customers. Yay!

Ok, now my question is... could this be improved upon?

My concern is that while it is convenient to have the on-page cart summary, could it also be a distraction when the main focus shouldn't be the cart summary? Another concern of mine is that during times when the customer isn't necessarily using the cart summary, it's just dead space, using up valuable screen real estate.

One idea I had was spurred by what you can see on They hide the cart summary from view until something happens... if you add something to your cart, the summary appears for a moment, confirming that the item is now in your cart, and it then slides back away from view, leaving a smaller "summary" telling you the number of items that are in your cart. And actually, I think the on-page summary only gives you information about the most recent item added.

I'm considering a combination of what we currently use, and what uses. I'm thinking that our on-page cart summary would behave very similarly to the one on, with a few slight differences. The summary will slide into view whenever an item is added to the cart, and it will slide away if it doesn't get any attention from the user. When the summary is in view, it will show a complete list of items in the cart. When the summary is "minimized", it will have a link to "show cart summary", which can be used to toggle the full-view. I think this potentially combines the best of both systems, for use with our kind of shopping experience because 1. it gives instant access to check your cart contents, without taking the customer away from their current task, and 2. it cleans up the page/experience by only showing the customer the cart summary when it's either obviously relevant, or when they request it.

Would this improve the experience, or would it be even more distracting or annoying than simply keeping the cart summary on the page at all times?


20 Jun 2008 - 1:16am
Itamar Medeiros

have you checked UI Patterns (

{ Itamar Medeiros } Information Designer

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new

Syndicate content Get the feed