Гайд
Как использовать eye-tracking для вашего дизайна
- 9 советов
- 7 минут
- Обновлено 19.09.2023
- Когда лучше проводить eye-tracking?
- Как мне поможет тепловая карта?
- А что насчет карты слепых зон?
- Хорошо, а карта очередности?
- Получается, нужно знать много теории?
- Почему в отчете несколько цветов?
- То же самое в очередности?
- Понятно. Что я могу загрузить для анализа?
- Есть какие-то рекомендации по размеру изображения?
1
Когда лучше проводить eye-tracking?
Вот несколько ситуаций, когда лучше проводить eye-tracking исследование:
На этапе прототипирования: При разработке нового продукта или дизайна сайта eye-tracking может помочь определить потенциальные проблемы и недостатки в UX еще до того, как проект будет запущен.
При переоценке текущего дизайна: Если у вас уже есть рабочий продукт или сайт, и вы хотите улучшить пользовательский опыт или увеличить конверсию, eye-tracking поможет выявить области, которые могут быть улучшены.
При создании рекламных материалов: Если вы хотите понять, как целевая аудитория воспринимает вашу рекламу, и убедиться, что ключевые сообщения привлекают внимание, eye-tracking будет очень полезен.
2
Как мне поможет тепловая карта?
Исследуйте, на какие области дизайна больше всего обращают внимание пользователи. Эти области должны содержать ключевую информацию или важные элементы интерфейса.
Если какие-то важные элементы или информация оказываются вне основных зон внимания, это может указывать на проблему. Возможно, их следует сделать более заметными или переместить в другое место.
3
А что насчет карты слепых зон?
Карта слепых зон — это визуальное представление областей, которые пользователи чаще всего игнорируют или пропускают.
Если определенная область вашего сайта или приложения регулярно игнорируется, возможно, она не представляет для пользователей интереса или значимости. Это может быть сигналом к тому, чтобы пересмотреть содержание этой области.
Если вы анализируете наружку или дизайн упаковки “в поле” слепые зоны помогут понять, заметен ли вообще ваш дизайн в окружении конкурентов и среды.
4
Хорошо, а карта очередности?
Она помогает определить, в каком порядке пользователи воспринимают информацию. Это может быть особенно полезно при проектировании веб-страниц, рекламных баннеров или других визуальных материалов.
Если ключевые элементы (например, кнопки или важные заголовки) не привлекают внимание в нужной последовательности, возможно, стоит изменить их размер, цвет, расположение или другие визуальные характеристики.
5
Получается, нужно знать много теории?
Это определенно поможет, но необязательно. Руководствуясь простым принципом “важное должно быть заметно и заметно в первую очередь” уже можно существенно улучшить эффективность визуального контента.
6
Почему в отчете несколько цветов?
Тепловая карта отображает наиболее привлекательные для зрителей элементы изображения в виде “горячих” и “холодных” точек, создавая так называемую тепловую карту.
Отчет отображается в виде цветового градиента, наложенного на исходное изображение.
На тепловой карте выделены области, которые могут привлечь внимание в течение первых нескольких секунд.
7
То же самое в очередности?
Почти. Фиксации отмечены кружками и цифрами, обозначающими порядок движения глаз между фиксациями.
Среднее время между каждой фиксацией составляет 250 миллисекунд.
В отчете представлено до 30 фиксаций в 3 группах цветов: красный (0–2,5 секунды), желтый (2,5–5 секунд) и зеленый (5–7,5 секунды).
8
Понятно. Что я могу загрузить для анализа?
Вы можете загружать любые изображения в формате .png, .jpg, .jpeg. Это могут быть файлы экспорта из Figma, скриншоты сайта, фотографии наружной рекламы, макеты наружной рекламы, скриншоты из маркетплейсов.
9
Есть какие-то рекомендации по размеру изображения?
Человек не может посмотреть сразу весь макет. Здесь так же. Не загружайте полностью весь макет, если это длинный сайт или приложение. Разделите его на несколько экранов и загружайте по отдельности.
