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

Забудьте про F-паттерн и Z-паттерн

В 2006 г. Якоб Нильсен провел эксперимент, изучая, как посетители сайта просматривают страницу. Он записал движения глаз респондентов (eye-tracking research) и выделил зоны, на которые обращают больше внимания. В итоге получилось две тепловые карты: их назвали F-паттерн и Z-паттерн, потому что взгляд пользователей по странице распределяется в виде соответствующих букв.

Куда люди кликают Куда люди кликают

Красные зоны — области, которые внимательнее просматривают посетители сайта. По логике Якоба Нильсена, именно здесь стоит размещать самую важную информацию, чтобы собрать клики. Куда больше смотрят — там больше и кликают. Однако уже спустя 5 лет исследователи решили, что по тепловым картам некорректно делать выводы о количестве кликов.

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

Куда люди кликают

Цель определяет клик

Диаграмма  Гутенберга не только описывает поведение пользователя на сайте, но и помогает понять, где, какую информацию размещать, основываясь на цели клика.

Куда люди кликают

Диаграмма Гутенберга

Диаграмма Гутенберга построена на эффекте «Гравитации чтения». Его суть заключается в том, что при изучении сайта, пользователи автоматически просматривают информацию на нем слева направо и сверху вниз. Потому что мы привыкли так читать и писать. Учтите, что если вы таргетируетесь на страны, где пишут справа налево, то диаграмму Гутенберга следует «отзеркалить».

Левая верхняя зона (1) всегда акцентирует внимание на себе. Здесь лучше размещать логотип, кликнув на который пользователь узнает больше о компании или продукте.

Правая верхняя зона (2) — область, куда двигается взгляд пользователя после просмотра первой зоны. Внимание посетителя становится менее сосредоточенным, поэтому в эту часть лучше поместить кликабельные контакты, форму обратной связи и адрес.

Левая нижняя зона (3) — слепая. Сюда посетитель практически не кликает: его взгляд автоматически смещается вправо, поэтому здесь можно разместить картинку.

Правая нижняя зона (4) — самая важная. Здесь пользователь принимает решение о покупке, подписке и т.д. Именно в этом месте рекомендуется размещать оффер с кнопкой СТА.

Куда люди кликают

Пример оформления сайта по диаграмме Гутенберга

Не оставляя выбора

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

Создавая свой сайт, выберите место, где будет располагаться СТА, и оформите страницу так, чтобы внимание пользователя не отвлекали другие кликабельные элементы. Так выше вероятность того, что посетитель будет совершать именно то целевое действие, которое вам нужно. Потому что на него «работает» весь интерфейс. Оптимальное количество объектов: 7 ± 2.

Куда люди кликают

На самом деле Яндекс знал, как надо делать, когда был ya.ru, но потом забыл

Не изобретайте велосипед

Пользователи переносят ожидания с существующего продукта на новый, если сферы применения похожи. Так действует закон Якоба. Веб-дизайнеры уже сформировали привычки посетителей при просмотре сайта. Шаблоны в интерфейсе — то, что помогает сориентироваться на новом ресурсе и избавляет от вопроса «Куда кликать». Например, в Интернет-магазинах профиль пользователя и корзина находятся в правом верхнем углу. Если ваш сайт также оформлен под онлайн-магазин, разместите аналогичные иконки в привычном для юзера месте.

Куда люди кликают

Куда люди кликают

Куда люди кликают

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

Кликают там, где это удобно

Чем удобнее пользователю нажимать на кнопку, тем выше вероятность, что он это сделает. Так работает закон Фиттса. Основываясь на нем, можно вывести основные закономерностей, куда будут кликать посетители сайта.

  • На кнопки удобного размера. В руководстве для веб-разработчиков WCAG указано, что оптимальный размер — не менее 44×44 CSS пикселей на десктопе, исключение — текстовые ссылки.
  • На элементы рядом с кнопкой. Пользователи не хотят «прицеливаться», чтобы кликнуть в нужное место. Увеличьте область клика, чтобы можно было нажать не только на кнопку или чекбокс, но и около них.
  • На элементы внутри одного сценария. Простой пример — каталог одежды, где в разделе «Мужчины» выпадает список категорий. 

Куда люди кликают

Правило трёх акцентов

Речь идёт о контрасте, цвете и глубине. Эти акценты не стоит использовать одновременно, лучше выбрать что-то одно, чтобы не перегрузить пользователя. Например, сделать СТА так, чтобы кнопка контрастировала с другими элементами сайта.

Учитывайте, что цвет — тоже информация, которая за короткий промежуток времени помогает пользователю принять решение, а затем кликнуть (или не кликнуть) на кнопку. Приём работает тогда, когда есть противопоставление «Плохой — хороший». Так, на картинке ниже красная цена — плохая, зеленая — хорошая, и кнопка «Посмотреть» тоже выделена «хорошим зеленым» цветом.

Куда люди кликают

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

Куда люди кликают

Подводя итог

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

Есть что рассказать об арбитраже трафика?
Стань автором ZorbasMedia!
Оставить заявку