December 13, 2010 at 15:19Piter.tv Website Layout Testing Report
An example of a report on the study of the convenience of completing tasks on page layouts of the PITER.TV site . Such testing allows you to identify design flaws even before page layout. As a rule, the results of such a study allow finding with sufficient accuracy the places that could further cause difficulties for visitors and reduce the site’s conversion rate. After identifying the problem areas of the layout, the designer may be tasked with correcting them within the framework of an already agreed design.
This report is published with the permission of the customer.
Test conditions
Testing was conducted by the company Ay-tractor eye-tracker.ru September 13, 2010.
The respondents were employees of the Grand Business Center in the amount of 10 people, including three men and seven women.
The following tasks were offered to respondents as tasks for testing:
- Overall design assessment (pictures were used as an incentive, respondents were asked to say what the site would be about)
- Webcam section search
- Search for a video news section and view the latest news
- View news on a map
- Adding your own video to the site
- View main site categories
Additional materials
Video reports of testing sessions and attention cards in original resolution are attached to this report.
Summary of results and recommendations
- Upon first acquaintance with the site, respondents note that this is a news site, but do not associate it with the topics “Video” and “Petersburg”. Perhaps it is worth emphasizing it somehow.
- An unreasonably much attention at the first call is taken by the weather widget, as it is located on the menu site. Perhaps it should be moved to another place.
- The button “watch news release”, despite its size and color, is not noticed by the respondents, both during the initial viewing of the layout and in the performance of the corresponding task.
- When searching for video news, respondents choose different sections, which indicates the unintuitive interface for this task. None of the respondents chose a player to view the news, and the button “watch news release” was practically not noticed.
- Since an interactive map with reference to news stories can become a “feature” of a site, it makes sense to consider adding the appropriate link to the main menu of the site.
- In the second version of the design (with added advertising), the top banner attracts significant attention, and its content is associated with the site, changing the perception of the site. In addition, because of this banner, the main content of the page moves down and important blocks fall out of the visitor’s field of vision.
Task 1: General Design Perception
Respondents were randomly shown two options for the layout of the main page of the site and were asked to describe what this site was about. All respondents, except one, noted “news”, but only one respondent mentioned “video” and “Petersburg”.
| Layout 1 | Layout 2 |
 Attention card by the number of views in the first 8 seconds |  Attention card by the number of views in the first 8 seconds |
 Map of attention by relative time (percentage of time spent viewing) for the first 8 seconds of viewing. |  Map of attention by relative time (percentage of time spent viewing) for the first 8 seconds of viewing. |
 Attention map by the number of views for the entire time of viewing |  Attention map by the number of views for the entire time of viewing |
 Relative time map of attention for the entire viewing time |  Relative time map of attention for the entire viewing time |
In the first version of the design, advertising is absent and all the attention of visitors is directed to the elements of the site - menus and information blocks. In the second option, a significant part of the attention is redistributed to advertising, and the appearance of the advertising blocks, especially the top one, has a significant impact on the perception of the site as a whole, as it is perceived, to some extent, as the head of the site. In addition, in the second version of the design, ad units move information blocks with a map and thematic news beyond the first screen, as a result of which some visitors may simply not pay attention to them.
It is also worth noting that the informer with weather and exchange rates attracts unreasonably large attention. Perhaps you should think about changing its design (so that it is not perceived as an additional menu) or moving it to another place.
We would also suggest thinking about ways to increase emphasis on “video” and “Peter”. Perhaps in the logo the word “Peter” should be written in Cyrillic.
In addition, it should be noted that the button “watch news release” is practically not noticed by respondents in any of the proposed designs.
Task 2: search for a section of webcams.
All respondents coped with the task. Of these, six clicked on the corresponding item on the main menu, and four clicked on the Web Petersburg block. The time from the start of the page to click varies from 5 to 13 seconds, and the median for those who clicked on the menu item is 7 seconds, and for those who clicked on the “web Petersburg” block - 11 seconds. This shows that respondents do not have difficulty finding the appropriate link.
 Attention map for all views |  Relative time map of attention for all time |
The absence of extraneous "hot zones" on the given attention cards indicates that the interface is well adapted to solve this problem.
Task 3: Search for links to video news and the latest news.
Performing this task caused significant difficulties. Most of the respondents clicked on the “Your video” section, the next most popular were the “News” sections and the “news on topics” information block. Two respondents each clicked on the webcam section and the “watch news release” button. The time from the start of the page to the click ranged from three to thirty seconds.
Separately, it should be noted that the respondents practically did not pay attention to the main player. Perhaps this is due to the fact. that it is perceived as an ad unit, and not as an important part of the page’s content. The button “watch news release” remains unnoticed, despite the highlight in color and size. Probably the fact is that visually it looks like a kind of bottom strikethrough block webcam.
 Map by the number of views in the first 10 seconds of testing |  Relative time map for the first 10 seconds of testing |
 Map by the number of views for the entire testing period |  Relative time map for all testing time |
Four attention centers are clearly visible on the given attention cards: sections of the main menu “News” and “Your video”, as well as the information block “News by topics” and the heading of the news in the player. This indicates that the interface is not intuitive, which is further emphasized by the spread in the links selected by the respondents. The main blocks for this assignment — the player and the “Watch News Release” button — were hardly noticed by the respondents. We would recommend redesigning the interface of these elements.
Task 4: find news on the map.
When completing this task, the respondents were faced with the fact that the map in the second design option does not fall on the first browser screen, i.e. not visible without scrolling. Because of this, some respondents found a map only after reminding the operator.
 Map by the number of views in the first 10 seconds of testing |  Relative time map for the first 10 seconds of testing |
 Map by the number of views for the entire testing period |  Relative time map for all testing time |
It can be seen from the above attention cards that at the beginning of the assignment the respondents' views wander mainly on the first page, while they are attracted to the news section. After the map is detected, the process does not cause problems; respondents clearly notice both the menu on the map and information icons.
Since the map can become one of the most popular blocks of the site, we would recommend to consider the possibility of creating the corresponding item in the main menu or move the map higher so that it is visible without scrolling on the most common screens.
Task 5: add your video to the site.
All respondents coped with the task; they did not have any difficulties in completing the task. Respondents very quickly decided that they needed the “Your video” section (which will subsequently contain the corresponding link), and after the operator’s request they quickly found the “add video” link on the main page.
The attention cards below show that the respondents' views are concentrated precisely in the areas that are required, which indicates the convenience of the site’s interface for solving this problem.
 Map by the number of views in the first 10 seconds of testing |  Relative time map for the first 10 seconds of testing |
 Map by the number of views for the entire testing period |  Relative time map for all time |
Task 6: view the main sections.
When completing this task, first of all, the respondents' attention was concentrated on the sections of the main menu, but then all the main blocks of the page were successfully recorded.
 Map by the number of views in the first 10 seconds of testing |  Relative time map for the first 10 seconds of testing |
 Map by the number of views for the entire testing period |  Relative time map for all time |