Plotting the exact X/Y coordinates of clicks on a page

   Print.Print
Email.Email weblog link
Blog this.Blog this
Dan Zambonini

Dan Zambonini
Feb. 28, 2006 02:03 AM
Permalink

Atom feed for this author. RSS 1.0 feed for this author. RSS 2.0 feed for this author.

We've worked with the National Maritime Museum in London for many years (who use our CMS, Amaxus). Over this time their web site has become incredibly successful, but now it's time for a design refresh, which will start with a number of real user-testing sessions.

To complement this, we decided to record the exact position of any clicks on their homepage, to see if people's click behaviour could tell us anything interesting about the current site. So one of our developers, Jon, used his lightning AJAX skills to quickly set-up the sending of a tiny XML message for every click on the page (that includes data such as: X, Y, user agent, text size setting, browser window size, etc.).

We then plotted this data using a variety of techniques (simple red crosses for clicks, grid-based heat maps, and Jon even made a lovely normal-distribution heat map). Many of the patterns we saw are not specific to the template, so I thought I'd share these with you.

First, a quick disclosure: all non IE-on-a-PC clicks have been removed (because other browsers render the page slightly differently), as have clicks from users that have non-default 'text size' (again, which causes the X/Y of clicks to be meaningless when combined together), and any users internal to the museum.

People click towards the middle (horizontally) of a link

The top menu of the NMM site, with clicks marked

As a consequence of Fitts' law (perhaps?), there was a definite trend towards the centre of links.

A slight trend towards the bottom of links

The calendar from the NMM site, with clicks marked

As also demonstrated in the first image, there was a slight, if definite, trend for clicks to be slightly lower than the vertical centre of the link. Is this so that the user can still read the text of the link before clicking?

People click towards the left of text boxes...

The search input field from the NMM site, with clicks marked

OK, so I've extrapolated this result from a single text box, but it would seem to make sense. In English, we're used to writing left-to-right, so do we perhaps try to position the cursor in the left of the available 'space'?

... and the bottom right of buttons?

The search button from the NMM site, with clicks marked

This needs a much larger variety of tests, but from the single button on the page, the clicks were concentrated in the bottom right corner. It would also be interesting to test the difference between square buttons and rectangular buttons. Actually, Jon's normal-distribution map shows this better:

The search button from the NMM site, with a heat map of clicks overlayed.

Next steps...

We're currently recording data from a few other sites, to get a better idea of generic patterns. If anyone out there can translate any of this into meaningful guidance for design, then let me know below! (For example, if people click towards the left of text boxes, should you not place links close to their left edge, in case of accidental clicks?)

Dan Zambonini is the Technical Director of Box UK, a UK-based Internet Development and Consultancy company. An advocate of Semantic Web and XML technologies, he works with XML, XSL, RDF, SVG, P3P, OWL, XHTML, CSS, XForms, and a whole bunch of other acronyms.