Эффект «разворота» никто не отменял: выводы команды Нильсена

Известный специалист по юзабилити Якоб Нильсен недавно вернулся к вопросу «разворота». При нынешнем разнообразии устройств и размеров экрана, так ли важен эффект «разворота»? Имеет ли он значение вообще? Короткий ответ – «да». Объяснения, советы и экспериментальные доказательства – в этом материале.

Сам термин «разворот» был в свое время позаимствован веб-дизайнерами у печатников. Разворот – это линия, по которой складывается газета. То, что «над разворотом», попадает в зону внимания читателя немедленно, сразу после того, как он берет издание в руки. То, что «под разворотом» поглощается только после того, как газета развернута. И если она развернута. Концепция применима к сайтам, приложениям на 100%: здесь тоже есть область, видимая сразу после загрузки, и скрытый контент, ознакомление с которым требует дополнительных действий.

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

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

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

Как сделать так, чтобы посетитель заглянул под разворот?

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

Первый экран посадочной страницы Mod Notebooks.png

Сайт, продающий записные книжки Mod Notebooks (интервью с предпринимателями, стоящими за этим брендом, читайте здесь), начинается с полноэкранного снимка и приглашения к просмотру видеоролика. О том, что под разворотом здесь что-то есть, можно догадаться только если обратить внимание на указывающую вниз стрелку возле нижней границы. Такой подход – атмосферное фото, минимум контента, — создает эффект «фальшпола», который приходится пробивать дополнительными визуальными указателями (стрелка). В остальном же, посадочная Mod Notebooks хорошо справляется со своими задачами: контент под разворотом хорошо организован, присутствуют якоря и указатели, помогающие посетителю продвигаться и потреблять контент.

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

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

Доказательства существования эффекта разворота

В ходе ряда экспериментов, команда Нильсена оценивала «просматриваемость» контента под разворотом.

С точки зрения качества, результат однозначен: при отсутствии приоритетного внимания контенту над разворотом со стороны разработчика ресурса посетители не считали нужным прокручивать страницу в целях получения дополнительного контента. В некоторых случаях скроллинг не происходил ввиду того, что посетитель не догадывался о наличии контента под разворотом.

С точки зрения количества, результат очевиден не менее: анализ 57.453 сессий отслеживания движения глаз доказывает, что контент под разворотом получает гораздо меньше внимания посетителей. 100 пикселей над разворотом получили на 102% больше просмотров, чем 10 пикселей сразу под ним.

Тепловая карта, суммирующая тесты Нильсена.png

На этой тепловой карте суммированы все данные, полученные в ходе экспериментов (исключение – поисковые системы и страницы поисковой выдачи). Контент под разворотом удостаивается внимания, но его объем не идет ни в какое сравнение с популярностью контента над разворотом.

Google также изучил эффект разворота в контексте анализа эффективности рекламных блоков. Реклама считалась просмотренной, если 50% ее площади находились в видимой области экрана более одной секунды. Итого: просматриваемость рекламных блоков над разворотом – 73%, под ним – 44%. Разница составила 66%. Ввиду разных метрик в опытах Нильсена и Google выходные данные разнятся, однако сути это не меняет: все, что находится под разворотом, получает в разы меньше внимания.

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

На основе The Fold Manifesto: Why the Page Fold Still Matters
Автор: Vyacheslav Vityuk

Подписаться на новости

Читайте также

Пять объединяющих особенностей тысячи самых успешных посадочных страниц современности

Crayon, разведплатформа для маркетологов, отслеживает тысячи сайтов и страниц различных компаний, работающих на локальных и глобальных рынках. Особое внимание специалисты Crayon уделяют посадочным страницам, которых в современном вебе великое множество. Проанализировав 1000 самых успешных лендингов последнего времени, они выделили 5 особенностей, которые объединяют эти посадочные страницы и, вероятно, в немалой степени способствуют их высокой эффективности.

далее →

Когнитивные особенности проектирования интерфейсов

Расположенные рядом объекты воспринимаются пользователем как связанные — именно так звучит теория близости. Наряду с другими поведенческими паттернами этот принцип позволяет проектировать удобные, понятные и логичные интерфейсы.
Эксперты сервиса AskUsers разобрались, что это значит, как работает и каким образом скомпоновать элементы интерфейса так, чтобы они соответствовали принципам теории.

далее →

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

Работа с цветом — важнейший навык любого веб-дизайнера. Грамотное владение им может принести сайту успех, а даже небольшая ошибка в создании гаммы доставить много хлопот в будущем. В этой статье специалисты сервиса AskUsers разберут 10 ошибок, которые дизайнеры допускают при работе с цветом на сайте, и расскажут вам, как их избежать. 

далее →

18 апреля / Комментарии

Правила оформления шапки интернет-магазина

Известно, что шапка является одной из главных составляющих интернет-магазина. Зачастую именно на нее посетитель обращает взгляд в первую очередь. В этой статье эксперты сервиса AskUsers поделятся приемами правильной компоновки шапки, расскажут как добиться того, чтобы посетитель обратил внимание на самую важную информацию, а не задавался вопросом “где тут вообще что?”.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook