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


Как направленный взгляд и стрелки привлекают внимание?

Современные исследования, такие как эксперимент Джованни Галфано (Galfano, 2012), подтвердили, что люди инстинктивно следуют за направлением взгляда другого человека или за нарисованной стрелкой. Это естественная реакция человеческого восприятия, наглядно продемонстрированная с помощью технологии отслеживания движений глаз. В ходе экспериментов было выявлено:

Людей невозможно полностью отвлечь от лица и направления взгляда персонажа, даже если им предлагают этого не делать.

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

Вывод для дизайнеров:

Если нужно привлечь внимание посетителя к важным элементам страницы (например, кнопке для заполнения формы или товару), поместите рядом стрелку или изображение человека, который смотрит или указывает на этот элемент. Взгляд пользователя последует за этим направлением.

Влияет ли взгляд на действия?

Привлечение внимания — это важный этап конверсии, но приведёт ли направление взгляда или стрелки к действию? Исследования показывают, что одного лишь перенаправления взгляда недостаточно для того, чтобы пользователь кликнул по кнопке или заполнил форму. Здесь начинают играть роль выражение лица и эмоции.

Американский специалист Джон Коррелл из Conversion Voodoo провёл масштабное исследование, протестировав 10 различных целевых страниц с более чем 150 000 уникальных посетителей. Он сравнивал изображения модели с разными направлениями взгляда, положением руки, а также выражениями лица.

Вот основные результаты:

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

• Эмоции важнее направления взгляда. Наибольший эффект имели изображения, где модель демонстрировала бурные, положительные эмоции, такие как восторг, радость или восхищение. Даже если взгляд не был направлен на CTA, такие фотографии занимали лидирующие позиции.

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

Как дизайнеру использовать эти данные?

На основании проведённых исследований можно выделить несколько практических рекомендаций:

1. Добавьте эмоции к изображениям

Человек инстинктивно обращает внимание на другое лицо, особенно если оно демонстрирует яркие эмоции. Используйте фотографии персонажей с восторгом, радостью или любым другим проявлением положительных эмоций. Они не только привлекают внимание, но и вызывают у пользователя доверие и желание взаимодействовать с сайтом.

2. Привлекайте внимание с помощью направления взгляда или указующих элементов

Когда дизайнеру нужно подтолкнуть пользователя к определённому действию:

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

Если невозможно использовать модель, добавьте стрелки или направляющие линии, которые управляют движением взгляда пользователя.

3. Учитывайте влияние дизайна на конверсию

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

4. Экспериментируйте с эмоциями

Как показал эксперимент Коррелла, счастливое и восторженное лицо гораздо эффективнее нейтрального или просто улыбчивого. Добавьте изображения, где человек «в восторге» от продукта или контента, чтобы вызвать аналогичные эмоции у пользователя.

Пример применения

Представьте целевую страницу интернет-магазина:

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

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

Важные выводы для дизайна

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

• Изображения людей, демонстрирующих сильные эмоции, работают эффективнее всего. Они не только привлекают внимание, но и мотивируют пользователей на действие.
• Направленный взгляд или стрелки — универсальные инструменты. Они помогут направить пользователя к ключевым элементам страницы, даже если он активно сканирует интерфейс.

Эмоции решают всё.

Простой указатель или взгляд помогает только «увидеть» элемент, но для того, чтобы пользователь кликнул, важно вызвать у него эмоциональное вовлечение. Восторженное изображение человека гораздо убедительнее, чем нейтральное.
Эти простые, но эффективные приёмы помогут сделать дизайн вашего сайта не только красивым, но и функциональным. Активно включайте в свои проекты сильные выражения эмоций, направленные взгляды и визуальные маркеры, чтобы пользователи не просто замечали ваши призывы к действию, но и следовали им.

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

ПОЛЕЗНЫЕ РЕСУРСЫ:

Бесплатный Хостинг и доменное имя

https://tilda.cc/?r=4159746

Мощная и надежная нейронная сеть Gerwin AI

https://t.me/GerwinPromoBot?start=referrer_3CKSERJX

GPTs — плагины и ассистенты для ChatGPT на русском языке

https://gptunnel.ru/?ref=Anton
---------------------------------------------------

Сообщество дизайнеров в VK

https://vk.com/grafantonkozlov

Телеграмм канал сообщества

https://t.me/grafantonkozlov

Архив эксклюзивного контента

https://boosty.to/antonkzv
---------------------------------------------------