Website development using the eye-tracker: stage one - testing the layout

One of the most successful and useful ways to use the eye-tracker is to test the site during its development. Moreover, the earlier the testing is carried out, the cheaper it is in every sense: simple tests are cheap, and the correction of the identified deficiencies 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 doesn’t show 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 post I want to describe the real test of the page layout, which was ordered by one of the design studios. The layout was sent as a JPEG, and the following questions were posed as a task: “understand what the site is about”, “find the Partners button”, “find a link to an online store”.


')
Testing was conducted on random respondents. The structure of the test looked like this: first, the respondent was asked to understand what the site would be, after which he was shown a layout for 10 seconds (it is known that, on average, the visitor leaves the page after 8 seconds, so 10 seconds is a convenient period of time to evaluate the first perception site); then the respondent was asked to find a link to the section for partners (testing went on until the respondent found this button or “surrendered”); then it was similarly proposed to find a link to the store.

According to the test results, the following letter was sent to the customer (since the customer is a studio, we, as a rule, do not make a “beautiful report” if it is not specifically requested, and we transfer the actual data required for work - all this is negotiated individually):

Attached files with test results. General pictures are when respondents simply tried to understand what the site is 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 moves further along the site. partner is, respectively, the search for a partner, shop - shop.

count and relative in the names of pictures, these are maps constructed by the number of fixations and relative viewing time (the percentage of time spent viewing this area). When performing a task to search for specific information, special attention should be paid to count pictures, as they show where you were looking for it.

Videos show where the respondents looked in the process of completing the task. Each frame of the video shows a map of views over 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.

Time spent searching for a button (in seconds)

the respondent	partners	score
one	five	ten
2	36	ten
3	eight	28
four	3	29
five	2	18
6	ten	22
the average	10.6	19.5

The following test results were attached to the letter:

Exploring the purpose of the site (three pictures and video)

hm_general_count_10sec.jpg	hm_general_relative_10sec.jpg
gz_general_10sec.jpg

Here you can see that, as expected, all users successfully read the beginning of the text block. And in the very first line of this block, the information that the company is engaged in the wholesale trade in plumbing fixtures is correctly supplied. That is, the target users will immediately make sure that they got exactly where they needed, and even if they cannot find something immediately, they will most likely spend some extra time searching on this site, rather than run away to their competitors.

search button partners (three pictures and video)

hm_partner_count.jpg	hm_partner_relative.jpg
gz_partner.jpg

Some explanation about the interpretation of the results. When a search for something specific on a page is being tested, heat maps by the number of views and relative time are a very good tool for assessing the intuitiveness of the interface.

The first thing to strive for is that the “relative” map contains as few “tracks” as possible in areas not related to what the user must find. Each such "trace" says 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 be immediately aware that this is not what he is looking for, and his gaze will go on without stopping (and this means that the percentage of time he spends looking at it is “ not that "will be small, and the" footprint "on the heat map will be almost imperceptible).

The second thing worth paying attention to is the map by the number of views. On it you can see which areas were viewed by the user in the search process. The smaller such areas, the better. Particular attention should be paid to the “hot” zones - these are the places where users' views are concentrated during the search, and if searching 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 these zones.

Since in a simple test a small number of respondents are used, when analyzing heat maps one should not forget about the map of views. “Hot” zones can also occur due to the fact that one of the respondents got confused or distracted and began to study something carefully. Therefore, highlighting some area on the heat map, you should look at the map of views and estimate how many respondents paid attention to this area. The larger this number, the more important the zone is in terms of assessing the convenience of the search.

Since the map of views, as a rule, is quite “littered” (due to the large number of fixations), it is very convenient to use videos, especially if you watch them with slowing down or even in frame-by-frame mode. The analysis of such clips allows you to see the entire process of viewing the layout of each of the respondents and to identify common patterns.

Particular attention should be paid to returns. If the respondent looked at the “correct” zone, then went somewhere else, then returned, etc. - this may indicate that the name of the desired object is unsuccessfully chosen name, or for some reason, it is not associated with what they are looking for.

search online store (three pictures and video)

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 to him was enough.

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 the whole site is perceived exactly as originally planned; and was able without any problems to approve the design of the site owner, showing the perception map.

Some important points:

The bulk of our testing costs are recruiting and 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 "subscriptions" for testing. At the same time a contract is concluded that you order at least a certain number of tests per month. Depending on the ordered quantity and type of tests, their cost for you decreases. For example, for 5 testing mockups 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 the layouts of the main and inner 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 will increase extremely insignificantly. It should be taken into account 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 design change, as a rule, also leads to a change in the perception of pages. Therefore, if after testing you have made some more or less significant changes in the design of the layout, then it is worth testing it again to make sure that it meets your requirements.