Documenting Usability Testing with Heatmaps
At Rackspace Email & Apps, the usability of our website, Control Panel, and internal tools is paramount. We can’t create a fanatical experience for our product if they are hard or confusing to use. In our existing usability testing (card sorting, paper prototyping and HTML prototypes), I saw a gap in our ability analyze subtle patterns that occur during these tests. It’s hard to notice everything when you are taking notes furiously, so I set out to create a tool to record mouse movements during our usability tests.
The canvas feature of HTML 5 was chosen over Flash or a desktop app for this task because of its open-source status and its ability to run on any modern browser without a plugin.
Step 1: Add Canvas to Page
$('body').prepend('<div id='showpath' style='cursor: pointer; position: absolute; top: 0px; right: 0px;'&rt;Show Tracking</div>'); $('body').prepend('<canvas style='position: absolute; top: 0px; left: 00px; z-index: -1;' id='canvas' height='2775px' width='1110px'></canvas>');
This jQuery code adds the canvas tag right after the body of the page along with an element that will show us the path when the test is done. It’s height and width are hard coded. The z-index of -1 is a crucial step — this keeps our page elements interactive since they will be above the canvas element.
Step 2: Setup Canvas Settings
var ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 2; ctx.strokeStyle = '#f00';
This snippet of code stores the canvas element in a variable for speed and sets color/weight of the line that is going to represent the mouse movement.
Step 3: Capturing Mouse Movement
$("html").mousemove(function(e){ ctx.lineTo(e.pageX, e.pageY); });
These three lines of jQuery add a mousemove event to the HTML tag of the page. This will allow us to capture any movement on the entire page. Note that the path is not stroked yet, so none of this drawing will be visible to the user.
Step 4: Capturing Mouse Clicks
$("html").click(function(e){ ctx.lineWidth = 2; ctx.arc(e.clientX,e.clientY,4,0,(Math.PI*360)/2, false); ctx.lineWidth = 1; });
This code is very similar to the last step. Instead of just drawing a line, a circle (ctx.arc) is drawn at the exact position the click was made. Capturing mouse clicks during usability testing is very helpful for figuring out if a test subject is trying to click on elements that you don’t have as links.
Step 5: Show the Recorded Mouse Movement
$("#showpath").click(function(){ ctx.stroke(); $('#canvas').replaceWith('< img id="mouseimage" style="position: absolute; top: 0px; left: 0px;" src="'+ document.getElementById('canvas').toDataURL() + '" />'); $('#mouseimage').css('z-index','99' ); });
The final step is to show the movement that was recorded during the test. This entire action is attached as a click event on the div added at the very beginning. First, the path we’ve generated is stroked. The next line is a complicated looking piece of code that just exports our canvas drawing as a PNG so that it can be saved when the test is over. If you didn’t do this, you would be forced to screenshot the page to save the path. The last step is to increase the z-index of the canvas element so that you can see it overlaid over the entire page.
Step 6: Create A Bookmarklet to Add Tracking
A browser bookmarklet provides and easy way for you to add tracking to any page, no matter where it is hosted. To add the bookmarklet, first download the mouseTracking.js file and stick it on a publically accessible server:
Now all you need to do is stick the following javascript in the location field of a bookmark:
javascript:(function(){ _my_script=document.createElement('SCRIPT'); _my_script.type='text/javascript'; _my_script.src='http://www.yourdomain.com/mouseTracking.js'; document.getElementsByTagName('head')[0].appendChild(_my_script); })();
How Do I Use This Data?
At Rackspace Email & Apps, we’ve found that the best way to view this information is though a heatmap. Our heatmaps are generated by opening up the PNG in Photoshop and adding a gradient glow. Below is an example of some of our heatmaps and how they supplement our written notes during a usability test.
Background: We were testing this pricing calculator to see if it effectively communicated the savings that our customers could gain by using our Hybrid Exchange and Rackspace Email product.
Benefit of Mouse Tracking: The second bar was the element that controlled the amount of savings, and these heatmaps provide a quick visual to the design team that customers are interacting with the calculator in the correct way.
