Доведите это до предела — обзор веб-сайтов с длинной прокруткой

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

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

Цель и преимущества длинной прокрутки

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

Думайте об этом как о том, как Facebook, YouTube, Netflix и подобные сайты автоматически воспроизводят видео, когда заканчивается то, что просматривает пользователь. Они знают, что если посетитель должен приложить усилия, чтобы перейти к новому видео, он с такой же вероятностью перейдет на другой сайт. Но если видео продолжают воспроизводиться, более вероятно, что они продолжат просмотр.

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

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

Когда использовать длинную прокрутку (а когда нет)

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

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

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

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

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

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

Еще одна очевидная область, где бесконечная прокрутка является популярным выбором UX, — это сайты социальных сетей или сайты с большим количеством пользовательского контента. Facebook, Pinterest и Twitter используют бесконечную прокрутку. Эти сайты хотят, чтобы пользователи оставались на сайте как можно дольше, и бесконечная прокрутка делает это хорошо.

Психологические издержки длинной прокрутки

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

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

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

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

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

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

Лучшие практики веб-сайта с длинной прокруткой

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

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

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

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

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

Одна важная функция UX, которая, к счастью, стала более распространенной на веб-сайтах с бесконечной прокруткой, — это изменение URL-адреса при прокрутке каждого раздела. Некоторые делают это с помощью внутренних закладок внутри страницы. Другие сайты, особенно новостные сайты и блоги, обновляют URL-адрес целиком, когда пользователь прокручивает страницу. Это важно, так как позволяет пользователям ссылаться именно на тот контент, на который они хотят ссылаться, независимо от изменений на самой странице.

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

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

Примеры правильно выполненной длинной прокрутки

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

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

Заключение

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Убедительный дизайн: эффективное использование продвинутой психологии
• Психология дизайна и нейробиология потрясающего UX
• Опыт — это все — Полное руководство по UX
• Ultimate UX Hook — упреждающий, убедительный и эмоциональный дизайн в UX
• Проверенные и верные законы UX (с инфографикой)