A couple days ago Tim Haines posted a blog entry where he asked his readers to chime in on how we thought AJAX could be used to improve the usability of his online shop, HandyShop. I’ve been pretty busy of late so am just now getting around to responding. I haven’t had a chance to follow all the responses up to now so hopefully people won’t yell at me too bad when I duplicate their idea. I feel as though I might be violating the “spirit” of a blogversation by not “listening” to what others have said up to now, but I’m doing it anyway! 
AJAX is a nice fancy term for using XML over HTTP. It’s nothing all that new but it has a fancy name now so is “all the rage”. I think the most important thing to keep in mind when considering how to use AJAX is to remember the reasons one would choose to use AJAX in the first place. The web doesn’t provide the greatest user experience to visitors. Every time they perform an action, especially in the .NET world, they’re paying the price. The price is of course the amount of time it takes to post back to the server to respond to their action. The beauty of AJAX is that we can begin to offer users a more responsive and thus more usable interface. We begin to be able to offer some “Smart Client’ish” things to our users.
Ok, so get to the friggin point already, right? How can we use AJAX to improve a shopping cart?
The most important thing you can offer visitors of your website is the ability to view your items. If you’re smart you’re going to let the user view the items in different colors, sizes, and shapes [HandyShop View Item page]. You should let them view the item as part of an outfit, recommend things that go nicely with what your selling and if possible allow them to add that item to an “outfit”. To be fair this isn’t really something I thought up, a client that I worked with at my previous gig (I just switched gig’s for those of you who didn’t know) did a bunch of interesting things with this that could be improved with AJAX. The client is/was anthropologie.com. Go take a look at their “Create a look” functionality. When viewing a given item they show related items that make up a “look”. Although we didn’t really use AJAX we did have some client side script which feels a little AJAX’ish. In the right hand column is the upsell items for the item currently being viewed. Since the upsell item shown may not be something the user particularly likes they can view other items by clicking “previous” or “next”. This allows them to “shuffle through” the related items until they’re able to find something they like. Clicking on “Add to Outfit” doesn’t do anything AJAX’y but it sure would be cool if you could. I really like the idea of viewing items as an outfit, and I really like the idea of using AJAX to make it a very pleasant experience for the user.
The other feature that you can see on the Anthro site is the ability to view any item in different colors. Again not totally AJAX but a nice touch for a user visiting the site. Finally providing the visitor with different views (front, back, on a model) of your product with the ability to zoom, pan, and feel your product are nice features that could benefit from AJAX as well.
Ok, now let’s jump back to summary/category pages. On any summary pages such as this page on HandyShop, AJAX should be used to allow the user to sort, filter, and group items. It’d be cool if on a category/summary page the user could start hiding items. Clicking a “remove” could “fly” the item over the the right “waiting area”. Then the user could slowly filter the items down to the items they’re interested in. Another cool feature would be the ability to filter items in a summary page using AJAX. Imagine having a color, or price filter at the top of the page I linked to above. As the user works his way through the filters the items in the list could slowly be filtered down using AJAX. Then if you could view the items side by side, again with lots of AJAX thrown in, you’d be in the money!
So anyway I think a shopping site could definitely use AJAX in a lot of interesting ways to display items, allow the user to select alternate colors and sizes to view, as well as present upsell and cross sell items. Additionally the upsell and cross sell items should be able to be added to the current view so visitors can see items together to decide if they should buy it all, or just a single item. Provide them with interesting ways of sorting and filtering category pages, and allow them to work their way through the items in a way that allows them to find just what they want.
After the user’s viewing an item they should be able to add an item to the cart. They should then be able to update the cart’s contents again with some superdy duperdy snazzy AJAX functionality. The entire “cart experience” should be done using AJAX to help ensure the user doesn’t get frustrated with all our posts backs and bail.
Since the demo Handy Shop doesn’t have too many other areas within it other then displaying items lets move on to checkout. As I stated just above I think working with the shopping cart should be done using ajax. It’d be nice if a user could hover over an item to view a preview image of the product they have in their cart (in case they forgot). Integrating cross sell and upsells directly into the cart view with the ability to add those items to the cart could definitely help increase sales as well. Other minor things that the current checkout does via postbacks that I think should be done client side are:
– Selecting to use your billing address as your shipping address
– Updating quantities and recalculating totals
Although HandyShop doesn’t have very many steps during checkout I think using AJAX to step the user through the checkout process could be something that would be well received by users. Often times retailers force us to step through a 4–5 step process with annoying page refreshes in between. Side note: isn’t it funny that now that we have this super new “cool” technology it so easy to being being picky about the things we’ve been accepting as a fact of life for so long? Ok, back on topic. So by making the checkout process a single screen with various panels and inputs being hidden and shown and necessary data being sent back using AJAX I think we could create a checkout experience that customers would come back too time and time again.
Anyway, I’m sure I could ramble on for a little while longer but I think it’s best if I stop now. It’s amazing how when you’re procrastinating you can find time to ramble on about things such as how to improve a store with AJAX.
In summary…
AJAX is cool. Making money from an online shop is cool. Making MORE money from an online shop because of excellent use of AJAX is the coolest. 