When we made our website, we decided to place three small text blocks on the main page, telling briefly about our company, the services we provide and the technology we use. And the question arose: in what order to arrange them?
The first thought was to put "About the Company", then "Technologies" and then "Services". The idea was as follows: when a visitor downloads a site, his view is most often in the middle of the screen. He will see the selected text blocks on the page, read the name of the middle (and, perhaps, a few words from the text), then his glance will jump to the pictures in the header, after which the visitor glances over the menu and returns to reading the middle block to understand what speech After that, he will translate his gaze to the right (since the movement from left to right is more natural when reading) and rests on the story about services (of course, if he does not click on the “more” link). Well, and then (again, if you do not click on the link) go read about the company.
That is, according to this theory, the middle block should have become the most readable, then the right block and then the left block. And after the testing, the heat map seemed to confirm this: ')
And the maps of the first seconds of being on the site confirmed our assumptions:
To look not only at the pictures, but also at the numbers, we identified areas of interest to us on the page and calculated the following parameters (in the table are mean values):
Areas
one
2
3
Menu
Time to first commit (s)
6
1.8
3.7
6
Number of fixations
77
81
69
13
Number of previous commits
18
6
14
sixteen
Total fixation time (s)
108
103
81
22
It would seem that the numbers also confirm our initial assumption ... But ...
A small remark. After reading the rest of the text, I beg you to refrain from commenting in the style of “well, it's obvious!” ... In our work, we are constantly confronted with the fact that after some error is revealed, various people explain very convincingly that this error quite obvious and almost classic. It even becomes unclear why no one paid attention to it before testing ... But I was distracted by this ...
So, we noticed that on a heat map "hot" areas are near the headings, and suggested that looking at small logos in headlines is not necessarily correlated with reading the text. Therefore, we reduced the areas by removing the heading and a couple of top lines of text from them, after which the picture changed dramatically:
Areas
one
2
3
Menu
Time to first commit (s)
15
37
24
6
Number of fixations
53
49
46
13
Number of previous commits
46
66
133
sixteen
Total fixation time (s)
76
59
51
22
As you can see, in all respects the left text block wins the rest. Well, for greater clarity, we used one of our “know-hows”, changing the parameters for selecting fixations - leaving only long-term and increasing the allowable radius of glances - this method works well in analyzing text and allows you to quickly select readable areas. It turned out quite indicative picture:
Well, and then we decided to see what effect can be obtained from a similar rearrangement of blocks in real life. Idazhe themselves were surprised: when the column “about the company” was on the left, the “more details” link accounted for just over 1% of the total clicks on the main page, and the “services and prices” were about 2. After changing places, the “services” became click 7%, and the “company” - 1. The total number of clicks increased by about 4%, i.e. it was the conversion of visitors that increased, and the transitions were not just redistributed.
Well, for those who are interested, below are videos showing how visitors are watching this page. Each frame of the video represents a map in the previous two seconds.