«Ложное дно», или иллюзия конца страницы

Posted on by riasevastopol

UX-неточности довольно часто остаются незамеченными, но лишь не для визитёров сайта. Как гласит высказывание компании IBM: «Удобство применения возможно невидимым, но вот его отсутствие — нет».

Одна из распространенных UX-неточностей — создание «фальшивого дна», в результате которого визитёры покидают страницу сайта, не ознакомившись полностью с ее содержимым.

Что такое «фальшивое дно»?

«Фальшивое дно», либо как его еще именуют «логический финиш» либо иллюзия финиша страницы, — это та часть веб-страницы, которую визитёр вычисляет конечной, не обращая внимания на то, что ниже нее еще имеется контент.

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

По данной причине потом мы будем применять термин «логический финиш» страницы.

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

Как довольно часто видится явление «логического финиша» страницы?

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

Согласно данным Chartbeat, основанным на изучении 25 000 000 сессий в мире, более 70% визитёров сайтов прокручивают страницу еще до ее полной загрузки:

«Ложное дно», или иллюзия конца страницы

Изучение глубины прокрутки веб-страниц (scroll depth), совершённое Chartbeat

Huge понял, что практически все пользователи прокручивают веб-страницу независимо от того, имелись либо нет для этого направляющие подсказки (directional cues). Но, согласно точки зрения Ребекки Гордон (Rebecca Gordon), участника исследовательской группы Huge, контекстуальные подсказки так же, как и прежде ответственны.

По словам Золтана Гокза (Zoltan Gocza) из UX Myths: «Дабы верить втом, что люди прокрутят вашу страницу до конца, вам нужно направляться определенным правилам дизайна и предоставлять контент, талантливый удерживать интерес визитёров».

Как вычисляет Люк Вроблевски (Luke Wroblewski), существует две главные обстоятельства, по которым визитёры не прокручивают либо останавливают прокрутку страницы:

1 обстоятельство — визитёры сайта не ожидают наличия горизонтальной прокрутки
2 обстоятельство — контент думается законченным благодаря определенного дизайна/макета

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

  • Мобильная реклама: как выбрать верное размещение?

9 самый распространенных случаев «логического финиша» страницы

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

1. Большое изображение

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

Пример: Mapbox

Так выглядит основная страница Mapbox:

Глядя на нее, нереально высказать предположение, что ниже имеется еще целых 9 блоков контента:

2. Широкое белое пространство

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

Пример: Tribe

Так выглядит домашняя страница Tribe ниже «линии сгиба»:

Обратите внимание, как много на странице белого пространства. В следствии любой блок контента думается последним.

Та же самая картина отмечается и дальше:

Обратите внимание кроме этого, что масштаб сайта был уменьшен приблизительно на 50% при создании данных скриншотов.

Разумеется, что простота дизайна в данном конкретном случае трудится в ущерб юзабилити.

Минималистичное белое пространство нужно применять с умом, чтобы избежать иллюзии финиша страницы

Твитнуть цитату

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

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

Пример: Forbes

Ниже вы имеете возможность видеть одну из статей с сайта Forbes:

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

Пример: Cosmo

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

А также не обращая внимания на надпись на баннере «Реклама — Продолжайте чтение ниже», она чуть заметна и исходя из этого, наверное, будет проигнорирована.

4. Горизонтальные линии

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

Пример: Undullify

Так выглядит страница Undullify ниже «линии сгиба»:

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

В конечном итоге же, ниже данной горизонтальной линии находятся 6 вторых достаточно долгих блоков контента:

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

5. Кнопка возврата к началу страницы

Наличие кнопки «вверх» на сайте возможно для визитёра как нужной опцией, так и знаком финиша страницы.

Хороший пример: ConversionXL

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

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

Нехороший пример: Semplice

Сейчас взглянуть на то, как выглядит кнопка «возврата к началу страницы» на сайте Semplice:

Не имеете возможность отыскать ее? Она тут имеется, но благодаря чёрного фона, рассмотреть ее легко нереально.

По мере прокрутки страницы вниз кнопка «вверх» появляется:

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

