2009-02-15 23:42:57 - Articles

Click Heat Map Testing

With all the crazy JavaScript special effects, AJAX interactivity, and complicated interface layouts, it can be difficult to gauge just how easy it is for viewers to find what they are looking for. Recently I have been playing around with a few different ways to determine how users are navigating through my site without having an expensive dedicated focus group.

The first thing I needed to know about my viewers is what they were clicking on. I did this by developing a click heat map using JavaScript and AJAX to determine mouse position and asynchronously send the x,y coordinates to my database. Once I had the data from my users I simply used PHP and the GD Library to create an overlay image of color coded dots. Depending on how many clicks were clustered in an x,y range, the color of the dots would change from light blue to bright red.

With the click heat map I can now see exactly where my visitors are clicking to determine what elements they think are clickable. With this information I can optimize my information architecture and see which areas I need to change for a better user experience.

This wasn't enough though, as I still didn't know how exactly how users were browsing through my site. I took the click heat map one step further and added mouse tracking. Using some simple JavaScript and a large array I recorded every movement that viewers mouses made. Using an image of a mouse cursor and some JavaScript I was able to play back a user session and see how their mouse moved through my site. So that users wouldn't experience any lag or other issues of constantly sending information to a database, I only submitted the mouse movements to the DB once the user left the page. With these systems combined I am now able to see exactly how users are navigating my site, creating a powerful tool in usability optimization.

You can see a working demo here of the click heat map and mouse tracking

Check it out, every user session is recorded. Change the id number in the query string to see additional visitor mouse movements.