April 4, 2010 at 14:41Website development using eye-tracker: stage one - layout testing
One of the most successful and useful options for using eye-tracker is testing the site during its development. Moreover, the more testing is carried out at an earlier stage, the cheaper it is in every sense: simple tests are cheap, and fixing the identified shortcomings requires a minimum of effort.
However, quite regularly our company is faced with the fact that web studios are afraid to test their work, fearing that "what if the device shows something wrong." In our opinion, this is rather strange - about the same as if the builders refused to use the level when building the house, fearing that it would show the unevenness of the floor ...
In this article I want to describe a real page layout test, which was ordered by one of the design studios. The layout was sent in the form of JPEG, and the following questions were posed as a task: “understand what the site is about,” “find the Partners button”, “find the link to the online store”.
Testing was conducted on random respondents. The structure of the test was as follows: first, the respondent was given the task to understand what the site will be about, after which he was shown a layout for 10 seconds (it is known that, on average, a visitor leaves the page after 8 seconds, so 10 seconds is a convenient time interval for assessing the first perception site); then the respondent was asked to find a link to a section for partners (testing continued until the respondent found this button or “surrendered”); then similarly it was suggested to find a link to the store.
Based on the test results, the following letter was sent to the customer (since the customer is a studio, we usually don’t make a “beautiful report” unless we specifically request it, but transfer the actual data required for work - all this is discussed individually): We
attach the files with test results. General pictures are when respondents simply tried to understand what the site was about. The layout was shown to them for 10 seconds, i.e. this is approximately the time during which the first click is made and the visitor goes further on the site. partner is, accordingly, the search for a partner, shop - store.
count and relative in the names of the pictures, these are cards built by the number of fixations and the relative viewing time (the percentage of time spent viewing this area). When completing a task to search for specific information, you should pay special attention to count pictures, since they show where you searched for it.
The videos show where the respondents looked during the assignment. Each frame of the video shows a map of views for the previous second.
We would recommend to pay attention to the fact that the buttons of partners and the store are very similar visually to the ad unit, and therefore visitors do not immediately perceive them as an element of navigation.
| the respondent | partners | score |
| 1 | 5 | 10 |
| 2 | 36 | 10 |
| 3 | 8 | 28 |
| 4 | 3 | 29th |
| 5 | 2 | 18 |
| 6 | 10 | 22 |
| average | 10.6 | 19.5 |
The test results were attached to the letter:
 hm_general_count_10sec.jpg |  hm_general_relative_10sec.jpg |
 gz_general_10sec.jpg |
Here you can see that, as expected, all users have successfully read the beginning of the text block. And in the very first line of this block, information is correctly submitted that the company is engaged in the wholesale of plumbing. That is, target users will immediately make sure that they got exactly where they needed it, and even if they can’t find something right away, they will probably spend some extra time searching on this site, and not immediately run away to competitors.
 hm_partner_count.jpg |  hm_partner_relative.jpg |
 gz_partner.jpg |
Some explanation regarding the interpretation of the results. When testing the search for something specific on a page, heatmaps by the number of views and relative time turn out to be a very good tool for assessing the intuitiveness of the interface.
The first thing to strive for is to ensure that on the “relative” map there are as few “traces” as possible in areas that are not related to what the user needs to find. Each such “trace” indicates that the user had to peer into the picture and analyze it in order to understand that this is not what he needs. Ideally, if the user looked “not there”, then he should immediately understand that this is not what he is looking for, and his look will go further without stopping (which means that the percentage of time that he will spend looking at this “ not that "will be small, and the" trace "on the heat map will be almost invisible).
The second thing you should pay attention to is the map by the number of views. On it you can see which areas were viewed by the user during the search. The fewer such areas, the better. Particular attention should be paid to the “hot” zones - these are places where the views of users are concentrated during the search, and if the search for the required object takes too much time from the respondents, then you can think about the possibility of transferring the desired object to one of such zones.
Since a simple number of respondents are used in simple tests, when analyzing heatmaps, one should not forget about the views map. “Hot” zones can also arise due to the fact that one respondent got confused or distracted and began to study something carefully. Therefore, having highlighted some zone on the heatmap, it is worth looking at the map of views and assess how many respondents paid attention to this zone. The larger this number, the more important the area is in terms of evaluating search convenience.
Since the map of views is usually quite “littered” (due to the large number of fixations), it’s very convenient to use videos, especially if you watch them in slow motion or even in single-frame mode. An analysis of such videos allows you to see the entire process of viewing the layout by each of the respondents and to identify common patterns.
Particular attention should be paid to the return of sight. If the respondent looked at the “correct” zone, then left somewhere else, then returned, etc. - this may indicate that the name for the desired object was unsuccessfully selected or for some other reason it is not associated with the users what they are looking for.
 hm_shop_count.jpg |  hm_shop_relative.jpg |
 gz_shop.jpg |
We were also ready to send records of all testing sessions, but the customer said that the data sent was enough for him.
This testing cost the customer 3,500 rubles, and the customer was more than satisfied with his results - he was able to quickly fix the problems found; made sure that in general the site is perceived exactly as it was originally planned; and I was able to approve the design of the site owner without any problems, showing perception maps.
Some important points:
The bulk of our testing costs consists of recruiting respondents and conducting testing. At the same time, an increase in the number of materials shown to the respondent (within reasonable limits) practically does not increase the cost of testing. Therefore, to reduce your costs, you can use the following tricks:
1. Buy "subscription" to conduct tests. In this case, an agreement is concluded that you order at least a certain number of tests per month. Depending on the quantity ordered and the type of tests, their cost is reduced for you. For example, for 5 layout tests per month, it will be 3,500 rubles per test; for 10 - 3300 rubles; for 15 - 3000 rubles, etc.
2. Combine materials in one test. For example, on one group of respondents you can test layouts of the main and internal pages; or page layouts of two or three different sites. At the same time, the price for the test will either not increase at all, or it will increase very slightly. It should be borne in mind that if you are going to show more than 3-4 pictures to one respondent, then in order to maintain the adequacy of the results, it is necessary to increase the number of respondents in the group (which leads to some increase in the cost of testing, but relatively small).
It should also be borne in mind that a change in design, as a rule, leads to a change in the perception of pages. Therefore, if after testing you made some more or less significant changes to the layout design, then you should test it again to make sure that it meets your requirements.