Один из наиболее удачных и полезных вариантов использования eye-tracker'а — это тестирование сайта в процессе его разработки. Причем, чем на более раннем этапе проводится тестирование, тем дешевле оно обходится во всех смыслах: простые тесты стоят дешево, а исправление выявленных недостатков требует минимума усилий.
Однако довольно регулярно наша компания сталкивается с тем, что веб-студии боятся тестировать свои работы, опасаясь, что «а вдруг прибор что-то не то покажет». На наш взгляд, это довольно странно — примерно так же, как если бы строители при постройке дома отказывались использовать уровень, опасаясь, что он покажет неровность пола…
В этой заметке я хочу описать реальный тест макета страницы, который был заказан одной из дизайн-студий. Макет был прислан в виде JPEG, а в качестве задачи ставились следующие вопросы: «понять о чем сайт», «найти кнопку Партнеры», «найти ссылку на интернет-магазин».
Тестирование проводилось на случайных респондентах. Структура теста выглядела следующим образом: сначала респонденту давалось задание понять о чем будет сайт, после чего ему показывался макет на 10 секунд (известно, что в среднем, посетитель уходит со страницы через 8 секунд, поэтому 10 секунд является удобным промежутком времени для оценки первого восприятия сайта); затем респонденту предлагалось найти ссылку на раздел для партнеров (тестирование шло, пока респондент не найдет эту кнопку или не «сдастся»); затем аналогично предлагалось найти ссылку на магазин.
По результатам тестирования заказчику были выслано следующее письмо (так как заказчиком является студия, мы, как правило, не делаем «красивый отчет», если его не запрашивают специально, а передаем фактические данные, требующиеся для работы — все это оговаривается индивидуально):
Прилагаем файлы с результатами тестирования. Картинки general — это когда респонденты просто пытались понять о чем сайт. Макет им был показан на 10 секунд, т.е. это примерно то время, в течение которого делается первый клик и посетитель идет дальше по сайту. partner — это, соответственно, поиск партнера, shop — магазина.
count и relative в названиях картинок, это карты, построенные по количеству фиксаций и относительному времени просмотра (проценту времени, потраченному на просмотр данной области). При выполнении задания по поиску конкретной информации стоит уделять особое внимание картинкам count, так как они показывают где ее искали.
Ролики показывают куда смотрели респонденты в процессе выполнения задания. Каждый кадр ролика показывает карту взглядов за предыдущую секунду.
Мы бы рекомендовали обратить внимание на то, что кнопки партнеров и магазина очень похожи визуально на рекламный блок, и поэтому посетители их не сразу воспринимают как элемент навигации.
| респондент | партнеры | магазин |
| 1 | 5 | 10 |
| 2 | 36 | 10 |
| 3 | 8 | 28 |
| 4 | 3 | 29 |
| 5 | 2 | 18 |
| 6 | 10 | 22 |
| среднее | 10.6 | 19.5 |
К письму были приложены результаты тестирования:
 hm_general_count_10sec.jpg |
 hm_general_relative_10sec.jpg |
 gz_general_10sec.jpg |
Здесь можно увидеть, что как и следовало ожидать, все пользователи успешно прочитали начало текстового блока. А в первой же строчке этого блока грамотно подается информация о том, что фирма занимается оптовой торговлей сантехникой. То есть целевые пользователи сразу убедятся, что попали именно туда, куда им требовалось, и даже если не смогут что-то найти сразу же, скорее всего потратят какое-то дополнительное время на поиск на этом сайте, а не убегут сразу к конкурентам.
 hm_partner_count.jpg |
 hm_partner_relative.jpg |
 gz_partner.jpg |