Размещая кнопку «вверх» на своем сайте, убедитесь, что она заметна в течении всей страницы.

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

Кэти Шервин (Katie Sherwin) из Nielsen Norman Group комментирует это следующим образом: «Горизонтальная прокрутка в некоторых случаях в полной мере приемлема, однако применять ее направляться с осторожностью. Имейте в виду, что горизонтальная прокрутка на десктопном сайте есть одним из немногих элементов, неизменно генерирующих отрицательные реакции пользователей».

Всего существует 4 самый распространенных случая горизонтальных «логических финишей» страницы: карусели, страницы с прайсом, индивидуальные портфолио и неудачно совершённый контроль качества (quality assurance).

6. Карусели

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

Пример: Super

Так выглядит карусель с неавтоматической прокруткой контента на сайте Super:

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

7. Страницы с прайсом

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

Хороший пример: Sendinblue

Если вы отправляете в месяц 9 000 — 120 000 Email, SendinBlue имеет на данный случай 4 разных тарифных замысла:

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

Разместив кнопку горизонтальной прокрутки в окно с тарифными замыслами, SendinBlue сделали эту опцию в полной мере заметной.

8. Индивидуальные портфолио

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

Пример: Dean Oakley

Ниже вы видите личную страницу дизайнера/разработчика Дина Оукли (Dean Oakley):

Тут нет возможности вертикальной прокрутки. Кликнув же по изображению красной стрелки, вы попадете на новую страницу с разделами «Мои» работы «и Контакты». Надавив на «Мои работы», вы машинально станете направлены в данный раздел.

Надавив еще раз, вы попадете на другие его работы:

Опция «Контакты» наряду с этим исчезает, и дабы возвратиться на основной экран, нужно прокрутить страницы, клик за кликом, назад. Так как Дин имеет массу работ в собственном портфолио, возврат на основной экран может "настойчиво попросить" в итоге много упрочнений от визитёра.

9. Неудачно совершённый контроль качества

В соответствии с Conversion Rate Experts, горизонтальные «логические финиши» страницы довольно часто появляются в следствии неудачно совершённого маркетологами контроля качества: «Горизонтальная прокрутка дается непросто практически всем пользователей интернета. В большинстве случаев, она делается проблемой тогда, в то время, когда окна браузера уже той ширины, для которой сайт был рекомендован. Один из вариантов ответа данной неприятности — разработка дизайна для экрана с маленьким разрешением.

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

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

  • Посредством Гугл Analytics выясните, какие конкретно популярные устройства/браузеры/разрешения экрана имеют низкие коэффициенты конверсии.
  • Совершите эвристический анализ для обнаружения неприятностей, с которыми сталкиваются пользователи, применяя эти устройства/браузеры. есть ли горизонтальная прокрутка очевидной опцией?
  • Совершите пользовательское тестирование, если не имеете возможность идентифицировать неприятности.
  • Протестируйте так ваш сайт на всех других устройствах/браузерах.

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

  • 5 UX-неточностей, каковые сводят пользователей с ума

Как избежать формирования «логического финиша» страницы?

Применяя «тепловую карту» (heatmap), оцените собственную текущую обстановку:

  • Где заканчивается прокрутка страницы?
  • Какой блок контента в том месте находится?
  • Создаёт ли он чувство «логического финиша» страницы?
  • Из-за чего?
  • Что я могу сделать, дабы исправить это?
  • Пользуются ли визитёры горизонтальной прокруткой?
  • В случае если нет, то хотя бы пробуют?
  • Нажимают ли они на кнопки горизонтальной прокрутки? А на карусели?

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

1. Применяйте замечательные подсказки для прокрутки

Направляющие подсказки (стрелка либо надпись «Просматривать подробнее») являются достаточно распространенным явлением. Но, не всегда они достаточно действенны.

Посмотрите на пример Nielsen Norman Group:

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

Замечательные направляющие подсказки отвечают на следующие вопросы:

  • Имеется ли еще какой-то контент ниже либо справа/слева?
  • Будет ли данный контент увлекателен и/либо ценен для меня?
  • какое количество предположительно времени займет прокрутка страницы?

