Размеры экранов современных мобильных устройств очень различны, и при создании адаптивного дизайна вполне резонно возникает вопрос: насколько важна информация «выше линии сгиба» (от англ. above the fold — термин произошел из полиграфии, по аналогии со сгибом газетного листа), или та часть страницы, которую мы видим до скроллинга?
Несмотря на то, что точное местоположение «линии сгиба» в гаджетах может отличаться в зависимости от их экрана, с технической точки зрения «сгиб» для наиболее популярных моделей можно задать заранее — адаптивный дизайн включает 2, 3, 4 или более пропорций для различных устройств и их размеров.
Однако расположение «сгиба» не так важно, как само его понятие — ключевая роль «первого экрана» заключается в том, что он определяет итоговую глубину просмотра. Как показывает опыт, 84% пользователей изучают только верхнюю часть страницы, и если информация их не «зацепила», то скроллить дальше уже не будут.
Рассмотрим эту ситуацию с точки зрения «стоимости» взаимодействия для пользователя:
- Видимая часть страницы без каких-либо дополнительных действий (та, что выше сгиба) — низкая стоимость взаимодействия.
- Невидимая часть страницы, требующая усилия, чтобы сделать ее видимой (та, что находится ниже сгиба) — более высокая стоимость взаимодействия, состоящая из готовности изучать информацию дальше и непосредственно самого скроллинга.
То, что человек видит в верхней части страницы, определяет его дальнейшие действия: листать ниже, перейти к другой странице, к другому сайту или вообще прекратить поиски. Вот почему важно для удобства пользователей в верхней части длинных страниц делать указатели, например, в виде ссылок или содержания.
Поскольку экраны становятся все меньше, люди часто вынуждены скроллить больше — но не потому, что им это нравится, а в надежде увидеть больше ключевой информации по запросу.
Поощряйте скроллинг
Чтобы заинтересовать пользователя и убедить его прокрутить страницу до конца, используйте различные визуальные элементы, «цепляющие» взгляд, а также грамотное содержание, которое поможет им остаться на ней подольше.
Даже привлекательный первый экран сайта, если он не содержит подсказок о возможном продолжении, может и не вызвать желания листать страницу ниже, поскольку пользователь не будет уверен, что найдет необходимую ему информацию ниже. Такой дизайн создает «ложное дно», или иллюзию конца страницы, заставляющую посетителей думать, что они уже просмотрели весь сайт до конца.
Известный сайт Mod начинается с изображения на весь экран и ссылкой на видео, и единственный визуальный признак, говорящий, что ниже также содержится информация — стрелка. Старайтесь создавать такой дизайн, чтобы вам были не нужны подобные указатели.
Однако когда пользователь начинает скроллить, то ощущает все большую заинтересованность изучать сайт дальше. Благодаря «якорям» навигация по странице очень удобна, позволяет быстро перейти к интересующим местам, а разнообразный размер шрифта, текст и картинки предоставляют подробную информацию о продукте
Когда пользователи не видят ценности в контенте, они прекращают скроллинг. И хотя, как показал один юзабилити-тест, некоторые люди перед прочтением прокручивают всю страницу целиком, и лишь после этого приступают к изучению информации, это далеко не типичное поведение — в большинстве случаев пользователям нужна причина для скроллинга.
«Линия сгиба» поэтому и важна, поскольку так же, как и ожидание загрузки сайта, прокручивание «карусели» или открытие «аккордеона» для чтения текста — скроллинг относится к дополнительным шагам, которые пользователи должны предпринять для получения нужной им информации.
Безусловно, существует минималистичный дизайн верхней части страницы, убеждающий скроллить дальше, намекая на интересное содержание путем заманчивого введения или вовлекающих изображений. Опытные дизайнеры, создающие подобные сайты, прекрасно знают о «линии сгиба» — и методах, способных мотивировать пользователей на дальнейшее изучение.
Доказательства влияния «линии сгиба»
Многочисленные наблюдения за пользователями показали, что очень часто люди не только покидали сайты, не дойдя до нужной информации, но порой и вовсе не догадывались, что она может там быть.
Так, айтрекинговое исследование, в котором приняло участие 57 453 пользователя, установило: верхние 100 пикселей страницы до сгиба привлекли к себе на 102% больше взглядов, чем те, что находились сразу после него. По тепловой карте видно, где больше всего было «приковано» взглядов пользователей:
Тепловая карта, составленная на основе наблюдений за 57 453 пользователями. Красный цвет указывает на наибольшую заинтересованность, желтый — на среднюю, белый — на низкую. Черные полосы указывают на сгиб страницы в исследовании.
Google провел анализ дисплейной рекламы (display ads) на значительном количестве веб-сайтов. Исследование показало, насколько «видима» была реклама, появляющаяся на экране в течение 1 секунды. У рекламных объявлений чуть выше сгиба было 73% просмотров, тогда как у объявлений чуть ниже сгиба — лишь 44%, то есть разница составила 66%.
Таким образом, расположение контента относительно «линии сгиба» действительно влияет на поведение пользователей. Но так как всю информацию невозможно разместить на первом экране, помните: чтобы посетители прокрутили ваш сайт до конца, вам надо дать им для этого вескую причину.
Высоких вам конверсий!
По материалам: nngroup.com