Некоторое пояснение по поводу интерпретации результатов. Когда тестируется поиск чего-то конкретного на странице, то тепловые карты по количеству взглядов и по относительному времени оказываются очень хорошим инструментом для оценки интуитивности интерфейса.
Первое, к чему надо стремиться, это к тому, чтобы на «относительной» карте было как можно меньше «следов» в областях, не относящихся к тому, что должен найти пользователь. Каждый такой «след» говорит о том, что пользователю пришлось всматриваться в картинку и ее анализировать, чтобы понять, что это не то, что ему требуется. В идеале, если пользователь посмотрел «не туда», то ему должно быть сразу понятно, что это не то, что он ищет, и его взгляд пойдет дальше не задерживаясь (а это значит, что процент времени, который он потратит, разглядывая это «не то» будет небольшим, и «след» на тепловой карте будет практически незаметен).
Второе, на что стоит обращать внимание — это карта по количеству взглядов. На ней можно увидеть, какие области просматривались пользователем в процессе поиска. Чем меньше таких областей — тем лучше. Особое внимание стоит уделять «горячим» зонам — это те места, где концентрируются взгляды пользователей во время поиска, и если поиск требуемого объекта занимает у респондентов слишком много времени, то можно задуматься о возможности переноса искомого объекта в одну из таких зон.
Так как в простых тестах используется небольшое число респондентов, то при анализе тепловых карт не стоит забывать и о карте взглядов. «Горячие» зоны могут возникать в том числе и из-за того, что один какой-то респондент запутался или отвлекся и начал что-то внимательно изучать. Поэтому выделив какую-то зону на тепловой карте, стоит посмотреть на карту взглядов и оценить сколько респондентов обращали внимание на эту зону. Чем больше это число — тем более важной является зона с точки зрения оценки удобства поиска.
Так как карта взглядов, как правило, достаточно сильно «замусорена» (из-за большого количества фиксаций), то очень удобно бывает использовать видеоролики, особенно, если смотреть их с замедлением или даже в покадровом режиме. Анализ таких роликов позволяет увидеть весь процесс просмотра макета каждым из респондентов и выявить общие закономерности.
Особое внимание следует уделить возвратам взгляда. Если респондент посмотрел на «правильную» зону, потом ушел куда-то еще, потом вернулся и т.п. — это может свидетельствовать о том, что для искомого объекта неудачно подобрано название или еще по каким-то причинам он не ассоциируется у пользователей с тем, что они ищут.
 hm_shop_count.jpg |
 hm_shop_relative.jpg |
 gz_shop.jpg |
Также мы были готовы выслать записи всех сессий тестирования, но заказчик сказал, что присланных данных ему достаточно.
Данное тестирование заказчику обошлось в 3500 рублей, а его результатами заказчик остался более чем доволен — он смог оперативно исправить обнаруженные проблемы; убедился, что в целом сайт воспринимается именно так, как и планировалось изначально; и смог без каких-либо проблем утвердить дизайн у владельца сайта, показав карты восприятия.
Некоторые важные моменты:
Основная часть наших затрат на тестирование состоит в наборе респондентов и проведении тестирования. При этом, увеличение количества демонстрируемых респонденту материалов (в разумных пределах), практически не увеличивает себестоимости тестирования. Поэтому, для снижения ваших затрат можно воспользоваться следующими хитростями:
1. Покупать «абонементы» на проведение тестов. При этом заключается договор, что вы заказываете не менее определенного числа тестов в месяц. В зависимости от заказанного количества и вида тестов, их стоимость для вас снижается. Например, для 5 тестирований макетов в месяц она составит 3500 рублей за тест; для 10 — 3300 рублей; для 15 — 3000 рублей и т.д.
2. Объединять материалы в рамках одного теста. Например, на одной группе респондентов вы можете протестировать макеты главной и внутренних страниц; или макеты страниц двух-трех разных сайтов. При этом цена за тест либо совсем не увеличится, либо увеличится крайне незначительно. Следует учитывать, что если вы собираетесь показывать более 3-4 картинок одному респонденту, то для сохранения адекватности результатов необходимо увеличивать количество респондентов в группе (что ведет к некоторому удорожанию тестирования, но относительно небольшому).
Также следует учитывать, что изменение дизайна, как правило, ведет и к изменению восприятия страниц. Поэтому, если после тестирования вы внесли какие-то более или менее значительные изменения в дизайн макета, то стоит протестировать его еще раз, чтобы убедиться, что он отвечает вашим требованиям.
