When 62 000 people click wherever they want
Welcome to indepth analysis of user behavior when told to click anywhere in a square. This was an experiment, and also a little AJAX exercise, as I haven't done anything using it in a while.
Users were told to click anywhere inside a square, and then were shown clicks of everyone else in a heatmap. The one element I added was a suggested point for users to click. Each user could only click once every 10 minutes, and there were several that tried to get around that too. Sadly I didn't keep track of those.
You can check it out here
I didn't expect to get over 60 thousand clicks, but it happened. Thanks reddit.
Just... take a moment to admire the beauty (click any image for 1000x1000 version) (below are clicks-only and heat-only versions)
I am really happy with this result already, and I am setting a part of the dots only version as my wallpaper. But wait, there's more!
Overally people tended to click towards the bottom. I think that is mainly because there was a huge empty space, as the upper part of the screen was covered with text.
There are several hotspots. The most obvious one is at the suggested point. I expected a lot of people to click there, but not this much. If only users always read instuctions like this...
Next, we see hot-spots at each corner. This was quite expected, some corners are obviously more popular than the others.
The hotspot right in the middle is quite understandable.
And finally, we have a huge hotspot at the bottom left. The most reasonable hypothesis was that it is the most natural place to click for mobile users, and I really believed it. It turned out however that it wasn't that significant factor, as you will see below. My other theory is this: as people are reading the text, they always look where they expect the next line to start. As they realize they are supposed to click already, they kind of adjust their eyes position subtly, and move further down, where is the center of the popular area.
A surprising thing to me is that there are not many clicks near the sides, I expected more to be there.
There are also several tiny misterious blobs. They were really bizzare to me, and the only logical explanation to me was someone using bots or something to just spam one random spot. But turn out they were caused by the intro text.
It turned out the text was an important thing for more than just basic explanation of the application. I did not see that coming. The text did not display exactly the same for everyone, because its size was based on the canvas size, which was based on the window size. The thing is, the text is drawn directly on the canvas html element, where if you are setting size in px, you have to provide integer (eg. size can be 23px or 24px, but not 23.5px). There are surely various work arounds and solutions to this, but I just didn't get to it. I thought that that was not a big deal. Oh how wrong I was.
Below is text displayed over the heat map. Click the image to show/hide the text. As you can see, here the text is a bit bigger than average.
Interestingly, big "O"s were pretty popular, followed by the last small "o". The dot of the exclamation mark was quite popular too.
Also, we can see that people tend to avoid clicking directly on the first line of the text.
This kind of behavior was very unexpected. I am really happy about that!
I saved timestamp of each click, so it was quite easy to reproduce the whole map in time-lapse
It is 1000x1000 by default. Below are stats like time and number of clicks. At the end it gets laggy because the heat map takes a while to render with so huge data. You can clearly see the moment when this app appeared on /r/InternetIsBeautiful and the front page of reddit.
In below image, number of clicks inside some of the most interesting areas are displayed.
And finally we see just how many people clicked on the recommended spot. It is actually about 1/30. In other words, about 3%. That's not many. That is actually very few. From the heat map, it looked much worse. So yeah, people are not sheep after all.
Another interesting thing are the corners. To keep it fair, all the square in the corners are 20x20. Basically the same amount of people clicked bottom left and upper right, but the bottom right was hit 50% more than upper left. I don't have an explanation for that.
I was thinking a bit if it really is a good idea to put the recommended spot there. But I did. It may have been a bad decision, who knows. But it is how it is and we can get some interesting data from it. Like mentioned above, only 3% of clicks were in this area, which is less than I expected. I was thinking more like 10% would click there.
Following is a close-up of the inner part of the eye, redrawn pixel by pixel based on amount of clicks on each individual pixel. The darkest one has 43 clicks. 43 people that clicked on exactly the same pixel.
Many people said (and almost complained) that the device has a huge impact on where people click. I was also convinced that it is true, until I finally took a look at the data. And I can prove with the following that device does not have much of impact actually. Click the image to toggle mobile or desktop.
Obviously the mobile users were much less accurate around the eye and corners. But generally, the pattern of mobile users and desktop users is almost identical. The only notable difference is the hot spot in bottom right quartal. That was probably caused by the device used, but other than that, it is almost the same.
Also, there were 12935 (21%) mobile taps and 46276 (79%) computer clicks. It does not check out with the total number of clicks, because I implemented mobile detection only after a while it was up.
2 users sent click with value of the android field -3.
I recorded IP of every click, mainly to prevent multiple clicks from the same IP, but since I have the data, let's look at it.
In following table, the data is written down.
|Amount of entries||Number of IPs|
The table may be confusing at first. It says "There were 72 unique IPs with 4 entries each".
And yeah, the 50 entries is by me, as I was constantly checking if everything works, and how the patterns look.
For some reason, the amount of entries does not check out, but the calculations took quite long (O(n2
)), so I don't want to run it again now. I may retry someday.
A redditor had a very good suggestion of displaying only all the subsequent clicks of users that clicked multiple times, thus the users that saw the heatmap already. The data is a bit flawed though for several reasons. There were probably numerous IPs with multiple users, or users that did not get the clicks of users loaded the first try (under a heavy load when the server was not able to process the request), and tried again in more than 10 minutes. In the following image, all those 3479 clicks are displayed. There are all the clicks except for the first one from each IP, so if a user clicked 5 times, last 4 clicks are displayed. Click to toggle basic heat map.
The heatmaps are different because the size of the data sets are so different. This is roughly 6% of all the clicks. Many people clicked near the top border, as there were huge areas of low heat. Otherwise, the general tendencies are consistent, and the 3 major hot spots (+ the Big Eye) are still there.
Very surprising thing are the corners. Cunting 20x20 squares around each corner to make it comparable to previous findings, we have 10 clicks in upper left corner, 6 in upper right, 13 in bottom left and 11 in bottom right. It is quite small dataset to make any assumptions, but the ratios here are very different from overall ratios.
In the Big Eye in the same area as in Numbers chapter, there are 142 (4.08%) of the clicks, which is interestingly considerably more than with the overall amount (3.48%). It is not a big difference, but one would expect less clicks in that area on the subsequent clicks.
In the following image, I added lines at exact quarters of the lengths. As you can see, the center hotspot is slightly to the left and top. Interesting...
Some redditors told me about the rule of thirds and advised me to try and draw lines in thirds.
Well, it fits quite nicely. Especially at the upper left part. And the eye being very near the thirds is pure coincidence. I just wrote some lines of text, and it ended up right over there.
Thanks for reading! I really enjoyed doing this project, I learned quite a lot of new things. I am really happy that people liked it. Also, this was my first reasonably big data to process, so I learned something new too.
I really loved to see all the patterns and interesting behavior, and I really enjoyed analyzing the data and writing this up. I hope you did enjoy reading it.
I would really appreciate if you checked out my other projects at boltkey.cz
Ok, that's it. Thanks for reading once again, this analysis took longer than I wanted, so I hope it is worth it.
I clicked in total 50 times, and thought that I could display only my clicks. I obviously didn't read the text, and just clicked wherever without any thought. It was the fastest way to get to the heat map for me to just add another click in the past days of maintaining and analyzing this.