Click Survey Analysis & Heatmap 30 July, 2006 — Stuart Brown

Interpretations and ramifications from a web design point of view

Posted in Web Design, Interactivity and Usability
Tagged with: , , , , , ,

You may have seen this recent click survey featured on the front page of Digg.com - over 40,000 people participated and were invited to click on 8 different images - wherever they felt inclined to. We take a look at some of the results, and see what this means for web designers and usability analysts.

You can see the images and the results below, along with a few new processed images showing the overall, horizontal and vertical bias heatmaps for an aggregate of all the results. For the results of the 8 tests, hover over the image with your mouse.

Blank image

The blank image serves as a useful control - we can see what sort of clicks will be made without any form of stimulus in the image.

The results show a saltire cross type distribution, with a lot of people clicking on the corners, and directly in the centre of the image. There is also a small proliferation of clicks near the mid-points of each of the image sides.

Bisected image

This image, divided equally into two halves, gives a double-cross in each of the two halves. Interestingly, the pattern for each of the segments almost exactly matches the profile of the control image, although the division between the two sections has the largest aggregation of clicks.

As most web pages are divided up into boxes in this fashion, we can start to see the effects of dividing up the space, and see how new 'hot-spots' can be created.

Central circle

The circle, as you might expect, draws the majority of the interaction, and it is the absolute centre of the image that garners most attention.

The perimeter is also quite hot, although the 8-pointed cross type pattern seen in the other rectangular patterns is still quite apparent.

Directive text

The directive text draws most of the attention - and the phrase 'click here' is often used in navigation on the web to good effect. We can also see an increase rate of activity in the opposite corner, however, as some users will intentionally disregard the text.

The typical centre and corner pattern is still quite apparent.

Smiley face

This pattern is very similar to test number 3 - the centered black circle - although the pattern of clicks is rather different, thanks to the addition of a smiling face.

The clicks are congregated on the axis of symmetry on the face - the image center, and the eyes and mouth draw quite a lot of attention as well. The centre of the face is the hottest area - although the actual centre of the frame, just between the eyes, and the 'forehead' of the smiley face are quite hot as well.

Inverted circle

This test is similar to the black centered circle - in fact, it's exactly the same layout, only with inverted colours. You would expect to see the exact same click pattern - and it is similar - but there is one interesting difference.

On the black-on-light circle, the clicks near the perimeter were outside the circle radius - but in this case, the majority of clicks are either on or inside the diameter. This suggests a tendency to click on a lighter colour, rather than the black background.

Inverse directive text

Perhaps showing a lack of imagination, most of the subjects clicked on the instruction not to. The concentration is reduced over the word 'don't' though- so perhaps the negative word has some effect?

Those who elected not to click it chose either the diametrically opposite corner, or the lateral opposite edge (top left, directly above).

Bisecting lines

This test diagram isn't much to look at - it's just a pair of bisecting lines, after all - but the most dramatic change in the users behavior was seen with this test.

The ends of each of the lines attracted a lot of attention, but the major pattern of clicks is shifted 30 degrees clockwise, in line with the median line between the two bisecting lines. The bisection point is the hottest area, and 4 lines project off in the centre of the white space - interestingly enough, not the lines themselves.

Overall (overlaid/combined) heatmap

Combining, averaging and recolouring all the above heatmaps yields this result - the green areas are the 'hottest', and the blues are coldest.

The overall heatmap shows the general trend for centred clicks, with the flares present in the corners. It should be noted that the scale added in the lower right of the heatmaps has produced an artificial hotspot.

We can see that, as well as the central and corner trends, the overall heat is slightly concentrated in the top portion of the map - this implies that the subjects were more likely to click nearer the top of the image. This trend is more apparent in the next heatmap - a horizontal average of all clicks.

Horizontal bias heatmap

The horizontal bias heatmap shows the same central hot stripe in the middle of the vertical axis - we can also see more clearly the top-heaviness of the heatmap, with more clicks appearing above the central line than below.

The top edge of the map is surprisingly cool - this may imply that users are less likely to click near the top of an entity - this may be due to the general use of a header at the top of pages, with the main content beneath. This rapid fall off offers an interesting insight to the behaviour of users.

The lower pink stripe in this particular heatmap is due in part to the scale common to the initial result maps and the Inverse Directive Text test.

Vertical bias heatmap

A vertical representation of clicks shows a much more uniform result - the central stripe is still present, indicating that the central option is the most predominant, and we see a rapid decrease in clicks as we traverse from the centre, in a roughly symmetrical shape.

The cold spots at the left and right side of the map are reminiscent of page margins - it may be the case that the common use of white space in layout and design at the sides of pages may be a factor in terms of user behaviour.

Bilateral bias heatmap

Combining the horizontal and vertical heatmaps with an overlay gives us an impression of the bilateral distribution of clicks. Again, the top-heavy bias is clearly visible here, by the more intense pink colour and the elongated shape of the hot green central diamond.