Иллюзия конца веб-страницы: что это и как ее избежать?

Posted on by riasevastopol

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

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

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

  • Имеется ли жизнь ниже линии сгиба, либо Как серьёзен контент в первом окне лендинга?

Определение понятия

Иллюзия финиша страницы (Illusion of Completeness) — это обстановка, в то время, когда видимый контент на экране думается полноценным, не смотря на то, что в действительности солидная его часть находится за пределами обозримой области.Иллюзия конца веб-страницы: что это и как ее избежать?

Данный термин был придуман Брюсом Тогназзини (Bruce Tognazzini) во второй половине 90-ых годов двадцатого века. Иллюзия появляется в тех случаях, в то время, когда визуальный дизайн не может направить пользователей к дополнительному контенту, размещенному вне экрана. С позиций юзабилити, такое ошибочное восприятие страницы есть важным просчетом, поскольку из-за него визитёры смогут потерять из виду ответственную данные и не достигнуть конверсионных целей.

Специалисты в области UX (user experience) говорят об данной проблеме в течении последних 18 лет, так для чего же писать об этом опять на данный момент? Все дело в том, что обладатели сайтов наступаютна одинаковые грабли, а на протяжении громадного количества пользовательских изучений люди все чаще становятся жертвами иллюзии финиша страницы.

В сегодняшней статье мы попытаемся забить последний гвоздь в гроб этого нежелательного явления и проститься с ним окончательно.

  • Как вынудить пользователей прокрутить лендинг пейдж до конца?

Иллюзия финиша веб-страницы в вертикальном измерении

На заре Интернета пользователи редко прокручивали страницу ниже «линии сгиба» (нижнего края экрана). С того времени прошло много времени, и они успели привыкнуть к вертикальному скроллингу, но вы все равно не имеете возможность рассчитывать на то, что визитёры будут скролить ваш лендинг при отсутствии каких-либо визуальных подсказок.

Ниже мы привели перечень стилей дизайна, каковые довольно часто создают иллюзию финиша страницы.

1. Громадные изображения и видео

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

Maple.com, служба доставки еды, базирующаяся в Нью-Йорке, показывает на основной странице autoplay-видео, которое занимает целый экран. Линия сгиба размещается в нижней части экрана на всех устройствах

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

На протяжении юзабилити-изучения, совершённого Nielsen Norman Group, эксперты просили пользователей посетить этот сайт и узнать, какие конкретно услуги предлагает компания. 6 из 8 участников не осознали, что они смогут прокрутить страницу. Потому, что пользователи не заметили больше никаких ссылок и CTA-элементов, все они кликнули по кнопке «Начать» (Get Started), столкнулись с серией персональных вопросов и уже затем поняли, что сервис не дешёв в их регионе.

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

  • Баланс контента и дизайна: формула высокой конверсии лендинг пейдж

2. Четкие горизонтальные линии

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

В случае если пользователи сталкиваются с этими четкими горизонтальными разрывами при сканировании контента, они смогут высказать предположение, что так вы показываете не на конец секции, а на завершение страницы:

Virginamerica.com применяет горизонтальные линии, охватывающие всю ширину страницы, между секциями. Из-за них пользователи смогут неверно высказать предположение, что в том месте заканчивается контент

3. Широкое белое пространство между элементами контента

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

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

Urbanoutfitters.com. Тут красные затенения показывают секции с контентом. Из-за громадных горизонтальных пробелов между секциями страница думается завершенной, не смотря на то, что дальше внизу присутствует дополнительная информация.

4. Перебои в потоке контента

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

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

Salon.com отображает громадные рекламные объявления в середине текста. При таком размещении читатель может поразмыслить, статья закончилась

  • Нескончаемая прокрутка (скроллинг): «за» и «против»

Иллюзия финиша веб-страницы в горизонтальном измерении

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

Дабы просматривать новые статьи в iOS приложении Яху Digest, пользователь обязан свайпнуть страницу для перехода к следующему посту. Данный жест весьма похож на снятие верхней карты в колоде, и потому эта модель сотрудничества именуется «колода карт». В этом случае на экране не достаточно визуальных подсказок, сигнализирующих о возможности горизонтального свайпинга

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

Novatis.com. Точки в нижней части страницы — это не сильный «карусельные» подсказки: их сложно подметить, а навигационные стрелки становятся видимыми лишь при наведении. В противовес этому, сайт очень удачно подталкивает визитёров к вертикальному скроллингу, демонстрируя им часть следующих секций

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

Но на простых сайтах использовать таковой прием не рекомендуется. Горизонтальная полоса прокрутки есть обузой пользователей, поскольку она испытывает недостаток в физических усилиях и постоянном внимании, дабы направить курсор по узкому «тоннелю». К тому же сайты, основанные на горизонтальном скроллинге, смогут легко совершить те же визуально-дизайнерские неточности, что создают иллюзию финиша страницы в вертикальном измерении:

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

  • Разрушая стереотипы веб-дизайна, вы уничтожаете пользовательский опыт

Убедитесь в том, что ваши веб-страницы говорят о продолжении, а не завершенность

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

2. Не забывайте о обширных пробелах и контрастных линиях между контентом. Эти визуальные элементы смогут быть восприняты как концовка релевантного контента.

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

Delish.com: Объявлению в статье предшествует сообщение, в котором сообщено, что по окончании него пользователь может продолжить чтение

4. Создайте заметные подсказки для горизонтального свайпинга. Серьёзная информация не всегда помещается в «карусели» либо любом втором контейнере для горизонтального скроллинга. Пользователи довольно часто упускают из виду кроме того очевидные навигационные подсказки, помимо этого, информационный след, снабжаемый этими сигналами, через чур не сильный — люди совсем не знают, чего им стоит ожидать от дополнительного контента. Если вы используете «карусель», попытайтесь доходчиво донести до пользователей то, что дополнительная информация существует:

  • Продемонстрируйте часть дополнительного контента
  • Включите перечень заголовков, дабы обозначить контент с различных слайдов «карусели»
  • Предоставьте визитёрам счётчик слайдов и заметные стрелки управления:

Netflix.com применяет «карусель» для отображения программ в каждой категории. Визуальная обработка элементов в правой части экрана оказывает помощь сказать визитёрам о возможности горизонтальной прокрутки

5. Тестируйте сайт на различных устройствах, дабы убедиться в том, что элементы дизайна трудятся на всех экранах.

Высоких вам конверсий!

По данным: nngroup.com, image source hohenwarter

Случайные статьи:

Разведопрос: Игорь Ашманов про интернет-технологии


Подборка похожих статей:

riasevastopol

More Posts