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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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