Айтрекинг тестирование сайтов – это технология, которую использует наше агентство для анализа поведения пользователей на веб-ресурсах. Она основана на отслеживании айтрекером движений глаз пользователя при просмотре страницы.
UX-тестирование и айтрекинг
Внешний вид сайта и лендинга не гарантирует его эффективности, а красивый дизайн не всегда способствует генерации лидов. Большое количество визуальных элементов может затруднить навигацию и достижение цели пользователем. В таком случае взгляд посетителей будет блуждать по странице, не находя точки фокусировки из-за обилия информации. Скорее всего, пользователи покинут такой сайт через несколько секунд и выберут более понятный веб-ресурс.
Чтобы не потерять аудиторию, важно проверить сайт по чек-листу на наличие недостатков и улучшить его дизайн для более удобного взаимодействия с пользователями.
Основные цели эффективного дизайна целевых страниц следующие:
- ускорение взаимодействия;
- облегчение навигации;
- улучшение пользовательского опыта.
Подробное изучение поведения пользовательского взгляда является ключевым этапом в процессе UX-тестирования, позволяющим получить информацию о том, куда смотрят пользователи, на что они фокусируют свое внимание и как они воспринимают веб-страницу. Такое тестирование позволяет:
- Обнаружить проблемы с удобством использования интерфейса, выявить слабые места в дизайне или расположении контента.
- Идентифицировать элементы пользовательского интерфейса, на которые пользователи не обращают внимания.
- Определить элементы пользовательского интерфейса, которые мешают пользователям сосредотачиваться.
- Понять, как пользователи достигают своих целей на веб-странице.
Устройство айтрекера
В айтрекер встроены: инфракрасная подсветка и камеры, которые улавливает отражение. Внутри корпуса айтрекера размещена плата с электронными элементами.
Айтрекер (B) размещают на столе или крепят на магнит под экраном монитора (А).
Айтрекинг в веб-дизайне
Айтрекинг представляет собой ценный инструмент веб-дизайна, который может определить, какие части страницы привлекают внимание пользователей, а какие остаются незамеченными. Этот метод можно использовать для изучения того, как пользователи ищут информацию на сайте.
На основе результатов айтрекинга можно оптимизировать пользовательский интерфейс, понять, какие изменения нужно внести в проект для улучшения взаимодействия с пользователем, повышения конверсии страниц и общей эффективности веб-сайта или лендинга.
Каждому ли сайту нужно айтрекинг исследование?
Айтрекинг чаще всего используют для критически важных проектов заказчика. Например, сайт - единственный источник лидогенерации. Исследование с применение технологии айтрекинга требует затрат на подготовку, проведение, а также обработку и интерпретацию полученных данных..
Когда необходимы исследования?
Перед началом разработки веб-сайта: исследования особенно полезны при сравнении своего проекта с проектами конкурентов, чтобы определить лучшие решения и применить их в собственном проекте. Это особенно важно для интернет-магазинов.
Во время разработки сложного продукта: при создании личных кабинетов, страниц оформления заказов или каталогов часто возникают вопросы и сомнения о том, как лучше реализовать ту или иную функцию. Исследование айтрекинга поможет принять верное решение, показывая, как целевая аудитория взаимодействует с интерфейсом, и выявляя возможные проблемы через визуализацию движений глаз пользователей.
После запуска нового сайта: после запуска новой версии сайта можно сравнить ее с предыдущей, анализируя длительность фиксации на элементах, время, затраченное на выполнение задач, и статистическую значимость различий между полученными данными.
Этапы тестирования сайта с применением айтрекинга
- Постановка тестирования сайта.
- Отбор участников.
- Знакомство.
- Калибровка.
- Реализация сценария.
- Посттестирование.
Постановка тестирования
Это ключевой момент. Будет ошибкой посадить респондента за компьютер и предложить ему побродить по сайту. Поэтому формулируется гипотеза относительно юзабилити сайта. Гипотеза - это когда мы считаем, что уже знаем ответ. Гипотеза часто возникают из того, как мы размышляем и чувствуем проблему. Ваша задача - подтвердить или опровергнуть такие гипотезы.
Примеры гипотез:
- Проблемы с видимостью товаров в корзине - часть товаров не отображается.
- Не хватает информации о товарах для принятия решения о покупке.
- Непонятно, как перейти к процессу оформления заказа.
- Проблемы с добавлением товаров в корзину.
- Проблемы с оплатой товаров, неясно, прошла ли оплата.
- Пользователь не понимает, какие данные необходимо вводить в форму.
На основе гипотез формулируются задачи для респондентов, например:
- Найти «Товар №1», узнать стоимость, условия приобретения, положить в корзину, оплатить.
- Найти «Товар №2», узнать стоимость, условия приобретения, положить в корзину, оплатить.
- Найти «Товар №3», узнать стоимость, условия приобретения, положить в корзину, оплатить.
Особенности постановки:
- «Товар №1», который необходимо найти в первом задании на сайте существует.
- №2 отсутствует на сайте.
- №3 есть, но с временно отсутствует или недоступен для заказа.
Условия для проведения тестирования юзабилити сайта
Если речь идет о покупке в интернет-магазине, то проводить тестирование следует в спокойной комнате со слабым освещением, имитирующим «домашнюю обстановку», без внешних шумов.
Сайт по бизнес-тематике, можно тестировать непосредственно на рабочем месте респондента.
В обоих случаях респонденту предоставляется компьютер с установленным на него айтрекером и соответствующим программным обеспечением.
Отбор участников
Одно из основных преимуществ айтрекинга - отсутствие необходимости в большой выборке респондентов. Для решения большинства задач достаточно опросить от 10 до 30 человек, в зависимости от целей исследования и однородности целевой аудитории. Такая выборка будет репрезентативной, так как она рекомендована Tobii - производителем оборудования, у которого мы проходили обучение. Статистический анализ и визуализация полученных данных позволяют наиболее наглядно продемонстрировать обнаруженные проблемы и предлагаемые решения.
Знакомство
Объяснение целей и этапов эксперимента, а также этические аспекты исследования. Респондент садится за ноутбук, получает устные инструкции о том, как проходить тестирование (калибровка, само задание и финальное интервью).
Если в процессе тестирования получают персональные данные, испытуемому нужно подписать письменное соглашение – основной документ с информацией о проекте и личными данными участника (имя, фамилия, подпись). Участнику предоставляется полная информация о целях исследования и условиях использования его личных данных. Перед записью данных тестирования участник подписывает форму согласия.
Калибровка
Перед началом исследования айтрекер калибруют, чтобы он «поймал» взгляд. Процесс калибровки по 9 точкам выполняется в начале каждого теста, то есть отдельно для каждого участника. Испытуемому дается указание сфокусироваться по очереди на центре девяти белых точек, последовательно отображаемых на экране. Если калибровка не удалась, процесс повторяется. После калибровки испытуемый приступает к выполнению заданий.
Чтобы обеспечить бо́льшую достоверность исследования в целом, в качестве первого задания может использоваться просмотр веб-страницы с заранее известной реакцией респондентов.
Реализация сценария
Непосредственно выполнение тестирования. Время, выделенное на выполнение каждого задания, может быть без ограничений или ограниченным. Важно то, чтобы все участники находились в равных условиях.
Посттестирование
Варианты взаимодействия с респондентом после выполнения теста:
- Взаимодействие с респондентом после тестирования не предусматривается.
- После выполнения каждого задания респондент заполняет анкету с заранее подготовленными вариантами ответов. Например: Укажите, насколько сложным был поиск необходимой информации на сайте (по шкале от 1 до 5, где 1 – очень сложно, 5 – очень легко). Какие элементы дизайна сайта привлекли Ваше внимание (карусель, фотографии, текст, логотип)?
- Если тестирование происходит в рабочем помещении, где находятся другие сотрудники, респондент переходит в другое помещение, где отвечает на вопросы интервьюера, связанные с социально-демографическими понятиями, поведением, а также другими вопросами, предназначенными для уточнения модели взаимодействия с сайтом или лендингом.
- Результаты айтрекинга дополняются другими методами исследования, которые позволяют уточнить отдельные аспекты взаимодействия респондента со стимулами.
Mix-методики
Mix-исследования сочетают в себе данные отслеживания движений глаз и качественные данные, полученные с помощью проговаривания действий и глубинных интервью.
- Хорошо зарекомендовал себя метод проговаривания своих действий или размышлений вслух «thinking aloud», который используется во время сеанса айтрекинга или в процессе просмотра респондентом записи своих движений глаз.
- Глубинные интервью - это ответы на вопросы исследователя, которые выявляют мотивы побудившие выполнить то или иное действие на сайте.
Использовании mix- методик повышает надежность и точность айтрекинга.
Таким образом, метод айтрекинга может быть полезен не только для дизайна пользовательского интерфейса, но и для того, чтобы помочь участникам лучше понять свое собственное поведение.
Отчеты айтрекинга
Самые популярные и наглядные способы визуализации - это «тепловые карты», графики движения взгляда, зоны интереса (качественные данные) и продолжительность фиксации взгляда (количественные данные).
Тепловая карта показывает, какие области вашего сайта привлекают внимание пользователя и вызывают его интерес. Красные области указывают на самый высокий уровень интереса, а синий цвет карты означает малое количество фиксаций взгляда.
График фиксации взгляда помогает проследить, как человек изучает страницу. Линии на графике представляют саккады (быстрые движения глаз), а точки - фиксации. Размер точек показывает продолжительность фиксаций: чем они больше, тем дольше пользователь смотрел на это место.
Результаты тестирования
Айтрекинг позволяет оценить ментальную нагрузку - то есть, насколько трудно или легко найти тот или иной элемент, насколько понятен и прост для восприятия контент на веб-страницах. По записям движения взгляда можно определить хаотичные перемещения по экрану и повторное чтение текста. Все это указывает на проблемы в интерфейсе сайта.
Перед исследованием сформулирована одна или несколько гипотез. По результатам исследования получаем их подтверждение или опровержение. Это позволяет принять обоснованное решение о том, какие изменения следует внедрить на сайте
Рекомендации
Юзабилити - важнейший аспект успешного сайта. Ниже мы приведем рад практических советов, которые помогут вам создать удобный и эффективный веб-ресурс.
Паттерны движения глаз
Существует два основных шаблона просмотра страниц: F и Е.
F-шаблон: Пользователь максимально внимательно изучает верхнюю часть лендинга или “шапку” страницы, но чем ниже он спускается по странице, тем меньше информации он воспринимает и тем меньше времени тратит на просмотр контента в нижней части страницы. Установлено, что люди почти всегда читают страницы, следуя контуру буквы F, и уделяют больше внимания информации, расположенной вблизи левого края экрана. Это относится к людям, родным языком которых является такой, когда читают слева направо.
- Е-шаблон: пользователь концентрируется в начале, середине и конце страницы, остальное просматривается бегло.
Закон Фиттса
Время, необходимое на перемещение курсора к цели, зависит от расстояния до цели и её размера. Попросту говоря, чем ближе и крупнее цель, тем быстрее пользователь сможет на неё нажать.
Следствия из закона:
-
Величина объекта на экране — один из главных факторов, который определяет частоту кликов по нему. Более крупные цели упрощают взаимодействие с интерфейсом и делают его более эффективным.
Например, если увеличить кликабельную зону элемента интерфейса, увеличивается цель. Увеличение размера кнопки, как абсолютного, так и относительного, является распространенным дизайнерским приемом, который позволяет не только увеличить удобство использования, но и подчеркнуть основные элементы интерфейса, привлечь внимание пользователя и напомнить ему о целевом действии. Такой подход также сообщает о первостепенной важности кнопки в интерфейсе.
Размер кнопки и удобство связаны нелинейной зависимостью. Если мы увеличим на 10% размер маленькой кнопки, то пользователю будет гораздо проще ее нажать. Однако если мы увеличим на 10% уже большую кнопку, то с точки зрения удобства использования это не даст значительного улучшения.
Чем ближе цель, тем быстрее пользователь доберется до нее. Если наиболее часто используемые элементы расположены на одинаковом расстоянии друг от друга (вместо того, чтобы быть размещены случайным образом на экране), это может увеличить скорость взаимодействия пользователя с интерфейсом, поскольку расстояние, на которое нужно перемещать курсор, сокращается. Этот прием широко используется в организации фильтров, меню, иконок на страницах сайтов. Более того этому правилу подчиняются графические интерфейсы всех операционных систем.
Используйте лучшие места. Идея “лучших мест” основана на том факте, что некоторые области экрана достигаются быстрее, чем другие. Углы и края экрана достигаются особенно быстро, в то время как в любой ситуации наиболее быстро достижимые области - это пиксели, которые находятся ближе всего к курсору. Эта идея привела к созданию контекстного меню, которое вызывается правым щелчком мыши. Удобство расположения элементов на краях и углах объясняется тем фактом, что рамка экрана ограничивает движение курсора, корректирует и уточняет движения пользователя.
- Остерегайтесь придать визуальный вес маловажным элементам. При проектировании целевой страницы убедитесь, что наиболее заметные элементы действительно заслуживают внимания и что вы не уделяете слишком много внимания элементам, не стимулирующим конверсионные действия.
В первую очередь привлекают внимание большие изображения и пустые пространства
При первом посещении страницы пользователь обычно обращает внимание на большое изображение, а затем изучает остальной контент. Пользователи, как правило, не смотрят на правую часть страницы, если это не классический лендинг. Вдумчивое чтение текста чаще встречается у пользователей с высоким уровнем грамотности, в то время как малограмотные пользователи просматривают текст бегло.
Отвлекающая доминанта на странице
При возникновении на экране анимированных помощников, пользователи переключают внимание на них, затем возвращаются на первоначальный объект внимания. Результат - чаще всего, пользователи не выполнят задуманного вами целевого действия.
Видео в результатах поиска
Видеоролики эффективны для привлечения внимания пользователей, особенно если они отображаются в ТОП-3 поисковой выдачи. Фотографии авторов текстов могут привести к тому, что пользователь воспримет информацию как авторскую статью или блог, а не рекламное объявление или продающий текст, в то время как видео, наоборот, скорее будет воспринято как коммерческий или рекламный продукт. Если вы хотите привлекать больше SEO-трафика, рекомендуется использовать видео.
Сила направляющих сигналов
Использование ключей (визуальных сигналов) для привлечения внимания пользователя к определенным областям веб-сайта - это испытанный прием. Но насколько он эффективен? Исследования показывают, что мы имеем природную склонность следовать взглядам других людей. С самого рождения мы приучаемся следовать тому, что указывает направление.
Пример, ставший классикой: изображение младенца и заголовок страницы сайта об уходе за кожей ребенка. Очевидно, что лицо ребенка притягивает много внимания (собственно говоря, лица детей и красивых женщин получают больше всего внимания со стороны пользователей). Однако, с точки зрения дизайна, возникает проблема, поскольку текст остается без должного внимания.
Теперь давайте посмотрим на вторую тепловую карту, где лицо ребенка на изображении направлено на текст. Как видите, пользователи снова сосредотачиваются на лице (на этот раз в профиль), и также следуют линии взгляда ребенка на заголовок и текст статьи (заметьте, даже область текста, на которую указывает подбородок ребенка, стала привлекать больше внимания!).
Принцип “Above The Fold” не так важен
Будет ошибкой полагаться исключительно на верхнюю видимую область монитора (“above the fold”) и тем более, заполнять ее мало значимой информацией.
Тесты показывают, что пользователи не испытывают затруднений с прокруткой страниц. Удивительно, но они прокручивают страницу тем ниже, чем она длиннее.
Например: страница с ~1500 словами может просматриваться дольше и чаще на ~10%, чем страница с ~500 словами. А перемещение визуальных объектов, призывающих к действию в нижнюю, невидимую без прокрутки область монитора (below the fold), может увеличить количество переходов до ~300%.
Конечно, все зависит от типа тестируемой целевой страницы и входящего трафика. Но вы не должны бояться размещать важные элементы в нижней видимой области монитора. Этот способ дает пользователям возможность ознакомиться с нужной информацией перед тем, как приступить к действию (кликнуть на кнопку).
Почему мы доверяем айтрекингу?
Рекомендации, полученные в результате исследования - это не просто мнение эксперта, но и отражение реального поведения вашей целевой аудитории. Мы анализируем полученные данные с использованием статистических методов, а затем предоставляем подробные рекомендации по улучшению usability сайта, чтобы вы могли внести изменения и сделать свой сайт более эффективным.
Айтрекинг предоставляет ценную информацию и помогает подтверждать гипотезы. Главное преимущество этого метода - пользователь не может контролировать свои движения глаз. Если у вас есть предположения, что некоторые блоки на сайте игнорируются, с помощью айтрекинга можно понять причину этого.
Из недостатков метода стоит отметить сложности в интерпретации данных. Если пользователь долго смотрит на определенное место или возвращается к нему, это может означать, что ему что-то непонятно или, наоборот, все понятно и интересно. Вот почему так важно участие специалиста: не только грамотная аналитика данных, но и наблюдение за респондентами во время исследования, а также последующий анализ опросов. Без классических методов исследования usability не обойтись.
Быстрые советы по дизайну
- Разместите логотип в верхнем левом углу, не позволяя рекламе или баннерам на сайте отвлекать внимание от него.
- Панель навигации предпочтительнее разместить сверху слева.
- Важный контент должен располагаться в левой части страницы, ближе к хедеру.
- Учитывайте шаблоны движения глаз F/E при размещении контента.
- В первых двух абзацах каждой страницы должен быть самый важный контент.
- Не пишите слишком много текста - его мало кто прочитает, сосредоточьтесь на заголовках.
- Текст привлекает меньше внимания по сравнению с изображениями и видео.
- Длинные абзацы следует разбивать на более короткие.
- Изображения лиц почти всегда привлекают внимание.
- Увеличение важных элементов направит взгляд пользователя по странице, равно как и использование контрастных цветов.
Стоимость eye tracking тестирования сайта
Стоимость выполнения работ всегда индивидуальна, зависит от ряда факторов:
- Место: дистанционно или с выездом к заказчику.
- Число человек: Tobii рекомендует 10-30.
- Показатели: количество карт и таблиц в отчете.
