Pull to refresh

Тестирование с помощью айтракера выполнения заданий на сайте alget.ru

Reading time 8 min
Views 703
eye-tracker.ru
Пример отчета по тестированию выполнения заданий на сайте, выполненного компанией Ай-тракер. Задачей данного тестирования было выявить основные неудобства, с которыми сталкиваются целевые посетители сайта — люди, пришедшие по рекламе онлайнового калькулятора стоимости ремонта.

Данный отчет публикуется с разрешения заказчика.

Так как целью было проведение качественного, а не количественного исследования, причем требовалось выявить наиболее существенные особенности и недостатки, после обсуждения с заказчиком было решено ограничиться минимальной группой в пять респондентов. Отдельным пожеланием было включить в группу одного дизайнера интерьеров.

Условия тестирования
Тестированиe сайта alget.ru проводилось с использованием технологии «айтракинг», при которой компьютер отслеживает направление взгляда испытуемых и регистрирует на какие именно участки экрана люди смотрят в каждый момент времени. Это позволяет объективно анализировать, когда и на чем именно фокусируется внимание посетителей сайта.

Тестирование проводилось 15-16 июля 2010 года на сайте alget.ru
В качестве респондентов выступали мужчины старше 30 лет с доходом выше среднего. Тестирование проводилось на территории респондентов. В тестировании приняли участие 5 человек.

В качестве заданий для тестирования респондентам предлагалось 4 задачи:
  1. Восприятие главной страницы: респонденты должны были посмотреть на главную страницу сайта и сказать о чем этот сайт.
  2. Поиск контактной информации: респондентам предлагалось найти на сайте адрес, телефон и схему проезда офису по ремонту недвижимости.
  3. Расчет стоимости ремонта: респондентам предлагалось задать параметры помещения сходные с предоставленными изображениями и рассчитать стоимость ремонта с помощью имеющегося на сайте калькулятора.
  4. Комментарии: респондентам предлагалось оставить свои комментарии о сайте.


Дополнительные материалы

К данному отчету прилагаются видеозаписи сеансов тестирования и карты внимания в оригинальном разрешении.

Краткая сводка результатов и рекомендаций
eye-tracker.ru
  1. Общий дизайн сайта хорошо выполняет функциональную нагрузку – информационные блоки выделены достаточно хорошо и замечаются респондентами.
  2. Изображение дома на главной странице воспринимается респондентами как указание на то, что компания занимается загородной недвижимостью. Рекомендуется изменить это изображение, например, на коллаж из загородного дома, квартиры и офиса.
  3. Сочетание различных элементов вызывает у респондентов ощущение, что компания занимается строительством. Рекомендуется:
    • Изменить новости на менее официальные и более связанные с ремонтом
    • Изменить формат плашки «Стройматериалы» — крупно написать «Интернет магазин» и под ним «стройматериалы».
    • Возможно, изменить анимацию. Существующая анимация больше ассоциируется со строительством, чем с ремонтом
  4. Нижняя часть главной страницы некорректно отображается в Internet Explorer (вес текст выделен болдом). У посетителей, которые туда заглянут, это может вызвать негативные эмоции.
  5. На странице контактов рекомендуется добавить на карту подписи к изображенным объектам. Например, «Магазин стройматериалов», «Офис компании» и т.п.
  6. В калькуляторе ремонта подсказки помощника вылезают за пределы окна браузера (в Internet Explorer)
  7. Необходимо переделать интерфейс выбора типа и цвета материала на первой странице калькулятора!
  8. Кнопка «Рассчитать стоимость» перекрывает выпадающие списки (в IE, Chrome, FF)
  9. Имеет смысл автоматически определять некорректный ввод размеров помещения и показывать всплывающую подсказку.
  10. Многие используемые термины непонятны неспециалистам. Имеет смысл сделать стандартную всплывающую подсказку с пояснениями.
  11. Имеет смысл увеличить расстояние между двумя колонками («стоимость работ» и «стоимость материалов») на странице со сметой ремонта.


Задание 1: восприятие главной страницы

