Image Cloud Enhancement

ToCloud is perhaps the first website in the world to provide the concept of Image Clouds and the technology is showcased using the CloudStore an online comparison shopping website that uses these Web 2.0 Image Clouds to make it easy to compare products easily all in a single page.

After gathering statistics over the last few months, we have seen this concept being successful. We managed to get web traffic to the site and able to make some money from Amazon Affiliate program. For any successful affiliate program, there are two key ingredients required

1. Bringing traffic to your affiliate site
2. Engaging the traffic to spend time on the site and find something that helps the user make the purchasing decision

While the first of these depends on Search Engine Optimization, buying traffic through online advertising, link-building and other techniques, the later is entirely within the control of the web master. There is a saying that goes “You can only bring a horse to the water, you can’t make it drink”. Same way, with the first of the above steps, it’s only possible to bring in traffic to the website. Spending time at the website and eventually completing the transaction by clicking the affiliate link depends on what compelling value you add to the website.

From our experience, we believe that the Image Clouds offer that value proposition to our users. They are able to stop and spend time in looking at the various products and decide on the product they are interested in without having to go through too much of navigation.

However, we identified a potential problem. Many times, people search for something and end up at our website. But once they are on the website, how do they get to the exact information they are looking for? Since the image cloud is an image and the content is by default hidden and shown only when the user puts the mouse over a given product, there is no way for the user to quickly search for the string using which he/she landed on the site.

After realizing this issue and some careful thought, we enhanced our Image Clouds with the ability to search! Yes, check out Wii Games & Accessories for example. If the user ends up here searching for a specific game, then by typing in the same string in the “search this page” field, the user can immediately and visually see where the matching products are on the image cloud. All the matching clouds are highlighted.

This technology is implemented using JavaScript, DHTML and CSS. Here is how it is done

1. Using JavaScript we identify the matching products with the appropriate regular expression tested against the product details
2. Using CSS & DHTML we show the number of products that are found
3. From the HTML MAP’s AREA elements, identify the top corner of each map area that is a rectangle.
4. Using CSS (z-Index and position properties), we are able to place the highlighters on top left corner of each of the matching product’s map area within the image cloud.

That’s it and hopefully this helps us engage our visitors more on the site and see even higher conversion rates.

How We Created Product Catalog Image Clouds

When we introduced our highly interactive online product catalog image clouds, many people liked the concept and asked how we did it. So, I am taking time to explain how we are able to do this. While creating image clouds itself is not quite involved, creating the image clouds of product catalogs from Amazon ECS is a bit more involved. So, it’s in this context, I would explain how this is done.

There are 5 stages in creating these product catalogs.

Fetch Product Data Using Amazon’s ECS Web Service, and using Perl, the product information of various product categories are fetched. This is implemented using perl. The product data is available as an XML response which is parsed and captured as perl data structure. This part of the program is a standalone module that can be used for other concepts around Amazon ECS.

Fetch The Product Images From the image information within the product data, an image for each product is fetched and staged. This is again implemented in perl making use of wget. Sometimes, but rarely, amazon’s image cache servers don’t respond and so the process gets stuck. So, we use wget’s timeout parameter to timeout beyond 10 seconds. This helps most of the time as it happens only for a couple of images occasionally. There are times when the server is completely down. In this case, we simply change the ec1 to ec2 in the url and then use their other server. Some of this at present is a manual process, and we need to find a way to completely automate the process inspite of such a hiccup from the server.

Generate Image Cloud Data The Image Cloud program itself is written to be generic, so that we could also do such things as 2008 cars image clouds. Hence, in this step, the product information available as xml documents is converted into a data format that the Image Cloud program can understand. At this time the Image Cloud is not completely generic, it has some knowledge of list price, sales price and such details to change the color of the border of each image in the cloud. With more object orientation, it should be possible to make it more generic. This is also implemented in Perl.

Generate Image Cloud This is the step which actually takes the data which contains the image urls, and the cloud weights that are used in generating the image cloud. The program is written in Java, but in a script format (BeanShell). The reason for choosing Java is since I am already familiar with javax.imageio.* and Java AWT/Swing to do image processing. The reason for using BeanShell instead of just Java is well, it offers rapid development which is very desirable especially when working on new ideas that have never been there before to go with an existing algorithm/code/pseudo-code. Anyway, we first find the min and max values, then determine the layout of the cloud based on the image size of each image adjusted to the cloud weight and then finally render the image. And while rendering the image, since the coordinates of each image is available, the HTML fragment for image maps is also generated.

Generate HTML Once the gif is ready and the image map fragment is ready, now it’s time to generate the complete html file with menus and whatever the page should look like. So, this step is the final step that does this. This is again done in Perl. To provide the onmouseover effect for the image cloud, we use JavaScript. The image map generated in the previous step generates the html with onmouseover event passing a unique id of each of the image. In case of cloudstore, it happens to be Amazon product’s ASIN. When generating the HTML, the product details are aslo generated as hidden div elements which show up through the onmouseover event handler.

That’s pretty much it!