eye-tracking eye-tracker.ru  

Разработка сайта с использованием eye-tracker'а: этап первый — тестирование макета

Один из наиболее удачных и полезных вариантов использования eye-tracker'а — это тестирование сайта в процессе его разработки. Причем, чем на более раннем этапе проводится тестирование, тем дешевле оно обходится во всех смыслах: простые тесты стоят дешево, а исправление выявленных недостатков требует минимума усилий.

Однако довольно регулярно наша компания сталкивается с тем, что веб-студии боятся тестировать свои работы, опасаясь, что «а вдруг прибор что-то не то покажет». На наш взгляд, это довольно странно — примерно так же, как если бы строители при постройке дома отказывались использовать уровень, опасаясь, что он покажет неровность пола…

В этой заметке я хочу описать реальный тест макета страницы, который был заказан одной из дизайн-студий. Макет был прислан в виде JPEG, а в качестве задачи ставились следующие вопросы: «понять о чем сайт», «найти кнопку Партнеры», «найти ссылку на интернет-магазин».

eye-tracker.ru: макет страницы для айтракинг-тестирования

Тестирование проводилось на случайных респондентах. Структура теста выглядела следующим образом: сначала респонденту давалось задание понять о чем будет сайт, после чего ему показывался макет на 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



К письму были приложены результаты тестирования:

Изучение назначения сайта (три картинки и видео)

eye-tracker.ru: тестирование макета страницы, тепловая карта за 10 секунд просмотра по количеству взглядов eye-tracker.ru: тестирование макета страницы, тепловая карта за 10 секунд просмотра по проценту затраченного времени
hm_general_count_10sec.jpg hm_general_relative_10sec.jpg
 
eye-tracker.ru: тестирование макета страницы, карта взглядов за 10 секунд просмотра  
gz_general_10sec.jpg  
 
 



Здесь можно увидеть, что как и следовало ожидать, все пользователи успешно прочитали начало текстового блока. А в первой же строчке этого блока грамотно подается информация о том, что фирма занимается оптовой торговлей сантехникой. То есть целевые пользователи сразу убедятся, что попали именно туда, куда им требовалось, и даже если не смогут что-то найти сразу же, скорее всего потратят какое-то дополнительное время на поиск на этом сайте, а не убегут сразу к конкурентам.

поиск кнопки партнеры (три картинки и видео)

eye-tracker.ru: тестирование поиска кнопки партнеры, тепловая карта по количеству взглядов eye-tracker.ru: тестирование поиска кнопки партнеры, тепловая карта по проценту затраченного времени
hm_partner_count.jpg hm_partner_relative.jpg
 
eye-tracker.ru: тестирование поиска кнопки партнеры, карта взглядов  
gz_partner.jpg  
 



Некоторое пояснение по поводу интерпретации результатов.

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

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

Второе, на что стоит обращать внимание — это карта по количеству взглядов. На ней можно увидеть, какие области просматривались пользователем в процессе поиска. Чем меньше таких областей — тем лучше. Особое внимание стоит уделять «горячим» зонам — это те места, где концентрируются взгляды пользователей во время поиска, и если поиск требуемого объекта занимает у респондентов слишком много времени, то можно задуматься о возможности переноса искомого объекта в одну из таких зон.

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

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

Особое внимание следует уделить возвратам взгляда. Если респондент посмотрел на «правильную» зону, потом ушел куда-то еще, потом вернулся и т.п. — это может свидетельствовать о том, что для искомого объекта неудачно подобрано название или еще по каким-то причинам он не ассоциируется у пользователей с тем, что они ищут.

поиск интернет-магазина (три картинки и видео)

eye-tracker.ru: тестирование поиска магазина партнеры, тепловая карта по количеству взглядов eye-tracker.ru: тестирование поиска магазина партнеры, тепловая карта по проценту затраченного времени
hm_shop_count.jpg hm_shop_relative.jpg
 
eye-tracker.ru: тестирование поиска магазина, карта взглядов  
gz_shop.jpg  
 



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

Данное тестирование заказчику обошлось в 7000 рублей, а его результатами заказчик остался более чем доволен — он смог оперативно исправить обнаруженные проблемы; убедился, что в целом сайт воспринимается именно так, как и планировалось изначально; и смог без каких-либо проблем утвердить дизайн у владельца сайта, показав карты восприятия.

   
 

Уверены ли вы, что дизайн вашего сайта или товара выполняет возложенные на него задачи?

Наша компания оказывает услуги по независимому тестированию дизайна сайтов, печатной продукции, видеороликов и других материалов.