При заказе тестирования отмечался высокий уровень отказов (ухода со страницы) посетителей, зашедших по целевой рекламе «расчет стоимости ремонта». Во время тестирования были выявлены следующие вероятные причины такого поведения:
  1. Все респонденты (кроме профессионального дизайнера интерьера) в качестве назначения сайта называли «строительство и ремонт загородной недвижимости» (с разными вариантами – «сельских строений» и т.п.) Такому восприятию способствует большое изображение загородного дома. Мы бы рекомендовали изменить эту картинку на коллаж из изображений загородного дома, офиса, квартиры и т.п. Также на картинке имеет смысл акценитровать внимание на ремонте, например, добавить анимацию.
  2. Большинство респондентов в качестве назначения сайта отмечали строительство. Подобному восприятию в значительной мере способствуют имеющиеся на странице новости, посвященные «официальным» событиям, связанным со строительством. Так как эти новости становятся видны еще в процессе прорисовки анимированной картинки «строящегося» дома и плашек с основными разделами сайта, они быстро привлекают внимание пользователя и его восприятие сайта в значительной мере строится именно на содержании новостного блока. Мы бы рекомендовали выбрать новости, больше связанные с ремонтом, чем со строительством. Также можно порекомендовать использовать новости компании вместо «официальных» новостей.
  3. Плашка основного раздела «Стройматериалы» также привлекает заметное внимание пользователей и вызывает ассоциации со строительством. Мы бы рекомендовали поменять местами заголовок и подзаголовок этой плашки: крупно написать «Интернет магазин» и под ним – «Стройматериалы». Возможно, вместо «Стройматериалы» стоит написать «Товары для ремонта».
  4. Следует отметить, что текст в нижней части страницы некорректно отображается в браузере Internet Explorer.

В целом дизайн главной страницы выполнен хорошо: посетители быстро замечают основные разделы сайта, логотип, телефон и т.п. К определенному недостатку можно отнести излишнее внимание, которое привлекает раздел новостей, особенно во втором дизайне.

Дизайн 1

eye-tracker.ru
Туманная маска за первые 10 секунд просмотра по количеству взглядов
eye-tracker.ru
Туманная маска за первые 10 секунд просмотра по проценту времени
eye-tracker.ru
Тепловая карта за все время просмотра по количеству взглядов
eye-tracker.ru
Тепловая карта за все время просмотра по проценту времени
 
Дизайн 2
 
eye-tracker.ru
Туманная маска за первые 10 секунд просмотра по количеству взглядов
eye-tracker.ru
Туманная маска за первые 10 секунд просмотра по проценту времени
eye-tracker.ru
Тепловая карта за все время просмотра по количеству взглядов
eye-tracker.ru
Тепловая карта за все время просмотра по проценту времени


Задание 2: поиск контактной информации

Поиск ссылки на главной странице

Поиск ссылки «Контакты» на главной странице сайта не вызвал сложностей ни у одного из респондентов. Двое нашли нужную ссылку менее чем за 5 секунд, еще двоим потребовалось от 10 до 15 секунд, и еще двое потратили от 30 до 35 секунд. Разброс времени связан не со сложностью нахождения ссылки, а с тем, что респонденты отвлекались на рассматривание изображения домика и читали номера телефонов.
Стоит отметить, что никто из респондентов не обратил внимания на верхний навигационный блок с иконками.
Карты внимания главной страницы при выполнении второго задания представлены ниже:

eye-tracker.ru
Тепловая карта по количеству взглядов за все время просмотра
eye-tracker.ru
Тепловая карта по проценту затраченного времени за все время просмотра
eye-tracker.ru
Карта взглядов за первые 5 секунд просмотра
eye-tracker.ru
Туманная маска по проценту затраченного времени за все время просмотра


Поиск контактной информации на странице «Контакты»

Все респонденты сумели найти нужный адрес, хотя некоторые сначала путали адреса магазинов и офиса по ремонту. Значительно большие сложности вызвала схема проезда – карты аэрофотосъемки, приведенные на странице малоинформативны – на них отсутствуют подписи о том, что именно там показано. Карту google maps для просмотра расположения офиса по ремонту открыли три респондента.
Данная проблема не является критической, так как заинтересованные в услугах компании посетители, все-равно предварительно будут созваниваться или списываться по электронной почте.
Карты внимания страницы «Контакты» приведены ниже:

eye-tracker.ru
Тепловая карта по количеству взглядов за первые 5 секунд
eye-tracker.ru
Тепловая карта по количеству взглядов за первые 10 секунд
eye-tracker.ru
Тепловая карта по количеству взглядов за первые 15 секунд
eye-tracker.ru
Тепловая карта по количеству взглядов за все время


Задание 3: расчет стоимости ремонта

Главная страница
eye-tracker.ru
Тепловая карта по количеству взглядов за все время просмотра
eye-tracker.ru
Тепловая карта по проценту затраченного времени за все время просмотра

Поиск ссылки на калькулятор ремонта на главной странице сложностей у респондентов не вызвал, несмотря на то, что в формулировке задания слово «калькулятор» отсутствовало. Среднее время поиска ссылки составило около 15 секунд. Большое время поиска ссылки объясняется тем, что респонденты параллельно рассматривали материалы для выполнения задания.

Первая страница калькулятора
eye-tracker.ru
Тепловая карта по количеству взглядов за первые 10 секунд
eye-tracker.ru
Тепловая карта по количеству взглядов за все время просмотра

