Details, Details, Details

As we went through the iterative process of designing a new full page cart, our research revealed a number of small, but extremely valuable pieces of information that would hopefully increase the utility of the shopping cart system. We proceeded to create several paper prototypes of this new cart system, making changes with each successive version.

We found that users preferred to have small thumbnail photos of the items contained in their shopping carts in addition to a text description. The presence of the photo helped to reassure them that the correct item had actually been added to their cart. The photo also helped non-native English speakers in identifying cart contents. Although we did not test with any completely non-English speaking users, we believed that this feature would at least assist in their understanding of the cart contents.

We also learned that users preferred to have some sort of direct link back to the specific product pages for the items contained in their cart. In our prototypes, we made both the thumbnail image and the item description links to the specific item page.

Updating the shopping cart contents was found to be an important issue. Many cart systems use an "Update Cart" button to allow the user to make changes to the cart such as item quantity or item removal. However, we found that this system was poorly understood by several users. Instead, we developed programming routines that would serve to automatically update the cart and reload the page for the user upon clicking a link, a button or taking any other action from within the cart. This was especially salient in terms of changing the number of items or removing items from the cart.

In the original pop-up cart, an item could only be removed from the cart by decrementing the quantity to zero. This was found to be confusing to many users. Instead, we supplemented this feature in our prototype with an explicit "Remove Product" link. Once this explicit link was in place, no user tried to decrement the quantity to zero (even though this ability was still present).

Figure 3 - Full Page Cart Prototype
Click to View Larger Version Launched in New Window

As with the original pop-up cart, we placed prominent links to "Continue Shopping" and "Proceed to Checkout" both above and below the cart contents. Users were not confused by this redundancy and it seemed to increase the overall task success.

One interesting note about these buttons has to do with their relative positioning. In an earlier prototype, we had arranged the buttons so that the "Continue Shopping" button was on the right and the "Proceed to Checkout" button was on the left. We found that users preferred the reverse positioning. Apparently, items on the left indicate going "back" and items placed on the right indicate going "forward." Since "Continue Shopping" was considered "going back," its proper place was decided to be on the left. The converse was true of the "Proceed to Checkout" button since it was deemed to be "going forward."

Trust & Security

Users were very sensitive to the perception of trust and security as communicated by the shopping cart system. We found several simple features were responsible for helping to communicate a site's trustworthiness. The mere presence of credit card logos helped to reassure users that the site was professional and trustworthy. In addition, direct links to the site's privacy policy and customer service information were also very important in communicating trust. The presence of the Verisign logo was less important as many users did not know what it stood for, even though many had seen it before.

Summary

We examined several other features of the shopping cart system as we continued to refine our prototype. For example, we had one version that allow the entry of coupons in the shopping cart to reflect these discounts before proceeding to checkout. This is similar to showing shipping costs in the cart and was a great advantage for stores whose marketing plan included coupons.

All these elements were combined into a final prototype to be used in creating a fully functional shopping cart system. When taken in isolation, these elements are often seen as very trivial. However, the sum of these parts is certainly greater than the whole. It was only by going through the process multiple times (iterative process) that we were able to discover what combination of features worked best for the user. We began with extensive research of existing literature. We also examined numerous existing shopping cart systems for ideas of both good and bad design. We then began working on and testing prototypes of our ideas to get a better understanding of what worked and what didn't and why. Often times, our best guesses were wrong. But with time and effort, we were able to create a very suitable system that retained the advantages of the old pop-up shopping cart and extended its utility and usability in ways never before possible.