Как посмотреть на дизайн глазами клиента с помощью eye-tracking

Технология eye-tracking – это не просто инструмент из арсенала нейромаркетинга, это мост между продуктом и потребителем, позволяющий «видеть» через глаза вашей аудитории.

Как посмотреть на дизайн глазами клиента с помощью eye-tracking

С помощью такого исследования, вы сможете понять, куда именно смотрят люди, в какой очередности, как долго изучают элементы дизайна. И не важно, идет ли речь о сайте, приложении, рекламе.

Наверняка вас посещали сомнения, что ваши посты в социальных сетях, рекламные баннеры в Яндекс. Директ, карточки товаров на маркетплейсах просто не замечают?

Неуверенность в дизайнерских и UX-решениях, невозможность их обосновать цифрами часто фрустрирует предпринимателей, заставляет их тревожиться, изменять свои решения, проводить А/В тесты для двух объективно плохих вариантов.

Мы занимаемся проведением UX-анализа сайтов почти 10 лет и за это время повидали многое. Открытие технологии eye-tracking для нас было действительно важным событием. У нас наконец-то появилась еще одна метрика, которая демонстрировала недостатки дизайна с простой и понятной наглядностью. Когда же мы подключили для анализа нейросеть, использовать технологию стало еще проще.

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

Примеры использования eye-tracking

Яндекс. Директ

Баннеры, которые вы делаете для Яндекс. Директа, показываются на самых разных сайта и конкурируют за внимание не только с “соседями” по размещению, но и с контентом самого сайта. Например, новостной раздел Mail. ru

Скриншот новостного раздела Mail.ru с рекламными размещениями сверху и справа, тепловая карта
Скриншот новостного раздела Mail.ru с рекламными размещениями сверху и справа, тепловая карта

По скриншоту видно, насколько привлекательны для человека лица других людей и насколько непривлекателен почти сливающийся фон в баннере от Тинькофф. Более привлекательным оказывается баннер от Яндекса и баннер Мегамаркета.

  1. Если есть возможность использовать лицо – используйте. Более того результаты исследований, проведенных Полом Экманом, показали, что люди способны точно определять эмоциональное состояние других по выражению их лиц, даже не учитывая контекст ситуации. А также различать, когда эти выражения неискренние.
  2. Да, есть темные и светлые версии сайта, но даже если фон баннера не контрастирует с фоном сайта, вам достаточно добавить контрастный элемент в сам баннер. Желательно, наиболее контрастный.
Скриншот новостного раздела Mail.ru с рекламными размещениями сверху и справа, карта последовательности восприятия
Скриншот новостного раздела Mail.ru с рекламными размещениями сверху и справа, карта последовательности восприятия

Таргетинг

Скриншот ленты новостей VK тепловая карта
Скриншот ленты новостей VK тепловая карта

Конкурировать с огромным, ярким и раздражающим баннером очередной игры «три в ряд” тяжело. Впрочем о том и речь: если остаются »крохи” от внимания посетителей, которое готовы уделить его рекламе, сколько остается баннеру Tinkoff, который использует один и тот же креатив во всех форматах?

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

Более того, дизайн самого баннера учитывает контекст размещения, ведь на маленьком баннере невозможно прочитать мелкий шрифт. Благодаря этим решениям, Яндекс получит максимальное внимание, где бы не было размещение.

Тепловая карта баннера Яндекса
Тепловая карта баннера Яндекса

Маркетплейсы

У маркетплейсов гораздо меньше места развернуться с дизайном. За последнее время возникло много спроса на услуги дизайна карточек товаров и это логично – дизайн карточек (который часто именуют “инфографикой”) является чуть ли не единственным способом конкурировать с соседними товарами.

Тепловая карта страницы категории “Смартфоны” WildBerries
Тепловая карта страницы категории “Смартфоны” WildBerries

На скриншоте страницы категории товаров “Смартфонов” мы видим, что наиболее цепляющим взгляд дизайном обладает средняя карточка и понятно почему: много контрастирующих элементов, читабельный крупный текст, неоднородный фон.

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

Мы можем легко проверить эту гипотезу и получить результат, превосходящий оригинал:

Тепловая карта страницы категории “Смартфоны” WildBerries, измененный дизайн карточки смартфона Infinix
Тепловая карта страницы категории “Смартфоны” WildBerries, измененный дизайн карточки смартфона Infinix

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

Тепловая карта страницы категории “Смартфоны” WildBerries, измененный дизайн карточки смартфона Infinix и добавлением лица
Тепловая карта страницы категории “Смартфоны” WildBerries, измененный дизайн карточки смартфона Infinix и добавлением лица

Веб-сайты

С анализом веб-сайтов все еще проще и я объясню почему. Помимо того, что для нас это наиболее привычный объект для анализа, есть также объективные критерии, по которым мы можем оценить, работает ли дизайн так, как должен.

Эти критерии берутся из пользовательских сценариев, исследований когнитивных привычек (например, оптимизация контента под F-образный паттерн чтения), общих принципов дизайна (например, необходимость иерархии визуальных элементов) и просто здравого смысла, ведь если вы спрятали кнопку “Заказать” в слепую зону, потери в конверсиях могут быть критичными.

Для иллюстрации нарушения этих принципов, я покажу вам скриншот главной страницы банка “Россельхозбанк”.

Главная страница сайта "Россельхозбанк"
Главная страница сайта "Россельхозбанк"

