Shopping online can be a frustrating experience, if you don’t know exactly what you are looking for. If you are looking to buy a gift for a friend, or pamper yourself with something you haven’t exactly decided yet, the online experience can be quite demanding on specificity. For this the offline experience of browsing through a store looking at different products till you find something that suits is unparalleled.
It is such an experience that Amazon has tried to create with its new Flash-based WindowShop interface for their store. Rather than a traditional web-like interface, WindowShop offers a more dynamic and rich application-like interface for borrowing their wares.
The idea behind Amazon WindowShop is simple enough, when the the application loads, it is hard to see what is special about it. Right across the top you have at the left-most the Amazon WindowShop logo, clicking on which takes you back to the home state of the application; next is the navigation, a simplistic back button and a browse button, the purpose of these will become clear later; a search option is also present. On the right-most is an option to log in, or if already signed in, a welcome message for the user signed in; finally a menu button that displays a menu with links to the “About Us”, “Conditions of Use”, “Privacy Policy” and such.
The second row contain a list of categories of products, and the products from the each category listed in that column. The products are displayed as tiles, an image followed by the name of the product, its creator (the author for books, the manufacturer for electronics etc.), its price, and a logo of Amazon’s Prime service if the same is supported for the product. The products listed on the home page are all bestselling or newly released products (as appropriate for the category), and the same is indicated in the column titles.
Seems pretty standard till now? Here is where Amazon WindowShopper truly starts showing its RIA features. Amazon has a navigation widget in the bottom-right of the interface that has buttons for left, right, top and down which allow you to browser through the list of products. The tile-list containing the list of products is immense is size. It goes on for 32 columns, and as far as we were able to judge, as many as a hundred rows!
In essence Amazon WindowShopper is displaying thousands (3200) of products on one page, yet it loads rather fast. How does it accomplish this? It “streams” in data for the products as you move around. Usually the browsing experience is hampered by the loading times as you click for the next page and wait for the next page to appear. Here you instead merely scroll horizontally or vertically along the product grid till you see a product you like.
Scrolling though is one place where the application lacks. It doesn’t support scrolling using the mouse’s scrolling mechanism. It does however support scrolling by clicking and dragging in any direction, although this is more comfortable on a touch device, and scrolling using the keyboard’s navigation keys. Of course you can also use the scrolling widget we mentioned earlier. Not being able to use the mouse scroll buttons makes it less friendly to desktop users since it abandons an existing mode of interaction that people take for granted.This combined with the lack of any scrollbars means that some people will be prone to mistaking the contents of the home-page for the entire collection.
Clicking on a column leads to further refinement of product selection. For example clicking on “Bestsellers Televisions & Video” will move this category to the left-most column, and replace the previous columns with those that display subcategories within this category. This replacement of the products displayed is almost instantaneous if you have a decent connection.
Here for example we can see “Digital Media Devices”, “Disc Players and Recorders”, “Projection Screens” etc. As before, only the bestsellers in each category are shown, however, considering that as many as a hundred rows are displayed, this is still quite a bit.
Further refinement is possible by clicking on one of the columns again. You can continue drilling down if the category has that much depth of content. For example you could go from “Kindle Store” to “Books” to “Comics & Graphic Novels” to “Graphic Novels” which still shows 9 columns! To go back to the previous less-specialized category list you can use the back button we mentioned before.
The search box serves the obvious purpose of filtering the product list based on the text you enter. This also modifies the columns, which are no limited to categories that actually have matches for the entered product.
The “Browse” button on the other hand provides another way of browsing the selection. The default is to list the bestsellers, however the browse menu accessed via the browse button offers other options, such as “New Releases & Pre-orders”, “Movers and Shakers”, “Most Gifted”, and “Most Wished For”.
Clicking on any product will pop up a window with details about the product, such as the rating, images, product details, reviews and related products. Here you will find a “Buy on Amazon” button that takes you to the actual Amazon page for the product, and lets you complete your purchase. Or you can add it tor your Amazon wishlist, to purchase it in the future. When a detail window is open, there are also navigation controls at the top and bottom of the interface that let you move up and down the column quickly.
 |
 |
| The white bars above / below navigate along the column | The detailed view page |
 |
 |
| Reviews page | Related products page |
Overall Amazon WindowShopper is a brilliant and rich way to browse the Amazon store. It is innovative not in how it presents the information, but rather in is interaction design. Nearly every shopping site will support displaying products in tiled display, however here they blend together the seams in navigation making the browsing experience smooth. Amazon WindowShopper is available on the Google Chrome store and for the iPad, although any computer with the Flash Runtime installed should be able to access it directly from its web address.