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
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
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…
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?
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:
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?)
Can we deduce anything useful from this? Let me know below…