Заполнение данной страницы заняло у респондентов от полутора до 6 минут. Основные замечания по данной странице:
  1. Выбор формы помещения быстро замечают все респонденты, проблем не вызывает.
  2. Возможность вращать комнату заметил только один респондент, по большому счету случайно.
  3. Все респонденты кликали на заголовках полей в таблице выбора материалов, предполагая, что там что-то появится. Можно на эти области повесить какой-то дополнительный функционал (например, всплывающие подсказки) без опасности перегрузить интерфейс.
  4. Только один респондент обратил внимание на «помощника».
  5. В Internet Explorer всплывающая подсказка помощника вылезает за пределы браузера.
  6. Очень много нареканий вызвали выпадающие меню с выбором типа и цвета материалов. Этот элемент интерфейса необходимо переделать! Респонденты не могут понять логику работы, не угадывают какой тип материала будет выбран, не замечают надписи о выбранном типе материала и т.д.
  7. Кнопка «Рассчитать стоимость» находится поверх выпадающих списков с выбором материала и цвета, мешая выбору.
  8. Название кнопки «Рассчитать стоимость» не соответствует функционалу, так ведет на следующую страницу с вводом данных. Лучше на кнопке подписывать название следующего шага, например, «Перейти к указанию размеров».


Вторая страница калькулятора
eye-tracker.ru
Тепловая карта по количеству взглядов за первые 10 секунд
eye-tracker.ru
Тепловая карта по количеству взглядов за все время просмотра

Респонденты достаточно успешно справились с заданием. Некоторые сначала указывали размеры в метрах или сантиметрах, но замечали ошибку до ввода. Возможно, имеет смысл предусмотреть автоматическое определение размерности или всплывающие подсказки в процессе ввода (при потере фокуса соответствующим полем).
Некоторую сложность вызвало указание размеров окна: часть респондентов после ввода размеров нажимали на плюс и затем старались убрать появившееся поле для ввода второго окна.

Третья страница калькулятора
eye-tracker.ru
Тепловая карта по количеству взглядов за первые 10 секунд
eye-tracker.ru
Тепловая карта по количеству взглядов за все время просмотра

Все респонденты успешно справились с заданием. Трое из них забывали указать способ подготовки поверхности, но после появления напоминания успешно его указывали.
При выполнении просьбы оператора добавить «фанеру по стяжке», часть респондентов вместо нее выбрала «фанеру по обрешетке», но быстро исправляла свою ошибку.
Информацию о том, что такое «фанера по стяжке» не нашел никто, хотя почти все нашли справку о том, что такое фанера. Так как сайт рассчитан на использование непрофессионалами, имело бы смысл добавить подсказки обо всех используемых терминах и материалах. Вместо (или в дополнение к) использующемуся на сайте «помощнику», мы бы рекомендовали добавить стандартные иконки со знаком вопроса и всплывающим окном с краткой информацией о термине. В этих подсказках можно добавить ссылки на какие-то дополнительные статьи или разделы FAQ.

Четвертая страница калькулятора
eye-tracker.ru
Тепловая карта по количеству взглядов за первые 10 секунд
eye-tracker.ru
Тепловая карта по количеству взглядов за все время просмотра

Заполнение данной страницы не вызвало проблем ни у одного респондента. Единственный вопрос был от дизайнера интерфейсов – имеется ли в виду количество штук или количество видов декоративных элементов.

Пятая страница калькулятора (смета)
eye-tracker.ru
Тепловая карта по количеству взглядов за первые 10 секунд
eye-tracker.ru
Тепловая карта по проценту затраченного времени за первые 10 секунд
eye-tracker.ru
Тепловая карта по количеству взглядов за все время просмотра
eye-tracker.ru
Тепловая карта по проценту затраченного времени за все время просмотра

При просмотре сметы было высказано только одно замечание по оформлению: слабо разделены колонки «стоимость работ» и «стоимость материалов». При первом просмотре смета читается не по колонкам, а по строкам.

Задание 4: комментарии респондентов

Плюсы:
1. Хорошая цветовая гамма
2. Наличие калькулятора
3. Легко находится контактная информация
Минусы:
1. Отсутствие подсказки «на лету» при вводе некорректных размеров
2. Неудобный выбор материала отделки и расцветки
3. Новости слишком «вычурные», отвлекают
Дополнительные комментарии можно услышать при просмотре записей сеанса.


Приложения

Динамическая туманная маска главной страницы при первоначальном просмотре:


Запись сеанса респондента при выполнении первого задания:


Запись сеанса респондента при выполнении второго задания:


Запись сеанса респондента при выполнении третьего задания (часть 1):


Запись сеанса респондента при выполнении третьего задания (часть 2):


Запись сеанса респондента при выполнении третьего задания (часть 3):


Запись сеанса респондента при выполнении третьего задания (часть 4):


Запись сеанса респондента при выполнении третьего задания (часть 5):


Запись сеанса респондента при выполнении третьего задания (часть 6):


Скачать отчет

Данный отчет можно скачать в формате PDF
Tags:
Hubs:
+28
Comments 52
Comments Comments 52

Articles