Нет F-образного паттерна, нет иерархии, текст меню находится в слепой зоне. Порядок изучения визуальных раздражителей непривычен для пользователя и вызывает дискомфорт.

Eye-tracking отчет о слепых зонах главной страницы сайта "Россельхозбанк"
Eye-tracking отчет о слепых зонах главной страницы сайта "Россельхозбанк"
Eye-tracking отчет о порядке восприятия зонах главной страницы сайта "Россельхозбанк"
Eye-tracking отчет о порядке восприятия зонах главной страницы сайта "Россельхозбанк"

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

Похожую структуру главной страницы гораздо успешнее реализует банк “Газпромбанк”, предлагая на первом экране три варианта продолжения пользовательского сценария.

Eye-tracking отчет о порядке восприятия зонах главной страницы сайта "Газпромбанк"
Eye-tracking отчет о порядке восприятия зонах главной страницы сайта "Газпромбанк"

Здесь использованы похожие, детализированные, яркие иллюстрации на ярком фоне, однако их восприятие легче, более последовательно и обоснованно с точки зрения юзабилити.

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

Eye-tracking отчет о порядке восприятия зонах главной страницы сайта "Россельхозбанк"
Eye-tracking отчет о порядке восприятия зонах главной страницы сайта "Россельхозбанк"

Практически идеальные 7 саккад (остановок взгляда), которые позволяют воспринять первый экран сайта меньше чем за 5 секунд. Приятный фон, которые не затрудняет чтение и намеренно созданная не приоритетная зона для услуг банка: те, кто за ними пришел, найдет их позже, но сначала нужно ознакомить его с акцией банка.

Видео

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

Возьмем как пример для анализа сторис из официального аккаунта “Сбербанк” в Инстаграм.

  1. Лицо человека привлекает больше всего внимания и не несет никакой ценности для просматривающего. Для фокусировки на тексте потребуются усилия, потому что жующее лицо будет постоянно отвлекать.
  2. Появление иконок также отвлекает внимание от текста, человек вынужден возвращать свой взгляд обратно к тексту.
  3. Иногда текст сдвигается вправо, что еще сильнее ухудшает восприятие информации, так как человек вынужден “следовать” взглядом за ним.

Предварительное проведение eye-tracking анализа этого видео, позволило бы заранее снизить информационный шум, проследить, чтобы фокус был всегда на тексте и сделать его гораздо приятнее для восприятия. Сделать его эффективнее, а главное, сделать это всего за минуту.

Кому eye-tracking будет наиболее полезен

Eye-tracking технология представляет ценность для широкого круга специалистов, занимающихся разработкой, исследованием и маркетингом продуктов и услуг. В каждой сфере, ценность, но кое-что их объединяет: использовав eye-tracking исследование в своей работе, вы увеличиваете доверие к своим решениям и ценность самого конечного продукта.

Веб-дизайнерам: оптимизируйте размещения контента и навигации сайта. аргументируйте заказчикам свои решения, увеличивайте ценность своего продукта.

UX/UI-дизайнеры: улучшайте интерфейсы и опыт взаимодействия с продуктом

Маркетологи: оптимизируйте рекламные кампании и контент.

Предприниматели: проверяйте решения подрядчиков, и внедряйте eye-tracking анализа в процесс разработки.

Контент-мейкеры: управляйте вниманием вовлеченностью аудитории, улучшайте структуру и содержания видео для увеличения вовлеченности аудитории.

Как провести eye-tracking исследование

Раньше, до взрывного развития AI и нейросетей, проведение eye-tracking анализа было чрезвычайно дорогим и сложным в организации мероприятием.

Сейчас эту работу может взять на себя нейронка. Нейронная сеть моделирует поведение 40 пар глаз и основывается на 30 годах исследований когнитивистики.

В режиме MVP мы запустили простой в использовании сервис для анализа изображений: https://aitracking. app. Из-за того, что интерпретировать результаты исследований не всегда просто, мы также предоставляем услуги экспертной оценки полученных отчетов и проводим масштабные исследования, требующих большей вовлеченности специалистов.

Сервиса для проведения eye-tracking исследований https://aitracking.app/
Сервиса для проведения eye-tracking исследований https://aitracking.app/

В планах добавить возможность загружать видео, указывать тип анализируемого материала, подключить личный кабинет. И, конечно, рассказать чуть больше о том, как это работает в подсайте VC "Трибуна".

Благодарю за внимание! Это мой первый пост на VC и, если честно, тревожусь о том, насколько это зайдет аудитории. Надеюсь, информация оказалась полезной и вдохновила вас на новые идеи для ваших проектов. Если так — обязательно поделитесь обратной связью.

Если у вас возникли вопросы или вы хотите углубиться в тему eye-tracking исследований, не стесняйтесь обращаться за дополнительной информацией. Посетите наш сайт и присоединяйтесь к нашему сообществу, чтобы быть в курсе новостей и обновлений в области маркетинга, дизайна и UX.

99
3 комментария

Потрясающее исследование! Спасибо большое за статью. Никогда не задумывалась о том, куда смотрю. Знаю только банальное правило - "Глаз человека скользит по экрану и фокусируется в нижнем правом углу"

1
Ответить

Спасибо вам большое, Анна! Вы не представляете, как приятно знать, что статья оказалась полезной.

Конечно, все немного сложнее. Паттернов поведения от визуальных раздражителей больше и сами раздражители могут быть разнообразными. Поэтому мы теперь всегда проверяем ключевые блоки и элементы на сайтах клиентов через eye-tracking. Иногда результаты удивляют.

1
Ответить