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:
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?)
Can we deduce anything useful from this? Let me know below…
Bottom of links
Remember that there's a strong focusing effect caused by the mouse pointer. Just as people use their fingers to hold a place in a book, or sight along their arm when looking at a sign, they use the mouse to focus their attention.
They move the pointer to the button, then read it, then click. Therefore, they need to have it in the lower right - because the arrow points to the upper left - in order to read the text. Many people who are not young and immersed in computer use have difficulty clicking on the fly: they move the mouse, make sure it's where they want it, then click. If the default arrow pointed to the upper right, I believe that you'd see a bias to the lower left.
Get in contact with an optometrist, opthalmologist, or other vision specialist and I suspect you'll find a lot of other interesting things. In fact, there ought to be some good academic papers in your data.
Bottom of links
In my browser (Firefox under Windows XP), the arrow cursor turns into a finger cursor over buttons and links. The hand cursor covers a bit more of the text below the pointer end than would be the case had it remained an arrow. So, there is more of a need to keep the pointer in the bottom part of the button or link in order to be able to read it.
Hebrew or Arabic?
Or other languages that read right-to-left? I suspect you'd see left-right inversion on most of your data.
Center of vision is… uh, central
I’m pretty sure you’ll find that the center of vision and the pointer tend to roughly coincide when people move the mouse; one follows the other, though which one follows which may vary.
Given that, I’m pretty sure the left-end trend on text inputs is because that’s where you look, because that’s where a) the label is, b) the caret will appear, and c) entered text will appear.
As for the bottom of links and buttons, I think this is a consequence of the fact that the active spot of the pointer is at its tip at the top; this means that if you aim at the bottom of a vertically narrow area, you’re more likely to fall within it. If you aim at the top, you’re more likely to overshoot.
Niggly note: the man was called Paul Fitts, not Fitt, so it’s Fitts’ law, not Fitt’s law.
Center of vision is… uh, central
Re: Fitts' law. D'oh! Thanks + Fixed.
I get the feeling from the pictures mapping the click locations that some users are actually missing on their first attempt to click. Unfortuantely this data was not collected.
I have designed our companys website but I cannot define the correct places of the buttons. When I click a button, there opens another page.
please help me