Хороший пример: Exploding kittens

Ниже представлена домашняя страница сайта Exploding Kittens:

Тут нам видна только часть стрелки «вниз». А вот как выглядит другая часть страницы:

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

2. Будьте в курсе UX прототипов

В то время, когда в последний раз, заходя на сайт какого-нибудь вебмагазина, вы не обнаруживали корзину в правом верхнем углу? Подобно, вам ни при каких обстоятельствах не придет в голову, что чтобы лайкнуть что-нибудь в мобильном приложении, пригодится двойной клик.

Вы должны выяснить прототипы в среде и вашей отрасли (к примеру, мобильный/десктопный сайт, мобильное приложение) и приложить максимумальные усилия, дабы соответствовать им.

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

Нехороший пример: A VUE D AIR

Основная страница сайта:

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

Хороший пример: Snapchat

Будучи привычными с приложением Snapchat, мы знаем, что чтобы заметить следующее изображение, нам нужно надавить на текущее. прототип и Контекст делают UX несложным кроме того без направляющих подсказок. Что мы не знаем как пользователи Snapchat — это то, как просматривать саму статью, исходя из этого здесь появляется надпись «Просматривать» под стрелкой «вверх».

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

Чем больше вы станете в курсе прототипов, тем более интуитивным вы имеете возможность сделать собственный UX и тем меньше случайных «логических финишей» страницы вы создадите.

Ваш сайт обязан функционировать так, как этого ожидают ваши визитёры

Твитнуть цитату

3. Попытайтесь применять «прерванные» изображения

В соответствии с Conversion Rate Experts, «в случае если один из элементов страницы четко расположен на «линии сгиба», пользователи интуитивно осознают, что страница еще длится ниже. Несложный метод убрать все горизонтали — расположить элементы страницы на различной высоте. Так, по крайней мере один элемент страницы постоянно будет пребывать на линии сгиба, какие конкретно бы настройки компьютера пользователь не имел».

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

Хороший пример: iTunes

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

4. Разработка паттерна/ритма

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

Создать ритм возможно методом формата контента и повтора заголовка, применяя иконки/стрелки либо цифры, меняя цвета фона либо выравнивание изображений, и т.д.

Все это оказывает помощь организовать ожидания у ваших визитёров.

Пример: Funnel

Посмотрите на повторяющийся паттерн Funnel:

Иконка, выделенный желтым цветом заголовок, 3-4 строки описания. Повтор.

Подобный паттерн длится впредь до самого футера.

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

Заключение

Чтобы не было случайного создания «логических финишей» страницы, следуйте данной инструкции:

  1. Применяя инструмент «тепловая карта», оцените, как пользователи ведут себя на вашей странице.
  2. В случае если на странице имеется большое изображение, добавьте замечательную направляющую подсказку, дабы совершить пользователей до самого финиша страницы.
  3. Оцените количество белого пространства около блоков контента. Не через чур ли его большое количество?
  4. Имеются ли посередине вашей страницы какие-нибудь обычные завершающие элементы? В случае если да, то уберите их.
  5. Если вы используете на вашей странице карусель/слайдер, убедитесь, что они легко распознаваемы и их применение не требует громадных упрочнений. Как вариант, избавьтесь от них совсем.
  6. Совершите оценку качества, дабы удостовериться в том, что ваш сайт выглядит на всех устройствах и во всех браузерах так, как надеется.
  7. Будьте в курсе UX прототипов. Выясните те, каковые относятся как раз к вам, и старайтесь, дабы ваш сайт соответствовал им.
  8. В случае если на странице имеется опция горизонтальной прокрутки, применяйте «прерванные» изображения.
  9. Создайте визуальный паттерн/ритм для установления ожиданий у ваших визитёров.

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

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

По данным: conversionxl.com, mage source nicholas.tyson

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

ТОП 10 ОПТИЧЕСКИХ ИЛЛЮЗИЙ, взрывающих мозг напрочь (самые невероятные)


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

riasevastopol

More Posts