Image Cloud Enhancement

Posted on January 12, 2008


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.