Русский
English
SEO-кухня
Некоторые метрики — число просмотров и отказов, повторных посещений, конверсия — показывают сильные и слабые стороны сайта. Но SEO‑ и UX‑специалисты не всегда могут точно определить, как человек поведёт себя на странице. Почему на одних сайтах люди проводят минуты и совершают целевые действия, а другие закрывают спустя несколько секунд?
Возможно, дело в особенностях восприятия той информации, которая размещена на странице. Мы поговорили с исследователями лаборатории когнитивной психологии пользователя цифровых интерфейсов НИУ ВШЭ и психологом Ниной Опалихиной о том, как поймать внимание человека на сайте и что поможет им управлять.
От чего зависит внимание
Паттерны чтения
По словам научного сотрудника лаборатории когнитивной психологии пользователя цифровых интерфейсов НИУ ВШЭ Елены Рыбиной, фокус и внимание человека определяют:
-
Перцептивная организация страницы: элементы на сайте, их форма, расположение, цвета — те компоненты, которые анализирует наша зрительная система. Всё это влияет на то, как информация визуально воспринимается и обрабатывается.
Например, яркое пятно привлечёт наше непроизвольное внимание. Даже если мы не захотим на него смотреть. А чтение страницы текста включает произвольное, «осмысленное» внимание.
-
Типы информации, которая на ней расположена (текстовая, графическая и т. д.)
Если на сайте находится только текст, то внимание распределяется по F‑паттерну — так называют траекторию движения взгляда человека при просмотре веб‑страницы, напоминающую букву F. Это работает следующим образом:
-
сначала пользователи слева направо сканируют верхнюю часть сайта;
-
затем перемещаются ниже и просматривают середину страницы;
-
потом их взгляд опускается в левую часть экрана.
Человек не дочитывает внимательно каждую строку текста до конца и переводит взгляд на следующую ещё до фиксации на последнем символе. Это происходит из‑за того, что мы воспринимаем информацию целостно: нам не нужно фокусироваться на каждой букве отдельно, чтобы прочитать всё слово. В случае же, когда на странице есть и текст, и картинки, передвижения взгляда приобретают более сложные траектории. Они могут описываться как «пинбол‑паттерн»: взгляд скачет между заголовками, картинками, выделенными фрагментами текста, «визуальным сахаром», а простой текст остаётся уже напоследок.
Баннерная слепота
Если человек смотрит на какой‑то объект (текст, картинку, видео и т. п.) — это ещё не значит, что информация о нём будет «обработана». Например, некоторые пользователи непроизвольно игнорируют рекламу на сайтах. Этот феномен называется «баннерная слепота».
Ряд айтрекинг‑наблюдений показывает: люди направляют взгляд на баннеры, но после отмечают, что не видели никакой рекламы. Исследователь лаборатории когнитивной психологии пользователя цифровых интерфейсов НИУ ВШЭ Ульяна Хашутогова объясняет: это происходит из‑за того, что со временем мы научились автоматически отфильтровывать ненужную информацию.
Если баннер релевантен оформлению и содержанию сайта, то шанс, что пользователь обратит на него внимание, будет выше.
Салиентность и социальные сигналы
По мнению младшего научного сотрудника лаборатории когнитивной психологии пользователя цифровых интерфейсов НИУ ВШЭ Екатерины Косовой, один из самых простых способов управления вниманием на сайте — манипуляция визуальной салиентностью, то есть качеством, которое внешне выделяет объект среди других.
На салиентность влияет форма стимула (визуального элемента интерфейса сайта, который обладает свойствами, делающими его заметным и способным непроизвольно привлекать внимание), его яркость, контрастность, размер, новизна, неожиданность для пользователя и так далее.
В контексте SEO повышенной визуальной салиентностью можно назвать картинки и другие формы медиа, заголовки и прочую типографику (например, крупный H1 над фолдом с высокой контрастностью шрифта и фона, чётко отражающий поисковый интент), кнопки и интерактивные элементы, выделяющиеся из общего фона текстового содержимого. Салиентные стимулы непроизвольно притягивают взгляд и удерживают внимание пользователя, влияют на поведение (клики, скролл, вовлеченность) и опосредованно на ранжирование сайта.
Цвет стимула тоже может повысить его салиентность. Например, если элемент интерфейса контрастен по отношению к фону. Также определённые цвета связаны с эмоциональными смыслами для пользователей. На картинке ниже — кросс‑культурная карта таких цветоэмоциональных ассоциаций (Jonauskaite, D. et al (2020)). Так, любовь символизирует красный, радость — жёлтый, грусть — серый и чёрный.
Интересно, что для культур, которые близки друг к другу географически или лингвистически, характерны наиболее схожие ассоциации между цветами и эмоциями. Если учесть это при создании сайта, то можно глубже и активнее воздействовать на распределение внимания пользователя, сделать страницу релевантной для его запроса и эмоционального состояния.
Ещё один салиентный тип стимулов, на которые пользователи обращают внимание, — это социальные сигналы, создающие иллюзию присутствия другого человека в интерфейсе. Вспомните: при знакомстве в реальной жизни в большинстве случаев мы смотрим на лицо собеседника, а уже потом замечаем, во что он одет, как говорит и ведёт себя. Это работает и на сайте. Результаты исследований показывают, что онлайн‑отзывы с изображениями людей, особенно с чертами лица, воспринимаются как более полезные, чем комментарии без изображений. В этом случае снимки других пользователей — салиентные стимулы, то, что, вероятнее всего, люди увидят в первую очередь. Екатерина Косова также приводит другие примеры таких социальных сигналов:
-
аватарки и мини‑фотографии в списках контактов и чатах;
-
онлайн‑индикаторы рядом с лицом человека;
-
маленькие групповые аватарки («+12 людей уже присоединились»);
-
превью с лицами в ленте видео или рекомендациях;
-
лайки и репосты;
-
чат‑боты;
-
UGC.
Обратимся к эксперименту: в 1960‑е годы советский исследователь Альфред Ярбус отслеживал движения глаз при рассматривании картин. Он показывал испытуемым сюжетное полотно Репина «Не ждали». На глазах людей закрепляли айтрекер, регистрирующий траектории саккад (быстрых скачков взгляда) и фиксации. Ярбус давал разные инструкции: смотреть на картину свободно, определить возраст персонажей, оценить материальное положение семьи и так далее.
Результаты оказались очень интересными. При свободном рассматривании взгляд испытуемых почти всегда в первую очередь переходил к лицам. На них приходилась значительная часть времени фиксаций. При любых инструкциях (возраст, социальное положение, отношения между людьми) взгляд всё равно снова и снова возвращался к глазам персонажей. Траектории различались в зависимости от задачи. Но лица оставались устойчивыми магнитами внимания. Вывод простой, но мощный: человеческая зрительная система настроена так, что лица, глаза и выражения эмоций автоматически получают приоритет в обработке. Это логично для выживания. По лицам считываются намерения, статус, эмоции, опасность, принадлежность к «своим» или «чужим». Если мы говорим о сайте, то даже крошечная аватарка потенциально способна притянуть взгляд сильнее, чем текстовый блок.
Почему ещё важны социальные сигналы? Человек, принимая решение о том, как вести себя в той или иной ситуации, осознанно или неосознанно ориентируется на мнение окружающих (или на своё представление об этом мнении). Психолог Роберт Чалдини описал принцип социального доказательства (social proof) так: в ситуациях неопределённости люди считают правильным то поведение, которое они наблюдают у других, особенно если эти «другие» кажутся похожими на них.
Екатерина Косова приводит примеры форм социального доказательства в интерфейсе:
-
счётчики: «1 250 человек уже купили», «34 смотрят этот товар сейчас», «просмотров: 10 482»;
-
рейтинги и отзывы: звёзды, комментарии, метки «проверенный покупатель»;
-
метки статуса: «выбор пользователей», «ТОП недели», «часто покупают вместе»;
-
социальный контекст: «три ваших друга подписаны на канал», «курс уже прошли сотрудники таких‑то компаний».
Эти и другие подобные сигналы социального характера не просто привлекают внимание и формируют паттерн пользовательского поведения, но и снижают когнитивную нагрузку. Вместо того чтобы разбираться, «а хороший ли это товар/курс/статья», мы принимаем решение по сокращённому, эвристическому пути: «Раз столько людей одобрили — значит, всё нормально, можно брать». А ещё, как показывают исследования нашей лаборатории, социальные сигналы в интерфейсе повышают доверие к нему.
Психологические феномены восприятия
Закон сходства
Мы подсознательно определяем схожие объекты как единую группу, даже если они расположены в разных частях сайта.
Родство объектов достигается их формой, цветом, пиктограммами, кеглем и начертанием. Закон сходства активно используется в дизайне, например, когда с помощью определённого визуального стиля мы помогаем пользователю классифицировать информацию — товары из одной категории выделяем одинаковыми цветовыми метками.
Закон близости
Человек воспринимает объекты, находящиеся рядом, как единую смысловую группу.
Представьте несколько блоков на странице. Если заголовок или изображение одного из них будут ближе к другому, то мы воспримем их как относящихся к соседнему блоку.
Закон Хика — Хаймана
Чем больше число вариантов, тем труднее нам принимать решения.
Психологи Уильям Хик и Рэй Хайман в 1952 году провели эксперимент: перед испытуемыми установили десять ламп с клавишами. Их зажигали случайным образом каждые пять секунд. Задача участников — максимально быстро нажать на клавиши, которые соответствуют включившимся лампам. Время реакции измерялось. Чем больше был диапазон выбора, тем дольше испытуемые принимали решение о том, какую из клавиш нажимать. Получается, время реакции, необходимое для завершения своей задачи, увеличивается с количеством доступных вариантов.
Чем больше на сайте вариантов выбора, тем дольше пользователь принимает решение и тем выше вероятность, что он его не сделает и покинет страницу. Путь к покупке и другому целевому действию должен быть простым. А интерфейс — удобным. Для этого сокращается количество выбираемых опций, множество вариантов делятся на группы.
.png&v=20251224103316&w=800)
Эффект края
Информация, расположенная в начале и конце, запоминается лучше, чем та, что находится в середине.
Самые ценные для пользователя сведения о преимуществах продукта, скидках располагаются в начале и в конце, чтобы клиент помнил об этом, даже закрыв страницу.
Эффект Ресторфф
Объекты, выделяющиеся из ряда однородных элементов, запоминаются лучше.
На сайте это работает так: кнопка «Зарегистрироваться» может быть ярко‑синей на фоне бледных объектов, один из тарифов — в рамке, а в качестве изображения — эффектная картинка на контрастном фоне (девушка в красном платье рядом с людьми в чёрном).
Другие рекомендации
Нина Опалихина также советует размещать на сайте изображения высокого качества: пользователь подсознательно теряет доверие к нечётким картинкам, так как у него может возникнуть ощущение, что и услугу окажут ненадлежащим образом.
Ещё одна рекомендация — изображение эмоций от покупки.
Важно создать связь с посетителем сайта, чтобы он захотел остаться. Обычно это позитивные эмоции: радость, восторг, комфорт, гордость, безопасность. Так работают триггеры, которые обещают будущие удовольствия, решение проблемы, счастье, вызывают мгновенный отклик в лимбической системе. Например, шикарная женщина с продуктами роскоши вдохновляет на особенную жизнь. Уверенный в себе человек на картинке сайта вызывает ощущение надёжности. Визуальные образы активируют центры удовольствия или других эмоций до рационального анализа.
Ещё по теме
Пять функций сайта: зачем нужны и как их реализовать
7 причин, почему люди покупают: объясняем на ментальных моделях
Как люди используют Google — анализ 332 млн запросов за 21 месяц